/*>>> VARIÁVEIS <<<*/

:root {
    --main-black: #111;
    --main-white: #fff;
    --main-red: #c20000;
}

@font-face {
    font-family: Brokman;
    src: url(../Content/fonts/TriumphBrokman-Regular.otf);
}

@font-face {
    font-family: BrokmanMedium;
    src: url(../Content/fonts/TriumphBrokman-Medium.otf);
}

@font-face {
    font-family: BrokmanDemiBold;
    src: url(../Content/fonts/TriumphBrokman-DemiBold.otf);
}

@font-face {
    font-family: BrokmanBold;
    src: url(../Content/fonts/TriumphBrokman-Bold.otf);
}

@font-face {
    font-family: BrokmanBlack;
    src: url(../Content/fonts/TriumphBrokman-Black.otf);
}

/*>>> RESET DE ESTILOS PRE-DEFINIDOS <<<*/

a {
    color: #000;
}

    a.nl {
        color: #fff;
    }

    a.ls {
        text-decoration: underline;
    }

    a:hover {
        text-decoration: none;
        color: inherit;
    }

body {
    font-family: Brokman, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

.font-medium {
    font-family: BrokmanMedium, Helvetica, Arial, sans-serif;
}

.font-demi-bold {
    font-family: BrokmanDemiBold, Helvetica, Arial, sans-serif;
}

.font-bold {
    font-family: BrokmanBold, Helvetica, Arial, sans-serif;
}

.nav.font-bold a {
    text-transform: uppercase;
}

.font-black {
    font-family: BrokmanBlack, Helvetica, Arial, sans-serif;
}

.shadow-btn {
    -webkit-box-shadow: 0px 5px 15px -3px #000000;
    box-shadow: 0px 5px 15px -3px #000000;
    font-family: BrokmanBold;
    letter-spacing: 0.5px;
}

.btn-danger-hard {
    background-color: #ce0000;
    text-transform: uppercase;
}

/*>>> ESTILOS GERAIS <<<*/

.bg-black {
    background-color: var(--main-black);
}

.full-widht {
    width: 100vh;
}

.line-height-red {
    line-height: 1rem;
}

input:checked {
    background-color: --main-red;
}

#termos-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px;
    z-index: 99999;
    background-color: #bbb;
    display: none
}

/*>>> NAVBAR LANDING PAGE <<<*/
.nav li {
    line-height: 1rem;
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-right: 16px;
}

.nav li:last-child {
    margin-right: 0;
}


    .nav li:nth-child(-n + 2)::after {
        content: '';
        height: 30px;
        width: 1px;
        border-radius: 50%;
        position: absolute;
        margin-left: 16px;
        margin-top: -7px;
        background: linear-gradient( to bottom, transparent 0%, #fff 50%, transparent 100% );
    }

@media only screen and (max-width: 768px) {
    .nav li:nth-child(-n + 2)::after {
        margin-left: calc(0.5rem - 0.5px);
    }
}

/*>>> SEÇÃO BANNER CARROSSEL <<<*/

.carousel-control-prev-icon {
    background-image: url(../imgs/setaEsquerda.png);
    height: 30px;
}

.carousel-control-next-icon {
    background-image: url(../imgs/setaDireita.png);
    height: 30px;
}

.seta-verm-btn {
    /* BASE64 DA SETA VERMELHA (PARA A DIREITA) DOS BOTÕES */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z' /%3E%3C/svg%3E");
    width: 20px;
    height: 25px;
    filter: brightness(0.65);
}

.carousel-inner,
.carousel-item {
    max-height: 54vh;
    width: auto;
}

    .carousel-item img {
        width: 100vw;
        
        object-fit: cover;
    }

/*>>> SEÇÃO OFERTAS (MOTOS) <<<*/

.img-box > div,
.img-box-destaque > div {
    width: 350px;
}

.img-box div img,
.img-box-destaque div img {
    width: 100%;
    height: 206px;
    object-fit: contain;
}

@media only screen and (max-width: 720px) {
    .img-box > div,
    .img-box-destaque > div {
        width: 270px;
    }
}

#select-con {
    border-radius: 20px;
}

    #select-con:focus {
        background-color: rgb(90, 90, 90);
    }

    #select-con option {
        background-color: rgb(70, 70, 70);
    }

.preco-info span,
.preco-info-destaque span {
    line-height: 100%;
}

/*>>> SEÇÃO VÍDEO YOUTUBE <<<*/

.secao-video > div {
    background: linear-gradient(to bottom, transparent 10%, #bbb 10%);
    min-height: 376px;
}

#youtube-video {
    transform: translate3d(0, -10px, 0);
}

.secao-video iframe {
    -webkit-box-shadow: 0px 13px 50px -15px #000000;
    box-shadow: 0px 13px 50px -15px #000000;
    height: 350px;
}

@media only screen and (max-width: 720px) {
    #youtube-video {
        transform: translate3d(0, 0, 0);
        margin-top: 15px;
    }

    .secao-video > div {
        background-color: #bbb;
    }
}

/* >>> SEÇÃO TEXTÃO <<< */

.secao-textao {
    font-size: 15px;
    line-height: 18px;
}

/*>>> DIV FLUTUANTE WHATSAPP <<<*/

    .whats-app-box > div {
        border: 3px solid #fff;
    }

    .whats-app-box > span {
        text-shadow: 0px 1px 0px #ffffff, 0px -1px 0px #ffffff, -1px 0px 0px #ffffff, 1px 0px 0px #ffffff, -1px -1px 0px #ffffff, -1px 1px 0px #ffffff, 1px -1px 0px #ffffff, 0px 0px 10px #ffffff, 0px 4px 4px #000000;
        line-height: 14px;
    }

.count-click-banner img {
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: 768px) {
    .nav li:nth-child(-n + 2)::after {
        margin-left: calc(0.5rem - 0.5px);
    }

    .whats-app-box {

    }

    .whats-app-box span {
        display: none
    }

        .whats-app-box > div {
            border: 3px solid #fff;
            padding: 8px !important;
            width: 66px;
            height: 66px;
        }

        .whats-app-box img {
            width: 36px;
            display: block;
            margin: auto
        }
}

/* CARROSSEL HOME */

.img-carrossel{
    object-fit: cover;
    width: 100%;
    

}

.carrossel-btn-prev:after, .swiper-rtl .carrossel-btn-next:after {
    color: white;
    font-size: 16px;
    font-weight: 900;
}

.carrossel-btn-next:after, .swiper-rtl .carrossel-btn-prev:after {
    color: white;
    font-size: 16px;
    font-weight: 900;
}

.carrossel-btn-next, .carrossel-btn-prev {
    width: 40px;
    height: 40px;
    background: #b50015;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 900;
    margin: 0 2%;
    opacity: 0.7;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    background:white;
    width: 34px;
    height:10px;
    border-radius:10px;
}

.swiper-pagination-bullet-active {
    background: #b50015 !important;
    opacity: 1 !important;
}

.top {
    width: 45px;
    height: 45px;
    background: #b5000d;
    border-radius: 50%;
    display: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    margin-top: 30px;

}

.box{
    display: flex;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    align-items: center;
    flex-direction: row-reverse;
}

@media screen and (max-width: 768px){
    .box{
        flex-direction: column-reverse;
    }

    .carrossel-home-desktop {
        display: none;
    }
}