/*          ALL         */



:-placeholder	{ color:#c5c5c5; }
::-placeholder	{ color:#c5c5c5; }
:-input-placeholder	{ color:#c5c5c5; }
::-input-placeholder	{ color:#c5c5c5; }
input:-placeholder { color:#c5c5c5; }
input::-placeholder { color:#c5c5c5; }
textarea:-placeholder { color:#c5c5c5; }
textarea::-placeholder { color:#c5c5c5; }


::-webkit-input-placeholder	{ color:#c5c5c5; }

:-moz-placeholder { color:#c5c5c5; }
::-moz-placeholder { color:#c5c5c5; }
input:-moz-placeholder { color:#c5c5c5; }
input::-moz-placeholder { color:#c5c5c5; }
textarea:-moz-placeholder { color:#c5c5c5; }
textarea::-moz-placeholder { color:#c5c5c5; }


input:-ms-placeholder { color:#c5c5c5!important; }
input::-ms-placeholder { color:#c5c5c5!important; }
textarea:-ms-placeholder { color:#c5c5c5; }
textarea::-ms-placeholder { color:#c5c5c5; }
::-ms-input-placeholder	{ color:#c5c5c5; }
:-ms-input-placeholder	{ color:#c5c5c5; }
input:-ms-input-placeholder { color:#c5c5c5!important; }
input::-ms-input-placeholder { color:#c5c5c5!important; }


html, body {
    background: #f3f2ed;
}

body {
    color: #323232;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
}

.container{
    width: 1170px;
    position: relative;
}

li>.container{
    padding:80px 0 100px;
}


a {
    color: #3db2e6;
    outline: none!important;
}

a:hover {
    outline: none;
    text-decoration: none;
}

sup{
    font-size: 14px;
}

.button{
    display: inline-block;
    text-decoration: none;
    width: 196px;
    height: 36px;
    line-height: 36px;
    border:2px solid #3db2e6;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    outline: none!important;

    -webkit-transition: background 100ms ease-in;
    -moz-transition: background 100ms ease-in;
    -o-transition: background 100ms ease-in;
    -ms-transition: background 100ms ease-in;
    transition: background 100ms ease-in;
}

.button:not(.button_blue){
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

a.button:focus{
    outline: 0!important;
}

.button:hover{
    background: #3db2e6;
    border-color: #3db2e6;
    color: #fff;

    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

.button.disabled{
    background: #9b9b9b;
    border-color: #9b9b9b;
    color: #dadada;
}

.button_blue{
    background: #3db2e6;
    color: #fff;
}

.button_blue:hover{
    background: #58c4f3;
    border-color:#58c4f3;
}

input[type="text"].disabled,input[type="text"].disabled:focus{
    background-color: #f5f5f5!important;
    border-color: #e9e9e9!important;
    color: #e9e9e9!important;
    opacity: .8;
}

.anime{
    visibility: hidden;
}

.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight {
    visibility: visible;
}

.delay-5s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-10s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay-15s { animation-delay: 1.5s; -webkit-animation-delay: 1.5s; }

.delay-3s { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
.delay-6s { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; }
.delay-9s { animation-delay: 0.9s; -webkit-animation-delay: 0.9s; }

/*      ALL_HEADER      */


#totop{
    position: fixed;
    right: -35px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    line-height: 45px;
    font-size: 30px;
    z-index: 1000;
    background: rgba(255,255,255,.35);
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    opacity: 0;
}

#totop:hover{
    background: #3db2e6;
}

#totop.active{
    opacity: 1;
    right: 35px;

}

header{
    height: 96px;
    padding: 32px 0;
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
    z-index: 1000;
    background: rgba(255,255,255,.9);
}

a.logo{
    display: block;
    width:245px;
    height: 58px;
    position: relative;
    overflow: hidden;
    text-indent: -1000px;
    float: left;
    background: url(../img/logo_header.png) no-repeat;
    margin:28px 155px 10px 0;
}
/*
@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-device-pixel-ratio: 2) {
    a.logo{
        background-image: url(../img/logo@x2.png);
        background-size: 254px 60px; !* downscaled 50%, size of original sprite *!
    }
}*/

address{
    display: block;
    color:#9b9b9b;
    height: 56px;
    font-size: 12px;
    font-style: normal;
}

address>strong{
    display: block;
    font-size: 20px;
    /*font-weight:normal;*/
}


nav{
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    height: 40px;
}

nav a{
    display: inline-block;
    line-height: 40px;
    /*margin-right:35px;*/
    margin-right:30px;
}

nav a:hover,nav a.selected{
    text-decoration: none;
}

header .button{
    display: block;
    float: right;
}


/*      INDEX_START         */


#start{
    height: 800px;
    background: url(../img/start_bg.jpg) no-repeat center;
    background-size:cover;
    padding: 0;
    position: relative;
}

#start .container{
    padding: 270px 0 0 0;
    text-align: center;
}

h1{
    text-align: center;
    font-weight: normal;
    font-size:50px;
    line-height: 1.2em;
}

#start .button_blue{
    display: block;
    margin:50px auto;
    width: 396px;
    height:56px;
    line-height:56px;
    font-size: 18px;
}

div.promo{
    text-align: center;
    font-size: 0;
}

div.promo a{
    display: inline-block;
    vertical-align: middle;
    width:330px;
    height: 60px;
    padding: 20px;
    background: rgba(255,255,255,.85);
    color: #3db2e6;
    font-size: 16px;
    margin-right:30px;
    text-decoration: none;
    text-align: left;
    line-height: 60px;
    overflow: hidden;

    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
/*
    border:2px dashed #3db2e6;
    width:326px;*/
}

div.promo a span{
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
    width: 255px;
    /*margin-left: 80px;*/
}

div.promo a:last-child{
    margin: 0;
}

#start div.promo{
    margin-top:170px;
}

div.promo a:hover{
   /* border:2px dashed #3db2e6;
    padding: 18px;
    background: #fff;

    border:2px dashed #fff;
*/
    /*border:2px dashed #fff;*/

    background:  #3db2e6;
    background:  rgba(83,178,233,.85);
    color: #fff;
    padding: 16px 20px 24px;

    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

div.promo a i{
    width:55px;
    color: #4a4a4a;
    float: left;
    margin-right: 20px;
}


/*      SERVICES_START         */

#start.short{
    height: 440px;
}

.body_auto #start.short{
    background-image: url(../img/services/bg1.jpg);
}

.body_container #start.short{
    background-image: url(../img/services/bg2.jpg);
}

.body_worldwide #start.short{
    background-image: url(../img/services/bg3.jpg);
}

.body_air #start.short{
    background-image: url(../img/services/bg4.jpg);
}

.body_multimodal #start.short{
    background-image: url(../img/services/bg5.jpg);
}

.body_warehouse #start.short{
    background-image: url(../img/services/bg6.jpg);
}
.body_mixed #start.short{
    background-image: url(../img/services/bg7.jpg);
}

.body_liquid #start.short{
    background-image: url(../img/services/bg8.jpg);
}

.body_huge #start.short{
    background-image: url(../img/services/bg9.jpg);
}
.body_ensurance #start.short{
    background-image: url(../img/services/bg10.jpg);
}

.body_customs #start.short{
    background-image: url(../img/services/bg11.jpg?v1);
}

.body_rigging #start.short{
    background-image: url(../img/services/bg12.jpg);
}


#start .container{
    height: 220px;
    padding-top:220px;
}

#start.short a{
    font-size: 16px;
    color: #fff;
    margin-bottom: 50px;
    display: block;
}

#text .button_blue{
    float: right;
    width: 296px;
    height: 76px;
    line-height: 76px;
    font-size:20px;
}

#text article{
    width:770px;
    margin-right:400px;
    text-align: justify;
}

#text article p:first-child{
    margin-top: 0;
}

#text article p:last-child{
    margin-bottom: 0;
}

.button.fixed{
    display: block;
    position: fixed;
    top:80px;
    /*left: 0;*/
    margin-left: 870px;
}

/*      INDEX_SERVICES         */

#services{
    text-align: center;
}

