/* =============================================
 *
 *   FIXED RESPONSIVE NAV
 *
 *   (c) 2014 @adtileHQ
 *   http://www.adtile.me
 *   http://twitter.com/adtilehq
 *
 *   Free to use under the MIT License.
 *
 * ============================================= */

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
}

a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


.overlay-wrap {
	
}

.city-overlay {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 50%:
; 	background-image: -webkit-linear-gradient(270deg,rgba(34,143,148,0.44) 0%,rgba(34,143,148,0.56) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(34,143,148,0.44) 0%,rgba(34,143,148,0.56) 100%);
	background-image: -o-linear-gradient(270deg,rgba(34,143,148,0.44) 0%,rgba(34,143,148,0.56) 100%);
	background-image: linear-gradient(180deg,rgba(34,143,148,0.44) 0%,rgba(34,143,148,0.56) 100%);		
}

.overlay-wrap h2 {
	color: #D5D0D0;
	font-size: 30pt;
	font-family: abel;
	text-shadow: 2px 2px 3px #333333;
	font-style: normal;
	font-weight: 400;
	
}

.overlay-wrap h2 span {
	font-family: abel;
	text-transform: uppercase;
	font-size: 55pt;
}

#title-overlay {
	position: absolute;
	top: 50%;
	width: 100%;
	background-image: -webkit-linear-gradient(270deg,rgba(34,143,148,0.77) 0%,rgba(34,143,148,0.80) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(34,143,148,0.77) 0%,rgba(34,143,148,0.80) 100%);
	background-image: -o-linear-gradient(270deg,rgba(34,143,148,0.77) 0%,rgba(34,143,148,0.80) 100%);
	background-image: linear-gradient(180deg,rgba(34,143,148,0.77) 0%,rgba(34,143,148,0.80) 100%);
	text-align: center;
	padding-top: 75px;
	padding-bottom: 75px;
}

#title-overlay h1 {
	color: #D5D0D0;
	font-size: 50pt;
	font-family: kaushan-script;
	text-shadow: 2px 2px 3px #333333;
}

#title-overlay h1 span {
	text-transform: uppercase;
}

#title-overlay h3 {
	color: #D5D0D0;
	font-size: 30pt;
	font-family: abel;
	text-shadow: 2px 2px 3px #333333;
	font-style: normal;
	font-weight: 400;
	
}

#title-overlay h3 span {
	font-family: abel;
	text-transform: uppercase;
	font-size: 55pt;
}



@media screen and (max-width: 40em) {
		
		#title-overlay {
			padding-top: 35px;
			padding-bottom: 35px;
		}
	
		#title-overlay h1 {
			font-size: 25pt;	
		}
		
		#title-overlay h3 {
			font-size: 17pt;
			padding: 0 10px;	
		}
		
		.overlay-wrap h2 {
			font-size: 25pt;	
		}
}

#inform-overlay {
	position: absolute;
	top: 75%;
	width: 100%;
	height: 20%;
	text-align: right;	
	right: 20%;
}


#involve-overlay {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 20%;	
}


#challenge-overlay {
	position: absolute;
	top: 20%;
	width: 80%;
	height: 20%;
	text-align: right;
	right: 20%;	
}


#entertain-overlay {
	position: absolute;
	top: 75%;
	width: 80%;
	height: 20%;
	text-align: left;
	padding-left: 20%;	
}



/* SCALABLE IMAGE*/

.image-wrapper
 {
 position: relative;
 }
 
 .scale-image-100
 {
 display: block;
 width: auto;
 max-width: 100%;
 margin: 0 auto 0 auto;
 }
 
  .scale-image-50
 {
	display: block;
	width: auto;
	max-width: 50%;
	height: auto;
 }


/* ------------------------------------------
  GENERAL SECTION STYLES
--------------------------------------------- */

.section-header {
	width: 100%;
	text-align: center;	
	float left;
}

.content-wrapper {
	max-width: 1440px;	
	margin: 0 auto;
}

.section-header h1 {
	font-family: abel;
	text-align: center;
	font-size: 50pt;
	color: #FFFFFF;
	margin-bottom: 0;
	padding-top: 50px;
	padding-bottom: 50px;
	text-shadow: 2px 2px 3px #292929;
	line-height: 60pt;
}

.section-header h1 span {
	color: #1BD0D8;	
}

.section-header h1 span {
	color: #228F94;	
}


#production-sec {
	padding-bottom: 50px;
	overflow: hidden;
	padding-top: 50px;
}

