.icon {
	margin-left: 5px;
	vertical-align: middle;
}


.icon:hover {
	color: #686869;
	text-decoration: none;
}

.clear {
	clear: both;
}

.em {
	color: #96d1f2;
	font-family: 'Noto Serif', serif;
	font-weight: 900;
}

.wrapper {
	position: relative;
	margin: 0px auto;
	max-width: 1185px;
	padding: 0px 25px;
	height: 100%;
}

.none {}


body {
	font-family: 'Lato', sans-serif;
	color:#525658;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.214em;
}

a{
	color:#1e1e1e;
	font-size: 1em;
	font-weight: 300;
	text-decoration: none;
}

a:hover {
	color: #686869;
	text-decoration: underline;
}

/****** NAV *******/


header {
	background-color: #ffffff;
}


#h-wrapper{
	padding: 10px 25px;
	height: 45px;
}

#logo {
	background-repeat: no-repeat;
	background-image: url(img/logo.png);
	background-size: auto 45px;
	height: 45px;
	width: 211px;
	float: left;
	margin-left: 5px;
}


nav{
	float: right;
	width: 190px;
	margin-top: 10px;
	margin-right: 5px;
}


nav ul{
	width: 100%;
	margin: 0 auto;
}


nav li{
	float: right;
	margin-left: 40px;
	/*padding: 0px 2%;*/
}


nav li a{
	display: block;
	padding: 5px;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	color: #525658;
}


nav li a:hover {
	color: #525658;
	text-decoration: none;
	border-bottom: 2px solid #96d1f2;
}


/****** MOSAIC PROJECTS ******/

#projects{
	width: 100%;
	display: block;
}

.project{
	position: relative;
	width: 33.333%;
	float: left;
	margin-bottom: -3px;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
    border: 0 none;
}

.project a {
	width: 100%;
	height: auto;
	display: block;
}


.project img{
	width: 100%;
	height: auto;
}


.proj-txt {
 	color: #ffffff;
 	font-weight: 700;
 	font-size: 16px;
 	text-transform: uppercase;
    position: absolute;
    text-align: center;
    top: 50%;
    vertical-align: middle;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}


.proj-txt span{
	font-weight: 300;
}

.project a:hover .proj-txt {
	opacity: 1;
}

.project a:hover img {
	opacity: 0.7;
}

.project .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #96d1f2;
	opacity: 0;
	-webkit-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.project a:hover .overlay {
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	opacity: 1;
}

/****** CONTENT ******/

h1 {
	font-size: 28px;
	font-weight: 300;
	line-height: 110%;
}

.proj-h h1{
	text-transform: uppercase;
}

h2{
	font-size: 12px;
	font-family: 'Noto Serif', serif;
	font-weight: 700;
	text-transform: uppercase;
	padding-bottom: 10px;
	letter-spacing: 1px;
}


h3 {
	font-size: 50px;
	line-height: 1em;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
}

h4{
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	/*color: #96d1f2;*/
	color:#525658;
	letter-spacing: 0.06em;
}


h6{
	font-size: 20px;
	line-height: 26px;
	color:#525658;
	font-weight: 400;
	padding-bottom: 8px;
	padding-top:70px;
	width: 70%;
}

p {
	font-family: 'Noto Serif', serif;
	font-size: 14px;
	line-height: 28px;
	font-weight: 400;
	color:#798083;
	letter-spacing: 0.02em;
}


.main-title {
	width: 100%;
	height: 200px;
	position: relative;
	background-image: url(img/bg.png);
	background-size: contain;
	background-position: bottom center;
	background-repeat: no-repeat;
}

.main-h{
    position: absolute;
    text-align: center;
    top: 40%;
    vertical-align: middle;
    width: 100%;
}

.proj-title {
	width: 100%;
	height: 450px;
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
	clear: both;
}

.proj-title img {
	width: 100px;
	height:100px;
	float: right;
}