h2{
    color:#4a4a4a;
    text-align: center;
    font-size: 50px;
    margin-bottom: 40px;
}

#services ul{
    width:1200px;
    overflow: hidden;
    padding: 0;
    max-height: 460px;

    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
}

#services .expanded ul{
    max-height: 1000px;
    /*margin-bottom: -30px;*/

    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    -ms-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
}

#services ul li{
    display: block;
    float: left;
    width: 370px;
    height: 200px;
    margin:0 30px 30px 0;
    background: url(../img/services/thumb1.jpg) no-repeat center;
    background-size: 100%;


    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}


#services ul li:hover{
    background-size: 120%;

    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}


#services ul li a{
    position: relative;
    display: table-cell;
    width: 370px;
    height: 180px;
    padding-bottom: 20px;
    text-decoration: none;
    vertical-align: bottom;
    color: #fff;
    text-align: center;

    background: -webkit-linear-gradient(bottom, rgba(0,0,0,.9), rgba(0,0,0,0) 35%, rgba(0,0,0,0));
    background: -moz-linear-gradient(bottom,  rgba(0,0,0,.9), rgba(0,0,0,0) 35%, rgba(0,0,0,0));
    background: -ms-linear-gradient(bottom,  rgba(0,0,0,.9), rgba(0,0,0,0) 35%, rgba(0,0,0,0));
    background: -o-linear-gradient(bottom,  rgba(0,0,0,.9), rgba(0,0,0,0) 35%, rgba(0,0,0,0));
    background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0) 35%, rgba(0,0,0,0));


}

