/*
Theme Name: Miranda-Shop
Author: mr.Ivan
Author URI: mailto:DownHouse2012@gmail.com
*/
@import url('bootstrap/css/bootstrap.min.css');
@import url('bootstrap/css/bootstrap-grid.min.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800');
/*font-family: 'Open Sans', sans-serif;*/
/*********************************/
body {
    font: 16px/30px 'Open Sans', sans-serif;
    width: 100%;
    color: #4D525B;
    margin:0;
}
*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
a{
    color: #FF3A39;
    text-decoration: underline;
    outline: none;
}
a:hover{
    text-decoration: none;
    color: #000;
}
a,
a:hover,
a img,
a:hover img{
    transition: all 300ms;
}
a:hover img{
    filter: brightness(1.1);
}
p{
    margin: 0 0 18px;
}
img{
    max-width: 100%;
    height: auto;
}
strong{
    font-weight: 600;
    line-height: 100%;
}
.clear{clear:both;}
label{display: block}
h1, h2, h3, h4, h5, h6{
    margin: 20px 0 20px;
    font-weight: bold;
}
h1{font-size:30px;}
h2{font-size:20px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5{font-size:14px;}
h6{font-size:12px;}


.container{position: relative}
@media (min-width: 1200px) {
    body .container {
        max-width: 1190px;
    }
    .cont-phone {
        font-size: 18px;
    }

}

.section{
    min-height: 100vh;
    position: relative;
}
.spacer{
    height: 50px;
    padding: 0 !important;
    margin: 0 !important;
}

/* section 1
****************************************************/
.s1{
    /*padding: 70px 0;*/
    background: url("images/s1-bg.jpg") 50% 0 no-repeat;
    z-index: 2;
}
.logo{
    margin-bottom: 100px;
}
.s1 h1{
    position: relative;
    font-size: 42px;
    font-weight: 800;
    color: #31363F;
    padding-bottom: 40px;
    margin-bottom: 40px;
}
.s1 h1:after{
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    content: '';
    border-bottom: 2px solid #FF0000;
    width: 620px;
}
.s1 h1:before{
    box-sizing: content-box;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 620px;
    content: '';
    background: #FF4141;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 20px solid rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.48);
    transform: translate(0, 50%);
}
.s1 h1 span{
    color: #FF3636;
}
.s1 h1 span span{
    display: inline-block;
    margin-top: 30px;
    font-size: 36px;
    font-weight: 600;
    color: #31363F;
}
.s1 .desc{

}

.btn{
    display: inline-block;
    background: #FF3636;
    color: #fff;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    min-width: 180px;
    padding: 0 15px;
    line-height: 60px;
    white-space: nowrap;
    border-radius: 30px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
}
.btn:active,
.btn:hover {
    color: #000;
    background: #ff4843;
}

.s1-1,
.s1-2{
    text-align: center;
    width: 193px;
    text-transform: uppercase;
    position: absolute; z-index: 2;
}
.s1-1{
    top: 230px;
    right: 0;
}
.s1-2{
    right: 170px;
    top: 430px;
}
.s1-1,
.s1-2 img{
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));

}

/************************/
.counter-wrap{
    background: #FF4949;
    text-align: center;
    width: 360px;
    border-radius: 25px;
    display: inline-block;
}
.counter-wrap span{
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    line-height: 36px;
}
.counter{
    background: #373C46;
    border-radius: 25px;
    height: 83px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
}
.counter:before{
    position: absolute; z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50%;
    content: '';
    background: rgba(0, 0, 0, 0.2);
    border-radius: 25px 25px 0 0;
}
.xdsoft_flipcountdown.xdsoft_size_md >.xdsoft_digit:nth-last-child(3n+1){
    margin-left: 10px;
}
.xdsoft_flipcountdown.xdsoft_size_md >.xdsoft_digit:nth-last-child(3n+1):before{
    position: absolute;
    z-index: 1;
    top: 50%;
    left: -10px;
    content: '•';
    color: #fff;
    font-size: 22px;
    transform: translate(0,-52%);
}
.toVideo{
    color: #FF4141;
    text-decoration: none;
    display: inline-block;
    background: url("images/ico-video.png") 100% 50% no-repeat;
    padding-right: 28px;
}

