@import "variables.less";
@font-face {
	font-family: 'OpenSansExtraBold';
	src: url('../css/OpenSans-ExtraBold.ttf')  format('truetype');/* Legacy iOS */
}
@grid-gutter-metro-width: 0px;
@acolor: #02918c;
@acolor-trans: rgba(2,145,140,0.7);
@bcolor: #cfc91d;
.metro{
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
position: relative;
min-height: 1px;
padding-left:   (@grid-gutter-metro-width / 2);
padding-right:   (@grid-gutter-metro-width / 2);
}
}
.bg-a{
background:@acolor;
}
.color-a{
color:@acolor;
}
.bg-b{
background:@bcolor;
}
.bg-trans{
background:@acolor-trans;
}
body{
background-position:center;
}
img{
max-width:100%;
}
.hidding{
visibility:hidden;
}
.visible{
visibility:visible;
}
.build{
 padding:24px 0;
 position:relative;
}
.page{
 padding:72px 0;
 position:relative;
 background:#fff;
 overflow:hidden;
}
.page-b{
 padding:72px 0;
 position:relative;
 background:#E9E7E0;
 overflow:hidden;
}
.page-black{
 padding:48px 0;
 position:relative;
 background:#242424;
 overflow:hidden;
}
a.btn{
border-radius:0px;
}

/* ========================================= navbar ========================================================= */
.navbar{
margin:0;
border:none;
border-radius:0px;
min-height:inherit;
}
.navbar-default .navbar-nav>li>a{
color:#fff;
}
.navbar-brand{
height:auto;
padding: 18px;
}
.navbar-nav>li>a {
padding-top: 19px;
padding-bottom: 19px;
}
/* ========================================= delay ========================================================= */
.delay1{

-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
-ms-animation-delay: 100ms;
-o-animation-delay: 100ms;

}
.delay2{

-webkit-animation-delay: 200ms;
-moz-animation-delay: 200ms;
-ms-animation-delay: 200ms;
-o-animation-delay: 200ms;

}
.delay3{

-webkit-animation-delay: 300ms;
-moz-animation-delay: 300ms;
-ms-animation-delay: 300ms;
-o-animation-delay: 300ms;

}
.delay4{

-webkit-animation-delay: 400ms;
-moz-animation-delay: 400ms;
-ms-animation-delay: 400ms;
-o-animation-delay: 400ms;

}
.delay5{

-webkit-animation-delay: 500ms;
-moz-animation-delay: 500ms;
-ms-animation-delay: 500ms;
-o-animation-delay: 500ms;

}
.delay6{

-webkit-animation-delay: 600ms;
-moz-animation-delay: 600ms;
-ms-animation-delay: 600ms;
-o-animation-delay: 600ms;

}
.delay7{

-webkit-animation-delay: 700ms;
-moz-animation-delay: 700ms;
-ms-animation-delay: 700ms;
-o-animation-delay: 700ms;

}
.delay8{

-webkit-animation-delay: 800ms;
-moz-animation-delay: 800ms;
-ms-animation-delay: 800ms;
-o-animation-delay: 800ms;

}
.delay9{

-webkit-animation-delay: 900ms;
-moz-animation-delay: 900ms;
-ms-animation-delay: 900ms;
-o-animation-delay: 900ms;

}
.delay10{

-webkit-animation-delay: 1000ms;
-moz-animation-delay: 1000ms;
-ms-animation-delay: 1000ms;
-o-animation-delay: 100ms;

}
/* ========================================= header ========================================================= */
.main-head {
color:#fff;
width: 100%;
height: auto;
text-align: center;
position: relative;
top: 60%;
-webkit-transform: translate(0,-60%);
-moz-transform: translate(0,-60%);
-ms-transform: translate(0,-60%);
-o-transform: translate(0,-60%);
transform: translate(0,-60%);

	p{
	font-weight:bold;
	margin:0;
	 large{
		font-size:30px;
	 }
	}
	h1{
	font-family: 'OpenSansExtraBold';
	font-size:72px;
	line-height: 72px;
	letter-spacing:18px;
	margin:10px 0 14px 0;
	}
	img{
	padding:48px 0;
	}
	a{
	color:#000;
	font-weight:bold;
	}
}
/* title page */
.title-page{
padding-bottom:48px;
	h2{
		font-size:48px;
		font-family: 'OpenSansExtraBold';
		margin:0;
	}
	img{
		margin:20px 0;
	}
	p{
	color:#7A7A7A;
	line-height:36px;
		strong{
		font-family: 'OpenSansExtraBold';
		font-size:18px;
		}
	}
}
/* stuff */
.stuff{	
	.stuff-icon{
	margin:0 auto;
	}
	h3{
		font-size:18px;
		color:#797979;
		font-weight:bold;
		margin:24px 0;
	}
	p{
	color:#7A7A7A;
	font-size:12px;
	margin:0;
	line-height:24px;
	}
}

