/*  ++++++++++++++++++  Main Stylesheet for mos-media.com v4.0 by Matt Stevens 06.03.2015  ++++++++++++++++++  */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,800italic,800,600,600italic);

body { background:#2d2d2d; padding:0; margin:0 auto; max-height:100%; color:#777; font-family: 'Open Sans', sans-serif; }

header {/* border-bottom:1px solid #000;*/  height:100vh; text-align:center; }
	.intro  { margin:0 8em 6em;  text-align:center;}
	.intro p, .message p { color:#888;}

header, footer, #contact { height:100vh; overflow:hidden; display:table; width:100%; margin:0 auto; position:relative; z-index:1;}
footer { height:100vh;}

.bodyWrapper { margin:0em auto 0em; padding:0em 0; display:block; }

#outerWrapper, #contactWrapper, .bodyWrapper, .portfolio {max-width:100%; width:100%;}



.logoWrapper { display:table-cell; vertical-align:middle; overflow:hidden; clear:right;}
.logoIcon { height:20vh; background-image:url('../images/svg/mosMediaLogo.svg'); background-size:100% 100%; margin-bottom:4em;  margin-top:-4em;}	
	footer .logoIcon {background-image:url('../images/svg/mosMediaLogo.svg'); height:9vh; margin-bottom:0em;}



h1, h2 {font-weight:normal; color:#999; font-style:italic;}
h1 {margin:0 0 .3em!important; font-weight:normal;}

	h1 span { color:#989898;}

p {font-size:1.1em; text-align:center; }
header p { font-weight:400; }

p.copyright { font-size:.8em; line-height:1.1em; margin:2em auto;}


	



.italic {font-style:italic; }
.iconSml {height:20vh;}
.caps { font-variant: small-caps;}
.whiteBG {background:#fff;}

.clear { clear: both; }

.hidden { display:none;}

/*  ++++++++++++++++++  Portfolio Styling  ++++++++++++++++++  */


.portfolio { /*font-size:0;*/ margin: 0 auto; padding:0; list-style: none; /* max-width:2250px;*/ }
.portfolio li { position:relative; overflow:hidden; width:33.333%; margin:0; padding:0px; float:left;	}
.portfolio li img { max-width:100%; }


.media {

  position: relative;
  vertical-align: top;
}

.media__image { display: block; }

.media__body {
  /*background: rgba(45, 45, 45, 0.8);*/
  background: rgba(0, 174, 239, 0.9);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding:0em;
  position: absolute;
  text-align:center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.media__body:hover, .media__body:focus, .media__body:active { opacity: 1; /*cursor:pointer;*/ }

/*.media__body:after,
.media__body:before {
  bottom: 1em;
  content: '';
  left: 1em;
  opacity: 0;
  position: absolute;
  right: 1em;
  top: 1em;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
}

.media__body:before {
  border-bottom: none;
  border-top: none;
  left: 2em;
  right: 2em;
}

.media__body:after {
  border-left: none;
  border-right: none;
  bottom: 2em;
  top: 2em;
}

.media__body:hover:after,
.media__body:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
*/

.details { padding-top:30%; margin:0 auto; max-width:100%; width:90%;}

.details h2, .details p, .details a {color:#fff;}

.details h2 {margin:0; font-size:1.4em;}
.details p {margin:.5em 0 1.5em;/* text-align:left;*/ font-size:.9em; font-style:italic;}
.details a { font-size:.9em; text-decoration:none; }


/*  ++++++++++++++++++  Lightbox Styling  ++++++++++++++++++  */

a.fancybox { display:inline-block; padding:1.5em; margin:0 auto; height:3em; width:3em; background-image:url('../images/svg/lightboxIcon_gray.svg'); background-size:250%; background-repeat:no-repeat; background-position:center;
-webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
}
a.fancybox:hover {/*background-image:url('../images/svg/lightboxIcon_green.svg')!important;*/ background-size:350%;}

.smlTxt { font-size:.8em;}

.fancybox-skin {padding:0!important;}

.fancybox-title { font-family: 'Open Sans', sans-serif!important; font-weight:normal!important; font-size:1.2em!important;}
.fancybox-title-float-wrap { margin-bottom:0!important; width:100%;}
.fancybox-title-float-wrap .child { border-radius:0!important; width:100%; padding:1.5em 0!important; font-style:italic; font-weight:normal!important; text-shadow:none!important; background:rgba(0, 174, 239, 0.8)!important; /*background:rgba(45, 45, 45, 0.9)!important;*/ white-space:normal!important;}

.fancybox-overlay {/*background:rgba(255, 255, 255, 0.8)!important;*/ background:rgba(45, 45, 45, 0.9)!important;}
.fancybox-opened .fancybox-skin { box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3)!important;}

.fancybox-nav { z-index:10000!important; }
.fancybox-nav span { bottom:2em!important;}

.fancybox-prev span { left:2em!important; height:3em; width:2em; background-image:url('../images/svg/lArrow.svg')!important; background-size:150%; background-repeat:no-repeat; background-position:center!important;}
.fancybox-next span { right:2em!important; height:3em; width:2em; background-image:url('../images/svg/rArrow.svg')!important; background-size:150%; background-repeat:no-repeat; background-position:center!important;}

.fancybox-close { z-index:11000!important; height:3em; width:2em; background-image:url('../images/svg/closeBtnShdw.svg')!important; background-size:100%!important; background-position:center!important;}

/*.lightboxIcon { display:block; height:3em; padding:1em;  }

a.fancybox:hover .st0 {fill:#8BC53F; opacity:1;}

a.fancybox:hover .lightboxIcon { background:url('../images/svg/lightboxIcon_green.svg');}*/



/*  ++++++++++++++++++  Contact Form Styling  ++++++++++++++++++  */



#contact {/* border-bottom:1px solid #000;*/  background: #3E3E3E; padding:6em 0;/* height:100vh;*/ margin:0; }

#outerFormWrapper {vertical-align:middle;display:table-cell;}
#formWrapper { width:100%; max-width:1280px; margin:4em auto; }


#form, .formIntro { width:93%; margin:0 auto; }



input:focus, textarea:focus {background: #2D2D2D;/* border-left:.2em #00aeff solid;*/}


input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#555; }


input, textarea {box-sizing:border-box; margin:2em auto; padding:1em; font-size:1.2em; background:#333; border:none; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}

input { margin:0; display:block; width:48%; height:4em;}

input.name, input.email {display:inline; float:left;}
input.email { float:right;}

ul.antiSpam { margin:0 auto; padding:0; width:48%; vertical-align:middle; text-align:center;}
ul.antiSpam input { width:3em; height:3em;}
	ul.antiSpam li { list-style:none; display:inline!important; vertical-align:middle;}
	ul.antiSpam label { float:left; margin-top:.8em; font-size:1.2em;}
	ul.antiSpam .human { float:right; text-align:center;}

textarea {width:100%; height:12em;}

#submit { /*width: 33%;*/ margin:2em auto 0; height:4em; color:#fff; background:#00AEEF;}
	#submit:hover { color:#00AEEF!important; /*background:#fff;*/background:#2D2D2D;}
	#submit:focus {/* border:.2em #00aeff solid!important;*/}

.message { /*font-size:1.3em;*/ font-weight:normal;}
.successIcon { background-image:url('../images/svg/smileyIcon.svg'); background-size:100% 100%; /*height:10em; width:10em; */height:20vh; margin:0em auto 0;}
.errorIcon { background-image:url('../images/svg/errorIcon.svg'); background-size:100% 100%; height:4em; width:4em; margin:3em auto 0;}

.message h2 { text-align:center; padding-bottom:0; margin-bottom:0; font-size:1.3em;}
.message p { font-family: 'Open Sans', sans-serif; font-size:.8em; font-style:normal; font-weight:400; margin-top:.5em;}

.error { }
/*.error h2 { color:#FBAB1E;}
.success h2 { color:#8DC63F;}*/


/*#submit { margin:1.2em auto 0; height:6em;}
#submit:hover { color:#00AEEF!important; background:#2D2D2D;}
*/



/*  ++++++++++++++++++  Media Queries  ++++++++++++++++++  */


@media screen and (min-width:1620px) {

	.portfolio li { width:20%;}
	
}

@media screen and (max-height:1280px) and (max-width:980px) {

	.logoIcon { height:20vh; margin:0 auto 1em;}
	/*footer .logoIcon {}*/
}

@media screen and (max-width:600px) and (max-height:1280px) {

	ul.antiSpam { width:90%!important;}
	.intro { margin:2em 2em 6em;}
	#contact { padding:2em 0!important;}	
}
	
@media screen and (max-height:600px) and (max-width:1280px) {

	.logoIcon { height:20vh; margin:0 auto 1em;}
	footer .logoIcon {height:20vh;}
	
	
	
	h1 { font-size:1.5em;}	
	header p { font-size:0.8em; margin:.2em auto; padding:0 0 1em; line-height:1.2em;}
	
	ul.antiSpam { width:48%!important;}

}

@media screen and (max-width: 1024px) and (max-height:768px) {

	.logoIcon { height:20vh; margin:0 auto 1em;}
	footer .logoIcon {height:20vh;}
	
	
	h1 { font-size:1.5em;}	
	header p { font-size:0.8em; margin:.2em auto; padding:0 0 1em; line-height:1.2em;}
	.intro { margin:0 2em 2em;}	
	

}

@media screen and (max-width:768px) and (max-height:1024px) {

	.logoIcon { height:23vh; margin:0 auto 1em;}
	footer .logoIcon {height:18vh;}
	.successIcon {height:24vh;}
	
	h1 { font-size:1.2em;}

	p { font-size:0.8em; margin:.2em auto; padding:0 0 1em; line-height:1.2em;}
	input, textarea, ul.antiSpam label { font-size:0.8em;}
	
	.antiSpam { margin:1em 0;}
	.intro { margin:0 2em 2em;}
	
	#contact { padding:2em 0!important;}
	#formWrapper { margin:2em auto;}
	
	.fancybox-close {background-size:75%!important; background-repeat:no-repeat;}
	.fancybox-title-float-wrap .child { padding:1em 0!important; line-height:1em!important;}
	.fancybox-prev span { left:.5em!important; }
	.fancybox-next span { right:.5em!important;}
	.fancybox-nav span { bottom:-2.8em!important; visibility:visible!important; background-size:80%!important;}
	
	.fancybox-title {font-size:.8em!important;}
	.smlTxt { font-size:.65em!important;}	
	
	.fancybox-title-float-wrap { margin-bottom:-3.98em!important;}

}

@media screen and (max-width:640px) {
	
	.expertiseSection, .portfolioSection { width:100%; float:none; margin:2em 0; display:block;}
	
	#contact {padding:0em 0 4em;}
	
	input.email, input.name, textarea { float:none; display:block; margin:.2em auto; width:100%;}

	
	ul.antiSpam { margin-top:2em; width:90%!important;}
	ul.antiSpam input { width:3em!important; height:3em;}

	#submit {width:100%!important; height:5em;}


	.details { padding-top:20%!important;}

	.fancybox-close {background-size:75%!important; background-repeat:no-repeat;}
	.fancybox-title-float-wrap .child { padding:1em 0!important; line-height:1em!important;}
	.fancybox-prev span { left:.5em!important; opacity:.5!important; }
	.fancybox-next span { right:.5em!important;}	
	.fancybox-nav span { bottom:-2.8em!important; visibility:visible!important;background-size:80%!important;}
	
	.fancybox-title {font-size:.8em!important;}
	.smlTxt { font-size:.65em!important;}
	
	.fancybox-title-float-wrap { margin-bottom:-3.98em!important;}
	
	
	/*footer .logoIcon {height:20vh;}*/
	
	}

@media screen and (min-width: 360px) and (max-width: 750px) {

	.details { padding-top:25%!important;}
	
	a.fancybox { background-size:200%; padding:1.5em; margin:-4em auto; height:3em; width:3em;}
	a.fancybox:hover { background-size:250%;}
	
	.details h2 {font-size:1em;}
	.details p {margin:.5em 0 0em; padding-bottom:0; font-size:.7em;}
	
}


@media screen and (max-width: 400px) {

	.portfolio li {	width:100%;}
	.details { padding-top:30%!important;}
	
	a.fancybox { background-size:300%; }
	a.fancybox:hover { background-size:400%;}	
	
	.details h2 {margin:0; font-size:1.4em;}
	.details p {margin:.5em 0 1.5em; font-size:.9em; }
}


@media screen and (min-width: 360px) and (max-height:640px){

	ul.antiSpam { width:90%;}
	
}

@media screen and (min-heigth: 360px) and (max-width:640px){

	ul.antiSpam { width:90%;}
	
	.logoIcon {height:32vh!important;}
	footer .logoIcon {height:30vh; margin-top: 2em;}
	

	
	
	
	
	
}


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


	footer .logoIcon {height:18vh;}
	.intro { margin:0 1em 2em;}

	ul.antiSpam { width:90%;}

	
}

@media screen and (max-height: 320px) and (max-width:480px){

	.logoIcon {height:32vh;}
	footer .logoIcon {height:30vh; margin-top: 2em;}
	

	




}