#services .expanded .button{
    overflow: hidden;
    text-indent: -1000px;
   /* opacity: 0;
    height:0;
    overflow: hidden;
    border:0;

    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    transition: all 100ms ease-in;*/
}


#services .expanded .button:before{
    content: 'Свернуть';
    display: block;
    margin:0 auto;
    text-indent:0;
}

#services ul li a:after{
    content: '';
    display: block;
    width:358px;
    height:188px;
    position: absolute;
    top:0;
    left:0;
    border:6px solid rgba(61,178,2631,.5);
    opacity: 0;

    -webkit-transition: opacity 100ms ease-in;
    -moz-transition: opacity 100ms ease-in;
    -o-transition: opacity 100ms ease-in;
    -ms-transition: opacity 100ms ease-in;
    transition: opacity 100ms ease-in;
}

#services ul li a:hover:after{
    opacity: 1;

    -webkit-transition: opacity 100ms ease-in;
    -moz-transition: opacity 100ms ease-in;
    -o-transition: opacity 100ms ease-in;
    -ms-transition: opacity 100ms ease-in;
    transition: opacity 100ms ease-in;
}

#services ul li.auto{
    background-image: url(../img/services/thumb1.jpg);
}

#services ul li.container{
    background-image: url(../img/services/thumb2.jpg);
}

#services ul li.worldwide{
    background-image: url(../img/services/thumb3.jpg);
}

#services ul li.air{
    background-image: url(../img/services/thumb4.jpg);
}

#services ul li.multimodal{
    background-image: url(../img/services/thumb5.jpg);
}

#services ul li.warehouse{
    background-image: url(../img/services/thumb6.jpg);
}
#services ul li.mixed{
    background-image: url(../img/services/thumb7.jpg);
}

#services ul li.liquid{
    background-image: url(../img/services/thumb8.jpg);
}

#services ul li.huge{
    background-image: url(../img/services/thumb9.jpg);
}
#services ul li.ensurance{
    background-image: url(../img/services/thumb10.jpg);
}

#services ul li.customs{
    background-image: url(../img/services/thumb11.jpg?v1);
}

#services ul li.rigging{
    background-image: url(../img/services/thumb12.jpg);
}

/*      INDEX_ABOUT         */

#about{
    min-height: 820px;
    background: url(../img/about_bg.jpg) no-repeat center fixed;
    background-size:cover;
    padding: 0;
    position: relative;
    color: #fff;
}

#about .container{
    width: 774px;
    padding-bottom: 80px;
}

#about h2{
    color: #fff;
}

div.perfectos{
    /*overflow: hidden;*/
    margin:60px 0;
    height: 174px;
}