.proj-h{
    display: block;
    float: left;
    margin-top: 200px;
    text-align: left;
    vertical-align: middle;
    width: 45%;
    color: #ffffff;
}

.proj-h-center{
    display: block;
    position: absolute;
    text-align: center;
    top: 43%;
    left: 0;
    vertical-align: middle;
    width: 100%;
}

.proj-img{
	width: 80%;
	margin: 50px 10%;
}

.proj-img img{
	width: 100%;
	height: auto;
}

.proj-video{

	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin: 50px 10%;
	text-align: center;
	/*width: 100%;
	position: relative;
	text-align: center;*/
}

.webby1{

	position: relative;
	padding-top: 25px;
	height: auto;
	margin: 50px 0;
	text-align: center;
	width: 100%;
	overflow: hidden;

}


.webby1 iframe{
    display: block;
    height: 570px;
    margin: 0 auto;
    overflow: hidden;
    width: 325px;
}


.webby2{

	position: relative;
	padding-top: 25px;
	height: auto;
	margin: 50px 0;
	text-align: center;
	width: 100%;
	overflow: hidden;
	/*width: 100%;
	position: relative;
	text-align: center;*/
}


.webby2 iframe{
    display: block;
    height: 700px;
    margin: 0 auto;
    overflow: hidden;
    width: 700px;
}

.long{
	padding-bottom: 42.8%;
	margin: 80px 10% 0;
}


.proj-video iframe{
	position: absolute;
	top: 0;
	left: 5%;
	width: 90%;
	height: 90%;
}

.content{
	padding: 90px 0px;
	width: 100%;
	height: auto;
	clear: both;
}

.content h2{
	padding-bottom: 0px;
}

.content h1{
	padding-bottom: 30px;
}

.challenge{
	width: 60%;
	float: left;
}

.gray-bg {
	background-color: #fafafa;
}

.process p{
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}


.short p{
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
	width: 60%;
}

.proj-des {
	margin-top: 65px;
	float: right;
    padding-left: 30px;
    padding-right: 3%;
	border-left: 1px solid #96d1f2; /* #cbcdce */
}

.proj-des h4{
	margin-bottom: -5px;
}

.proj-des li{
	padding-bottom: 15px;
}
.proj-des p {
	padding-bottom: 15px;
}

.proj-des p:last-child{
	padding-bottom: 0px;
}
.proj-des li:last-child{
	padding-bottom: 0px;
}


/****************************************** SECTIONS ****************************/




#jy-title{
	background-image: url(img/jy-bg.png);
}

#jy-title img{
    width: 230px;
    height: auto;
    float: none;
}


#rover-title{
	background-image: url(img/rover-bg.png);
}

#rover-title img {
	max-width: 550px;
	width: 55%;
	height: auto;
	padding-top: 3%;
}

#guardian-title{
	background-image: url(img/guardian-bg.png);
}



#guardian-title img{
 	height: auto;
    max-width: 210px;
    padding: 143px 5% 0 0;
    width: 55%;
}

#kushi-title{
	background-image: url(img/kushi-bg.png);
}


#kushi-title img{
    width: 230px;
    height: auto;
    float: none;
}


#quote-title {
	background-image: url(img/quote-bg.png);
	background-repeat: repeat;
	background-size: 5px 5px;
	background-color: #3acbcd;
}


#quote-title img, #hawaii-title img{
	max-width: 550px;
	width: 55%;
	height: auto;
	padding-top: 3%;
}


#hawaii-title {
	background-image: url(img/hawaii-bg.png);
}




#hobby-title {
	background-color: #5c1131;
}

#hobby-title img{
   float: none;
    height: auto;
    margin-top: -70px;
    width: 253px;
}


#medalha-title{
	background-color: #a0cd73;
}

#medalha-title img {
 	height: auto;
    max-width: 210px;
    padding: 143px 5% 0 0;
    width: 55%;
}