.stuff-border{
border-right:1px solid #dedede;
}


/* ========================================= services ========================================================= */
/* feat */
.feat{	
	h3{
		font-size:18px;
		color:#797979;
		font-weight:bold;
		margin:24px 0;
	}
	p{
	color:#7A7A7A;
	font-size:12px;
	margin:0;
	line-height:24px;
	}
}
.service-img{
margin-top: -72px;
margin-bottom: -72px;
margin-right: -61px;
position: relative;
}
/* ========================================= my work ========================================================= */
.folio{
 overflow:hidden;
}
.hcaption{
position:relative;
height:100%;
}

.myToggle{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
z-index:77;
display:none;
}
.attr-icon{
width:100%;
height:auto;
text-align:center;
position:absolute;
z-index: 88;
top:50%;
left:0;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);

}

.caption{
padding:36px 24px;
width:100%;
max-width:250px;
margin:0 auto;
}
.attr-icon .caption h3{
color:#fff;
font-size:18px;
margin:0 0 0 0;
padding:0 0 12px 0;
}
.attr-icon .caption p{
color:#fff;
font-size:12px;
margin:0;
padding:0;
}
/* ========================================= mycontact ========================================================= */
.mycontact{
	.form-control{
		border-radius: 0px;
		background-color:transparent;
		border-right:none;
		border-left:none;
		border-top:none;
		border-color:#9E9E9E;
		text-align:center;
		margin-bottom:20px;
		-webkit-box-shadow:none;
box-shadow: none;
	}
	textarea.form-control{
		border-top: 1px solid #9e9e9e;
		border-bottom: 1px solid #9e9e9e;
	}
	.form-group{
		button.btn{
		border-radius: 0px;
		margin-top:24px;
		font-size:14px;
		font-weight:bold;
		color:#000;
		}
	}
	button.btn{
	font-weight:bold;
	}
}
	label{
		color: #929292;
		}
.form-control::-moz-placeholder {
color: #929292;
opacity: 1;
font-weight:bold;
}
.form-control:-ms-input-placeholder {
color: #929292;
font-weight:bold;
}
.form-control::-webkit-input-placeholder {
color: #929292;
font-weight:bold;
}
/* ========================================= footer ========================================================= */
footer{
background:#000;
}
.cpright p{
color:#929292;
margin:0;
}
/* ========================================= reaponsive ========================================================= */
@media (min-width: 240px) and (max-width: 767px){
.main-head {
	p{
	 large{
		font-size:24px;
	 }
	}
	h1{
		font-size:36px;
		letter-spacing:0px;
		line-height:36px;
	}
}
.service-img {
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
position: relative;
}
.caption{
padding:24px;
}
}
@media (min-width: 240px) and (max-width: 480px){
header{
overflow-y:auto;
}
	.main-head{
		height: 100%;
		padding-top: 72px;
		img{
			padding:12px 0;
		}
		a{
			margin-bottom:48px;
		}
	}
}