div.perfectos>div{
    width:170px;
    height: 170px;
    border:2px solid #fff;
    border-radius: 170px;
    -moz-border-radius: 170px;
    -webkit-border-radius: 170px;
    text-align: center;
    background: rgba(255,255,255,.3);
    float: left;
    margin-right:26px;
    line-height: 1em;
}

div.perfectos>div:last-child{
    margin:0;
}

div.perfectos>div strong{
    display: block;
    font-size: 50px;
    margin-top:30px;
    font-weight: normal;
    line-height: 1.2em;
}

#about p,article p{
    /*text-align: center;*/
    line-height: 1.6em;
    margin: 30px 0 0 0;
    text-indent: 40px;
    text-align: justify;
}

#about article{
    overflow: hidden;
    max-height: 0;
    text-align: left;

    -webkit-transition: max-height 300ms ease-in;
    -moz-transition: max-height 300ms ease-in;
    -o-transition: max-height 300ms ease-in;
    -ms-transition: max-height 300ms ease-in;
    transition: max-height 300ms ease-in;
}

#about.expanded article{
    max-height: 1000px;

    -webkit-transition: max-height 300ms ease-in;
    -moz-transition: max-height 300ms ease-in;
    -o-transition: max-height 300ms ease-in;
    -ms-transition: max-height 300ms ease-in;
    transition: max-height 300ms ease-in;
}

#about a.more_link{
    /*color: #fff;*/
    white-space: nowrap;
}

#about.expanded >section>p>a.more_link{
    visibility: hidden;
}

h4{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin:30px 0 0 0;
    color: #3db2e6;
}

ul.text{
    padding-left: 20px;
}

ul.text li{
    position: relative;
    list-style-type: none;
    margin:5px 0;
}


ul.text li:before{
    content: '';
    background: #3db2e6;
    font-size: 40px;
    position: absolute;
    width: 8px;
    height: 8px;
    left: -20px;
    top: 9px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}


/*      INDEX_PROMO         */

#promo{
    height: 400px;
    background: url(../img/map_bg.png) repeat-x center;
    background-size:cover;
}

#promo .container{
    padding: 150px 0;
}

/*      INDEX_DOCS         */

#documents{
    height: 550px;
    background: url(../img/docs_bg.jpg) no-repeat center fixed;
    background-size:cover;
    text-align: center;
}

#documents h2{
    color:#fff;
}

#documents a{
    display:inline-block;
    width: 250px;
    height: 50px;
    padding-top:150px;
    margin:50px 25px;
    background: url(../img/icon-document.png) no-repeat center top;
    color: #b6b6b6;
    font-size:12px;
    text-decoration: none;
    vertical-align: top;
}

#documents a span{
    text-decoration: underline;
    display: block;
    margin-bottom:10px;
    font-size:18px;
    color:#fff;
}

#documents a:hover span{
    text-decoration: none;
}


/*      INDEX_CONTACTS         */

#contacts{
    font-size: 16px;
}

#contacts h2{
    margin-bottom: 80px;
}

#gmap{
    width: 560px;
    height: 390px;
    border:5px solid #fff;
    float:right;
}

#contacts table{
    margin:10px 0 40px;
}

#contacts table td,#contacts table th{
    padding: 5px;
    vertical-align: top;
    line-height: 1.4em;
}

#contacts table th{
    color: #a4a097;
    font-weight: normal;
    padding-right:40px;
}

#contacts table tr:first-child td{
    padding-bottom: 30px;
}

/*      FOOTER         */

footer{
    height: 77px;
    padding-top:20px;
    background: #fff;
    color:#9ea2ae;
    font-size: 14px;
}

footer a.logo{
    margin-top: 0;
}

footer span{
    float: right;
    text-align: right;
    margin-top: 10px;
}

footer span a{
    color:#9ea2ae;
}

footer address{
    margin-top: 10px;
    font-size: 14px;
}


footer address strong{
    font-weight: normal;
    color: #334f65;
}

footer p{
    height: 0;
    overflow: hidden;
    margin: 0;
}

    /*          POP_UP          */


#order_bg{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;

    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(0,0,0,.7);
    overflow: hidden;

    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

#order_bg.off{
    height: 0;
    opacity: 0;

    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

