@charset "utf-8";
/* 
1. Global styles for the entire project
	 1.1 Global styles for the social buttons
	 1.2 Global styles for the headlines in the sections
	 1.3 Global styles for elements forms
	 1.4 Global styles for sections
	 1.5 Global styles for carousels
2.  Styles for Slider sections
3.  Styles for headers
4.  Styles for Greeting section
5.  Styles for Services section
6.  Styles for Benefits section
7.  Styles for Statistics section
8.  Styles for Portfolio section
9.  Styles for Team section
10. Styles for Prices section
11. Styles for Reviews section
12. Styles for Stage section
13. Styles for Partners section
14. Styles for Contacts section
15. Styles for footer
16. Responsive fixes
 */



/*   1. Global styles for the entire project    */
@import url("/css/fonts.css");
body {position: relative; font-family: 'ClearSansRegular'; }
.load {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: url(/i/load.png) no-repeat center center #000; z-index: 1031; color: #fff;}
a:hover {text-decoration: none;}
.no-margin {padding-left: 0; padding-right: 0;}
.scroll {position: absolute; bottom: 50px; left: 50%; margin: 0 0 0 -8px;}
.navbar-toggle {background: #fbb02c; padding: 5px 6px; margin-top: 15px;}
.navbar-toggle .icon-bar {background: #fff;}
.navbar-brand {height: auto;}
.nav > li > a:hover, .nav > li > a:focus {background-color: transparent;}

/*   1.1 Styles for the block of social buttons   */
.social a {width: 30px; height: 30px; border-radius: 15px; display: inline-block; margin: 0 20px 0 0; background: url(/i/social.png) no-repeat; overflow: hidden; text-indent: -99999px;}
.social a:last-child {margin: 0;}
.social a.fb {background-position: 0 0;}
.social a.tw {background-position: -30px 0;}
.social a.vk {background-position: -60px 0;}
.social a.gp {background-position: -90px 0;}
.social a.be {background-position: -120px 0;}

/*   1.2 Elements forms   */
.proposal-field {width: 100%; background: transparent; border: none; outline: none; font-size: 1.28em; border-bottom: 1px solid #fff; margin: 5px 0; color: #fff;}
.proposal-field::-webkit-input-placeholder {color:#b2b2b2;}
.proposal-field::-moz-placeholder          {color:#b2b2b2;}/* Firefox 19+ */
.proposal-field:-moz-placeholder           {color:#b2b2b2;}/* Firefox 18- */
.proposal-field:-ms-input-placeholder      {color:#b2b2b2;}
.proposal-button {display: block; width: 100%; border:none; color: #000; background: #fbb02c; padding: 8px 0; border-radius: 3px; text-align: center; margin: 5px 0; font-family: 'ClearSansBold';}
.proposal-button:hover{color: #fff !important;}

/*   1.3 The headlines in the sections   */
h1.title {text-align: center; margin: 80px 0 55px 0; position: relative; padding: 0 0 30px 0;}
h1.title + p {text-align: center; font-size: 18px; margin: 0 0 50px 0;}
.dark {color: #2c2e30;}
.light {color: #fff;}
h1.dark + p {color: #767676;}
h1.light + p {color: #fff;}
h2.dark + p {color: #6b6c6c;}
h1.title:before {display: block; width: 30px; height: 3px; position: absolute; left: 50%; bottom: 0; margin: 0 0 0 -15px; background: #fbb02c; content: '';}

/*   1.4 Global styles for sections   */
#services, #benefits, #portfolio {padding: 0 0 100px 0;}
#benefits, #portfolio {background: #f3f3f3;}
#stages {background: #f3f3f3;}

#statistics {background: url(/i/statistics_bg.jpg) no-repeat center center; background-size: cover; padding: 100px 0;}
#statistics {background: url(/i/statistics_bg.jpg) no-repeat center center; background-size: cover; padding: 100px 0;}
#proposal {background: url(/i/proposal_bg.jpg) no-repeat center center; background-size: cover; padding: 0 0 50px 0;}
#contacts {background: url(/i/contacts_bg.jpg) no-repeat center center; background-size: cover; padding: 0 0 50px 0;}
#contacts a {color:#ffffff;}
#map {height: 475px;}

/*   1.5 Global styles for carousels   */
#carousel-1 .carousel-indicators li, #carousel-2 .carousel-indicators li {width: 14px; height: 14px; border-radius: 50%; cursor: pointer; margin: 0;}
#carousel-1.carousel .item {width: 100%; height: 100%;}
#carousel-1 .carousel-indicators li {border: 2px solid #ffffff;}
#carousel-1 .carousel-inner {height: 1000px;}
#carousel-2 .carousel-indicators {position: relative;}

/*  2. Styles for Slider sections   */
/*#slider .item:nth-child(1) {background: url(/i/slide1.jpg) no-repeat center center; background-size: cover;}
#slider .item:nth-child(2) {background: url(/i/slide2.jpg) no-repeat center center; background-size: cover;}
#slider .item:nth-child(3) {background: url(/i/slide3.jpg) no-repeat center center; background-size: cover;}
#slider .item:nth-child(4) {background: url(/i/slide4.jpg) no-repeat center center; background-size: cover;}*/
#slider .carousel-indicators li {border: 2px solid #dadada;}
#slider .item iframe {position: relative;}
#slider .item .over {position: absolute; top:0px; left:0px; width: 100%; height:1000px;  background: #000000; opacity:0.5;}

/*  3. Styles for headers   */
header {border-bottom: 1px solid rgba(255, 255, 255, .2)!important; color: #fff; transition: background 1s ease;}
header .menu{padding-top: 15px;}
header li a {padding-top: 7px !important; padding-bottom: 7px !important; color: #fff ;}
header li a:hover {color: #fbb02c ;}
header li.active a:hover {color: #000;}
header li.active {background: #fbb02c; border-radius: 3px;}
header p {color: #fff; margin-top: 8px !important; font-family: 'ClearSansBold';}

/*  4. Styles for Greeting section   */
.greeting {position: absolute; top: 267px; left: 50%; color: #fff; width: 100%; margin-left: -50%;}
@media (min-width: 576px) {
    .greeting {top: 240px;}
}
@media (min-width: 768px) {
    .greeting {top: 21em;}
}
.greeting h1 {font-size: 48px; text-align: center; margin: 0; font-family: 'ClearSansBold'}
.greeting small {font-size: 20px; text-align: center; display: block; margin: 0 0 3.5em 0}

@media (min-width: 420px) {
    .greeting h1 {font-size: 36px; padding-bottom: 20px;}
    .greeting small {font-size: 28px; }
}

/*   5. Styles for Services section    */
.service {border: 1px solid #dadada; text-align: center; padding: 40px; margin: 0 0 30px 0;}
.service p {min-height: 150px;}
.service h2 {min-height: 60px; font-family: 'ClearSansBold';}

/*   6. Styles for Benefits section    */
.benefit {padding: 0 0 60px 0;}
.benefit img {margin: 0 30px 0 0;}
.benefit h2 {margin-left: 100px; font-family: 'ClearSansBold';}
.benefit p {margin: 0 0 0 100px;}

/*   7. Styles for Statistics section    */
.stats {text-align: center; color: #fff;}
.stats img {height: 60px;}
.stats h2 {font-size: 2.5em; font-family: 'ClearSansBold'; margin: 0;}
.stats p {font-size: 1.1em; margin: 0;}

/*   8. Styles for Portfolio section    */
.filter {text-align: center; margin: 0 0 30px 0;}
.filter li {display: inline-block;}
.filter li a {color: #757575; font-size: 1.1em; display: block; font-family: 'ClearSansBold';}
.filter li a:hover {color: #212121;}
.filter li a.active {color: #212121; border: 1px solid #fbb02c; border-radius: 4px;}
.project {overflow: hidden; position: relative; margin-bottom: 30px;}
.project img  {height: 100%;}
.project a {display: inline-block; width: 100%; height: 100%; background: #000; color: #fff; text-align: center; top: 0; left: 0; position: absolute; padding: 40px; opacity: 0;}
.project a strong  {display: block; font-size: 2.14em;}
.project a span  {display: block; font-size: 1.28em;}

/*   9. Styles for Team section    */
.member {text-align: center; margin: 0 0 60px 0}
.member h2 {margin-bottom: 0; font-family: 'ClearSansBold';}
.member img  {width: 100%;}
.member small {color: #6b6c6c; font-size: 1em; margin: 0 0 30px 0; display: block; font-family: 'ClearSansItalic';}

/*   10. Styles for Prices section    */
.product {border: 1px solid #f0f0f0; border-radius: 5px; text-align: center; padding: 0 30px; margin: 0 0 60px 0;}
.product h2 {color: #212121; background: #f6f6f6; margin: 0 -30px; padding: 20px 0; font-family: 'ClearSansBold';}
.product p {border-bottom: 1px solid #dddddd; padding: 20px 0; color: #2c2e30;}
.product span  {display: block; font-family: 'ClearSansBold';}
.product a  {margin: 30px 0;}

/*   11. Styles for Reviews section    */
#reviews .item > div {background: url(/i/quote.png) no-repeat 15px 0;}
#reviews .client {overflow: hidden; margin: 20px 0 60px 0;}
#reviews p {color: #0d0d0e; font-size: 1.14em; margin: 0 30px 0 50px;}
#reviews .avatar {width: 60px; height: 60px; border-radius: 50%; border: 3px solid #f1f1f1; margin: 0 30px 0 50px;}
#reviews h3 {color: #0d0d0e; font-size: 1.28em; font-weight: normal; margin-top: 0; font-family: 'ClearSansBold';}
#reviews h3 span {display: block; color: #6b6c6c; font-style: italic; font-size: 0.7em; font-family: 'ClearSansItalic';}
#reviews .carousel-indicators .active {background: #dadada;}
#reviews .carousel-indicators li {border: 2px solid #dadada;}

/*   12. Styles for Stage section    */
.circle {width: 100px; height: 100px; text-align: center; position: relative; background: #fff; border-radius: 50%; line-height: 100px; margin: 0 0 20px 0;}
.circle .bage {width: 30px; height: 30px; line-height: 30px; text-align: center; color: #9b9b9b; position: absolute; top: 5px; right: -5px; border: 2px solid #fbb02c; border-radius: 50%; background: #fff;}
.circle + p {color: #0d0d0e; font-size: 1.14em; margin: 0 0 70px 0;}
.finish {background: #fbb02c;}
.finish .bage {color: #fff; background: #fbb02c;}

/*   13. Styles for Partners section    */
.partner {margin: 0 0 60px 0;}
.partner img {width: 100%;}

/*   14. Styles for Contacts section    */
#contacts p {color: #fff; text-align: center; margin: 0;}
#contacts p:last-child {margin: 0 0 50px 0;}
#contacts img {margin: 0 0 20px 0;}

/*   15. Styles for footer    */
footer {height: 100px; line-height: 100px;}
footer p {margin: 0;}
footer .social {text-align: right;}
footer .social a {margin: 35px 20px 0 0;}

/*   16. Responsive fixes   */
@media screen and (min-width: 768px){
	#carousel-1 .carousel-indicators {bottom: 120px;}
}
@media screen and (max-width: 768px){
	footer, footer .social {text-align: center;}
	.stats {margin: 0 0 30px 0;}
	#statistics {padding: 50px 0;}
}
@media screen and (min-width: 1200px){
	#stages .row {background: url(/i/stages_bg.png) no-repeat 0 250px;}
	.greeting {width: 1170px; margin-left: -585px;}
}
.formAjax .endText {width: 100%; text-align: center; font-size: 25px; color: #ffffff;}
/*.formAjax .errorInput {border-bottom:1px solid red;}*/
@-webkit-keyframes borderanime { 
    from {border-color: #ffffff;} 
    20% {border-color: red;} 
    40% {border-color: #ffffff;} 
    60% {border-color: red;} 
    80% {border-color: #ffffff;} 
    to {border-color: red;} 
} 
@keyframes borderanime { 
    from {border-color: #ffffff;} 
    20% {border-color: red;} 
    40% {border-color: #ffffff;} 
    60% {border-color: red;} 
    80% {border-color: #ffffff;} 
    to {border-color: red;} 
} 
.formAjax .errorInput {-webkit-animation: borderanime 2s 1 ease-in-out;animation: borderanime 2s 1 ease-in-out;}
.pageStatic {padding: 60px 0; background: #f3f3f3; font-size: 18px; color:#333;}
.pageStatic a {color:#fbb02c;}
.pageStatic p {margin: 0 0 20px 0; line-height: 1.5;}
.pageStatic h1.header {text-align: center; margin: 80px 0 55px 0; position: relative; padding: 0 0 30px 0;}
.pageStatic h1.header:before {display: block; width: 30px; height: 3px; position: absolute; left: 50%; bottom: 0; margin: 0 0 0 -15px; background: #fbb02c; content: '';}
.pageStatic .proposal-button {color: #000;}
.pageStatic .content {text-align: justify;}

header {background: #000;}
.videoBg {height: 1000px; z-index: 100;}
.videoBg .video {position: absolute; top:0px; left:0px; width: 100%; height:1000px; background: #000000; overflow:hidden;}
.videoBg .over {position: absolute; top:0px; left:0px; width: 100%; height:1000px;  background: #000000; opacity:0.7;}
.videoBg #vbg {width: 100%; height: 1000px;}
.videoBg #vbg.bg {background: url(/i/171215.mp4_snapshot_00.01.jpg) center top no-repeat;}
.container.greeting {z-index: 200;}

.animationBox {margin-bottom: 30px;}
.animationBox .name {font-size: 18px; width: 100%; color:#585849; margin-bottom: 0px;}
.animationBox .desc {font-size: 14px; width: 100%; color:#585849; margin-bottom: 5px;}
.animationBox .image img {max-width: 100%;}
.animationBox a {color:#585849; text-decoration: none;}
.animationBox a:focus {outline:none; outline-offset:0;}
.animationBox a:hover {text-decoration: none;}

.videoBgAnimation {height: 500px; z-index: 100;}
.videoBgAnimation .video {position: absolute; top:0px; left:0px; width: 100%; height:500px; background: #000000; overflow:hidden;}
.videoBgAnimation .over {position: absolute; top:0px; left:0px; width: 100%; height:500px;  background: #000000; opacity:0.7;}
.videoBgAnimation #vbga {width: 100%; height: 500px;}
.videoBgAnimation #vbga.bg {background: url(/i/170804031.jpg) center top no-repeat;}