/* Add here all your CSS customizations */
a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button
{
	font-family: 'Open Sans',​Arial,​sans-serif;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition:    all 0.1s ease-in-out;
	-ms-transition:     all 0.1s ease-in-out;
	-o-transition:      all 0.1s ease-in-out;
	transition:         all 0.1s ease-in-out;
}
body { font-family: 'Open Sans',​Arial,​sans-serif; font-size: 16px; color: #343434; background: #fff; }
h1, h2, h3 { color: #222; }
h1 { font-size: 50px; }
h2 { font-size: 50px; }
h1 a, h2 a, h3 a { color: #222; }
p { color: #343434; margin-bottom: 20px; }
a { color: #df7724; }
a:hover, a:focus { color: #3196c0; text-decoration: none; }
.rounded { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.rounded-lg { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }
hr { border-color: #e2e2e2; }



/*** header ********************************/
#header { position: fixed; width: 100%; padding-bottom: 10px; min-height: auto !important; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#header-logo { display: block; position: relative; top: 20px; width: 207px; float: left; }
#header-logo img { width: 100%; height: auto; display: block; }
#header-logo:before { content:""; position: absolute; left: -3020px; width: 3000px; display: block; height: 0; border-bottom: 1px solid #fff; }
#header-logo:after { content:""; position: absolute; left: 230px; width: 3000px; display: block; height: 0; border-bottom: 1px solid #fff; }
#header-logo:before, #header-logo:after { top: 92px; }

#mainnav { margin: 0; float: right; padding-top: 55px; }
#mainnav > ul > li > a, #mainnav > ul > li > a:visited { color: #fff; font-size: 18px; font-weight: 600; background: transparent; }
#mainnav > ul > li > a:hover, #mainnav > ul > li > a:focus,
#mainnav > ul > li.active > a, #mainnav > ul > li.active > a:visited { color: #f17b1d; background: transparent; }

#langs { position: absolute; top: 15px; right: 25px; }
#langs a { color: #fff; font-size: 14px; padding: 3px 10px; border: 1px solid #555; display: inline-block; margin-right: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#langs a:hover, #langs a:focus { background: rgba(0,0,0,0.2); }
#langs a.active, #langs a.active:hover, #langs a.active:focus { background: #df7724; color: #fff; border: none; }

/*** sticky ***/
html.sticky-header-active #header { background: url(../images/hdr-bg.png) repeat-x 0 bottom; }
html.sticky-header-active #header-logo { width: 110px; top: 10px; }
html.sticky-header-active #header-logo:before, html.sticky-header-active #header-logo:after { top: 48px; }
html.sticky-header-active #header-logo:after { left: 130px; }
html.sticky-header-active #mainnav { padding-top: 10px; }
html.sticky-header-active #langs { top: -50px; }


#menu-trigger { display: block; display: none; background: url(../images/icon-nav.png) no-repeat center center / 24px auto; height: 60px; width: 60px; font-size: 24px; position: absolute; top: 0; right: 0; color: #fff; padding: 0; text-align: center; z-index: 10000; }

/*** btn ***/
.btn { padding: 10px 30px; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.btn-primary { background: #0c79a6; text-transform: uppercase; }

/*** promo ***/
#revolutionSlider .top-label { font-size: 45px; text-transform: uppercase; font-weight: 600; color: #fff; line-height: 1.2; text-align: center; }
#revolutionSlider .main-label { font-size: 42px; font-weight: 300; color: #f17b1d; text-align: center; line-height: 1.2; }
#revolutionSlider .bottom-label { font-size: 24px; background: #28383e; color: #fff; line-height: 1.4; padding: 40px; text-transform: none; font-weight: 300; }
#revolutionSlider .bottom-label br { display: none; }
#revolutionSlider a.btn-slider-action, #revolutionSlider a:visited.btn-slider-action { font-size: 60px; text-transform: none; padding: 15px; color: #3196c0; }
#revolutionSlider a:hover.btn-slider-action, #revolutionSlider a:focus.btn-slider-action { color: #fff; }


.tp-bgimg { background-image: none !important; }
.slider-container { background-color: transparent !important; padding-top: 180px;
	background-repeat: no-repeat;
	background-image: url("../images/promo.jpg");
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
}

/*** section ************************/
.section { background: #fff; padding: 60px 0 30px; }
.section-hdr { text-align: center; padding: 0 0 40px; }
.section-hdr .title { margin: 0px; line-height: 1.3; font-weight: 300; text-transform: uppercase; position: relative; }
.section-hdr .subtitle { font-size: 36px; line-height: 1.3; font-weight: 600; }
.section-hdr.without-subtitle .title:after { content:""; display: block; width: 180px; height: 0px; margin: 20px auto 0; border-bottom: 1px solid #383838; }

.section.inverse { }
.section.inverse h2 { color: #fff; }
.section.inverse .without-subtitle .title:after { border-color: #fff; }

/*** stats ***/
#stats .counter { text-align: center; margin-bottom: 30px; }
#stats .lbl { color: #ec791d; font-size: 26px; line-height: 1; }
#stats strong { color: #3196c0; font-size: 140px; line-height: 1; display: block; font-weight: normal; font-family: 'Conv_Dosis-Light',Arial,​sans-serif; }
#stats strong i { font-size: 100px; font-style: normal; }
#stats .note { color: #343434; font-size: 18px; line-height: 1.3; }

/*** company ***/
#company { background: #ddecf3 url(../images/company-bg.jpg) no-repeat center center;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#company .col-sm-4 { margin-bottom: 30px; font-size: 18px; color: #1f5166; line-height: 1.5; }

/*** tech ***/
#techstack { }
.tech-item { margin-bottom: 40px; text-align: center; }
.tech-item i { font-size: 90px; color: #df7724; display: block; line-height: 1.2; }
.tech-item span { display: block; }
#techstack .row+.row .tech-item i { color: #3196c0; }
.tech-item i.adobe { background: url(../images/tech-adobe.png) no-repeat  center center / auto 75%; height: 108px; }


/*** principles ***/
#principles { background: #141a1d; color: #fff; }
#principles .title, #principles p.lead { color: #fff; }
#principles .title:after { border-color: #fff; }
#principles .lead { margin-bottom: 50px; }

.principle-item { background: #28383e; margin-bottom: 20px; padding: 20px; border-top: 3px solid #df7724; }
.principle-item h3 { font-size: 24px; color: #fff; margin: 10px 0 20px; }
.principle-item p { font-size: 15px; color: #b1b4b6; }
.principle-item.principle-2 { border-color: #3196c0; }
.principle-item.principle-3 { border-color: #c1c239; }
.principle-item.principle-4 { border-color: #26b630; }


/*** clients ***/
#clients-list { padding-top: 20px; }
.client a { text-align: center; display: block; height: 100%; margin-bottom: 30px; color: #343434; cursor: default; }
.client a:hover, .client a:focus { color: #343434; }
.client .logo { display: block; vertical-align: middle; height: 100px; width: 100%; margin: 0 auto 5px; }
.client .logo img { width: 100%; }
.client .note { display: block; font-size: 15px; line-height: 1.2; }

.client.item-1 .logo { width: 65%; padding-top: 0; }
.client.item-2 .logo { width: 90%; padding-top: 35px; }
.client.item-3 .logo { width: 100%; padding-top: 20px; }
.client.item-4 .logo { width: 75%; padding-top: 0; }
.client.item-5 .logo { width: 80%; padding-top: 25px; }
.client.item-6 .logo { width: 60%; padding-top: 0; }
.client.item-7 .logo { width: 100%; padding-top: 15px; }
.client.item-8 .logo { width: 70%; padding-top: 0; }
.client.item-9 .logo { width: 60%; padding-top: 0; }
.client.item-10 .logo { width: 90%; padding-top: 25px; }
.client.item-11 .logo { width: 75%; padding-top: 10px; }
.client.item-12 .logo { width: 100%; padding-top: 35px; }
.client.item-13 .logo { width: 85%; padding-top: 30px; }
.client.item-14 .logo { width: 100%; padding-top: 35px; }
.client.item-15 .logo { width: 100%; padding-top: 35px; }
.client.item-16 .logo { width: 100%; padding-top: 20px; }
.client.item-17 .logo { width: 100%; padding-top: 40px; }
.client.item-18 .logo { width: 100%; padding-top: 40px; }


/*** testimonials ***/
#testimonials { background: #ebddd1; }
#testimonials h2 { color: #4f3623; }
#testimonials h2:after { border-color: #4f3623; }
#testimonials-list { padding-top: 20px; padding-bottom: 20px; }
.testimonial-item { padding: 10px 0 0 30px; background: url(../images/icon-colon.png) no-repeat 0 0; }
.testimonial-item .meta { font-size: 24px; color: #4f3723; margin-bottom: 20px; }
.testimonial-item .meta .date:before { content:"//"; padding: 0 8px 0 3px; color: #3196c0; }
.testimonial-item .txt { color: #c16821; font-size: 22px; font-style: italic; line-height: 1.4; padding: 0 150px 20px 40px; font-weight: 400; }

.owl-theme .owl-nav { position: absolute; top: 0; right: 0; }
.owl-theme .owl-nav .owl-prev, .owl-theme .owl-nav .owl-next { font-size: 30px; padding: 8px 30px; background: #e0cebf; color: #3196c0; display: inline-block; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
.owl-theme .owl-nav .owl-prev:hover, .owl-theme .owl-nav .owl-next:hover { background: #3196c0; color: #fff; }
.owl-theme .owl-nav .owl-prev:before, .owl-theme .owl-nav .owl-next:before { content:"\f105"; font-family:'FontAwesome'; }
.owl-theme .owl-nav .owl-prev:before {  content:"\f104"; }


/*** letters ***/
#letters-list .letter { margin-bottom: 30px; }



/*** contacts ***/
#contacts { background: #df7724; }
#contacts .lead { color: #fff; }
#contacts .form-control { color: #000; font-size: 18px; padding: 10px 15px; height: 44px; width: 80%; background: #f6a96b; font-weight: 600; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#contacts .form-control:focus { background: #fac091; }
#contacts textarea.form-control { height: auto; width: 100%; }
#contacts .form-submit { text-align: right; }

#contacts .form-control::-webkit-input-placeholder { color: #df7724; /* Chrome/Opera/Safari */ }
#contacts .form-control:-moz-placeholder { color: #df7724; /* Firefox 18- */ }
#contacts .form-control::-moz-placeholder { color: #df7724; /* Firefox 19+ */ }
#contacts .form-control:-ms-input-placeholder { color: #df7724; /* IE 10+ */ }
#contacts label.error { font-weight: normal; font-size: 14px; }
#contacts a{color:#fff;text-decoration:underline;}

#contactSuccess { background: #fff; }



/*** footer *******************************/
#footer { height: 76px; border-top: 20px solid #28383e; background: #2f4a54; color: #fff; font-size: 10px; padding: 0; }
#footer .container { position: relative; }
#footer-logo { position: absolute; top: -45px; left: 0; font-size: 12px; color: #fff; padding: 67px 0 0 0; background: url(../images/logo-footer.png) no-repeat center 0; }
#footer .copyright { text-align: right; line-height: 26px; padding: 15px 0 0; }
#footer .copyright br { display: none; }

.scroll-to-top { position: fixed; bottom: 0; right: 0; padding: 10px; display: none; }
.scroll-to-top.visible { display: block; }


/*** debug ***********************/
#debug-block { display: none; position: fixed; top: 0; left: 0; z-index: 1000; }
#debug-responsive { border: 1px solid #000; height: 10px; width: 10px; opacity: 1; background: #fff; }
#debug-resolution { font-size: 10px; line-height: 1; padding: 3px; background: rgba(255,255,255,0.7); }