/* Website Designed by Francis Odozi Isibor */
/* CSS for iPhones/Smartphones */


/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 321px)
and (max-device-width : 700px)
and (orientation : landscape) {
	.portraitiPhone	{
		display:block;
		width:100%;
		height:100%;
		position:fixed;
		top:0px;
		left:0px;
		z-index:500;
		text-align:center;

	}

	.portraitiPhone	a	{
		text-align:center !important;
		width:100%;
		text-decoration:none !important;

	}
	.portraitiPhone	h1	{
		font-weight:300;
		font-size:50px;
		text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
		color:white;
	}
	.portraitiPhone	h2	{
		font-weight:300;
		font-size:20px;

		margin:0px;

		color:black;
	}

}


@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)	{

	/*	#######################	*/
	/* 	Spacing */
	/*	#######################	*/
	.leftnudge {
		-ms-transform: translate(0px,0px); /* IE 9 */
	 	-webkit-transform: translate(0px,0px); /* Chrome, Safari, Opera */
	  transform: translate(0px,0px);
	}
	.rightnudge {
		-ms-transform: translate(0px,0px); /* IE 9 */
	 	-webkit-transform: translate(0px,0px); /* Chrome, Safari, Opera */
	  transform: translate(0px,0px);
	}
	#gap	{
		opacity:0.0;
		background-color:black;
		width:0px;
		height:0px;

	}
	#decoy	{
		height:50px;
		width:100%;
	}

	/*	#######################	*/
	/* 	Positioning */
	/*	#######################	*/

	.bannerspace01	{
		position:relative;
		top:-110px;
	}
	.bannerspace02	{
		position:relative;
		bottom:-110px;
	}

	/*	#######################	*/
	/* 	Columns */
	/*	#######################	*/

	.twopane {
		width:100%;
		min-height:200px;
		float:left;
	}

	.twocolcont	{
		width:90%;

		padding-top:40px;
		padding-left:0px;
		margin-left:0px;
		margin:0 auto;
	}

	.projectcolumns	{
		width:100%;
		min-width:320px;
	}

	.col2	{
		width:90%;
		margin:0 auto;
		float:none;
	}

	.col2divider	{
		width:0px;
	}

	.col3	{
		width:30.0%;
		margin:0.5%;
	}
	.firstcol	{
		width:100%;
		margin:0 auto;
	}
	.secondcol	{
		display:none;
	}
	.twocol	{
		float:left;
		width:50%;
		margin:0 auto;
		padding:0px;
	}
	.glyph	{
		width:100%;
		height:150px;
		padding-bottom:20px;
		margin:0px;
		margin:0 auto;


	}

	.blog	{
		width:100%;
		height:200px;
	}



	/*	#######################	*/
	/* 	Elements */
	/*	#######################	*/
	.shield {
		width:80%;
		max-width: 300px;
		height:auto;
		margin:0 auto;
	}
	.fullhd {
		width:90vw;
		height:106vw;
		background-color:grey;
	}
	.slideshow {
		-ms-transform: translate(0px,-20vw); /* IE 9 */
		-webkit-transform: translate(0px,-20vw); /* Chrome, Safari, Opera */
		transform: translate(0px,-20vw);
	}
	.graphic {
		width:100%;
		max-width:100vw;
		margin-bottom: 20px;
	}
	.video {
		width:90%;
	}

	.button {
		width:250px;
	}
	.buttons {
		/* width:120px; */
		min-width:120px;
		width:100%;
	}

	.journalbackdrop	{
		background-color:rgba(0,0,0,0.5);
	}
	.readmore	{
		opacity:1;
		-ms-transform: translate(0px,0px); /* IE 9 */
		-webkit-transform: translate(0px,0px); /* Safari */
		transform: translate(0px,0px);

	}
	/*	#######################	*/
	/* 	Text & Image Styles */
	/*	#######################	*/

	.rightjustified	{
		text-align:center;
	}
	.works	{
		width:100%;
		margin:0px;
		padding:0px;
	}
	.works	img	{
		width:100%;
		min-height:280px;
	}

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

	.blogcaption	b {
		position:static;
		left:0px;
	}

	.casegraphic	h2	b{
		font-size:40px !important;
	}

	.casegraphic	h2	{
		font-size:40px !important;
	}

	.bannercaption	{
		width:90%;
		margin:0 auto;

	}
	.bannercaption	h1	{

		font-size:10vw;
		/* font-family: 'Nunito', sans-serif; */
		text-align:center;
		font-weight:300;
		text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
		margin: 0 auto;

	}
	.bannercaption	h2	{
		font-size:5vw;

	}
	.bannercaption	h3	{
		font-size:20px;
		/* font-family: 'Nunito', sans-serif; */
		text-align:center;
		font-weight:normal;
		opacity:1.0;

	}

	.basiccaption	{
		text-align:center;
		margin:0 auto;
		padding-top:0px;
	}
	.basiccaption	h1	{
		padding-top:50px;
		font-size:30px;
	}
	.basiccaption	h2	{
		font-size:14px;
	}
	.basiccaption	h3	{
		font-size:18px;
	}
	.basiccaption	h5	{
		font-size:16px;
	}
	.basiccaption	p	{
		font-size:16px;
	}
	.basiccaption	a	{
		font-size:16px;
	}

	.workscaption	{
		margin:0 auto;
	}
	.workscaption	h2	{
		position:relative;
		top:-180px;
		font-size:30px;
	}
	.workscaption	h3	{
		font-size:18px;
		position:relative;
		top:-180px;
	}
	.standardcaption	{
		margin:0 auto;
	}
	.standardcaption	h1	{
		padding-top:20%;
		font-size:30px;
	}
	.standardcaption	h2	{
		font-size:14px;
		margin-bottom:20px;
	}
	.standardcaption	p	{
		max-width:90%;

		margin:0 auto;
		font-size:16px;
	}

	.basicwrapper	h3	{
		font-size:14px;
	}

	.journalentrycaption	{
		width:90%;


		position:absolute;
		bottom:30px;
		left:5%;
	}
	.journalentrycaption	h2	{
		-ms-transform: translate(0px,0px); /* IE 9 */
		-webkit-transform: translate(0px,0px); /* Safari */
		transform: translate(0px,0px);
		opacity:1;
	}
	.journalentrycaption	p	{
		-ms-transform: translate(0px,0px); /* IE 9 */
		-webkit-transform: translate(0px,0px); /* Safari */
		transform: translate(0px,0px);
		opacity:0.7;
	}


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

	#logo	{
		height:40px;
		width:104px;
		margin:0 auto;
		z-index:1;

		margin-left:4px;

		margin-top:4px;

		/* -webkit-animation: bounceInDown 1s; */
	}
	#logo	img	{
		width:104px;
		margin:0 auto;
	}
	#logo	img	{

		overflow:hidden;
		max-width: 104px;
		max-height: 40px;
		position:relative;
		top:4px;
		left:10%;
		margin:0 auto;

	}

	#logo:hover ~ .header	{

	}

	.header	{
		margin-left:0px;
		padding:0px;


	}

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

	.menubutton	{
		margin-top:10px;
		margin-right:10px;
	}

	ul#menu li	{
		margin-top:20px;
		margin-bottom:20px;
	}

	ul#menu li	a {
		font-size:20px;
	}
	ul#menu li img	{
		width:40vw;
		height:40vw;
	}
	/*	#######################	*/
	/* 	Site Sections */
	/*	#######################	*/

	#header	{
		height:58px;
		width:100%;
		background-color:white;
	}
	#header.smaller	{
		background-color:rgba(255,255,255,1);
		height:50px;
	}

	#header.smaller	.menubutton	{
		margin-top:6px;
	}

	#header.smaller	#logo	{
		margin-top:0px;
	}

	#header.smaller	#logo	img{
		position:relative;
		width:104px;
		height:100%;
		-ms-transform: none;
		-webkit-transform: none;
		-moz-transform: none;
		-o-transform: none;
		transform: none;
		top:4px;
		left:10%;
		margin:0 auto;

	}

	.videoeditingbg {
		background-position:right;
	}
	.invitationbg {
		background-position:center;
	}
	#nav	{
		width:100%;
		margin:0 auto;
	}
	#banner	{
		height:100%;
		min-height:400px;
		max-height:100%;
		padding-top:50px;
	}
	#frame	{
		/* height:100%; */
		min-height:300px;
		max-height:400px;
		/* padding-top:50px; */
	}

	/* 	Intro */
	#intro	{
		text-align:center;
		height:auto;
		padding-bottom:100px;
	}

	#resume	{
		height:auto;
		padding-bottom:100px;
	}

	/* Works */
	#works	{
		width:100%;
		height:auto;
		margin:0 auto;
		padding-bottom:0px;

	}
	.daddygrid	{
		width:100%;
		padding-top:20px;
	}

	.casecaption	h2	{
		opacity:1;
		font-size:25px;
	}

	.casecaption	{
		background-color:rgba(0,0,0,0.8);
	}

	.casecap	{
		width:100%;

	}
	.casewrapper	{
		width:100%;
		margin:0 auto;
	}
	.casewrapper	figure	{
		width:100%;
	}

	.casewrapper	h2	{
		font-size:25px !important;
		font-weight:300 !important;

		width:80%;
		margin:0 auto;


		opacity:1 !important;
		z-index:100;
	}
	.casewrapper	h2	b{
		font-size:10vw !important;
		font-weight:300 !important;
		text-shadow: 0px 1px 3px #555;
		color:white;
		position:absolute;
		top:20vw;
		left:0px;
		width:80%;
		margin-left:10%;
		text-align:center;
	}
	.casewrapper	p	{
		width:80%;
		margin:0 auto;
	}

	.linkwrapper	{
		width:75%;
		max-width:800px;
		margin:0 auto;
		text-align:center;
		/* display:none; */
	}

	.casecaption	{
		background-color:rgba(0,0,0,0.5);
	}

	.casecaption	h2	{

		opacity:1;

	}
	.casegraphic	{
		padding-top:0px;
		position:relative;
		top:0px;
	}

	#projects	{
		min-width:10px;
		width:50%;
		margin:0px;
		height:200px;
		padding:0px;
		overflow:hidden;
	}
	#projects	h2	{
		font-size:25px;
	}
	#projects:hover	{
	}
	.works	{
	}
	.works img	{
		width:125%;
		min-height:20px;
	}

	#about	{
		text-align:center;
		height:auto;
	}

	/* 	Contact */
	#contact	{
		height:500px;
		padding-bottom:100px;
	}


	/* 	Footer */
	#footer	{
		width:100%;
		text-align:center;
	}
	#footer	p	{
		font-size:12px;
	}


	/*	#######################	*/
	/* 	Misc */
	/*	#######################	*/
	#rest	{
		margin:0 auto;
	}

}