/*-------------------bus--------------------*/

@font-face {
    font-family: 'Conv_GothamBook';
    src: url('../fonts/GothamBook.eot');
    src: local('☺'), url('../fonts/GothamBook.woff') format('woff'), url('../fonts/GothamBook.ttf') format('truetype'), url('../fonts/GothamBook.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Conv_Gotham-Bold';
    src: url('../fonts/Gotham-Bold.eot');
    src: local('☺'), url('../fonts/Gotham-Bold.woff') format('woff'), url('../fonts/Gotham-Bold.ttf') format('truetype'), url('../fonts/Gotham-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.bus {
    width: 100%;
    position: relative;
    margin:0 auto;
}

.img_bus {
    position: relative;
    width: 100%;
}

.img_bus_movil {
    position: relative;
    width: 100%;
    display:none;
}

.campo {
    width: 3.5%;
    height: 13.6%;
    border-radius: 12px 8px 8px 12px;
    text-align: center;
    font-family: 'Conv_Gotham-Bold';
    font-size: 1.1vw;
    padding: 0.7%;
    color: #fff;
    cursor: pointer;
    transition: 200ms;
}

.regular {
    background: #435251;
}

.preferenciales {
    background: #283899;
}

.reservado {
    background: #bb9832;
}

.bloqueado {
    background: #000;
}

.seleccionado {
    background: #11948b;
}

.asiento_1 {
    top: 75%;
    position: absolute;
    right: 17.6%;
}

.asiento_2 {
    top: 59%;
    position: absolute;
    right: 17.6%;
}

.asiento_3 {
    top: 24.5%;
    position: absolute;
    right: 19.8%;
}

.asiento_4 {
    top: 8.5%;
    position: absolute;
    right: 19.8%;
}

.asiento_5 {
    top: 75%;
    position: absolute;
    right: 23.3%;
}

.asiento_6 {
    top: 59%;
    position: absolute;
    right: 23.3%;
}

.asiento_7 {
    top: 24.5%;
    position: absolute;
    right: 25.5%;
}

.asiento_8 {
    top: 8.5%;
    position: absolute;
    right: 25.5%;
}

.asiento_9 {
    top: 75%;
    position: absolute;
    right: 29.09%;
}

.asiento_10 {
    top: 59%;
    position: absolute;
    right: 29.09%;
}

.asiento_11 {
    top: 24.5%;
    position: absolute;
    right: 31.2%;
}

.asiento_12 {
    top: 8.5%;
    position: absolute;
    right: 31.2%;
}

.asiento_13 {
    top: 75%;
    position: absolute;
    right: 34.8%;
}

.asiento_14 {
    top: 59%;
    position: absolute;
    right: 34.8%;
}

.asiento_15 {
    top: 24.5%;
    position: absolute;
    right: 36.9%;
}

.asiento_16 {
    top: 8.5%;
    position: absolute;
    right: 36.9%;
}

.asiento_17 {
    top: 75%;
    position: absolute;
    right: 40.5%;
}

.asiento_18 {
    top: 59%;
    position: absolute;
    right: 40.5%;
}

.asiento_19 {
    top: 24.5%;
    position: absolute;
    right: 42.7%;
}

.asiento_20 {
    top: 8.5%;
    position: absolute;
    right: 42.7%;
}

.asiento_21 {
    top: 75%;
    position: absolute;
    right: 46.2%;
}

.asiento_22 {
    top: 59%;
    position: absolute;
    right: 46.2%;
}

.asiento_23 {
    top: 24.5%;
    position: absolute;
    right: 48.4%;
}

.asiento_24 {
    top: 8.5%;
    position: absolute;
    right: 48.4%;
}

.asiento_25 {
    top: 75%;
    position: absolute;
    right: 51.91%;
}

.asiento_26 {
    top: 59%;
    position: absolute;
    right: 51.91%;
}

.asiento_27 {
    top: 24.5%;
    position: absolute;
    right: 54.1%;
}

.asiento_28 {
    top: 8.5%;
    position: absolute;
    right: 54.1%;
}

.asiento_29 {
    top: 24.5%;
    position: absolute;
    right: 59.8%;
}

.asiento_30 {
    top: 8.5%;
    position: absolute;
    right: 59.8%;
}

.asiento_31 {
    top: 75%;
    position: absolute;
    right: 61.98%;
}

.asiento_32 {
    top: 59%;
    position: absolute;
    right: 61.98%;
}

.asiento_33 {
    top: 24.5%;
    position: absolute;
    right: 65.5%;
}

.asiento_34 {
    top: 8.5%;
    position: absolute;
    right: 65.5%;
}

.asiento_35 {
    top: 75%;
    position: absolute;
    right: 67.55%;
}

.asiento_36 {
    top: 59%;
    position: absolute;
    right: 67.55%;
}

.asiento_37 {
    top: 24.5%;
    position: absolute;
    right: 71.2%;
} 

.asiento_38 {
    top: 8.5%;
    position: absolute;
    right: 71.2%;
}

.asiento_39 {
    top: 75%;
    position: absolute;
    right: 73.2%;
}

.asiento_40 {
    top: 59%;
    position: absolute;
    right: 73.2%;
}

.asiento_41 {
    top: 24.5%;
    position: absolute;
    right: 76.9%;
}

.asiento_42 {
    top: 8.5%;
    position: absolute;
    right: 76.9%;
}

.asiento_43 {
    top: 75%;
    position: absolute;
    right: 78.8%;
}

.asiento_44 {
    top: 59%;
    position: absolute;
    right: 78.8%;
}

.asiento_45 {
    top: 24.5%;
    position: absolute;
    right: 82.6%;
}

.asiento_46 {
    top: 8.5%;
    position: absolute;
    right: 82.6%;
}

.asiento_47 {
    top: 24.5%;
    position: absolute;
    right: 88.3%;
}

.asiento_48 {
    top: 8.5%;
    position: absolute;
    right: 88.3%;
}

.asiento_49 {
    top: 24.5%;
    position: absolute;
    right: 93.8%;
}

.asiento_50 {
    top: 8.5%;
    position: absolute;
    right: 93.8%;
}

.asiento_51 {
    top: 75%;
    position: absolute;
    right: 93.8%;
}

.asiento_52 {
    top: 59%;
    position: absolute;
    right: 93.8%;
}

.asiento_53 {
    top: 41.6%;
    position: absolute;
    right: 93.8%;
}

.sobreabordaje {
    width: 5%;
    height: auto;
    position: absolute;
    cursor: pointer;
    transition: 200ms;
}

.sobreabordaje_bg {
    background: #254723;
}

.de_pie_1 {
    top: 40%;
    left: 9%;
}

.de_pie_2 {
    left: 16%;
    top: 48%;
}

.de_pie_3 {
    top: 40%;
    left: 22%;
}

.de_pie_4 {
    left: 29%;
    top: 48%;
}

.de_pie_5 {
    top: 40%;
    left: 37%;
}

.de_pie_6 {
    left: 44%;
    top: 48%;
}

.de_pie_7 {
    top: 40%;
    left: 51%;
}

.de_pie_8 {
    left: 58%;
    top: 48%;
}

.de_pie_9 {
    top: 40%;
    left: 65%;
}

.de_pie_10 {
    left: 73%;
    top: 48%;
}

.descrip_bus_color p {
    color: #fff;
    padding: 8px;
    text-align: center;
    font-family: 'Conv_GothamBook';
    font-size: 11px;
    margin: 0;
    border-radius: 5px;
}

.campo:hover {
    background: #fff;
    color: #435251;
}





@media(max-width: 768px) {
    .img_bus {
        position: relative;
        width: 100%;
        display:none;
    }

    .img_bus_movil {
        position: relative;
        width: 100%;
        display: block;
    }

    .campo {
        width: 13.6%;
        height: 3.5%;
        border-radius: 8px 8px 12px 12px;
        text-align: center;
        font-family: 'Conv_Gotham-Bold';
        font-size: 4.1vw;
        padding: 2.7%;
        color: #fff;
        cursor: pointer;
        transition: 200ms;
    }

    .asiento_1 {
        top: 17.5%;
        position: absolute;
        right: 11.4%;
    }

    .asiento_2 {
        top: 17.5%;
        position: absolute;
        right: 27.2%;
    }

    .asiento_3 {
        top: 19.7%;
        position: absolute;
        right: 61.7%;
    }

    .asiento_4 {
        top: 19.7%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_5 {
        top: 23.2%;
        position: absolute;
        right: 11.4%;
    }

    .asiento_6 {
        top: 23.2%;
        position: absolute;
        right: 27.2%;
    }

    .asiento_7 {
        top: 25.4%;
        position: absolute;
        right: 61.7%;
    }

    .asiento_8 {
        top: 25.4%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_9 {
        top: 28.95%;
        position: absolute;
        right: 11.5%;
    }

    .asiento_10 {
        top: 28.95%;
        position: absolute;
        right: 27.3%;
    }

    .asiento_11 {
        top: 31.1%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_12 {
        top: 31.1%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_13 {
        top: 34.6%;
        position: absolute;
        right: 11.5%;
    }

    .asiento_14 {
        top: 34.6%;
        position: absolute;
        right: 27.3%;
    }

    .asiento_15 {
        top: 36.8%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_16 {
        top: 36.8%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_17 {
        top: 40.4%;
        position: absolute;
        right: 11.5%;
    }

    .asiento_18 {
        top: 40.4%;
        position: absolute;
        right: 27.3%;
    }

    .asiento_19 {
        top: 42.5%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_20 {
        top: 42.5%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_21 {
        top: 46.1%;
        position: absolute;
        right: 11.5%;
    }

    .asiento_22 {
        top: 46.1%;
        position: absolute;
        right: 27.3%;
    }

    .asiento_23 {
        top: 48.3%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_24 {
        top: 48.3%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_25 {
        top: 51.8%;
        position: absolute;
        right: 11.5%;
    }

    .asiento_26 {
        top: 51.8%;
        position: absolute;
        right: 27.3%;
    }

    .asiento_27 {
        top: 54%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_28 {
        top: 54%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_29 {
        top: 59.7%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_30 {
        top: 59.7%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_31 {
        top: 61.8%;
        position: absolute;
        right: 11.5%;
    }

    .asiento_32 {
        top: 61.8%;
        position: absolute;
        right: 27.3%;
    }

    .asiento_33 {
        top: 65.4%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_34 {
        top: 65.4%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_35 {
        top: 67.4%;
        position: absolute;
        right: 11.5%;
    }

    .asiento_36 {
        top: 67.4%;
        position: absolute;
        right: 27.3%;
    }

    .asiento_37 {
        top: 71.1%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_38 {
        top: 71.1%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_39 {
        top: 73%;
        position: absolute;
        right: 11.5%;
    }

    .asiento_40 {
        top: 73%;
        position: absolute;
        right: 27.3%;
    }

    .asiento_41 {
        top: 76.7%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_42 {
        top: 76.7%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_43 {
        top: 78.7%;
        position: absolute;
        right: 11.5%;
    }

    .asiento_44 {
        top: 78.7%;
        position: absolute;
        right: 27.3%;
    }

    .asiento_45 {
        top: 82.4%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_46 {
        top: 82.4%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_47 {
        top: 88.2%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_48 {
        top: 88.2%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_49 {
        top: 93.7%;
        position: absolute;
        right: 61.5%;
    }

    .asiento_50 {
        top: 93.7%;
        position: absolute;
        right: 77.6%;
    }

    .asiento_51 {
        top: 93.7%;
        position: absolute;
        right: 11.5%;
    }

    .asiento_52 {
        top: 93.7%;
        position: absolute;
        right: 27.3%;
    }

    .asiento_53 {
        top: 93.7%;
        position: absolute;
        right: 44.5%;
    }



    .sobreabordaje {
        width: 18%;
        height: auto;
        position: absolute;
        cursor: pointer;
        transition: 200ms;
        transform: rotate(-90deg);
    }

    .de_pie_1 {
        top: 86%;
        left: 36%;
    }

    .de_pie_2 {
        left: 44%;
        top: 79%;
    }

    .de_pie_3 {
        top: 72%;
        left: 36%;
    }

    .de_pie_4 {
        left: 44%;
        top: 65%;
    }

    .de_pie_5 {
        top: 58%;
        left: 36%;
    }

    .de_pie_6 {
        left: 44%;
        top: 51%;
    }

    .de_pie_7 {
        top: 44%;
        left: 36%;
    }

    .de_pie_8 {
        left: 44%;
        top: 37%;
    }

    .de_pie_9 {
        top: 29%;
        left: 36%;
    }

    .de_pie_10 {
        left: 44%;
        top: 21%;
    }


}