/* ----------------- General & Resets ----------------- */

body { background: #1e2527; position: relative; font-family: 'Lato', sans-serif; color: #333333; margin: 70px 0 0; font-size:15px; }
a { text-decoration:none; color: #00a3cc; font-weight: 400;}
img {border:0px;}
input, textarea, select, button {  font-family: 'Lato', sans-serif; }
.wrapper {margin:0 auto; width: 94%; height: 100%;  max-width: 1370px; position:relative;}

.no_desktop, .mobile_only { display: none !important; }

.clear {clear:both;}
.clearleft {clear:left;}

h1, h2, h3, h4, h5, h6 {  color: #bbb;  font-family: 'Quattrocento Sans'; font-weight: 400; line-height: 1.3em; margin: 0px 0px 1em; padding-top: 0.73em; }

h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 20px;} h4.section_subtitle {text-transform: uppercase; font-weight: 300; margin:0 0 -15px; padding:0px; color: #00a3cc}
h5 { font-size:18px; }
h6 { font-size:16px; }

h1.page_title { text-align:center;}

hr {margin: 10px 0; height:0px; background: none; color: transparent; border:0px; border-top: 1px solid rgba(255,255,255,0.15); }

/* Buttons */
button, .button { background: #00a3cc; cursor: pointer; transition: all 0.15s; font-weight: 700; text-transform: uppercase; margin: 15px 30px 15px 0px; padding: 0 20px; line-height: 47px; font-size: 15px; display: inline-block; color: #fff; border:0px; outline:0px; }

button.large, .button.large { padding: 0 30px; line-height: 60px; font-size: 28px; font-weight: 300; }

button.inverse, .button.inverse { background: transparent !important; filter: none; border: 2px solid #fff; border-radius: 5px; color: #fff;}

/* Style Utilities */
.flex_row { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; margin: 0 -15px;}
.flex_row.reverse {flex-direction: row-reverse;}
.flex_item { flex: 1 1 100%;  padding: 0 15px; box-sizing: border-box;}
.flex_item.one_sixth { flex-basis: calc(16.666% - 30px);}
.flex_item.one_fifth { flex-basis: calc(20% - 30px);}
.flex_item.one_fourth { flex-basis: calc(25% - 30px);}
.flex_item.one_third { flex-basis: calc(33.333% - 30px);}
.flex_item.one_half { flex-basis: calc(50% - 30px);}
.flex_item.two_thirds { flex-basis: calc(66.666% - 30px);}
.flex_item.three_fourths { flex-basis: calc(75% - 30px);}

.flex_row.force_grid {align-items: stretch;justify-content: flex-start;}
.flex_row.force_grid .flex_item { flex-grow: 0 !important;box-sizing: content-box;}

form {}
form .flex_item { padding-top: 5px; padding-bottom: 5px;}
form  input, form textarea { width: 100%; margin:0px; box-sizing: border-box;}
form button {margin: 15px 15px;}
input[type="text"], input[type="password"], textarea, select { padding: 0 12px; height: 50px; line-height: 50px; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; background: rgba(255,255,255,0.12); font-size: 16px; font-weight: 300; color: #fff; }
textarea { height: auto; min-height: 100px; }
input::-webkit-input-placeholder , textarea::-webkit-input-placeholder { color:rgba(255,255,255,0.6);}
input:-ms-input-placeholder , textarea:-ms-input-placeholder { color:rgba(255,255,255,0.6);}
input:-moz-placeholder , textarea:-moz-placeholder { color:rgba(255,255,255,0.6); opacity: 1; }
input::-moz-placeholder , textarea::-moz-placeholder { color:rgba(255,255,255,0.6); opacity: 1; }

.photo_left, .photo_right { box-shadow: 1px 1px 8px 0 rgba(0,0,0,0.2)}
.photo_left { float: left; margin: 0 30px 24px 0; }
.photo_right { float: right; margin: 0 0 24px 30px; }
.photo_left.extrapad { margin: 0 60px 20px  0; }
.photo_right.extrapad { margin: 0 0 20px 60px; }
.photo_left.rounded, .photo_right.rounded { border-radius: 3px;}
 
/* ----------------- Header ----------------- */

header#site_header { padding: 10px 0; height: 50px; line-height:50px; background: #3c3f40; position: fixed; top:0px; left:0px; right: 0px; z-index: 1000; box-shadow: 0px -3px 9px 0px rgba(0,0,0,0.9); }
a#logo {position: absolute; left:0px; top:0px; height: 50px; line-height: 50px;}
a#logo img {display:block; float:left; width: 50px; height:50px;}
a#logo h1.site_name { display:inline-block; margin: 0 0 0 20px; padding:0px; height: 50px; line-height: 50px; font-size: 40px; color: #ccc;  }

nav#main_menu { position: absolute; right: 0px; top:50%; margin-top: -20px;  height: 40px; line-height: 40px; }
nav#main_menu a { display: inline-block; transition: color .65s ease; line-height: 40px; height: 40px; margin-left: 40px; font-size: 15px; font-weight: 300;  color: #999; text-transform: uppercase; }
nav#main_menu a:hover {transition: color .15s ease; color: #00a3cc;}
nav#main_menu .mm_only { display:none;}

button#mobile_toggle { display:none; background: none; font-size: 20px; font-weight: 300;  color: #999; text-transform: uppercase;  outline: 0px; cursor:pointer; border:0px; height: 40px; line-height: 40px; position: absolute; top: 50%; right:0px;  margin-top: -20px;}
button#mobile_toggle span.fa { font-size: 21px; margin-left: 6px;}
nav#mobile_menu { display: none; position: relative; z-index: 1010; background: #00a3cc; }
nav#mobile_menu a { display:block; height: 30px; line-height: 30px; font-size: 20px; font-weight: 300;  color: #fff; text-transform: uppercase; padding: 5px 16px; border-top: 1px solid rgba(0,0,0,0.12);}
nav#mobile_menu a.social {  }
nav#mobile_menu a.social span.fa { margin-left: 10px; border-radius: 100% 100%; background: #4267b2; font-size: 21px; color: #fff; text-align: center; display:inline-block;width: 30px; line-height: 30px; vertical-align: middle;}

/* ----------------- Home Page Styles ----------------- */

#home_image { z-index: -1; position: fixed; top:0px; left:0px; bottom:0px; right:0px; background: #000 url('images/home_image.jpg') 50% 50% no-repeat; background-size: cover; opacity: 0.001; transition: opacity 0.1s ease;}
#home_image::after { content: ' '; display:block; position: absolute; left:0px; top:0px; right:0px; bottom: 0px; background: rgba(0,0,0,0.5); opacity: 0; transition-delay: 0.55s; transition: opacity 0.8s ease; }
	#home_image.active {opacity: 1;}
	#home_image.active::after { opacity: 1; }

#home_content { }
section#home_showcase { height: calc(100vh - 155px); text-align:center; position: relative; overflow: hidden; }
section#home_showcase .wrapper { display:flex; flex-flow: row wrap; align-items: center; justify-content: stretch; height: 100%; width: 100%; position: relative; top: 150px;  opacity: 0;  transition: top 0.7s ease, opacity 0.4s ease; transition-delay: 0.65s; }
section#home_showcase .wrapper > div {width: 100%; padding-bottom: 30px; }
section#home_showcase h1 { color: #fff; font-size: 70px; padding:0px; margin: 0 0 0.35em; }
section#home_showcase p { color: #fff; font-size: 24px; }
section#home_showcase #showcase_buttons {}
section#home_showcase #showcase_buttons a.morebutton {}
	section#home_showcase.active .wrapper {top: 0px; opacity: 1;}

section#home_benefits { background:  #3c3f40; min-height: 400px; text-align:center; padding: 0 0 75px;}
section#home_benefits .wrapper { }
section#home_benefits h2 { background:  #3c3f40; display: inline-block; height: 100px; border-radius: 16px; line-height: 80px; position: relative; top: -80px; margin:0px 0px -60px; padding: 0px 48px;}
section#home_benefits .wrapper > p { lin-height: 1.8em; color: #fff; font-size: 20px; font-weight: 300;}
section#home_benefits .flex_row {align-items: stretch;}
section#home_benefits .flex_item { }
section#home_benefits .specialty_box { border-radius: 4px; background: rgba(255,255,255,0.12) ; padding: 0 18px 18px; position: relative; box-sizing: border-box; width: 100%; height: 100%;}
section#home_benefits .specialty_box h4 { font-weight: bold; margin: 0px; padding: 20px 0 0px; }
section#home_benefits .specialty_box p { color: #fff; line-height: 1.8em; }

section#latest_project { background: transparent url('images/computer_scenic_dark.jpg') 50% 50% no-repeat; background-size: cover; padding: 65px 0 65px; color:#fff;}
section#latest_project .wrapper {border-radius: 4px; background: rgba(255,255,255,0.22) ; box-sizing: border-box; padding: 40px;}
section#latest_project h4.section_subtitle {color: #ddd;}

section#home_plan_selection { }
section#home_plan_selection .wrapper {}

/* ----------------- Interior Page Styles ----------------- */

#interior_banner { height: 320px;  position: relative; z-index: 100; background: transparent url('images/computer_and_pen.jpg') 50% 50% no-repeat; background-size: cover; position: relative; overflow: hidden; }
#interior_banner.portfolio_spotlight { background-image: url('images/computer_scenic_dark.jpg'); }
#interior_banner h1 { margin:0px; padding:0px; opacity: 0; position: absolute; top:65%; left:20px; right:20px; font-size: 60px; color: #fff; text-align:center; transform: translateY(-50%); transition-delay: 0.65s; transition: opacity 0.45s linear, top 0.6s ease;}
#interior_banner h1.active { top: 50%; opacity: 1;}

#interior_content { padding: 30px 0; background: #3c3f40 ;}
#interior_content .wrapper { background: rgba(255,255,255,0.12); border-radius: 6px; padding: 0 35px 45px; box-sizing: border-box; min-height: 200px; }

#interior_content p, #interior_content ol, #interior_content ul { font-size: 18px; color: #bbb; font-weight: 300; line-height: 1.5em;}


/* ----------------- Footer Styles ----------------- */

section#contact { padding: 15px 0 25px; background: #00a3cc; min-height: 400px; text-align:center; color: #fff;}
section#contact .wrapper {}
section#contact h2 { color: #fff; }

footer#footer { padding: 15px 0  15px; background: #1e2527;  color: #999; text-align:center;}
footer#footer a { color: #fff;}
footer#footer .wrapper {}

#contact_form { width: 100%; max-width: 760px; margin: 0 auto; }

/* Misc. Site Components */




/* ----------------- Responsive Rules ----------------- */

@media screen and (min-width: 1225px) and (max-width: 1369px) {
	
	.wrapper { max-width: 1200px; }
	
}

@media screen and (min-width: 1025px) and (max-width: 1224px) {
	
	.wrapper { max-width: 1000px; }
	nav#main_menu a { margin-left:15px; font-size: 14px;}
}

@media screen and (min-width: 961px) and (max-width: 1024px) {

	.wrapper { max-width: 980px; }
	
	nav#main_menu { display:none; }
	button#mobile_toggle, nav#mobile_menu { display:block;}
	nav#mobile_menu a { padding: 5px 30px;}
	
	section#home_showcase { }
}

@media screen and (min-width: 751px) and (max-width: 960px) {
	
	.wrapper { max-width: 800px; }
	
	nav#main_menu { display:none; }
	button#mobile_toggle, nav#mobile_menu { display:block;}
	nav#mobile_menu a { padding: 5px 30px;}
	
}

@media screen and (min-width: 20px) and (max-width: 750px) {
	
	.mobile_only { display: block !important; }
	
	a.morebutton.large, .morebutton.large a { padding: 0 20px; line-height: 48px; font-size: 22px; font-weight: 300; }
	.column, .column:first-child { float: none; margin: 12px auto 12px; width: 100% !important; box-sizing: border-box;}
	form .form_row { padding: 0px;}
	
	nav#main_menu { display:none; }
	button#mobile_toggle, nav#mobile_menu { display:block;}
	nav#mobile_menu a { padding: 5px 30px;}
	a#logo h1.site_name { display:block; float:left; margin: 0 0 0 24px; padding:0px; height: 50px; line-height: 50px; font-size: 24px; width: 200px; color: #ccc;  }
	
	#interior_banner { height: 210; }
	#interior_banner h1 { font-size: 40px;}
	
	.portfolio_columns .column { padding: 2px 15px; min-height:0px !important;}
	
}

@media screen and (min-width: 20px) and (max-width: 399px) {
	
	a.morebutton, .morebutton a { font-size: 12px; }
	a.morebutton.large, .morebutton.large a { padding: 0 20px; line-height: 48px; font-size: 22px; font-weight: 300; }
	
	#main_title {  font-size: 34px;  }
	#sub_title {  font-size: 20px;   }
	button#mobile_toggle span.button_text { display:none;}
	
	
	section#home_showcase { height: 400px; }
	section#home_showcase .wrapper { top: 45px; transform: none; }
	section#home_showcase h1 { font-size: 32px; margin-bottom: 0.35em; }
	section#home_showcase p { color: #fff; font-size: 16px; }
	section#home_showcase p br { display:none;}
	section#home_showcase #showcase_buttons {}
	section#home_showcase #showcase_buttons a.morebutton { display:block; width: 100%; max-width: 250px; margin: 0 auto 10px;}
		section#home_showcase.active .wrapper {top: 0px; }
		
	#interior_banner { height: 160px; }
	#interior_banner h1 { font-size: 40px;}
	
	#interior_content {padding: 10px 0;}
	#interior_content .wrapper { padding: 0px 16px 20px;}
	#interior_content h1 { font-size: 38px; }
	#interior_content h2 { font-size: 30px; }
	#interior_content h3 { font-size: 22px; }
	#interior_content h4 { font-size: 18px;}
	#interior_content h5 { font-size:17px; }
	#interior_content h6 { font-size:16px; }
	
}