.popup_keeper{
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    min-width: 270px;
    min-height: 240px;
    z-index: 100001;
    position: absolute;

    -webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    -ms-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}

.popup_keeper>div{
    padding: 120px 40px 40px 40px;
    width: 390px;
    height:350px;
    background: #fff;
    position: absolute;
    overflow: hidden;
    bottom: -255px;
    right: -195px;
    opacity: 1;

    -webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    -ms-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}

.popup_keeper>div.callback_tab{
    height: 200px;
    bottom: -180px;
}

.popup_keeper>div menu{
    position: absolute;
    left:0;
    top: 0;
    width: 430px;
    height: 60px;
    background: #3db2e6;
    z-index: 100002;
    margin:0;
    padding: 20px 20px 0 20px;
}

#order_keeper form div{
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    max-height: 0;
    overflow: hidden;

    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

#order_keeper.email_tab #email_tab,
#order_keeper.callback_tab #callback_tab{
    max-height: 250px;

    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}


menu a{
    display: block;
    float: left;
    padding:0 20px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: transparent;
    color:#fff;
    font-size: 20px;
    font-weight: normal;
    text-decoration: none;

    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
}
menu a:hover{
    /*background: rgba(255,255,255,.2);*/
    text-decoration: underline;
}

.email_tab menu a:first-child,
.callback_tab menu a:last-child{
    background: #fff;
    color:#4a4a4a;
    text-decoration: none;
}


.popup_keeper>div a.close_popup{
    display: block;
    position: absolute;
    right:0;
    top: 0;
    width: 36px;
    height: 36px;
    color: #fff;
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    z-index: 100003;
    text-decoration: none;

    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}


.popup_keeper>div a.close_popup:hover{
    font-size: 30px;

    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

input[type="text"],
input[type="date"],
input[type="number"],
textarea{
    font-family: 'Roboto', sans-serif;
    border:1px solid #9b9b9b;
    margin:5px 0 20px 0;
    font-size: 16px;
    padding: 5px 10px;
    line-height: 24px;
    height: 36px;
}

textarea{
    height: 100px!important;
    resize: none;
}

#order_bg .button,
#form .button{
    float: right;
    font-weight: normal;
    width: 168px;
    border:0;
}

#order_bg{
    font-size: 16px;
}

#order_bg h4{
    margin-top: 0;
}

/*      */

#tnx_keeper{
    bottom: -120px;
    text-align: center;
}

#tnx_keeper .button{
    float: none;
}

#tnx_keeper p{
    margin:10px 0 20px 0;
}

#tnx_keeper a{
    color: #3db2e6;
}



#order_bg.loading .popup_keeper:after{
    content: "ЗАГРУЗКА...";
    position: absolute;
    bottom: -20px;
    right: -50px;
    width: 100px;
    height: 40px;
    color: #fff;

    -webkit-animation-name: 'bling-bling';
    -webkit-animation-duration: 10s;
    animation-name: 'bling-bling';
    animation-duration: 10s;
}

@-webkit-keyframes 'bling-bling' {
    from {
        opacity: .1;
    }
    10% {
        opacity: 1;
    }
    20% {
        opacity: .1;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: .1;
    }

    50% {
        opacity: 1;
    }

    60% {
        opacity: .1;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: .1;
    }

    90% {
        opacity: 1;
    }
    to {
        opacity: .1;
    }
}

@keyframes 'bling-bling' {
    from {
        opacity: .5;
    }
    10% {
        opacity: 1;
    }
    20% {
        opacity: .5;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }

    60% {
        opacity: .5;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: .5;
    }

    90% {
        opacity: 1;
    }
    to {
        opacity: .5;
    }
}

#order_bg.loading .popup_keeper>div,
#order_bg.done #order_keeper,
#tnx_keeper{
    height: 0;
    opacity: 0;

    padding: 0 70px;
    -webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    -ms-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}

#order_bg.done #tnx_keeper{
    height: 120px;
    opacity: 1;
    padding: 60px 70px;

    -webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    -ms-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}

#tnx_keeper.error .ok_msg,
#tnx_keeper .err_msg{
    display: none;
}

#tnx_keeper.error .err_msg{
    display: block;
    color:#d0021b;
}



