@import "variables.less";
@font-face {
	font-family: 'QuattrocentoSans-Bold';
	src: url('../css/QuattrocentoSans-Bold.ttf')  format('truetype');/* Legacy iOS */
}
@font-face {
	font-family: 'QuattrocentoSans-Regular';
	src: url('../css/QuattrocentoSans-Regular.ttf')  format('truetype');/* Legacy iOS */
}
@grid-gutter-metro-width: 0px;
@acolor: #23b7a4;
@acolor-trans: rgba(2,145,140,0.7);
@pagecolor: #3a454d;
.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-trans{
background:@acolor-trans;
}
body{
background-position:center;
p{
color:#8d8f92;
}
}

img{
max-width:100%;
}
.hidding{
visibility:hidden;
}
.visible{
visibility:visible;
}
.build{
 padding:15px 0;
 position:relative;
}
.page{
 padding:72px 0 71px 0;
 position:relative;
 background:#fff;
 overflow:hidden;
 border-bottom:1px solid #D6D6D6;
}
.page-color{
 padding:72px 0 71px 0;
 position:relative;
 background:@pagecolor;
 overflow:hidden;
 border-bottom:1px solid #D6D6D6;
	.title-page{
		h2{
		color:#fff;
		border-color:#4e5a62;
		}
	}
}

a.btn-clear{
border:2px solid #fff;
}

/* ========================================= 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: 24px 0;
}
.navbar-nav>li>a {
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
padding-left: 10px;
margin:23px 10px;
border:2px solid transparent;
border-radius:3px;
}
.navbar-default .navbar-nav>li>a{
color: #a4aead;
font-weight:700;
}
.navbar-nav>li.current>a{
border-color: @acolor;
color: @acolor;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{
border-color: #5b6168;
color: #a4aead;
}
.navbar-default {
background-color: #1d2126;
border-color: none;
}
/* ========================================= 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;

}
#flex-slide{
background:transparent;
border:none;
webkit-border-radius: 0px;
-moz-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
#flex-slide .flex-control-nav {
text-align: right;
}
#flex-slide  .flex-direction-nav{
display:none;
}
#flex-slide .flex-control-paging li a{
background: rgba(0,0,0,0.0);
border:1px solid #fff;
}
#flex-slide .flex-control-paging li a.flex-active{
background: #fff;
}
#flex-slide .slides li h1{
font-family: 'QuattrocentoSans-Regular', sans-serif;
font-weight: 400;
}
#flex-slide .slides li p{
padding:12px 0;
}
#flex-slide .slides li a.btn-clear{
margin-right:5px;
}
a.btn-clear{
font-size:12px;
color:#fff;
}
a.btn-clear:hover{
color:#fff;
border-color:@acolor;
background:@acolor;
}
/* ========================================= header ========================================================= */
.main-head {
color:#fff;
width: 100%;
height: auto;
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%);
overflow:hidden;
}
/* title page */
.title-page{
padding-bottom:48px;
	h2{
		
		font-family: 'QuattrocentoSans-Bold',sans-serif;
		margin:0;
		border-left:10px solid #e1e6ea;
		padding-left:10px;
		color:#292f36;
		font-size:36px;
		font-weight:500;
	}
	img{
		margin:20px 0;
	}
	p{
	color:#7A7A7A;
	line-height:36px;
		strong{
		font-size:18px;
		}
	}
}
/* stuff */
.stuff{	
	.stuff-icon{
	margin:0 auto;
	}
	h3{
		font-size:18px;
		color:#797979;
		font-weight:bold;
		margin:24px 0;
	}
	p{
	color:#8d8f92;
	margin:0 0 0 0;
	line-height:24px;
	}
	
	article{
	padding-top:24px;
	}
	article:nth-child(1){
	padding-top:0;
	}
}
p.blur{
padding:24px 0;
}
.stuff-border{
border-right:1px solid #dedede;
}
ul.my-social{
	li{
	width:60px;
	height:60px;
	padding:0;
	margin-right: -2px;
		a{
			background:#c8cdd0;
			display:block;
			height:60px;
			text-align:center;
			line-height:70px;
			color:#fff;
		}
		a:hover{
		background:#d0d5d9;
		}
	}
}
.goal-number{
width:48px;
height:48px;
text-align:center;
color:#fff;
line-height:48px;
font-size:18px;
margin-right:15px;
}
.goal-desc{
overflow:hidden;
	h3{
		margin:0;
		color:#292f36;
		font-weight:400;
	}
}
/* ========================================= team ========================================================= */
.team-attr{
background:#e1e6ea;
padding:15px;

	h3{
	margin:0;
	font-size:16px;
	padding:0 0 5px 0;
	color:#5a6066;
	}
	p{
	margin:0;
	color:#a3a6a9;
	}
}
.team:hover{
cursor:pointer;
}
.team:hover .team-attr{
background:@pagecolor;
}
.team:hover .team-attr h3, .team:hover .team-attr p{
color:#fff;
}
ul.team-social{
	li{
		width:48px;
		height:48px;
		padding:0;
		margin-right: -2px;
	}
	a{
		background:@pagecolor;
		display:block;
		height:48px;
		text-align:center;
		line-height:50px;
		color:#fff;
	}
	a:hover{
	background:#4e5a62;
	}
}
.team{
.myToggle{
background:rgba(255,255,255,0.4);
}
}
/* ========================================= my work ========================================================= */
.mywork{
display:none;
}
#showLess {
    display:none;
}
.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%);
}
.attr-cap{
width:100%;
height:auto;
position:absolute;
z-index: 88;
bottom:0;
left:0;
}
.caption{
padding:36px 24px;
width:100%;
max-width:250px;
margin:0 auto;
	a{
	color:#fff;
	}
	a:hover{
	color:#fff;
	}
}
.main-cap{
background:#292f36;
padding:18px;
	h3{
	margin:0;
	color:#fff;
	font-size:18px;
	}
}
/* ========================================= service ========================================================= */
.service h3{
	margin:0;
	padding:30px 0;
	font-size:17px;
	font-family: 'QuattrocentoSans-Bold', sans-serif;
}
.service p{
	font-size:16px;
	margin:0;
	padding:0 0 30px 0;
}

