/**
 *  ●●●●●●●●●●
 *  Init and resets
 *  ●●●●●●●●●●
 */

html,
body{
  margin:0;
  padding:0;
}
body{
  font-family: 'Open Sans', sans-serif;
  background: #fff;
  font-size: 16px;
}

:focus{
  outline: none
}

._clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

img{
  border:none;
}

ul, ol{
  list-style:none;
}
ul, li, ol{
  margin:0;
  padding:0;
}

h1, h2, h3, h4, h5, h6{
  margin:0;
  padding:0;
  font-weight:normal
}
h1, .h1{
  font-size: 70px;
  font-weight: 700;
  text-align: center;
}
h2, .h2{
  font-size: 40px;
}
h3, .h3{
  font-weight:bold
}

a{
  color:#3d3f9b;
}
a:hover{
  text-decoration: none
}

/**
 *  ●●●●●●●●●●
 *  Icons
 *  ●●●●●●●●●●
 */

.ico::before,
.ico::after{
  font-size: 20px;
  font-family: icons;
  font-style: normal;
}

.ico._money:before { content: "\f11d"; }
.ico._money-1:before { content: "\f102"; }
.ico._money-2:before { content: "\f101"; }
.ico._message:before { content: "\f103"; }
.ico._signature:before { content: "\f104"; }
.ico._interface:before { content: "\f105"; }
.ico._business:before { content: "\f106"; }
.ico._technology-2:before { content: "\f107"; }
.ico._emoticon-square:before { content: "\f108"; }
.ico._cancel:before { content: "\f109"; }
.ico._envelope:before { content: "\f10a"; }
.ico._placeholder:before { content: "\f10d"; }
.ico._placeholder-1:before { content: "\f10c"; }
.ico._placeholder-2:before { content: "\f10b"; }
.ico._done:before { content: "\f10e"; }
.ico._clock:before { content: "\f10f"; }
.ico._dashboard:before { content: "\f110"; }
.ico._phone-in-circle:before { content: "\f111"; }
.ico._file-1:before { content: "\f112"; }
.ico._file:before { content: "\f113"; }
.ico._list:before { content: "\f114"; }
.ico._dollar:before { content: "\f115"; }
.ico._buy:before { content: "\f116"; }
.ico._pc:before { content: "\f117"; }
.ico._transport-3:before { content: "\f118"; }
.ico._transport-2:before { content: "\f119"; }
.ico._transport-1:before { content: "\f11a"; }
.ico._transport:before { content: "\f11b"; }
.ico._handshake:before { content: "\f11c"; }



.ico._blue{
  color: #3d3f9b;
}
.ico._green{
  color: #429b3d;
}
.ico._big::before,
.ico._big::after{
  font-size: 80px;
  line-height: 150px;
}
.ico._normal::before,
.ico._normal::after{
  font-size: 30px;
  vertical-align: middle;
}


.ico-buble{
  width: 150px;
  height: 150px;
  display: block;
  margin: 0 auto;
  background: #fff;
  border-radius: 50%;
  text-align: center;
}
.ico-buble._green{
  background-color: #429b3d;
  color: #fff;
}
.ico-buble._blue{
  background-color: #3d3f9b;
  color: #fff;
}
.ico-buble._white{
  background-color: #fff;/*f7f7f7*/
  color: #3d3f9b;/*3d3f9b*/
}

.location-ico{
  width: 28px;
  vertical-align: middle;
}

/**
 *  ●●●●●●●●●●
 *  Grid
 *  ●●●●●●●●●●
 */
.outer{}
.wrap{
  max-width: 1050px;
  margin: 0 auto;
}

._blue-bg{
  background: #3d3f9b;
  color:#fff;
  text-align: center;
}
._green-bg{
  background: #429b3d;
  color:#fff;
  text-align: center;
}
._violet-bg{
  background: #37398b;
  color:#fff;
}

._white-bg{
  background: #fff;
  /*color:#3d3f9b;*/
}
._grey-bg{
  background: #ececef;
}

.cols{
  padding: 32px 0;
}
.col{}


.col-2{
  float:left;
  width: 50%
}
.col-3{
  float:left;
  width: 31.2%;
  margin-right: 3.2% 
}
.col-3:last-child{
  margin-right: 0;
}

.col-4{
  float:left;
  width: 25%;
  text-align: center;
}
.col-5{
  float:left;
  width: 20%;
  text-align: center;
}
.col-9{
  float: left;
  width: 65.6%
}
.col-12{
  float: left;
  width: 100%;
}

