/* Website Designed by Francis Odozi Isibor */

/* iPhone (landscape) ----------- */
@media only screen
and (min-device-width : 321px)
and (max-device-width : 700px)
and (orientation : landscape) {
/* Styles */

	#header	{
		height:0px;
	}



	#landscapeiPhone	{
		display:block;
		width:100%;
		height:100%;
		background-color:white;
		position:fixed;
		top:0px;
		left:0px;
		z-index:10;
	}

	#landscapeiPhone	h2 {
		font-weight:bold;
		text-align:center;
		font-size:18px;
		color:grey;
		letter-spacing:1px;
		font-family: 'EB Garamond', serif;
	}

	#landscapeiPhone	img	{
		width:30%;
		margin-left:35%;
		height:auto;
	}


	#galleryslider	{
		width:100%;
		height:auto;
		white-space:normal;
		background-color:green;
		overflow-y:scroll !important;
		overflow-x:hidden !important;
	}

	.galleryslide	{
		height:auto;
		width:100%;
		display:block;
	}
	.galleryslide	img	{
		height:auto;
		width:100%;
		opacity:1;
	}

	.fiftypx	{

		width:100%;
		height:50px;
		background-color:white;
	}

	/*	#######################	*/
	/* 	Wrappers */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Backdrop Backgrounds */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Solid Backgrounds */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Text Styles */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Captions / Text Themes 	*/
	/*	#######################	*/


	/*	#######################	*/
	/* 	Logo */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Menu */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Site Sections */
	/*	#######################	*/



	.centeredimage	img	{
		width:300px;
		position:fixed;
		top:calc(50% - 50px);
		margin:0 auto;

	}


	#nav	{
		display:none;
	}
}

/* ===================================================================================== */
/* UNIVERSAL */
/* ===================================================================================== */

