/* GLOBAL */
body {
	font-size: 22px !important;
	font-family: 'Droid Serif', serif;
	color: #25282a;
}
h1 { 
	font-size: 4em;
}
h2 { 
	font-size: 2.2em;
	line-height: 1.3em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	margin: 0 0 1em;
	text-transform: uppercase;
	letter-spacing: 15px;
}
h3 {
	font-size: 1.4em;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
}
h4 {
	font-size: 1.2em;
	line-height: 1.9em;
}

a.anchor { display: block; position: relative; top: -75px; visibility: hidden; }
div.waves {
	height:10px;
	background: url('../images/wave-pattern.png') repeat-x bottom;
	margin-top: -10px;
}
div.columns div.column { padding:0 2.2em;}
div.vertical-helper { display:inline-block; height: 100%; vertical-align: middle; }

a.toggle-close {
	display:block;
	position: absolute;
	top:0;
	right: 0;
	margin-top: 40px;
	margin-right: 50px;
	cursor: pointer;
	text-decoration: none;
	z-index: 50;
}
.toggle-close div { display: inline-block; }
.toggle-close img { width: 50px; height: 50px; }
.toggle-help {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	color:#fff;
	font-size: .9em;
	text-transform: uppercase;
	letter-spacing: 5px;
	margin-right: 15px;
}
/* /END GLOBAL */


/* HEADER AND NAVIGATION */
header.logo-nav {
	background-color:#008eb4;
	padding-bottom:5px;
	position: fixed;
	width:100%;
	padding-left:.75em;
	padding-right:.75em;
	transition: all 0.6s ease;
	z-index: 999;
}
header.logo-nav img { max-height: 100%; }

header.logo-nav .logo { height:75px; padding-top: 10px; padding-bottom: 5px; transition: all 0.6s ease; }
header.logo-nav .logo-full { display: none; }
header.logo-nav .logo-mark { display: inline; }
header.logo-nav .logo-mark img { width: 60px; height: 60px; transition: all 0.6s ease; }
header.logo-nav .nav-toggle { padding-top:22px; transition: all 0.6s ease; }
header.logo-nav .nav-toggle .icon-bar {
	display: block;
	background-color:#fff;
	width: 40px;
	height:3px;
	border-radius:2px;
	box-shadow:1px 1px 1px #0079a3;
	margin-bottom:9px;
	transition: all 0.6s ease;
}

header.logo-nav.large { background-color: transparent; transition: all 0.4s ease; }
header.logo-nav.large .logo { height:6.8em; padding-top:1.6em; transition: all 0.4s ease; }
header.logo-nav.large .logo-full { display: inline; }
header.logo-nav.large .logo-mark { display: none; }
header.logo-nav.large .logo-mark img { width: 120px; height: 120px; transition: all 0.6s ease; }
header.logo-nav.large .nav-toggle { padding-top:35px; transition: all 0.4s ease; }
header.logo-nav.large .nav-toggle .icon-bar { width:50px; height:4px; transition: all 0.4s ease; }

#navListToggleButton { cursor: pointer; }
header.logo-nav .nav-toggle a div { float:right; clear:none; }
header.logo-nav .nav-toggle a div.toggle-help { display: none; }
body.no-touch header.logo-nav .nav-toggle a:hover div.toggle-help { display: block; }

#navListWrapper {
	position:fixed;
	width:100%;
	text-align:center;	
	z-index:500;
	background:#008eb4;
}
#navList {
	padding-top: 150px;
	min-height:99vh;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	color:#fff;
	font-size: 1.8em;
	line-height: 1.5em;
	text-transform: uppercase;
	letter-spacing: 5px;
}
#navList a { color: #005266; }
#navList li.project { font-size: .8em; line-height: 1.7em; letter-spacing: 2px; }
#navList li.project a { color: #fff;  }
#navList li.spacer { margin-top: 15px; }


/* LOGO TRANSITION TESTING
header.logo-nav.large .logo-full { display:inline; visibility:visible; opacity:1; transition: all 0.4s ease; }
header.logo-nav.large .logo-mark { display:inline; visibility:hidden; opacity:0; transition: all 0.4s ease; }
header.logo-nav .logo-full { display:inline; visibility:hidden; opacity:0; transition: all 0.6s ease; }
header.logo-nav .logo-mark { display:inline; visibility:visible; opacity:1; transition: all 0.6s ease; }
  /END LOGO TRANSITION TESTING */