.pro1 {
	overflow: hidden;
	float: left;
	width: 30%;
	min-height: 100px;
	background-color: #000;
}

.pro2 {
	overflow: hidden;
	float: left;
	width: 30%;
	margin: 0 5%;
	min-height: 100px;
	background-color: #000;
}

#black {
	background-color: #000;
	margin-top: 50px;
	clear: both;
	overflow: hidden;	
}


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

#big-section {
	width: 66.13%;
	float: left;
	min-height: 50px;
	margin: 1% 0 1% 1.6%;
}

#big-section p {

	font-size: 24pt;
	font-family: abel;
	color: #fff;
	text-shadow: 2px 2px 3px #292929;	
}

#right-bar {
	float: left;	
	width: 32.26%;
}

#nav-buffer {
	width: 100%;
	min-height: 55px;
	
}


/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

.col-alt {
	display: block;
	float: left;
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left: 0px;
}


/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }
.span_1_of_3_alt { 

width: 32.26%;
background-color: #000;
min-height: 400px;
font-family: abel;
	text-align: center;
	font-size: 50pt;
	color: #FFFFFF; 
	text-shadow: 2px 2px 3px #292929;

}

.alt_1_of_3 { 

width: 32.26%;
background-color: #000;
font-family: abel;
	text-align: center;
	font-size: 50pt;
	color: #FFFFFF; 
	text-shadow: 2px 2px 3px #292929;

}

.pro-wrap {
	display: block;
	float: left;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 50px 0;
	width: 100%;
	clear: both;
	background-color: #121212;
}

.pro-wrap_alt {
	display: block;
	float: left;
	padding: 50px 0;
	width: 100%;
	clear: both;
	background-color: #121212;
	
}

.description {
	float: left;
	width: 40%;
}

.media-port {
	float: left;
	width: 60%;
}


/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 40em) {
	.col {  margin: 1% 0 1% 0%; }
	.description, .city-wrap, .project-box_left, .media-port, .span_3_of_3, .span_2_of_3, .span_1_of_3, .span_1_of_3_alt { width: 100%; }
}

/*  GRID OF SIX  */
.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 83.06%;
}

.span_4_of_6 {
  	width: 66.13%;
}

.span_3_of_6 {
  	width: 49.2%;
}

.span_2_of_6 {
  	width: 32.26%;
}

.span_1_of_6 {
  	width: 15.33%;
	min-heigh: 400px;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 40em) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
}

.col h1 {
	margin: 15px; 0;
	font-size: 28pt;
	color: #1BD0D8;	
}

/*  GRID OF FOUR   ============================================================================= */

	
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.6%; 
}

.span_2_of_4 {
	width: 49.2%; 
}

.span_1_of_4 {
	width: 23.8%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}
}

.view {
	color: #fff;
	width: 125px;
	font-family: abel;
	font-size: 16pt;
	text-align: center;
	margin: 0 auto;
}

.cityblock {
	position: relative;
	float: left;
	min-height: 400px;
	width: 16%;
	margin: 0 auto;
	background-image: -webkit-linear-gradient(178deg,rgba(255,255,255,1.00) 0%,rgba(128,123,123,1.00) 100%);
	background-image: -moz-linear-gradient(178deg,rgba(255,255,255,1.00) 0%,rgba(128,123,123,1.00) 100%);
	background-image: -o-linear-gradient(178deg,rgba(255,255,255,1.00) 0%,rgba(128,123,123,1.00) 100%);
	background-image: linear-gradient(272deg,rgba(255,255,255,1.00) 0%,rgba(128,123,123,1.00) 100%);
}

#philosophy {
	min-height: 200px;
	clear: both;
	overflow: hidden;
	padding-bottom: 50px;
}

#philosophy-h {
	background-color: #000;
	padding: 25px 0;
	margin: 25px 0 0 0;	
	-webkit-box-shadow: 3px 3px 5px #434343;
	box-shadow: 3px 3px 5px #434343;
}

#philosophy h2 {
	font-size: 36pt;
	font-family: abel;
	color: #1BD0D8;
	padding: 25px 0;
}


#philosophy p {
	font-family: abel;
	font-size: 18pt;
	color: #fff;
	text-shadow: 1px 1px 2px #292929;
}

#philosophy h3 {

	font-size: 24pt;
	font-family: abel;
	color: #fff;
	padding: 0 0 50px 0;	
}

