/*IPAD STYLES*/
@media only screen and (max-width: 845px) {
	/* common styling */
	.desktop {
		display: none!important;
	}
}

/*IPHONE STYLES*/
@media only screen and (max-width: 847px) {
	/* common styling */
	.desktop {
		display: none!important;
	}
	
	.mobile {
		display: block;
	}
	
	h1 {
		font-size: 20px;
		font-size: 2rem;
		line-height: 32px;
		line-height: 3.2rem;
		margin-bottom: 12px;
	}
	
	p {
		margin-bottom: 20px;/*10px*/
	}
	
	#background_gradient {
		height: 500px;
	}
	
	section.content.markets p{margin-bottom:20px;margin-top:0px}
	
	header.grid {
		padding-top: 20px;
		z-index: 9;
	}
	
	header.grid #logo {
		margin: 0 0 0 20px;
	}
	
	header.grid #logo, 
	header.grid #logo a, 
	header.grid #logo img {
		display: block;
		width: 224px;
		height: 40px;
	}
	
	header.grid #logo a {
		background: url(../images/logo_mobile_2x.png) no-repeat 0 0 / 154px 40px;
		text-indent: -999px;
		overflow: hidden;
	}
	
	header.grid nav {
		width: 100%;
		margin: 10px 0;
		display: none;
		
		position: absolute;
		padding: 10px 20px 20px 20px; /*padding: 20px;*/
		top: 70px;
		left: 0;
		z-index: 1;
		background: #fff;
		box-sizing: border-box;
	}
	
	header.grid nav a {
		display: block;
		margin: 0;
		height: 35px;
		line-height: 40px;
		padding-top:5px;
	}
	header.grid nav a.active {
		padding-bottom: 0;
	}
	
	header.grid a.mobile {
		width: 20px;
		height: 14px;
		position: absolute;
		top: 33px;
		right: 20px;
	}
	
	header.grid a.mobile.close {
		background: url(../images/menu_2x.png) no-repeat 0 0 / 20px 14px;
		text-indent: -999px;
		overflow: hidden;
	}
	
	header.grid a.mobile.open {
		background: url(../images/menu_close_2x.png) no-repeat 0 0 / 20px 14px;
		text-indent: -999px;
		overflow: hidden;
	}
	
	section.content {
		margin: 20px 0;
	}
	
	section.content .panel {
		padding: 20px;
	}
	
	section.content .left.grid, 
	section.content .right.grid {
		max-height: none;
	}
	
	section.content .left.grid {
		width: auto;
	}
	
	/* custom styling */
	section.content.home {
		padding: 0;
	}
	
	section.content.home h1 {
		padding: 20px;
	}
	
	section.content.about_us .left.grid {
		width: 100%;
	}
	
	section.content.about_us .right.grid {
		/*display: none;*/
		min-height: 50px;
	}
	
	section.content.about_us .arrow {
		right: 20px;
		bottom: 20px;
	}
	
	section.content.markets .modal-content h1 {
		padding: 0 20px;
	}
	
	section.content.markets .text.row .left, 
	section.content.markets .text.row .right {
		float: none;
		width: 100%;
	}
	
	section.content.markets .modal-body {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
		/*padding: 20px;*/
		padding: 20px 20px 0 20px;
	}
	
	footer p {
		padding: 0 20px;
		color: #fff;
		/*background: rgba(0,0,0,0.4);*/
		text-align: center;
	}
	
	section.content.about_us .modal {
		padding: 20px;
	}
	
	section.content.our_approach .row .panel.left, 
	section.content.our_approach .row .panel.right {
		float: none;
		width: 100%;
	}
	
	section.content.our_approach .row .panel.left {
		margin-bottom: 0.2%;
	}

	section.content.our_approach .row .panel.right {
		padding: 20px 20px 0px!important;
	}
	
	section.content.contact_us .row .panel.left, 
	section.content.contact_us .row .panel.right {
		float: none;
		width: 100%;
	}
	
	section.content.contact_us .row .panel.left {
		margin-bottom: 0.2%;
	}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  {
	section.content.markets .modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

@media only screen and (max-width: 422px) {
	/*section.content.about_us .left.grid h1.right, 
	section.content.about_us .left.grid figure.left {
		float: none;
		width: 100%;
	}*/

	section.content.about_us .left.grid h1.right, 
 	{
		float: none;
		width: 100%;
	}
	
	section.content.about_us .left.grid figure img {
		max-height: 311px;

	}
}

@media only screen 
and (max-width: 568px) {
	section.content.markets .google_map {
		height: 150px;
	}
	
	section.content.markets .panel.google_map #map_canvas {
		display: none;
	}
}

@media only screen and (max-width: 384px) {
	section.content.home h1 {
		font-size: 24px;
		font-size: 1.8rem;
		line-height: 35px;
	}
}