#order_bg input:not([type="submit"]),#order_bg textarea{
    width: 390px;
}


input,textarea{
    color: #333;
}


input:not([type="submit"]):not([type="button"]):focus,textarea:focus,select:focus{
    outline:none!important;
    background-color:rgba(61,178,230,.1)!important;;
}

label.error+input{
    border-color:#d0021b!important;
}

label.error+span input{
    border-color:#d0021b!important;
}
/*
label.error~input{
    border-color:#d0021b!important;
}*/

#order_bg label.error:after{
    content:"Укажите корректые данные!";
    float: right;
    font-size: 12px;
    color: #d0021b;
    position: relative;
    top:5px;
}



/*          PAGE_FORM          */



#form .container{
    width: 770px;
}

fieldset{
    border: 0;
    background: transparent;
    border-bottom: 1px solid #d9d8d4;
    font-size: 16px;
    border-radius: 0;
    margin-bottom: 20px;
}

legend{
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
}

#form fieldset>label{
    width:370px;
    height: 40px;
    line-height: 40px;
    float: left;
    margin-bottom: 20px;
    font-size: 16px;
}


#form input[type="text"],
input[type="number"],
input[type="date"],
#form span,
#form textarea,
#form select{
    margin: 0 0 20px 370px;
    width: 400px;
    display: block;
    height: 40px;
    font-size: 16px;
}

input[type="number"],#form span.numbers input{
    width: 110px;
    margin:0 8px;
    display: inline-block;
}

#form span.numbers input:first-child{
    margin-left:0;
}
/*
#form span.numbers input:last-child{
    margin-right:0;
}*/

#form select{
    height: 40px;
    line-height: 40px;
    display: block;
    padding: 5px 10px;
    outline: 0!important;
    cursor: pointer;
    width: 105%;
    margin: 0;
    border: 0;
    background:#fff url(../img/icon_20x20_arrow_down.png) no-repeat 370px 16px;
}

#form select:focus{
    background-color: rgba(61,178,230,.1) ;
    background-image: url(../img/icon_20x20_arrow_up.png);
}

#form select option{
    /*width: 50%;*/
    background: #fff;
}

#form span{
    border:1px solid #9b9b9b;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    overflow: hidden;
    position: relative;
}

#form span.options{
    margin-bottom: 0;
    border: 0;
    border-radius:0;
    height: 0;
    position: relative;
    overflow: visible;
    top:-20px;
    padding: 0;
}

.serviceinput{
    cursor: pointer;
}


input[type="text"].superselect{
    background:#fff url(../img/icon_20x20_arrow_down.png) no-repeat 370px 16px;
}

input[type="text"].superselect.expanded{
    background-image:url(../img/icon_20x20_arrow_up.png);
}

input[type="text"].superselect.loading{
    background:url(../img/loading1.gif) repeat-x;
}


#form span.options>span{
    background: #fff;
    margin: 0!important;
    padding: 0;
    text-align: left;
    width:398px;
    position: absolute;
    left:0;
    top:0;
    height: auto;
    max-height: 300px;
    overflow-y: scroll;
    border-color: #d4d4d4;
    /*display: none;*/
    z-index: 100;
}


.serviceinput+span.options>span{
    overflow: visible!important;
}

#form span.options>span:empty{
    display: none;
}

#form span.options>span a{
    margin:0;
    padding: 0 10px;
    clear: both;
    white-space: nowrap;
    display: block;
    height: 40px;
    line-height: 40px;
    color: #000;
    text-decoration: none;
}

#form span.options>span a:first-child{
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-topleft: 7px;
}

#form span.options>span a:last-child{
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
}

#form span.options>span a.hl{
    background: #ff0;
}

.serviceinput+span.options>span a.hl{
    background: #f6f6f0!important;
}

#form span.options>span a:hover{
    background: #f2f2f2;
}

#form span.options>span a.hl:hover{
    background: #aa0;
}

.serviceinput+span.options>span a.hl:hover{
    background: #f0f0f0!important;
}


#form span.checkboxes,#form span.numbers,#form fieldset.captcha span{
    border:0;
    height: auto;
    border-radius: 0;
}

