/* Global */
* {
	box-sizing: border-box; 
	padding: 0; 
	margin: 0;
	}
html, body {font-family: 'Ubuntu', sans-serif; font-size: 20px; height: 100%;}
.wrapper {max-width: 1136px; width: 96%; height: auto; margin: 0 auto; padding: 0 2%;}
.container {width: 100%; height: auto; margin-bottom: -191px;}
.ribbon {width: 100%; height: 8px; background: #FF6F61; display: block; position: relative;}
.ribbon:before {content:""; width: 30%; height: 8px; background: #3F88C5; display: block; position: absolute; top:0; right: 0;}
.clear {clear: both;}
.position-relative {position: relative;}
.transition {
	transition: all 0.3s;
	-moz-transition: all 0.3s; /* Firefox 4 */
	-webkit-transition: all 0.3s; /* Safari and Chrome */
	-o-transition: all 0.3s; /* Opera */
}
.position-relative {position: relative;}

/* Nav */
.nav-flex {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 166px;}	
nav {width: 100%;}
nav .logo {width: 58px; height: 54px; display: block; background: url(../images/main/logo.png) center no-repeat; background-size: cover; color: #FFF; text-indent: -9999px;}
nav ul, nav ul li {list-style: none; padding: 0; margin: 0;}
nav ul {float: right;}
nav ul li {float: left; margin-left: 32px;}
nav ul li:first-child {margin-left: 0;}
nav ul li a {text-decoration: none; font-style: normal; font-weight: normal; line-height: 19px; font-size: 0.694em; text-transform: uppercase; color: #8B8982; padding: 16px 0; position: relative;}
nav ul li a:hover, nav ul li a.active {
	transition: color 0.25s ease-out; 
	-webkit-transition: color 0.25s ease-out; 
	-moz-transition: color 0.25s ease-out; 
	-o-transition: color 0.25s ease-out;
	color: #3A3335;}
nav ul li a.active {font-weight: 500;}
nav ul li a:after {
	content: ""; 
	width: 1%; 
	height: 3px;; 
	background: #FF6F61; 
	display: block; 
	position: absolute; 
	bottom: -3px; left: calc(50% - (33% / 2));
	left: 50%;
	visibility: hidden;
  	-webkit-transition: all 0.2s ease-in-out 0s;
  	transition: all 0.2s ease-in-out 0s;
	}
nav ul li a:hover:after, nav ul li a.active:after {visibility: visible; width: 33%; left: calc(50% - (33% / 2));}
nav.desktop ul li a:after {
	content: "";
	width: 1%; height: 2px; background: #FF655D; display: block; position: absolute; bottom: 0; left: 50%;
	visibility: hidden;
  	-webkit-transition: all 0.2s ease-in-out 0s;
  	transition: all 0.2s ease-in-out 0s;
	}
nav.desktop ul li a:hover:after {
	visibility: visible;
	left: 30%;
	width: 40%;
	}

/* Banner */
#banner {
	/*height: calc(100vh - 166px - 8px); width: 100%;*/
	height: calc(90vh - 8px); width: 100%;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	max-height: 800px;
	}
/*#banner h1 {
	font-family: 'Leckerli One', cursive;
	font-style: normal;
	font-weight: normal;
	line-height: 97px;
	font-size: 2.986em;
	text-align: center;
	color: #3A3335;
	text-align: center;
	margin-bottom: -1%;
	}*/
#banner .logo-name {width: 552px; height: auto; padding-bottom: 8px; margin: 0 auto; display: block;}

#banner h2 {
	font-style: italic;
	font-weight: normal;
	line-height: 33px;
	font-size: 1.2em;
	letter-spacing: 0.02em;
	color: #FF6F61;
	text-align: center;
	margin-bottom: 32px;
	}
#banner p {
	font-family: Ubuntu;
	font-style: normal;
	font-weight: normal;
	line-height: 30px;
	color: #8B8982;
	text-align: center;
	width: 70%;
	margin: 0 auto;
	margin-bottom: 32px;
	}	
#banner a {color: #3F88C5; text-decoration: none;}	
#banner a:hover {
	transition: color 0.25s ease-out; 
	-webkit-transition: color 0.25s ease-out; 
	-moz-transition: color 0.25s ease-out; 
	-o-transition: color 0.25s ease-out;
	color: #3A3335;
	}
	
#banner .logo {width: 74px; height: auto; display: block; margin: 0 auto; margin-bottom: 64px; }	

/* Footer */
footer, .push {height: 191px;}
footer {background: #1D3461; overflow: hidden;}
footer .wrapper {padding: 0 2%;}
footer .group.section {
    margin-top: 56px;
}
footer h1 {
	font-weight: normal;
	line-height: 30px;
	font-size: 1em;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 16px;
	}
footer ul, footer ul li {list-style: none; padding: 0; margin: 0;}
footer ul li {float: left;}	
footer ul.social li a {width: 34px; height: 34px; display: block; background: #000; margin-left: 24px; opacity: 0.7; background-size: cover;}
footer ul.social li a:hover {opacity: 1;}
footer ul.social li:first-child a {margin-left: 0;}
footer ul.social li a.linkedin {background: url(../images/footer/footer-icon-linkedin.svg) center no-repeat;}
footer ul.social li a.behance {background: url(../images/footer/footer-icon-behance.svg) center no-repeat;}
footer ul.social li a.email {width: 38px; background: url(../images/footer/footer-icon-email.svg) center no-repeat;}
footer p {font-weight: normal;
line-height: 23px;
font-size: 0.833em;
text-align: right;
text-transform: capitalize;
color: rgba(255, 255, 255, 0.7); margin-bottom: 8px;}	

@media only screen and (max-width: 1024px) {
	html, body {font-size: 18px;}
	#banner h2, #banner p, #banner h1, footer h1 {line-height: 1.5!important;}
	.nav-flex {display: block;}
	#banner p {width: 80%;}
	footer, .push {height: 160px;}
	footer .group.section {
		margin-top: 44px;
	}
	.container {width: 100%; height: auto; margin-bottom: -160px;}
	#banner {height: calc(90vh - 8px);}
}

@media only screen and (max-height: 738px) {
	#banner {height: 628px;}
}

@media only screen and (max-width: 667px) {
	html, body {font-size: 16px;}
	.wrapper {width: 80%;}
	#banner p {width: 90%; margin-bottom: 24px;}
	#banner p:last-child {margin-bottom: 0;}
	#banner .logo-name {width: 100%; height: auto; padding-bottom: 4px;}
	#banner h2 {font-size: 1.125em; margin-bottom: 32px;}
	footer h1 {
    margin-bottom: 2%;
    text-align: center;}
	footer, .push {height: 240px;}
	footer .group.section {margin-top: 30px;}
	.container {width: 100%; height: auto; margin-bottom: -240px;}
	#banner {height: calc(80vh - 8px); max-height: 700px; overflow: auto;}
	footer p[align=right] {text-align: center;}
	footer .scm {text-align: center;}
	footer .scm ul.social {display: inline-block; margin-bottom: 16px;}
	footer img {max-width: 149px; width: 36%; height: auto;}
	#banner .logo {width: 60px; margin-bottom: 32px; }
}

@media only screen and (max-height: 642px) {
	#banner {height: 642px;}
}