/* http://resources.автодарт.рф/css/style_gallery.css */

body {
    background: rgba(0, 0, 0, 0) url("/resources/img/form-bg-sm.png") repeat scroll center top;
}

* {
    margin: 0px;
    padding: 0px;
}

.choice-detail {
    background: none;
}

.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
    background-position: -43px 0;
}

.bx-wrapper .bx-viewport {
    background: transparent;
    margin-top: 74px;
}

.bx-wrapper .bx-pager {
    /*bottom: -115px;*/
    bottom: auto;

}

.bx-wrapper .bx-pager a {
    border: solid #ccc 2px;
    display: block;
    margin: 0 3px;
    padding: 3px;
}

.bx-wrapper .bx-pager a:hover,
.bx-wrapper .bx-pager a.active {
    border: solid #5280DD 2px;
}

.bx-pager:before {
    display: block;
    content: "Дополнительные фото:";
    /*vertical-align: middle;*/
    /*   color: red;*/
    padding-bottom: 5px;
}

.bx-wrapper {
    margin-bottom: 50px;
}

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: transparent;
    /*    background: #666;
    background: rgba(80, 80, 80, 0.05);*/
    width: 100%;
}

.bx-wrapper .bx-caption span {
    color: white;
    text-align: center;
    font-family: "PFBulletinSansPro-Regular";
    font-size: 16px;
    display: block;
    padding: 10px;
    /* background: #fff; */
    width: 20%;
    margin: auto;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    border-radius: 15px;
    /*  border: 1px solid red; Толщина рамки в пикселах,
                           тип границы (в данном случае сплошная линия) и
                           цвет линии */
    padding: 5px;
    /* Расстояние от текста до рамки */
}

.bx-wrapper .bx-prev {
    background: rgba(0, 0, 0, 0) url("/resources/img/controls_custom.png") no-repeat scroll 0 -32px;
    left: 10px;
}

.bx-wrapper .bx-next {
    background: rgba(0, 0, 0, 0) url("/resources/img/controls_custom.png") no-repeat scroll -43px -32px;
    right: 10px;
}

.bx-wrapper .bx-controls-direction a {
    /*margin-top: -240px;*/
    margin-top: 0;
}




.ttx {
    overflow: hidden;
    font-size: 16px;
    text-align: left;
    /*font-weight: 300 !important;*/
    font-family: "PFBulletinSansPro-Regular";
    /*padding: 10px;*/

}

.ttx span:first-of-type {
    float: left;
    margin-right: 5px;
    color: #888;
}

.ttx span:last-of-type {
    float: right;
    margin-left: 5px;
    color: #000;

}

.ttx::after {

    content: '..........................................................................................................................................................................................................................................................';
    display: block;
    white-space: nowrap;
    overflow: hidden;
    color: #ccc;

}

.choice-detail:nth-of-type(1) span {
    font-weight: 300;
}

.flexbox {
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.col {
    width: 48%;
    /*padding: 10px;*/
    /*background: #ccc;*/
}

.col-sp {
    width: 4%;

}


/*.col:first-child {
padding-right: 10px;
}

.col:first-last {
}
*/


/*
@media only screen and (max-width: 580px) {
    .bx-wrapper .bx-controls-direction a {
        margin-top: -200px;
    }
}


@media only screen and (max-width: 490px) {
    .bx-wrapper .bx-controls-direction a {
        margin-top: -165px;
    }
}


@media only screen and (max-width: 400px) {
    .bx-wrapper .bx-controls-direction a {
        margin-top: -135px;
    }
}
*/




@media only screen and (max-width: 740px) {
    .bx-wrapper .bx-caption span {
        width: 50%;
    }

    .choice-detail-txt {
        /*display: none;*/
    }

    .button_btn_big {
        /*display: none;*/
    }

    .col {
        width: 100%;
    }

    .col-sp {
        display: none;
    }

    .flexbox {
        /* Делаем макет вертикальным */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

}

@media only screen and (max-width: 570px) {
    .bx-wrapper .bx-pager {
        /*bottom: -213px;*/
        bottom: auto;
    }

    .bx-wrapper .bx-caption {
        display: none;
    }
}


@media only screen and (max-width: 360px) {
    .choice-detail-txt {
        width: 90%;
    }

}