/* ========================================= features ========================================================= */
.feature h3{
	color:#fff;
	margin:0;
	padding:30px 0;
	font-size:18px;
	font-family: 'QuattrocentoSans-Regular', sans-serif;
}
.feature p{
	font-size:16px;
	margin:0;
	padding:0 0 0 0;
	color:#dcdfe1;
}
/* ========================================= map ========================================================= */
.g-map{
margin:0 0 30px;
	.embed-responsive.embed-responsive-16by9 {
	padding-bottom: 30.25%;
	}
}
/* ========================================= mycontact ========================================================= */
.contact h3{
	font-size:18px;
	font-family: 'QuattrocentoSans-Bold', sans-serif;
}
.contact p{
	font-size:16px;
	margin:0;
	padding:15px 0;
}
.contact-form{
background:#fff;
margin-top:-150px;
padding-left: 30px;
padding-right: 30px;
	form{
		
			label{
			display:block;
			color:#8d8f92;
			font-family: 'QuattrocentoSans-Reguler', sans-serif;
			font-weight:normal;
			}
			
		button{
		display:block;
		margin-top:30px;
		font-family: 'QuattrocentoSans-Reguler', sans-serif;
		font-size:14px;
		color:#fff;
		}
		.form-group{
		width: 49.59%;
		margin-bottom:30px;
		}
		.form-group:nth-child(1){
			padding-right:10px;
		}
		.form-control {
		width: 100%;
		background:#ccc;
		height: 45px;
		-webkit-box-shadow: none;
		box-shadow: none;
		}
		textarea.form-control {
		height: auto;
		}
	}
	
}


.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;
}
.socMed{
	ul.list-inline{
	margin:0;
		li{
			a{
				color:#fff;
			}
		}
	}
}
/* ========================================= 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;
		}
	}
}