/* /END HEADER AND NAVIGATION */



/* HOME */
section.home {
	min-height: 99vh;
	background: #008eb4 url("../images/beach-large.jpg") no-repeat center bottom;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: #fff;
	letter-spacing: 5px;
	overflow: hidden;
	text-shadow:2px 2px 1px rgba(28, 169, 175, 0.7);
	padding-top: 85px;
}
/*
section.home div.container-fluid {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}
*/
section.home h1 { font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-size: 5em; font-weight: bold; letter-spacing: 15px; margin:0 0 8px; }
section.home h2 { margin:0; font-family: 'Droid Serif', serif; font-weight: normal; text-transform: none; letter-spacing: 3px; }

section.home div.logomark { height:5.7em; margin: 1.6em 0 1em; }
section.home div.arrow {margin: 3.4em 0 1.6em; height: 3.4em; }

section.home div.logomark img,
section.home div.arrow img {
	max-height: 100%;
}
/* /END HOME */


/* PROJECTS */
section.projects { margin-top: 3em; }
section.projects a.anchor { top: -85px; }
section.projects .project { margin:0px 5px 3em 5px; position: relative; }

section.projects .project div.col-sm-1, 
section.projects .project div.col-sm-2, 
section.projects .project div.col-sm-3, 
section.projects .project div.col-sm-4, 
section.projects .project div.col-sm-5, 
section.projects .project div.col-sm-6, 
section.projects .project div.col-sm-7, 
section.projects .project div.col-sm-8, 
section.projects .project div.col-sm-9, 
section.projects .project div.col-sm-10, 
section.projects .project div.col-sm-11, 
section.projects .project div.col-sm-12 { 
	margin-bottom: .9em; 
}