#form span:not(.numbers) input[type="text"]{
    margin-left:0;
}

#form input[type="text"]#date{
    width: 200px;
    background:#fff url(../img/icon_20x20_cal.png) no-repeat 170px 9px;
    cursor: pointer;
}

#date::-ms-clear,
.superselect{
   display: none;
}


.checkboxes label{
    float: left;
    clear: left;
    position: relative;
    padding-left:30px;
    cursor: pointer;
    margin-bottom:10px;
    line-height: 20px;
}

.checkboxes label:before{
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    top:0;
    left:2px;
    background: #fff;
    border: 1px solid #999;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}


.checkboxes label.checked:before{
    background: #fff url(../img/checked.png) no-repeat 2px 0;
}


.checkboxes label input{
    display: none;
}

#form fieldset.captcha input{
    float: left;
    width:200px;
    /*margin-left: 0;*/
    margin: 10px 0;
}

#form fieldset.captcha img{
    float: left;
/*    width:80px;
    height: 40px;*/
    margin:0 0 20px 20px;
    cursor: pointer;
}

#form fieldset.captcha label{
    line-height: 1.2em;
    margin: 10px 0;
}

option{
    padding:5px 10px
}

label.require:after,#form small:before{
    content: '*';
    color: #d96677;
    cursor: help;
}

#form small{
    padding: 0 5px;
    color: #999;
}

#form label.error:before{
    content:"Пожалуйста, укажите корректные данные";
    /*content:"Заполните поле →";*/
    float: right;
    width: 130px;
    color: #d96677;
    font-size: 12px;
    margin:4px 10px 0 0;
    text-align: right;
    line-height: 1.2em!important;
}


.body_bonus article:not(:last-of-type){
    margin-bottom: 80px;
}

.body_bonus article:not(:last-of-type):after{
    content: '';
    display: block;
    margin: 70px auto 0;
    width: 50px;
    border-bottom: 1px solid #a4a097;
}

.body_bonus h4{
    text-align: left;
}

p.small{
    font-size: 14px;
}

/*     FOR CALENDAR     */


.bootstrap-datetimepicker-widget{
    background: #fff;
    font-size: 14px;
    padding: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    border:1px solid rgba(0,0,0,.15);
    width: 253px;
}


.bootstrap-datetimepicker-widget td{
    padding: 5px;
}

.bootstrap-datetimepicker-widget table {
    width: 100%;
    margin: 0;
}

.bootstrap-datetimepicker-widget td span {
    display: inline-block;
    width: 54px!important;
    height: 54px;
    line-height: 54px;
    margin: 2px 1.5px;
    cursor: pointer;
    border-radius: 4px;
}


.bootstrap-datetimepicker-widget td.today {
    position: relative;
}

.bootstrap-datetimepicker-widget td.today:not(:hover):not(.active) {
    background: transparent!important;
    color: #323232!important;
}

.bootstrap-datetimepicker-widget td.today:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #428bca;
    border-top-color: rgba(0,0,0,.2);
    position: absolute;
    bottom: 4px;
    right: 4px;
}

.bootstrap-datetimepicker-widget tbody tr td:nth-child(6),
.bootstrap-datetimepicker-widget tbody tr td.today:nth-child(6),
.bootstrap-datetimepicker-widget tbody tr td.today:not(.active):nth-child(6),
.bootstrap-datetimepicker-widget tbody tr td:nth-child(6):hover,
.bootstrap-datetimepicker-widget tbody tr td:nth-child(7),
.bootstrap-datetimepicker-widget tbody tr td.today:nth-child(7),
.bootstrap-datetimepicker-widget tbody tr td.today:not(.active):nth-child(7),
.bootstrap-datetimepicker-widget tbody tr td:nth-child(7):hover{
    color: red!important;
}

.bootstrap-datetimepicker-widget tbody tr td.disabled:nth-child(6),
.bootstrap-datetimepicker-widget tbody tr td.disabled:nth-child(6):hover,
.bootstrap-datetimepicker-widget tbody tr td.disabled:nth-child(7),
.bootstrap-datetimepicker-widget tbody tr td.disabled:nth-child(7):hover{
    color: rgba(255,0,0,.6)!important;
}