.tenant {
	-webkit-box-shadow: 3px 3px 5px #434343;
	box-shadow: 3px 3px 5px #434343;
	background-color: #228f94;
	padding: 15px;
	margin: 10px 0 25px 0;
	height: 300px;
}


.tenant-h {
	-webkit-box-shadow: 3px 3px 5px #434343;
	box-shadow: 3px 3px 5px #434343;
	background:#228F94;
	padding: 25px 0;
	margin-top: 25px;
}

.tenant-h h4 {
	font-family: abel;
	font-size: 26pt;
	color: #fff;
	text-shadow: 2px 2px 3px #292929;
	text-transform: uppercase;
}

#mpop {
	background-color: #232323;
	overflow: hidden;
}

#mpop h2 {
	font-family: abel;
	text-align: center;
	font-size: 34px;
	color: #1BD0D8;
	margin-bottom: 0;
	padding: 20px;
	text-shadow: 2px 2px 3px #292929;
	line-height: 38px;
}

#mpop p {
	font-family: abel;
	text-align: left;
	font-size: 14pt;
	color: #fff;
	margin-bottom: 0;
	padding-bottom: 30px;
	text-shadow: 2px 2px 3px #292929;
	line-height: 16pt;
}

.project-box_left {
	float: right;
	width: 100%;
	margin: 25px 0;
}

.project-box_right {
	float: left;
	width: 90%;
	margin: 25px 0;
}

#city-wrap {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}




#about-bg {
	background-color: #fff;	
}


#leadership {
	min-height: 200px;
	clear: both;
	overflow: hidden;
	padding: 0 0 50px 0;
		
}

#leadership h5 {
	text-align: left;
	font-size: 36pt;
	font-family: abel;
	color: #000;
	padding: 25px 0;
}

#carolwrap {
	font-family: abel;
	color: #fff;
	background-color: #000;
	text-shadow: 2px 2px 3px #292929;
	clear: both;
	overflow: hidden;
	
}

#rickywrap {
	font-family: abel;
	color: #fff;
	background-color: #373636;
	text-shadow: 2px 2px 3px #292929;
	clear: both;
	overflow: hidden;
	
}

#teamwrap {
	font-family: abel;
	color: #fff;
	background-color: #000;
	text-shadow: 2px 2px 3px #292929;
	clear: both;
	overflow: hidden;
	
}

.biobox {
	width: 70%;
	text-align: left;
	float: left;
	padding: 25px 0;			
}


.biobox h2 {
	font-size: 26pt;
	width: 90%;
	margin: 0 auto;
}

.biobox h3 {
	font-size: 22pt;
	width: 90%;
	margin: 0 auto;
	
}
.biobox p {
	font-size: 18pt;
	padding-top: 10px;
}

.biobox h4 {
	font-size: 14pt;
	width: 90%;
	padding-top: 10px;
	margin: 0 auto;
}

.picturebox {
	width: 30%;	
	float: left;
}

.picturebox-sm {
	width: 25%;	
	float: left;
}

.biobox-sm {
	width: 25%;
	text-align: left;
	float: left;
	padding: 25px 0;			
}


.biobox-sm h2 {
	font-size: 26pt;
	width: 90%;
	margin: 0 auto;
}

.biobox-sm h3 {
	font-size: 22pt;
	width: 90%;
	margin: 0 auto;
}

@media only screen and (max-width: 40em) {

#production-sec {
	padding: 0;
}

.cityblock {
	width: 100%;	
}

.picturebox {
	width: 100%;
}

.biobox {
	width: 100%;	
}

.picturebox-sm {
	width: 100%;
}

.biobox-sm {
	width: 100%;	
}

#leadership {
	padding: 0;
}

}

/* ------------------------------------------
  CONTACT SECTION STYLES
--------------------------------------------- */
.contact-main {
	background-color: #228F94;
	min-height: 200px;
	clear: both;
	overflow: hidden;
	padding-bottom: 100px;
	padding-top: 50px;
	background-image: -webkit-linear-gradient(270deg,rgba(34,143,148,1.00) 0%,rgba(27,116,120,1.00) 71.50%);
	background-image: -moz-linear-gradient(270deg,rgba(34,143,148,1.00) 0%,rgba(27,116,120,1.00) 71.50%);
	background-image: -o-linear-gradient(270deg,rgba(34,143,148,1.00) 0%,rgba(27,116,120,1.00) 71.50%);
	background-image: linear-gradient(180deg,rgba(34,143,148,1.00) 0%,rgba(27,116,120,1.00) 71.50%);
}

