/*
	#484848
	#9b9b9b
*/
* {
	margin:0;
	padding:0;
	outline:none;
}
body {
	font-family:'Roboto';
}
#div_preview{
	z-index:1000000;
	position:fixed;
	top:0;
	left:0;
	display:block;
	clear:both;
	width:100%;
	background-color:#f67d09;
	color:#fff;
	text-align:center;
}

/* HEADER */
header {
	z-index:1000;
	position:fixed;
	width:100%;
	height:100px;
	-webkit-box-shadow:0 0 100px 10px #070838;
	box-shadow:0 0 100px 10px #070838;
}
header div {
	background-color:#fff;
}
header .navbar {
	margin:0;
	border:none;
	background-color:#fff;
	padding:25px 0;
}
header .navbar li{
	padding:27px 0 0 0;
}
header .navbar li a{
	font-size:16px;
	line-height:10px;
	font-weight:400;
	padding:0 20px;
	border-right:solid 1px #9b9b9b;
}
header .navbar li a:hover,
header .navbar li a.selected{
	color:#000;
}
header .navbar .dropdown li{
	padding:0;
}
header .navbar .dropdown li a{
	font-size:16px;
	line-height:10px;
	font-weight:400;
	padding:14px;
	border-right:none;
}
header .navbar .navbar-brand{
	position:relative;
}
header .navbar .navbar-brand img{
	position:absolute;
	left:0;
}
header .navbar .navbar-brand span{
	position:absolute;
	left:80px;
	display:inline-block;
	font-size:31px;
	font-weight:100;
	line-height:30px;
	color:#9b9b9b;
	text-align:center;
	padding-left:15px;
	margin-left:5px;
	border-left:solid 1px #9d9d9d;
}
header .navbar .navbar-brand small{
	display:inline-block;
	color:#013461;
	font-weight:600;
}
header .navbar li.languages{
	padding:27px 0 0 0;
}
header .navbar li.languages.first{
	padding-left:20px;
}
header .navbar li.languages a{
	padding:0 10px 0 0;
	border-right:none;
}
header .navbar li.socials{
	padding:22px 0 0 0;
}
header .navbar li.socials a {
	padding:0 0 0 2px;
	border-right:none;
}

@media (min-width:10px)
{
	header .navbar .navbar-brand{
		width:200px;
	}
	header .navbar .navbar-brand img{
		top:16px;
		width:35px;
		height:30px;
	}
	header .navbar .navbar-brand span{
		top:14px;
		left:50px;
		font-size:21px;
		line-height:30px;
	}
	header .navbar .navbar-brand small{
		font-size:9px;
		font-weight:600;
		line-height:8px;
	}
	header .navbar-collapse{
		margin-top:20px;
	}
	header .navbar li a{
		border-right:none;
	}
	.nav>li.languages{
		display:inline-block;
	}
	.nav>li.socials{
		display:inline-block;
	}
}
@media (min-width:768px)
{
	header .navbar-collapse{
		margin-top:0;
	}
	header .navbar li a{
		border-right:solid 1px #9b9b9b;
	}
}
@media (min-width:870px)
{
	header .navbar .navbar-brand{
		width:300px;
	}
	header .navbar .navbar-brand img{
		top:-2px;
		width:auto;
		height:auto;
	}
	header .navbar .navbar-brand span{
		top:0px;
		left:80px;
		font-size:31px;
		line-height:40px;
	}
	header .navbar .navbar-brand small{
		font-size:12px;
		font-weight:600;
		line-height:12px;
	}
}

#top{
	display:block;
	height:100px;
}

/* SLIDERS */
.sliders{
	position:relative;
	background:#115e92;
}
.sliders .sliders-nav{
	z-index:999;
	position:absolute;
	top:0;
	width:50px;
	height:100%;
	cursor:pointer;
}
.sliders .sliders-nav i{
	position:absolute;
	top:50%;
	left:50%;
	color:#fff;
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.sliders #sliders-prev {
	left:0;
}
.sliders #sliders-next {
	right: 0;
}
.sliders #sliders-bullets{
	position:absolute;
	bottom:10px;
	left:0px;
	width:100%;
	text-align:center;
}
.sliders #sliders-bullets span {
	display:inline-block;
	border:solid 1px #fff;
	width:15px;
	height:15px;
	margin:0 5px;
	cursor:pointer;
	-webkit-border-radius:50%;
	border-radius:50%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.sliders #sliders-bullets span.active {
	background-color:#fff;
}
.slider{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	overflow:hidden;
	background:#115e92;
}
.slider.active{
	display:block;
}
.slider .slider-text{
	color:#fff;
	padding:0;
}
.slider .slider-image{
	padding:5vw;
}

@media (min-width:10px)
{
	.sliders{
		height:85vw;
	}
	.sliders .sliders-nav {
		display: none;
	}
	.sliders #sliders-bullets {
		display:none;
	}
	.slider .slider-text{
		text-align:center;
	}
	.slider .slider-text-content h2{
		font-size:18px;
		font-weight:100;
	}
	.slider .slider-text-content h4{
		font-size:12px;
	}
	.slider .slider-text-content p{
		font-size:10px;
	}
}
@media (min-width:768px) {
	.sliders{
		height:32vw;
	}
	.sliders .sliders-nav{
		display:block;
	}
	.sliders #sliders-bullets {
		display:block;
	}
	.slider .slider-text{
		text-align:left;
	}
	.slider .slider-text-content{
		margin:10vw 3vw 0 10vw;
	}
	.slider .slider-text-content h2{
		font-size:24px;
	}
	.slider .slider-text-content h4{
		font-size:12px;
	}
	.slider .slider-text-content p{
		font-size:10px;
	}
}
@media (min-width:970px) {
	.sliders{
		height:32vw;
	}
	.sliders .sliders-nav{
		display:block;
	}
	.sliders #sliders-bullets {
		display:block;
	}
	.slider .slider-text{
	}
	.slider .slider-text-content{
		margin:10vw 3vw 0 10vw;
	}
	.slider .slider-text-content h2{
		font-size:2.8vw;
	}
	.slider .slider-text-content h4{
		font-size:1.2vw;
	}
	.slider .slider-text-content p{
		font-size:0.8vw;
	}
}