/* iPhone (universal) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)	{
	/*	#######################	*/
	/* 	Text Styles */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Margins */
	/*	#######################	*/

	/*	#######################	*/
	/* 	Spacing */
	/*	#######################	*/
	.regularpadding {
		padding-top:50px;
		padding-bottom:50px;
	}
	/*	#######################	*/
	/* 	Columns */
	/*	#######################	*/

	.jessypane {
		width:100%;
		/* height: calc(100% - 50px); */
	}
	.otherpane {
		width:100%;
		height:70px;
		padding:0px !important;
	}
	.profilephotoB {

	}
	.profilephotoB img{
		-ms-transform: translate3d(0, -100px, 0); /* IE 9 */
		-webkit-transform: translate3d(0, -100px, 0); /* Chrome, Safari, Opera */
		transform: translate3d(0, -100px, 0);
		width:30%;
		margin-left:20%;
		margin-right: 0px;
		float: left;
		height:auto;
		max-height: initial;
	}
	.profilephotoA img{
		width:30%;
		margin-right:20%;
		margin-left: 0px;
		float: left;
		height:auto;
		max-height: initial;
		-ms-transform: translate3d(0px, -100px, 0); /* IE 9 */
		-webkit-transform: translate3d(0px, -100px, 0); /* Chrome, Safari, Opera */
		transform: translate3d(0px, -100px, 0);
	}


	.colcenter {
		width:77%;
		float:none;
	}

	.colleft {
		width:100%;
		margin:0px;
		text-align:left;
	}

	.colright {
		width:100%;
		margin:0px;
		text-align:left;
	}

	.col2	{
		width:100%;
		min-height:100px;

		float:left;

		margin:0px;
		margin-top:20px;

	}
	.col3	{
		width:100%;
		margin:0px;
		min-height:100px;
	}

	.col4	{
		width:40%;
		min-height:25px;

		float:left;

		margin-left:5%;
		margin-right:5%;
		margin-top:0px;

	}

	.twocol	{
		width:100%;
		margin: 0px;
	}

	.twopane	{
		width:100%;
		margin:0px;

		margin-bottom:10px;
		margin-top:10px;
	}

	.testimonialphoto	{
		width:100%;
		height:auto;
		margin:0px;
		margin-bottom:0px;
	}

	.testimonialphoto	img	{

		width:100%;
		height:auto;

	}


	/*	#######################	*/
	/* 	Elements */
	/*	#######################	*/
	.emmanuellogo img	{
		width:100%;
		margin:0;
		margin:0 auto;
		padding: 0px;
		/* margin: auto; */
	}
	.midscreenimage img	{
		width:100%;
		margin:0;
		margin:0 auto;
		padding: 0px;
		/* margin: auto; */
	}
	.column {
	  -ms-flex: calc(100% - 8px); /* IE10 */
	  flex: calc(100% - 8px);
	  max-width: 100%;
	  padding: 0 4px;
	}
	.darkened {
		opacity: 1;
		background-color: rgba(0,0,0,0.5);
	}
	.darkened h4 {
		color: white;
		width: 90%;
		margin:0 auto;
	}
	.darkened h1 {
		width: 90%;
		font-size: 30px !important;
		margin:0 auto;
		padding-top:10px;
		padding-bottom:10px;
	}

	.mobileonly {
		display: block;
	}
	.desktoponly {
		display: none;
	}

	.galleries {
		width:calc(100% - 60px);
		height:300px;
	}

	.client	{
		width:100%;
		margin-bottom:50px;
		float: none;
		/*  */
	}

	#pageSlider1 .bgslide	{
		height:50%;
	}
	#pageSlider2 .bgslide	{
		height:56vw;
	}
	.bgslide	{
		height:56vw;
	}
	.parallax {
		background-attachment:scroll !important;
	}
	.slidersmall	{
		height:50%;
	}
	.slidersmaller	{
		height:30%;
	}
	.slidersmallest	{
		height:20%;
	}
	ul.investmentslist	{
		list-style: none;
		margin-left:0px;
		padding-left:0px;
	}
	.mobileouter	{
		display:table;
		width:100%;

		/* display:table;

		height:100%;
		width:100%; */
	}
	.mobilemiddle	{
		display:table-cell;
		vertical-align:middle;
	}

	.newsarticle	{
		box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
	}

	.newsgraphic	{
		height:180px;
	}

	.newsgraphic	iframe	{
		height:180px;
	}

	.newscaption	{
		width:90%;
	}

	#homeslider	.photoslide	img	{
		height:100%;
		width:auto;
	}

	.textfield	{
		margin-top:10px;
	}

	.textarea	{
		margin-top:10px;
	}

	#galleryslider	{
		width:100%;
		height:auto;
		white-space:normal;
		background-color:white;
		overflow-y:scroll !important;
		overflow-x:hidden !important;
		margin:0px;
	}

	.galleryslide	{
		height:auto;
		width:100%;
		display:block;
		margin:0px;
	}
	.galleryslide	img	{
		height:auto;
		width:100%;
		opacity:1;
	}

	/*	#######################	*/
	/* 	Backdrop Backgrounds */
	/*	#######################	*/

	.graphicbg	{
		background-attachment:scroll;
	}

	/*	#######################	*/
	/* 	Wrappers */
	/*	#######################	*/

	.herowrapper	{
		width:100%;
	}

	.wrapper	{
		width:90%;
		margin:0 auto;
	}

	.halfwrapper	{
		width:90%;
		max-width:900px;
		margin:0 auto;
	}

	/*	#######################	*/
	/* 	Captions / Text Themes 	*/
	/*	#######################	*/

	.herocap h1	{
		font-size:40px;
	}
	.herocap h5	{
		font-size:20px;
	}

	.sectioncap	h1	{
		font-size:25px;
	}
	.sectioncap	h2	{
		font-size:20px;
	}
	.sectioncap	h3	{
		font-size:20px;
	}
	.sectioncap	h4	{
		font-size:20px;
	}
	.sectioncap	h5	{
		font-size:18px;
	}
	.sectioncap	p	{
		font-size:16px;
	}

	.sectioncap	a	{
			font-weight:bold;
	}
	/*	#######################	*/
	/* 	Nav + Header */
	/*	#######################	*/
	#burgermenu	{
		width:100%;
	}
	#miniheader h1 {
		font-size: 12px;
		width: 50px;
	}
	#minilogotxt {
		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;

		height:70px;
		width: 70px;
		margin-top:0px;
		margin-left: 0px;
		margin-bottom: 0px;
		overflow:hidden;
		/* background-color:grey; */
	}
	#minilogotxt h2 {
		font-size: 20px;
		width:50px;
		margin-top:10px;
	}
	.whitemenu {
		background-color: white;
		box-shadow: 0px 0px 20px rgba(0,0,0,0);
	}
	.whitemenu h1 {
		color:black;
	}
	.whitemenu h2 {
		color:black;
	}
	.blackmenu {

		background-color: white;
		box-shadow: 0px 0px 20px rgba(0,0,0,0.25);
	}
	.blackmenu h1{
		color:black;
	}
	.blackmenu h2{
		color:black;
	}
	.slide {

		-ms-transform: translate3d(-500px, 0, 0); /* IE 9 */
		-webkit-transform: translate3d(-500px, 0, 0); /* Chrome, Safari, Opera */
		transform: translate3d(-500px, 0, 0);
		opacity:1;
	}

	#nav	{
		width:100%;
	}
	#header	{
		display: none;
	}
	#mobileheader {
		width:100%;
		height:50px;
		display:block;
	}
	#logo	{
		width:100%;
		height:50px;
		/* background-color: grey; */
	}
	#logotxt {
		height:28.5px;
		margin-top:14.5px;
		/* margin-top:33px; */
		margin-bottom: 0px;
		overflow:hidden;
	}
	#logo	h3{
		width:100%;
	}


	#logo:hover h1{
		-ms-transform: translate3d(0, 0, 0); /* IE 9 */
		-webkit-transform: translate3d(0, 0, 0); /* Chrome, Safari, Opera */
		transform: translate3d(0, 0, 0);

		/* color:white; */
	}
	#logo:hover h2{
		-ms-transform: translate3d(0, 0, 0); /* IE 9 */
		-webkit-transform: translate3d(0, 0, 0); /* Chrome, Safari, Opera */
		transform: translate3d(0, 0, 0);

		/* color:white; */
	}

	.menu	{

		-webkit-transition:all 0.2s ease-in-out;
		-moz-transition:all 0.2s ease-in-out;
		-o-transition:all 0.2s ease-in-out;
		transition:all 0.2s ease-in-out;



		width:100%;
		/* height:calc(100% - 70px); */
		/* max-height:390px; */

		text-align:center;

		/* float:none; */
		background-color:white;



	}
	.slide	{

		width:100%;
		height:calc(100% - 70px);
		opacity:1;
		top:70px;
		left:0px;
	}
	.screen	{

	}

	ul#menu	{
		margin-left:0px;
		width:100%;
		padding-bottom:10px;
		float:left;
	}

	ul#menu li	{

		display:block;
		margin-top:45px;
		margin-bottom:45px;

	}

	ul#menu li	a {

		padding-top:35px;
		padding-bottom:35px;

		font-size:18px;

	}

	ul#contactmenu li	{
		display:block;
		margin-top:30px;
		margin-bottom:20px;
	}




	/* .burger	{

		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;

		width:30px;
		height:4px;

		float:right;

		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

		background-color:black;

		margin-top:23px;

		margin-left:0px;

		margin-right:0px;
		position:relative;
		left:0px;
		top:0px;

	}
	.burger:before	{

		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;

		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

		content: "";
		position: absolute;
		top: -10px;
		left: 0;
		height: 4px;
		width: 30px;
		background-color:black;
	}
	.burger:after	{

		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;

		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

		content: "";
		position: absolute;
		top: 10px;
		left: 0;
		height: 4px;
		width: 30px;

		background-color:black;
	} */


	.active	{

		color:red;

		width:30px;

		-ms-transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0); /* IE 9 */
		-webkit-transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0); /* Chrome, Safari, Opera */
		transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0);

		-webkit-transform: translate3d(0, 0px, 0) rotate(45deg);
		-moz-transform: translate3d(0, 0px, 0) rotate(45deg);
		-ms-transform: translate3d(0, 0px, 0) rotate(45deg);
		-o-transform: translate3d(0, 0px, 0) rotate(45deg);
		transform: translate3d(0, 0px, 0) rotate(45deg);

		background-color:#ddb563;
	}
	.active:before	{
		content: "";
		position: absolute;
		top: 0px;
		left: 0;
		height: 4px;
		width: 30px;


		opacity:0;

		-ms-transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0) scaleX(0); /* IE 9 */
		-webkit-transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0) scaleX(0); /* Chrome, Safari, Opera */
		transform: translate3d(-30px, 0, 0) translate3d(0, 0px, 0) scaleX(0);

		-webkit-transform: rotate(315deg) translate3d(0, 0px, 0) scaleX(0);
		-moz-transform: rotate(315deg) translate3d(0, 0px, 0) scaleX(0);
		-ms-transform: rotate(315deg) translate3d(0, 0px, 0) scaleX(0);
		-o-transform: rotate(315deg) translate3d(0, 0px, 0) scaleX(0);
		transform: rotate(315deg) translate3d(0, 0px, 0) scaleX(0);

		background-color:#ddb563;


	}
	.active:after	{
		content: "";
		position: absolute;
		top: 0px;
		left: 0;
		height: 4px;
		width: 30px;

		background-color:#ddb563;

		-webkit-transform: translate3d(0px, 0px, 0) rotate(-90deg) ;
		-moz-transform: translate3d(0px, 0px, 0) rotate(-90deg) ;
		-ms-transform: translate3d(0px, 0px, 0) rotate(-90deg) ;
		-o-transform: translate3d(0px, 0px, 0) rotate(-90deg) ;
		transform: translate3d(0px, 0px, 0) rotate(-90deg) ;
	}






	/*	#######################	*/
	/* 	Site Sections */
	/*	#######################	*/
	body	{
		background-color:white;
	}

	#splash	{
		/* padding-top:50px;
		height:calc(100% - 50px);
		background-image: none;
		background-color:rgba(255,255,255,0.6);
		background-color:rgba(0,0,0,0.6); */
	}
	.homehero {
		width:100% !important;
		margin-left:0px;
	}
	#rest, #hero	{
		-webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

	}
	#galleriesbg {
		height:50%;
	}
	#galleries	{
		padding-top:0px;
	}
	#rest	{

	}

	#landscapeiPhone	{
		display:none;
		width:100%;
		height:100%;
		background-color:white;
		position:fixed;
		top:0px;
		left:0px;
		z-index:10;
	}
	#landscapeiPhone	img	{
		width:30%;
		margin-left:35%;
		margin-top:50px;
		height:auto;
	}

	#gallery	{
		width:100%;
		height:auto;
		white-space:normal !important;
	}
}