.contact-main p {
	font-family: abel;
	text-align: center;
	font-size: 24pt;
	color: #FFFFFF;
	text-shadow: 2px 2px 3px #292929;
}

.infobox {
	width: 25%;
	float: left;
	
}

.infobox h2 {
	font-family: abel;
	margin-top: 50px;
	text-align: center;
	color: #FFFFFF;
	margin-top: 25px;
	text-shadow: 2px 2px 3px #292929;
}

.infobox h2 span {
	font-size: 28pt;
	color: #1BD0D8;
}

.infobox h3 {
	font-family: abel;
	margin: 10px 0 0 0;
	text-align: center;
	text-shadow: 2px 2px 3px #292929;
}

.infobox h4 {
	font-family: abel;
	text-align: center;
	font-size: 30pt;
	color: #FFFFFF;
	text-shadow: 2px 2px 3px #292929;
}
.infobox h5 {
	font-family: abel;
	text-align: center;
	font-size: 20pt;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 2px 2px 3px #292929;
}

.infobox h2 a {
	color: #FFFFFF;
	text-decoration: none;
}

.infobox h3 a {
	color: #ffffff;
	text-decoration: none;
}

.infobox h4 a {
	color: #FFFFFF;
	text-decoration: none;
}
.infobox h5 a {;
	color: #FFFFFF;
	text-decoration: none;
	
}
.infobox h3 a:hover {
	color: #000;
	text-decoration: none;
}
.infobox h5 a:hover {;
	color: #000;
	text-decoration: none;
	
}

@media only screen and (max-width: 40em) {

.infobox {
	width: 100%;
}

}


#footer {
	float: both;
	font-family: abel;
	text-align: center;
	font-size: 16pt;
	color: #FFFFFF;
	padding: 50px 0;
	clear: both;
	background-color: #000;
}


/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 40em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}


/* ------------------------------------------
  DEMO STYLES
--------------------------------------------- */

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #37302a;
  background: #fff;
  font: normal 100%/1.4 sans-serif;
}

section {
	border-bottom: 1px solid #999;
	text-align: center;
	/* [disabled]padding: 100px 0 0; */
	min-height: 200px;
	width: 100%;
	overflow: hidden;
	background-image: url(url);
}

h1 {
  margin-bottom: .5em;
}

p {
  width: 90%;
  margin: 0 auto;
}


/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */

header {
	position: fixed;
	z-index: 3;
	width: 100%;
	left: 0;
	top: 0;
	background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.62) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.62) 100%);
	background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.62) 100%);
	background-image: linear-gradient(180deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.62) 100%);
}

.logo {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
  font-weight: bold;

  padding: 0 10px;
  color: #fff;
  float: left;
}


/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  background: rgba(0,0,0, .5);
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
}

.js-nav-active .mask {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 40em) {
  .mask {
    display: none !important;
    opacity: 0 !important;
  }
}


/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}

@media screen and (min-width: 40em) {
  .nav-collapse {
    float: right;
    width: auto;
  }
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 40em) {
  .nav-collapse li {
    width: auto;
  }
}

.nav-collapse a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	border-top: 1px solid black;
	text-decoration: none;
	padding: 0.7em 1em;
	color: #fff;
	width: 100%;
	float: left;
	background-color: #165F62;
}

.nav-collapse a:active,
.nav-collapse .active a {
	background-color: #1B7478;
}

@media screen and (min-width: 40em) {
  .nav-collapse a {
    border-left: 1px solid black;
    padding: 1.02em 2em;
    text-align: center;
    border-top: 0;
    float: left;
    margin: 0;
  }
}

.nav-collapse ul ul a {
  background: #228F94;
  padding-left: 2em;
}

@media screen and (min-width: 40em) {
  .nav-collapse ul ul a {
    display: none;
  }
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
	font-family: "responsivenav"; */
	src: url("../icons/responsivenav.eot"); */
	src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg"); */
	font-weight: normal; */
	font-style: normal; */
}

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
	color: #228F94; /* Edit this to change the icon color */
	font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
	text-transform: none;
	text-align: center;
	position: absolute;
	content: "\2261"; /* Hamburger icon */
	text-indent: 0;
	speak: none;
	width: 100%;
	left: 0;
	top: 0;
}

.nav-toggle.active:before {
  font-size: 24px;
  content: "\78"; /* Close icon */
}