#visual-title {
	background-image: url(img/visual-bg.png);
	background-position: center;
}


/****************************************** Footer ****************************/

footer {
	background-color: #ffffff; /*#fafafa*/
	padding: 90px 0px 10px;
	width: 100%;
	/*position:relative;*/
}


.foot-h {
	text-align: center;
	width: 100%;
}


footer ul{
	display: block;
	width: 90%;
	margin: 20px auto 80px;
}

#line {
	width:100%;
	height: 27px;
	text-align: center;
	background-color: #fafafa;
}

#foot-ico{
	width: 33px;
	height: 21px;
	font-size: 15px;
	color: #ffffff;
	background-color: #96d1f2;
	vertical-align: middle;
	display: block;
	margin: 0px auto;
	padding-top: 6px;

}

footer ul li{
	display: inline-block;
	margin: 0 auto;
	padding: 10px 10%;
}

footer ul li a{
	font-weight: 400;
	color:#a4a4a5;
	font-size: 11px;
}

footer ul li a:hover{
	text-decoration: none;
	color: #686869;
}


footer ul li a span{
	font-size: 35px;
	display: block;
	text-align: center;
	margin: 0 auto;
	margin-bottom: -15px;
	vertical-align: middle;
}




footer ul li a:hover span{
	color: #96d1f2;
}


#end{
	font-size: 8px;
	margin: 0px auto;
	width: 100%;
	max-width: 365px;
	text-align: center;
	display: block;
	letter-spacing: 1px;
}


/************************** MEDIA QUERIES *******************************/



@media screen and (max-width: 1200px){

	.project{
			width: 33.333%;
	}
}

@media screen and  (max-width: 1000px){

	.proj-img{
		width: 100%;
		margin: 50px 0px;
	}

}


@media screen and  (max-width: 900px){

	#rover-title img, #quote-title img, #hawaii-title img{
		padding-top: 8%;
	}


	.webby2 {
		display: none;
	}

}



@media screen and  (max-width: 768px){

	.none {
		display: none;
	}


	.proj-h {
		width: 100%;
		word-wrap:break-word;
	}

	.process p{

		-webkit-column-count: 1; /* Chrome, Safari, Opera */
    	-moz-column-count: 1; /* Firefox */
	    column-count: 1;
	}
	

	.short p{
		width: 100%;
	}
	

	.project{
		width: 50%;
	}

	.challenge{
		width: 100%;
		float: left;
	}

	h6{
		width: 100%;
	}
	

	.proj-des {
		float: left;
		padding: 0 2%;
		width: 95%;
		border-left: 1px solid #96d1f2;
		border-right: 1px solid #96d1f2; /* #cbcdce */
	}

	.proj-des li{
		padding: 10px 4% 10px 0px;
		width: 29.333%;
		display: inline-block;
		float: left;
	}	

	.proj-des li:last-child{
		padding-right: 0%;
	}	

	.proj-des h4{
		margin-bottom: 5px;

	}

	.proj-des p {
		padding-bottom: 0px;
		line-height: 1.2em;
		letter-spacing: 0.02em;
	}
	
	.cont-title {
		background-size: cover;
	}


	.proj-video iframe{
		left:0;
		width: 100%;
		height: 100%;
	}


}


@media screen and  (max-width: 500px){


	.proj-des {
		float: left;
		padding: 0px 0px 10px 20px;
		width:90%;
		border-left: 1px solid #96d1f2;
		border-right: none; /* #cbcdce */
	}

	.proj-des li{
		padding-bottom: 10px;
		width: 90%;
		display: block;
		float: left;
	}	




}


@media screen and  (max-width: 450px){

	.project{
		width: 100%;
	}

	#logo{
		background-image: url(img/logo-02.png);
		background-size: auto 45px;
		height: 45px;
		width: 46px;
	}

	footer ul li{
		padding: 10px 5%;
	}

}