.button{
  padding: 20px 50px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  display: inline-block;
  margin-top: 15px
}

/**
 *  ●●●●●●●●●●
 *  Header
 *  ●●●●●●●●●●
 */

.floating-bar{
  z-index: 5;
  width: 100%;
  padding: 8px;
  position: fixed;
  background: #fff;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity linear 0.2s, visibility 0s 0.4s;
  border-bottom: 2px solid #3d3f9b;
  animation:colorfullBorder 2s;
  -moz-animation:colorfullBorder 2s infinite;
  -webkit-animation:colorfullBorder 2s infinite;
}
.floating-bar._visible{
  visibility: visible;
  opacity: 1;
  transition: opacity linear 0.2s, visibility 0s;
}
.floating-bar .phone__link{}
@-moz-keyframes colorfullBorder {
  0% {border-color:#429b3d;}
  50% {border-color:#3d3f9b;}
  100% {border-color:#429b3d;}
}

@-webkit-keyframes colorfullBorder {
  0% {border-color:#429b3d;}
  50% {border-color:#3d3f9b;}
  100% {border-color:#429b3d;}
}

keyframes colorfullBorder {
  0% {border-color:#429b3d;}
  50% {border-color:#3d3f9b;}
  100% {border-color:#429b3d;}
}
/**
 *  ●●●●●●●●●●
 *  Header
 *  ●●●●●●●●●●
 */
.header{
  padding:32px 0 24px;
}
.header .phone{
  float:right;
  margin-top: 8px;
}
.logo img{
  max-width: 238px;
}
.phone__links{}
.phone__link{
  margin: 0 6px 0 0;
  display: inline-block;
  color:#3d3f9b;
  text-decoration: none;
  font-size: 27px;
  font-weight: 900;
  vertical-align: middle;
}
.phone__link._go2from{
  background: #429b3d;
  border-radius: 5px;
  display: inline-block;
  padding: 6px 12px;
  color: #fff;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  border: 0;
}
.phone__link-pic{
  width: 42px;
  height: 42px;
}

.phone__text{
  margin-top: 5px;
  display: block;
  color:#7f7f7f;
  text-align: center;
}

.phone__link .ico{
  margin-right: 8px;
  color: #429b3d;
  vertical-align: baseline;
  animation:colorfull 2s;
  -moz-animation:colorfull 2s infinite;
  -webkit-animation:colorfull 2s infinite;
}
@-moz-keyframes colorfull {
  0% {color:#429b3d;}
  50% {color:#3d3f9b;}
  100% {color:#429b3d;}
}

@-webkit-keyframes colorfull {
  0% {color:#429b3d;}
  50% {color:#3d3f9b;}
  100% {color:#429b3d;}
}

keyframes colorfull {
  0% {color:#429b3d;}
  50% {color:#3d3f9b;}
  100% {color:#429b3d;}
}


/**
 *  ●●●●●●●●●●
 *  Intro block
 *  ●●●●●●●●●●
 */
._intro{
  padding:0 0 84px 0;
}
._intro._at-bottom{
  padding-bottom: 32px;
}
.go2from{
  text-align:center;
  padding:40px 0;
}
.go2from__btn{
  background: red;
  border-radius: 5px;
  display: inline-block;
  padding: 15px 25px;
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
}

._intro .substring{
  font-size: 27px;
  font-weight: 300;
  text-align: center;
}
._intro .img{
  margin: 52px 0 -191px 123px;
}
._intro .phone{
  text-align: center;
  margin-top: 40px;
  float:right;
  vertical-align: middle;
  margin-bottom: 30px;
  margin-top:75px;
}
._intro .phone a{
  font-size: 26px
}
._intro .text{
  width: 55%;
  float:left;
  margin-top:75px;
}
._intro._at-bottom .text{
  margin-top: 32px
}
._intro .text .title{
  font-size: 26px;
  font-weight: 900;
}

.cars-we-buy{
  padding: 24px 0 8px;
  text-align: center;
}

/**
 *  ●●●●●●●●●●
 *  Callcack block
 *  ●●●●●●●●●●
 */
._callback{
  padding: 145px 0 81px 0
}
.form._call-me{
  margin-top: 32px;
}
.form .substring,
._callback .substring{
  font-size: 26px;
  font-weight: 300;
  margin-bottom: 33px;
}
.form input[type="text"],
.input,
select{
  width: 100%;
  font-size: 17px;
  box-sizing: border-box;
  padding: 20px 30px;
  border-radius: 5px;
  border-color:transparent;
  color:#858585;
}
#gearbox,
select{
  height: 66px;  
}

option{
  padding: 20px 0;
  line-height: 40px;
}
#estimate-me .col-3{
  margin-bottom: 24px;
}
.form .col-3:nth-child(3n){
  margin-right: 0;
}
.form input[type="submit"],
.form .button{
  width: 100%;
  padding: 19px 0;
  margin-top: 0;
  box-sizing: border-box;
  background: red;
  cursor: pointer;
  border-radius: 5px;
  border:none;
  color:#fff;
  font-weight: 700;
  font-size: 22px;
  -webkit-appearance: none;
}
.button[disabled],
.button._file[disabled],
.input._file:hover ~ .button._file[disabled]{
  background: #ececef;
  color: #3d3f9b;
  /*text-decoration: line-through;*/
  cursor: not-allowed;
}

.input._file{
  z-index: 2;
  width: 100%;
  height: 64px;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 162px;
  text-indent: -1871px;
  cursor: pointer;
}
.input[disabled],
.input._file[disabled]{
  cursor: not-allowed;
}

.button._file {
  z-index: 0;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 19px 0;
  background-color: #fbba12;
  border-color: #fbba12;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  -webkit-appearance: none;
}
.input._file:hover ~ .button {
  color: #fff;
  background: #429b3d;
  border-color: #429b3d;
}
.filename {
  display: block;
  margin-top: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input-wrap,
.box__input-wrap{
  position: relative;
  z-index: 1;
}
.box__input-placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  left: 14px;
  top: 0;
  color: #ccc;
  pointer-events: none;
  z-index: -1;
}

._callback .col-4{
  padding-top: 31px;
  position: relative;
}
._callback .col-4:after{
  content: "";
  display: block;
  width: 24px;
  height: 43px;
  background: url(../images/arrow.png) 0 0 no-repeat;
  position: absolute;
  top: 40%;
  margin-top: -22px;
  right: -13px;
}
._callback .col-4:last-child:after{
  display: none
}
._callback .col-4 img{
  margin-bottom: 9px
}

._why{
  padding: 48px 0;
  text-align: center;
}

.caption{
  padding: 12px 0 6px;
  display: inline-block;
  text-align: center;
}
.caption._big{
  font-size: 22px;
}

/**
 *  ●●●●●●●●●●
 *  Documtents block
 *  ●●●●●●●●●●
 */

._documents{
  padding: 80px 0
}
._documents._at-bottom{
  padding-bottom: 32px;
}
._documents h2,
._documents .substring{
  text-align: center;
}
._documents .substring{
  font-size: 26px;
  margin:19px 0 46px 0;
}
._documents img{
  float:right;
}
._documents ul {
  margin-left:70px;
  margin-top:20px;
}
._documents ul li{
  margin-bottom: 15px;
}
.checklist .ico{
  margin-right: 12px;
}
.checklist ._emoticon-square{
  margin-left: 12px;
  margin-right: -12px;
}


/**
 *  ●●●●●●●●●●
 *  Cars block
 *  ●●●●●●●●●●
 */
._cars{
  padding: 72px 0
}
._cars h2{
  text-align: center;
  margin-bottom: 70px
}
.car{
  width: 48%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 80px
}
.car__pics-wrap{
  width: 246px;
  height: 176px;
  display: block;
  float: left;
  position: relative;
}
.car__pic{
  width: 100%;
  height: auto;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  opacity: 0;
}
.car__pic._0{
  opacity: 1;
}

.car__pic._1{ 
  animation:opacityLoop 3s;
  -moz-animation:opacityLoop 3s infinite;
  -webkit-animation:opacityLoop 3s infinite;
}
@-moz-keyframes opacityLoop {
  0% {opacity:0;}
  50% {opacity:1;}
  100% {opacity:0;}
}

@-webkit-keyframes opacityLoop {
  0% {opacity:0;}
  50% {opacity:1;}
  100% {opacity:0;}
}

keyframes opacityLoop {
  0% {opacity:0;}
  50% {opacity:1;}
  100% {opacity:0;}
}
.car__desc{
  margin-left:270px;
}
.car__title{
  font-size: 20px;
  display: block;
  margin-bottom: 10px;
}
.car__price{
  display: block;
}
.car__desc p{
  font-size: 14px;
}

/**
 *  ●●●●●●●●●●
 *  Buy all cars block
 *  ●●●●●●●●●●
 */
._buy-all{
  padding: 80px 0 54px 0;
  text-align: center
}
._buy-all .col-3{
  padding-top: 58px;
  font-size: 20px
}
._buy-all .col-3:last-child{
  margin-right: 0;
}

/**
 *  ●●●●●●●●●●
 *  Benefits and bottom form block
 *  ●●●●●●●●●●
 */
._benefits {
  padding: 72px 0 48px 0;
  text-align: center;
}
._benefits .block{
  margin-bottom: 90px;
}
._benefits .block .col-3{
  padding-top: 58px;
  font-size: 20px
}
._benefits .col-3 .substring{
  font-size: 16px;
}
._benefits .block .col-3:last-child{
  margin-right: 0;
}
._benefits .form {
  margin-bottom: 62px;
}

@media screen and (max-width: 1050px) {
  img{
    max-width: 100%;
  }
  .wrap{
    width: 100%;
    padding:0 20px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 1000px) {
  ._documents ul li {
    margin-bottom: 15px;
    display: flex;
    align-items: baseline;
  }
}
@media screen and (max-width: 900px) {
  ._documents img{
    float:none;
    display: block;
     margin:0 auto;
  }
  .car{
    width: 100%;
    margin-bottom: 32px;
    display: block;
  }
  ._intro .text{
    width: 100%;
  }
  ._intro .phone{
    width: 100%;
    margin-top: 24px;
  }
}
@media screen and (max-width: 768px) {
  .header {
    text-align: center;
  }
  .header .phone {
    width: 100%;
    float: none;
    text-align: center;
    margin-bottom: 18px;
  }
  .header .logo{
    display: inline-block;
  }
  .logo img{
    max-width: 238px;
  }
  ._intro .img{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .col-3,.col-4,.col-5,.col-9{
    float:none;
     text-align: center;
     width: 100%
  }
  .hidden,.col-3 br{
    display: none
  }

  ._why .col-4{
    margin-bottom: 24px;
  }

  ._documents ul{
    margin-left: 24px;
  }

  .price_services .tabs a{
    width: 100%;
     box-sizing: border-box;
     padding: 10px;
  }

  .go2from__btn{
    /*display:block;*/
    border-radius:0;
    border-bottom:1px solid #fff;
  }
  h1, .h1, h2, .h2{
    font-size: 34px
  }
  .col-3{
    margin-bottom: 20px
  }
  .form {
     margin-bottom: 20px;
  }
  ._callback .col-4:after{
    display: none
  }

}
@media screen and (max-width: 640px) {
  ._buy-all,
  ._benefits,
  ._header,
  ._documents,
  ._cars,
  ._why_we{
    padding: 20px 0
  }

  .header .phone{
    float:none;
  }
  .header .logo{
    width: 100%;
    padding: 20px 0 0 0;
    display: block;
    text-align: center;
  }

  .header .phone__link{
    font-size: 24px;
  }
  .header .phone__link._phone-text{
    margin-top: 8px;
  }
  .footer .phone__link{
    display: block;
    font-size: 24px;
    text-align: center;
  }
  ._documents ul{
    margin-left:0;
  }
  .header .phone__text{
    text-align: center;
  }
  ._intro .substring{
    font-size: 30px
  }
  ._benefits .block .col-3,
  ._buy-all .col-3{
    padding-top: 20px
  }

  ._callback{
    padding-bottom: 20px
  }
  ._benefits .block{
    margin-bottom: 20px
  }
  ._benefits .form{
    margin-bottom: 0
  }

  footer._intro{
    padding-bottom: 0;
  }
  ._intro .text{
    width: 100%;
    margin-top: 24px;
  }

}
@media screen and (max-width: 480px) {
  .floating-bar .phone__link._phone-text{
    margin-top: 0;
    font-size: 20px;
  }
  .floating-bar .phone__link-pic{
    width: 32px;
    height: 32px;
  }

  ._intro .img {
    margin: 0px 0 -146px 0px;
  }
  ._callback{
    padding-top: 60px;
  }
  .car{
    margin-bottom: 24px;
  }
  .car__pics-wrap{
    height: 156px;
    margin: 0 auto;
    float: none;
  }
  .car__title{}
  .car__pic{
    float: none;
    width: 100%;
  }
  .car__desc{
    margin-left:0;
  }

  ._intro h1,
  ._intro .substring{
    font-size: 25px;
  }
}