.section-title{
	position:relative;
	display:block;
	width:100%;
}
.section-title h2{
	z-index:10;
	position:absolute;
	top:0;
	left:50%;
	display:block;
	margin:0;
	font-weight:100;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.section-title span{
	z-index:5;
	position:absolute;
	display:block;
	width:100%;
}

@media (min-width:10px)
{
	.section-title{
		height:20px;
		margin-bottom:1vw;
	}
	.section-title h2{
		padding:0 10px;
		font-size:20px;
	}
	.section-title span{
		height:1px;
		top:12px;
	}
}
@media (min-width:768px) {
	.section-title{
		height:5vw;
		margin-bottom:1vw;
	}
	.section-title h2{
		padding:0 10px;
		font-size:2.5vw;
	}
	.section-title span{
		height:1px;
		top:1.5vw;
	}
}

/* ABOUT */

#about{
	background-color:#013461;
	padding:3vw;
	color:#fff;
}
#about .section-title h2{
	background-color:#013461;
}
#about .section-title span{
	background-color:#fff;
}
#about h3{
	font-weight:100;
	line-height:1.1;
	margin:0;
	padding:0;
}
#about h6{
	font-weight:300;
	line-height:1.1;
	margin:0;
	padding:0;
}
#about p{
	font-weight:400;
	line-height:1.6;
	margin-top:10px;
	padding:0;
}

@media (min-width:10px) {
	#about h3{
		font-size:26px;
	}
	#about h6{
		font-size:16px;
	}
	#about p{
		font-size:12px;
	}
	#about .about-photo{
		padding:0 35% 20px 35%;
	} 
}
@media (min-width:768px) {
	#about h3{
		font-size:26px;
	}
	#about h6{
		font-size:16px;
	}
	#about p{
		font-size:12px;
	}
	
	#about .about-photo{
		padding:0 20%;
	} 
}
}
@media (min-width:970px) {
	#about h3{
		font-size:1.8vw;
	}
	#about h6{
		font-size:1vw;
	}
	#about p{
		font-size:0.8vw;
	}
}

/* PORTFOLIO */

#portfolio{
	background-color:#fff;
	padding:3vw;
	color:#000;
}
#portfolio .section-title h2{
	background-color:#fff;
}
#portfolio .section-title span{
	background-color:#000;
}
#portfolio h3{
	display:block;
	clear:both;
	width:100%;
	text-align:center;
	font-weight:100;
}
#portfolio h5{
	display:block;
	clear:both;
	font-size:14px;
	font-weight:300;
	padding:2px;
}
#portfolio .row{
	border-bottom:dotted 1px #000;
}
#portfolio .col{
	margin:15px 0; 
	cursor:pointer;
}
#portfolio .col a{
	position:absolute;
	z-index:5;
	width:92%;
	height:100%;
	opacity:0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#portfolio .col a:hover {
	opacity:1;
}
#portfolio .col a i{
	position:absolute;
	z-index:5;
	top:50%;
	left:50%;
	padding:1px;
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	color:#000;
	font-size:40px;
}
#portfolio .col a div{
	position:absolute;
	z-index:5;
	top:65%;
	left:50%;
	text-align:center;
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	color:#000;
	font-size:18px;
	font-weight:400;
}
#portfolio .col img{
	z-index:1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#portfolio .col:hover img{
	opacity:0.3;
}

@media (min-width:10px) {
	#portfolio h3{
		font-size:20px;
		margin:25px 0 0 0;
	}
	#portfolio .row{
		padding-bottom:30px;
		margin-bottom:30px;
	}
}
@media (min-width:768px) {
	#portfolio h3{
		font-size:20px;
		margin:30px 0 0 0;
	}
	#portfolio .row{
		padding-bottom:40px;
		margin-bottom:40px;
	}
}
@media (min-width:970px) {
	#portfolio h3{
		font-size:2vw;
		margin:1.6vw 0 0 0;
	}
	#portfolio .row{
		padding-bottom:4vw;
		margin-bottom:4vw;
	}
}

/* CONTACT */

footer {
	background-color:#484848;
	padding:3vw;
	color:#fff;
}
footer .row {
	margin-bottom:20px;
}
footer a {
	color:#fff;
	text-decoration:none;
}
footer a:focus,
footer a:hover{
	color:#ccc;
	text-decoration:none;
}
footer .section-title h2{
	background-color:#484848;
}
footer .section-title span{
	background-color:#fff;
}
footer .form input{
	width:50%;
	background-color:#333;
	border:none;
	padding:10px 20px;
	margin:0 5px 10px 0;
}
footer .form .checkbox{
	display:inline-block;
	width:unset;
	color:#333;
	background-color:#333;
	border:solid 1px #333	;
	padding:10px 20px;
	margin:0 5px 10px 0;
}
footer .form textarea{
	width:90%;
	background-color:#333;
	border:none;
	padding:10px 20px;
	margin:0 5px 10px 0;
}
footer .form button{
	display:block;
	background-color:#333;
	border:solid 1px #666;
	padding:10px 20px;
	margin:10px 5px 10px 0;
}
footer .form span {
	display:none;
}
footer .form span.active {
	display:inline-block;
}