section.projects .project img { border-radius: 3px; width: 100%; border: 1px solid #ccc; }
section.projects .project .about {
	background: rgba(0, 188, 181, 0.95);
	padding:20px 50px 20px 30px;
	color:#fff;
	text-align: left;
	cursor: pointer;
	margin-bottom: .9em;
	width:50%;
	position: absolute;
	z-index: 50;
	top: 0;
	left: 0;
	margin-top: 20px;
	margin-left: -2.3em;
	display:none;
}
section.projects .project .about.active { display: block; }
section.projects .project .about h2 {
	letter-spacing: 3px;
	border-bottom: 4px solid #fff;
	line-height: 1em;
	margin: 0 0 15px;
	padding-bottom: 5px;
}
section.projects .project .about .toggle-project { margin-top: 35px; font-size: .8em; text-transform: uppercase; }
section.projects .project .about .toggle-project a { color: #fff; cursor: pointer; }

section.projects .project .project-actions {
	position: absolute;
	bottom: 20px;
	right: 15px;
	font-size: .7em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
}

section.projects .project .main { position: relative; border-radius: 3px; background: #008db1; }
section.projects .project .main img.background-tint {
	opacity: 0.6;
	filter: alpha(opacity=60); /* For IE8 and earlier */
}

section.projects .project .main .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 94, 118, 0.6);
	border-radius: 3px;
}

section.projects .project .additional { font-size: 1.1em; font-style: italic; color: #47d7ac; text-align: left; }
/* /END PROJECTS */



/* ABOUT */
section.about {
	min-height: 99vh;
	background: url("../images/about-large.jpg") no-repeat center center;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding: 4.5em 0 0;
	color: #fff;
}
section.about h2 { letter-spacing: 8px; }

section.about div.content-process{
	margin-top: 3.6em;
	color: #25282a;
}
section.about div.content-process div.column { padding-bottom: 3.4em; }
section.about div.content-process h3 { color: #fff; margin: 1em 0; }
section.about div.content-process div.icon {
	background: rgba(71, 215, 172, 0.7);
	width:260px;
	height:260px;
	margin: 0 auto;
	border-radius: 50%;
}

section.about div.content-process div.icon img { vertical-align: middle; max-width: 33%; }

/* /END ABOUT */


/* CONTENT */
section.contact { padding:4.5em 0; min-height: 550px; }
section.contact .contact-option { min-height: 200px; }
section.contact .fa { font-size: 4em; color: #008db1; }
section.contact h4 { font-family: 'Roboto Condensed', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; margin-top: 34px; }
section.contact p { font-size: .9em; font-weight: 700; font-style: italic; margin-top: 40px; display: none; }
section.contact .contact-option:hover p { display: block; }
section.contact .contact-option:hover h4 { display: none; }
/* /END CONTENT */




/* Large desktop */
@media (min-width: 1200px) {

}
 
/* Medium desktop */
@media (min-width: 992px) and (max-width: 1199px) {
	body { font-size: 20px !important; }
}
 
/* Landscape tablet  */
@media (min-width: 768px) and (max-width: 991px) {
	body { font-size: 18px !important; }

	/* ABOUT */
	section.about div.content-process div.icon { width:170px; height:170px; }
	/* /END ABOUT */
}
/* PORTRAIT TABLET AND SMALLER */
@media (max-width: 768px)  {
	/* HEADER AND NAVIGATION */
	header.logo-nav,
	header.logo-nav div.container-fluid{
		padding-left: 0;
		padding-right: 0;
	}
	
	header.logo-nav.large { background-color:#008eb4; }
	header.logo-nav.large .logo { height:75px; padding-top: 10px; padding-bottom: 5px; }
	header.logo-nav.large .logo-full { display: none; }
	header.logo-nav.large .logo-mark { display: inline; }
	header.logo-nav.large .logo-mark img { width: 60px; height: 60px; }
	header.logo-nav.large .nav-toggle { padding-top:22px; }
	header.logo-nav.large .nav-toggle .icon-bar { width: 40px; height:3px; }
	/* /END HEADER AND NAVIGATION */

	/* HOME */
	section.home { padding-top: 200px; }
	section.home .logomark { display:none; }
	/* /END HOME */

	/* PROJECTS */
	section.projects .main-wrapper { margin-bottom: 2px !important; }
	section.projects .project .about { 
		padding: 10px 20px;
		width:100%;
		position: relative;
		margin-top: 0;
		margin-left: 0;
		display: block;
	}
	section.projects .project .about h2 { border-bottom-width: 2px; }
	section.projects .project .about .toggle-project { margin-top: 10px; }
	/* /END PROJECTS */

	/* ABOUT */
	section.about div.content-process div.icon { width:200px; height:200px; }
	section.about p { font-size: 1.2em; }
	/* /END ABOUT */

	section.contact .contact-option p { font-size: 1em; }
	
}
/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 768px)  {
	body { font-size: 16px !important; }

	/* HOME */
	section.home { font-size: 14px; }
	section.home h1 { letter-spacing: 8px; }
	/* /END HOME */

	/* PROJECTS */
	section.projects .project .about h2 { font-size: 26px; }
	/* /END PROJECTS */

}
 
/* Landscape phones and down */
@media (max-width: 480px) {
	body { font-size: 14px !important; }

	/* HEADER AND NAVIGATION */
	header.logo-nav .nav-toggle a div.toggle-help,
	body.no-touch header.logo-nav .nav-toggle a:hover div.toggle-help { display: none; }
	/* /END HEADER AND NAVIGATION */

	/* HOME */
	section.home { font-size: 10px; }
	section.home h1 { letter-spacing: 5px; }
	/* /END HOME */

	/* PROJECTS */
	section.projects .project { margin-bottom: 2em; }
	section.projects .project .about { padding: 10px 15px 5px; }
	section.projects .project .about h2 { font-size: 18px; }
	/* /END PROJECTS */

	/* ABOUT */
	section.about h2 { letter-spacing: 3px; font-size: 2em;}
	/* /END ABOUT */
}


/* Height variances */
@media (min-height: 810px) {
	/* HOME */
	section.home { padding-top: 135px; }
	/* /END HOME */
}
@media (min-height: 810px) and (max-width: 768px){
	/* HOME */
	section.home { padding-top: 300px; }
	/* /END HOME */
}
@media (max-height: 600px) {
	/* HOME */
	section.home .logomark { display:none; }
	/* /END HOME */
}
@media (max-height: 450px){
	/* HEADER AND NAVIGATION */
	#navList {
		font-size: 1.2em;
	}
	/* /END HEADER AND NAVIGATION */

	/* HOME */
	section.home { padding-top: 85px; }
	/* /END HOME */	
}
@media (max-height: 450px) and (max-width: 768px){
	/* HEADER AND NAVIGATION */
	#navList {
		padding-top: 85px;
	}
	/* /END HEADER AND NAVIGATION */

}