/* section 2
****************************************************/
.s2{
    background: #31363F;
    /*padding-top: 80px;*/
    /*padding-bottom: 80px;*/
    position: relative;
}
.s2:before{
    content: '';
    background: url("images/caps-float.png ") no-repeat;
    width: 374px;
    height: 509px;
    position: absolute; z-index: 2;
    bottom: 85%;
    left: -150px;
}
.s2 .title{
    text-align: center;
    font-size: 100px;
    color: #3E4450;
}
.feat-row{
    background: url("images/feat-bg.png") 50% 140px no-repeat;
    margin-top: -70px;
}
.feat-wrap{
    display: flex;
    justify-content: space-between;
    margin-bottom: 55px;
    padding: 0 105px;
}
.feat-wrap:nth-child(2) {
    padding: 0 15px;
}
.feat-wrap:nth-child(3) {
    margin-bottom: 0;
}
.feat-item{
    text-transform: uppercase;
    color: #fff;
    font-size: 15px;
    text-align: center;
    max-width: 233px;
    line-height: 150%;
}
.feat-img-wrap{
    text-align: center;
    line-height: 165px;
    width: 165px;
    height: 165px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: rgba(49, 54, 63, 0.49);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);

}
.feat-img-wrap img{

}


/* section 3
****************************************************/
.s3{
    position: relative;
    z-index: 2;
    /*padding-top: 80px;*/
    /*padding-bottom: 80px;*/
    background: #E3E9F1 url("images/s3-bg.png") 50% 50% no-repeat;
}
.s3:before{
    content: '';
    background: url("images/caps-float.png ") no-repeat;
    width: 374px;
    height: 509px;
    position: absolute; z-index: 0;
    bottom: 85%;
    right: -100px;
}
.play-ico img{
    display: block;
    border-radius: 30px;
}
.play-ico{
    position: relative;
    display: block;
}
.play-ico:before{
    position: absolute; z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    content: 'Смотреть видео';
    background: url("images/ico-play.png") 50% 0 no-repeat;
    color: #fff;
    max-width: 100px;
    text-align: center;
    padding-top: 75px;
    line-height: 120%;
}
.play-ico:hover:before{
    filter: invert(1);
}
/**************************/
.car-title{
    font-size: 36px;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 35px;
}
.owl-item{}
.owl-item > div{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.owl-item a{
    display: block;
    margin-bottom: 40px;
}
.owl-item a img{
    display: block;
    border-radius: 30px;

}
.controls{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-bottom: 50px;
}
.controls button{
    outline: none;
    border: 0;
    background: none;
    font-size: 60px;
    font-family: 'Open Sans';
    font-weight: 300;
    color: #667;
    cursor: pointer;
    padding: 0 10px;
    vertical-align: bottom;
}
.controls button:hover{
    color: #FF4747;
}
.controls button.disabled{
    color: #aaa !important;
    cursor: auto;
}

/* section 4
****************************************************/
.s4{
    /*padding-top: 80px;*/
    /*padding-bottom: 80px;*/
    background: #F7FAFF;
}
.title{
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    line-height: 120%;
}

.controls-2{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-bottom: 50px;
}
.controls-2 button{
    outline: none;
    border: 0;
    background: none;
    font-size: 60px;
    font-family: 'Open Sans';
    font-weight: 300;
    color: #667;
    cursor: pointer;
    padding: 0 10px;
    vertical-align: bottom;
}
.controls-2 button:hover{
    color: #FF4747;
}
.controls-2 button.disabled{
    color: #aaa !important;
    cursor: auto;
}

/* section 5
****************************************************/
.s5{
    position: relative;
    /*padding-top: 80px;*/
    /*padding-bottom: 80px;*/
    background: #31363F;
    color: #fff;
    z-index: 1;
}
.s5:before{
    content: '';
    background: url("images/caps-float.png ") no-repeat;
    width: 374px;
    height: 509px;
    position: absolute; z-index: 0;
    top: -100px;
    left: 150px;
}
.map-link{
    display: block;
}
.map-link img{
    display: block;
    border-radius: 30px;
    box-shadow: 0 5px 50px rgba(0, 0, 0, 0.25);
}


/* section 6
****************************************************/
.s6{
    background: #FFFFFF url("images/s6-bg.png") 50% 50% no-repeat;
    /*padding-top: 80px;*/
    /*padding-bottom: 80px;*/
    z-index: 0;
}

/* form
****************************************************/
.form-wrap{
    padding: 20px;
    border-radius: 30px;
}
::-webkit-input-placeholder {color:#A4AEBC;}
::-moz-placeholder          {color:#A4AEBC;}
:-moz-placeholder           {color:#A4AEBC;}
:-ms-input-placeholder      {color:#A4AEBC;}
.form-wrap input:not([type='checkbox']):not([type='submit']){
    border: 0;
    padding: 8px 10px 7px 29px;
    height: 58px;
    border-radius: 29px;
    width: 100%;
    color: #000;
    display: block;
    margin-bottom: 30px;
    font-size: 18px;
    outline: none;

    background: #f5f7fa;
    background: -moz-linear-gradient(45deg,  #f5f7fa 0%, #ffffff 100%);
    background: -webkit-linear-gradient(45deg,  #f5f7fa 0%,#ffffff 100%);
    background: linear-gradient(45deg,  #f5f7fa 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f7fa', endColorstr='#ffffff',GradientType=1 );

}
.form-wrap textarea {
    border: 0;
    padding: 8px 10px 7px 29px;
    height: 220px;
    border-radius: 29px;
    width: 100%;
    color: #000;
    display: block;
    margin-bottom: 20px;
    font-size: 18px;
    outline: none;

    background: #f5f7fa;
    background: -moz-linear-gradient(45deg,  #f5f7fa 0%, #ffffff 100%);
    background: -webkit-linear-gradient(45deg,  #f5f7fa 0%,#ffffff 100%);
    background: linear-gradient(45deg,  #f5f7fa 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f7fa', endColorstr='#ffffff',GradientType=1 );

}
.form-wrap label {
    /*margin: 8px;*/
}
.form-wrap br {
    /*display: none;*/
}
.form-wrap p {
    margin: 0;
}
.form-wrap input:focus,
.form-wrap textarea:focus, .form-wrap textarea:active {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.400);
}
.form-wrap input:active, .form-wrap input:focus {
    /*border-color: #E63C24;*/
    outline: none;
}
.form-wrap input[type=submit]:hover {
    /*color: #fff;*/
    /*text-decoration: none;*/
    /*background: #fff;*/
}
.form-wrap input[type=submit]:active {
    /*transform: translate(3px, 3px);*/
}
.form-wrap input[type=submit] {
    position: relative;
    z-index: 5;
}
.acc{
    cursor: pointer;
    font-size: 14px;
    vertical-align: top;
}
.acc input[type=checkbox] {
    display: inline-block;
    margin-right: 12px;
    margin-left: 5px;
}

.form-wrap.second-check{
    background: rgba(164, 174, 188, 0.52);
}

/*******************************/
.cont-map-wrap{
    font-size: 15px;
    color: #333;
    line-height: 150%;
    padding: 38px;
    border-radius: 30px;
    background: #f5f7fa;
    background: -moz-linear-gradient(45deg,  #f5f7fa 0%, #ffffff 100%);
    background: -webkit-linear-gradient(45deg,  #f5f7fa 0%,#ffffff 100%);
    background: linear-gradient(45deg,  #f5f7fa 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f7fa', endColorstr='#ffffff',GradientType=1 );
}
.cont-phone{
    font-size: 30px;
}

.s6-btn-wrap{
    text-align: left;
}
.s6-captcha-wrap{
    text-align: right;
}

.share{
    text-align: right;
    color: #949daa;
}
.share a{
    display: inline-block;
    margin-left: 17px;
}

/* order
****************************************************/
.order-form{
    color: #FCFFFF;
}
.hl{
    font-size: 24px;
    color: #F2F3F5;
    font-weight: 400;
    text-align: left;
    margin-top: 0;
    margin-bottom: 60px;
}
.hl span{
    color: #FF3D3D;
}
.plus, .minus {
    width: 38px;
    height: 38px;
    display: inline-block;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    background: #E4EBF3;
    font-size: 30px;
    color: #000;
    vertical-align: top;
}
.plus:hover, .minus:hover {
    background: #FF3D3D;
    color: #fff;
}
.plus:active, .minus:active {
    background: #b82c2c;
    color: #fff;
}
.plus{
    position: absolute; z-index: 1;
    top: 10px;
    right: 10px;
}
.minus{
    position: absolute; z-index: 1;
    top: 10px;
    left: 10px;
    line-height: 33px;
}
.order-form input::-webkit-outer-spin-button,
.order-form input::-webkit-inner-spin-button {
     display: none;
    -webkit-appearance: none;
    margin: 0;
}
.order-form input[type="number"] {
    -moz-appearance: textfield;
}
body .order-form input[type=number]{
    display: inline-block !important;
    text-align: center;
    padding: 0 50px !important;
    margin-bottom: 0 !important;
}

.btn-wrap{
    text-align: left;
}
.captcha-wrap{
    text-align: right;
}
.procent{
    font-size: 65px;
    font-weight: 800;
    color: #FF3D3D;
    line-height: 90%;
}
#sum{
    font-size: 24px;
    color: #FF3D3D;
    font-weight: 800;
}
#sum + span{
    color: #FF3D3D;
    font-size: 16px;
    font-weight: 400;
}
.order-form .acc{
    font-size: 12px;
    text-align: center;
    line-height: 140%;
    padding: 0 50px;
}
body .fancybox-slide--html .fancybox-close-small {
    color: currentColor;
    padding: 0;
    right: 0;
    top: 0;
}
body .fancybox-button svg {
    display: block;
    height: 100%;
    overflow: visible;
    position: relative;
    width: 100%;
}
/**************/
.order-form.form-wrap{
    padding: 0;
}
.order-form .file{}
.order-form .file input[type=file]{
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}
.order-form .file input[type=text]{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
    background: #fff url("images/ico-file.png") calc(100% - 25px) 50% no-repeat;
}
#order .success {
    color: #fff;
}
#order .error{
    color: #ff0000;
}
h4.hl{
    font-size: 24px;
    color: #F2F3F5;
    font-weight: 400;
    text-align: left;
    margin-top: 0;
    margin-bottom: 20px;
}
h4.hl span{
    color: #FF3D3D;
}

/**************************/
#scene3,
#scene2,
#scene{
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    /*left: 0;*/
    /*bottom: 0;*/
    overflow: hidden;
    width: 100%;
    height: 1200px;

}
#scene2{
    height: 1400px;
}
#scene3{
    height: 1400px;
    padding-bottom: 100px;
    z-index: 0;
}
.p{
    position: absolute;
    width: 100%;
    height: 100%;
}
.p img{
    position: absolute;
}
.p1 img{top: 50px; left: -150px}
.p2 img{bottom: 100px; right: -150px;}
.p3 img{top: 200px; left: 37%}
.p4 img{top: 230px; right: 27%}
.p5 img{top: 200px; right: 22%}

.p21 img{top: 55%; right: 0}
.p22 img{top: 35%; left: -350px}

.p32 img{bottom: 0; right: -150px}

/************************************/
body #fp-nav.fp-right {
    right: 0;
    margin-right: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 30px 0 0 30px;
    padding: 5px 10px 15px 10px;
}
/*body #fp-nav ul,*/
/*body .fp-slidesNav ul {*/
    /*display: inline-block;*/
    /*margin: 0;*/
    /*padding: 0;*/
/*}*/
body #fp-nav ul li,
body .fp-slidesNav ul li {
    /*display: inline-block;*/
    width: 14px;
    height: 13px;
    margin: 7px;
    position: relative;
}
body #fp-nav ul li a,
body .fp-slidesNav ul li a {
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
body #fp-nav ul li a span,
body .fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #5a5a5a;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.fp-scroller{
    transition: all 0.5s ease !important;
}
/*********/
.anim{
    opacity: 0;
}
.anim.animated{
    opacity: 1;
}

/* footer
****************************************************/
.footer{
    background: #31363F;
    padding: 22px 0;
    margin-top: 80px;
    font-size: 12px;
    line-height: 120%;
    color: #8C95A2;
    margin-bottom: 0;
}
.footer a{
    font-size: 12px;
    color: #8C95A2;
}
.footer p{

}
.f3{
    font-size: 17px;
}
.s6 .fp-tableCell{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.footer{}



/* responsive
****************************************************
/**************************************************/
#pull{
    display: none;
}

@media only screen and (max-width: 1600px) {
    .s2:before{display: none}
}
@media only screen and (max-width: 1200px) {
    .s1:before,
    .s2:before,
    .s3:before,
    .s4:before,
    .s5:before,
    .s6:before{
        display: none;
    }
    .p img{
        transform: scale(.8);
    }
    .p1, .p2, .p4{
        display: none !important;
    }
    .s1-1 {
        position: static;
        margin: 0 0 auto 0;
    }
    .s1-2 {
        position: static;
    }
    .cont-phone {
        font-size: 22px;
    }

}
@media only screen and (max-width: 992px) {

    .p32{display: none !important;}

    .s1 h1:after{
        width: 420px;
    }
    .s1 h1:before{
        left: 420px;
        border: 20px solid rgb(240, 240, 240);
        box-shadow: 0 0 0 10px rgb(248, 248, 248);
    }
    .s2 .title {
        font-size: 76px;
    }
    .feat-row {
        margin-top: 15px;
        background: none;
    }
    .feat-wrap:nth-child(2) {
        padding: 0 15px;
    }
    .feat-wrap {
          display: flex;
          justify-content: space-around;
          margin-bottom: 55px;
          padding: 0 15px;
      }
    .car-title {
        font-size: 26px;
    }

    .f4{
        text-align: center;
        margin-top: 30px;
    }
    .counter-wrap {
        width: 100%;
    }

}
@media only screen and (max-width: 767px) {

    .logo{
        text-align: center;
        background: rgba(255, 255, 255, 0.6);
        padding: 20px 0;
        margin-bottom: 50px;
        border-radius: 30px;
    }
    .s1 .btn{
        max-width: none;
        width: 100%;
    }
    .s1 h1:after{
        width: 250px;
    }
    .s1 h1:before{
        left: 250px;
        border: 20px solid rgb(240, 240, 240);
        box-shadow: 0 0 0 10px rgb(248, 248, 248);
    }
    .for-wrap{
        flex-flow: row nowrap !important;
        justify-content: space-around !important;
        align-items: flex-start !important;
    }
    .s1-1 {
        margin: 15px 0;
        width: 45%;
        font-size: 14px;
        line-height: 130%;
    }
    .s1-2 {
        width: 45%;
        margin: 15px 0;
        font-size: 14px;
        line-height: 130%;
    }
    .s1-1 img, .s2-2 img{
        display: block;
        margin: 0 auto;
    }
    .row-mb-sm > div{
        margin-bottom: 25px;
        text-align: center;
    }
    .s2 .title {
        font-size: 37px;
    }
    .feat-item {
        font-size: 15px;
        max-width: 48%;
        line-height: 150%;
    }
    .car-title {
        text-align: center;
        margin-top: 30px;
        font-size: 22px;
    }
    .controls-2,
    .controls{
        display: none;
    }
    .f1,.f2,.f3,.f4{
        text-align: center;
        margin-bottom: 20px;
    }
    .cont-phone {
        margin-top: 15px;
    }
    .s6-btn-wrap,
    .btn-wrap{
        text-align: center;
        order: 2;
    }
    .s6-captcha-wrap,
    .captcha-wrap{
        margin-bottom: 15px;;
        text-align: center;
        order: 1;
    }


}
@media only screen and (max-width: 576px) {
    .feat-wrap{
        width: 100%;
        flex-flow: column nowrap;
        margin-bottom: 0;
    }
    .feat-item {
        display: block;
        font-size: 15px;
        max-width: none;
        width: 100%;
        line-height: 150%;
        margin-bottom: 30px;
    }
}