/* CSS Document */


.darkGrey 	{ color:#747474;}
.grey 		{ color:#e8e6e7;}
.cyan 		{ color:#29b3ba;}
.yellow 	{ color:#fbd800;}
.steel 		{ color:#353841; }
.blue   	{ color:#00406f; }

.darkGreyBG 	{ background-color:#747474;}
.greyBG 		{ background-color:#e8e6e7;}
.cyanBG 		{ background-color:#29b3ba;}
.yellowBG 		{ background-color:#fbd800;}
.steelBG 		{ background-color:#353841; }
.blueBG   		{ background-color:#00406f; }



body, html
{  width:100%; height:100%; position:relative; margin:0px; padding:0px; background:#29b3ba; color:#fff; font-family: 'Montserrat', sans-serif; font-size:14px; font-weight:300px;  }

.flexBox
{
	display: -webkit-flex; /* NEW */
	display: flex;
	-webkit-flex-wrap: wrap; /* NEW */
	flex-wrap: wrap;
	align-items: stretch;
	-webkit-align-items: stretch;
	margin:0px 0 !important;
	list-style:none;	
	-webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px	
}


input[type="text"], input[type="tel"], input[type="email"], input[type="tel"], input[type="password"], textarea
{
	box-sizing:border-box; 
	padding:5px 38px 5px 10px;
	vertical-align:middle;
	font-family: 'Montserrat', sans-serif; 
	font-size:13px;
	width:100%;
	height:30px;
	color:#444;
	border:1px solid #efefef;
	margin-bottom:5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
textarea
{ height:150px;	}
a.buttonLink, input[type="submit"], button, span.buttonLink
{
	background:none;
	border:3px solid #fff;
	color:#fff; text-decoration:none;
	padding:8px 12px;
	text-transform:uppercase;
	font-size:16px;
	display:inline-block;
	-webkit-appearance:none;
	margin-top:30px;
}
.steelBG a.buttonLink { color:#fbd800 !important; border-color: #fbd800 !important; }

.greyBG a.buttonLink { color:#29b3ba !important; border-color: #29b3ba !important; }

header, section, article
{ position:relative; min-height:50%; }

header 	{ min-height:100%;   }


.maxWidth { max-width:1200px; width:90%; margin:0px auto;  padding:60px 0px; text-align:center }

.logo { width:215px; position:absolute; top:35px; left:0px; max-width:40%; } 

#Tel img { display:none; }
#Tel { font-size:48px; font-weight:700; line-height:1em; display:inline-block; color:#fff; text-decoration:none; margin:0px 10px 10px 0px; }
#Email img, #Tel img { width:41px; }
#Email { display:inline-block; height:41px; margin-top:1px;}

header article { max-width:1200px; width:90%; margin:0px auto; text-align:right !important; padding-top:40px !important; min-height:inherit !important; height:auto; }

nav.menu
{
	margin:0px 0px 0px auto;
	list-style:none;
	width:550px;
	padding:7px 0px;
	position:relative;
}

nav.menu ul
{
	margin:0px auto;
	list-style:none;
	padding:0px;
	text-align:justify;
	width:100%;	
	position:relative;		

}

nav.menu li
{
	display:inline-block; margin:0px 0px; padding:0px; list-style:none; line-height:2em;
	font-size:14px;
	color:#fff;
	text-align:center;
	font-weight:400;
	position:relative;
}
nav.menu li a
{	color: #fff; text-decoration:none;	padding:0px 10px;}


nav.menu ul:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

nav.menu li.selected { border-bottom:2px solid #fbd800; }

.centeredcontent
{
	position:absolute;
	top:50%;
	left:50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);	
	text-align:center;
}

#bulbcontent span { display:block; font-family:'Oswald', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform:uppercase; line-height:1.05em; font-weight:normal; }
.line1 { font-size:60px; }
.line2 { font-size:80px; }
.line3 { font-size:45px; }

#bulbcontent { width:540px; margin:30px auto 30px; text-align:center; }
#bulbcontent img { margin-bottom:20px; max-width:80%; }

.quotes { align-items:center; margin:0px -1.5% 0px !important  ; }
.quotes div { width:30.3%; box-sizing:border-box; padding:0px 20px; margin:0px 1.5%; }
.quotes .opener, .quotes .closer { height:0px; padding-bottom:9.4%; background-image:url(images/quote-open.svg); background-size:100% 100%; background-repeat:no-repeat; }
.quotes .closer { background-image:url(images/quote-close.svg); }

.quotes .author, .quotes strong { font-size:17px; font-family:'Oswald', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform:uppercase; line-height:1.05em; font-weight:normal; margin:10px 0px 0px 0px; display:block; }

.quotes div.oneCol { 
	width:100% !important; padding:0px;  display: -webkit-flex; /* NEW */
	display: flex;
	-webkit-flex-wrap: wrap; /* NEW */
	flex-wrap: wrap;
	align-items: center;
	-webkit-align-items: center;
	margin:0px 0 !important;
	list-style:none;	
	-webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px	
}

p { font-size:14px; line-height:1.4em; margin:10px 0px }

.title, .subTitle, h3 { font-size:45px; font-family:'Oswald', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform:uppercase; line-height:1.05em; font-weight:normal; margin:0px 0px 35px 0px; }
.topPara, h3, h2 { font-weight:700; font-size:17px; }

.subTitle { font-size:35px; margin:10px 0px 20px !important; }

.greyBG .title, .steel strong , .quotes .author, .greyBG p a { color:#29b3ba; font-weight:normal; }

.steelBG .subTitle strong { color:#fbd800 !important; font-weight:normal; }

.icons div { font-size:14px; font-family:'Oswald', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform:uppercase; line-height:1.4em; font-weight:normal; color:#999; }

.icons div.highlight { color:#fbd800; } 

.seperator { margin:0px; position:relative; height:0px; width:100%; padding-bottom:10%; background-image:url(images/blue-grey-yellow.svg); background-position:bottom; background-size:101% 103%; background-repeat:no-repeat; min-height:inherit; padding:0px; margin-bottom:-1px; } 

#WhoWeAre { background-image:url(images/blue-grey-yellow.svg) !important; padding-bottom:12.8%; }
#Services { background-image:url(images/grey-yellow-steel.svg) !important; padding-bottom:12.8%; }
#Portfolio { background-image:url(images/steel-yellow-aqua.svg) !important; padding-bottom:12.8%; }
#About { background-image:url(images/aqua-yellow-grey.svg) !important; padding-bottom:12.8%; }
#MeettheTeam { background-image:url(images/grey-yellow-steel2.svg) !important; padding-bottom:12.8%; }
#GetinTouch { background-image:url(images/steel-yellow-blue.svg) !important; padding-bottom:8.9%; }

#portfolioThumbs { justify-content:center; margin-top:40px !important; }
#portfolioThumbs .item { width:18%; padding-bottom:18%; position:relative; height:0px; background-color:#fff;  background-size:cover; background-position:center; background-repeat:no-repeat; margin:1%;  }
#portfolioThumbs img{ position:absolute; top:0px; left:0px; z-index:1; width:100%; height:100%; }

.icons { max-width:540px; margin:20px auto 0px !important; }
.icons div { width:25%; box-sizing:border-box; padding:10px; position:relative; }
.icons div img { width:100%; height:auto ; cursor:pointer } 

#TeamChoice  { max-width:740px !important;  }
#TeamChoice div { width:20% !important; }

section ul { list-style-position:inside; }
section ul li { margin:7px 0px; }

#POW { margin:-40px 0px 20px 0px; max-width:100%; height:auto; }

hr { height:1px; background-color:#fff; border:none; margin:40px 0px 40px 0px; }

.footer { font-size:12px; }

.footer a { color:#fff; } 

@media only screen and (min-width:791px)
{
	#form1 input[type="text"] , #form1 input[type="email"], #form1 input[type="tel"] 
	{ display:inline-block; box-sizing:border-box; width:33.0%; }
	#form1  br { display:none; } 
	#Sections	{	display:none; }
	
	
	header.lower #NavBar { position:fixed; z-index:100; width:100%; background-color:#353841; border-bottom:1px solid #efefef; top:0px; left:0px; padding-top:20px;}
	header.lower #Email, header.lower #Tel { display:none;}
	header.lower .inner 	{ width:100%; max-width:1200px; margin:0px auto; position:relative  }
	
	header.lower .logo { height:60px; width:auto !important; top:-10px; }
}
@media only screen and (max-width:870px)
{
	#Tel { font-size:35px; }
	#Email img, #Tel img { height:35px; }
	
}

@media only screen and (min-width:791px) and (max-width:870px)
{
	nav.menu li a { padding:0px 3px; }
	
	nav.menu { max-width:480px }
}
@media only screen and (min-width:791px)
{
	/* Dropdown Content (Hidden by Default) */
	.DropMenu {
		display: none;
		position: absolute;
		background-color: #fbd800;
		min-width: 120px;
		z-index: 300;
		left:-5px;
		padding-top:5px;
	}
	
	/* Links inside the dropdown */
	.DropMenu a {
		text-decoration: none;
		display: block;
		text-align:left;
		font-size:12px;
		line-height:1em; 
	}
	nav.menu li.selected .DropMenu a
	{	background: none; }
	
	nav.menu li .DropMenu a 
	{	color:#353841;	padding:5px 10px; }
	
	
	
	
	/* Change color of dropdown links on hover */
	nav.menu li a:hover {}
	
	/* Show the dropdown menu on hover */
	nav.menu li:hover .DropMenu {
		display: block;
	}	
}
@media only screen and (max-width:790px)
{
		
	#Sections
	{	position:fixed; display:block; top:20px; right:20px; z-index:999; width:40px; height:40px; background: url(images/menu.png) #353841 no-repeat center; background-size:80%;	}


	
	nav.menu.clicked
	{	display:block;	}	

	nav.menu
	{	display:none;	
		padding-top:20px;	
		width:100%;
		position:fixed;
		top:0px;
		background-color:#353841;
		z-index:100;
		left:0px;
	}
	nav.menu ul
	{	text-align:left; width:150px;	 margin:0px auto 0px 10px; }
	
	nav.menu li
	{
		margin:0px 0px;
		padding:8px 10px;
		display: block;
		text-align:left;
		font-size:14px;
		line-height:1em;
	}
	nav.menu li.selected { border:none;  }
	nav.menu li.selected a {	border-bottom:2px solid #fbd800; padding-bottom:5px;	}
	
	#Tel img { display:inline-block; }
	header #Tel span { display:none !important; }
	#Tel { margin-right:0px; }
	#Email { margin-right:50px; }
	
	.logo { top:20px;}
	header article { padding-top:20px !important;}

	#portfolioThumbs .item { width:23%; padding-bottom:23%;  } 
	.DropMenu { padding:17px 0px 0px 0px; }
	
	.DropMenu a {
		text-decoration: none;
		display: block;
		text-align:left;
		font-size:0.9em;
		line-height:1em; 
		color:#999 !important;
		border:none !important;
	}
	nav.menu li.selected .DropMenu a { border:none !important; }
}

@media only screen and (max-width:600px)
{
	.line1 { font-size:35px; }
	.line2 { font-size:47px; }
	.line3 { font-size:26px; }
	#bulbcontent { width:320px; }
	
	header { min-height:inherit; }
	
	.quotes div { width:97%; } 
	
	#open1 { order:1; } #main1 { order:2; } #close1 { order:3; display:none;  }
	#open2 { order:4; display:none; } #main2 { order:5; margin:30px 1.5%;  border-top:1px solid #efefef;  border-bottom:1px solid #efefef; padding-top:20px; padding-bottom:20px;  } 	#close2 { order:6; display:none;  }
	#open3 { order:7; display:none;  } #main3 { order:8; } #close3 { order:9; }
	
	.quotes .opener, .quotes .closer { margin:20px 1.5%; }

	.opener { margin-top:20px !important; }
	
	.title { font-size:35px; }
	.subTitle{ font-size:28px; }
	.topPara, h3, h2 { font-size:15px !important; }
	
	#portfolioThumbs .item { width:31.3%; padding-bottom:31.3%;  } 
	
	

}