@font-face {
    font-family: 'PIRULEN';
    src: url(Pirulen-RG.OTF);
}

:root {
    --black: #1b1b1b;
    --darkShade: rgba(42, 50, 75, 0.8);
    --white: #fff;
    --clearShade: rgba(255, 255, 255, 0.7);
    --gray: #302e2e;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background-color: var(--white);
    color: var(--black);
    font-family: 'PIRULEN';
    font-size: small;
}

a {
    font-family: 'PIRULEN';
}

hr {
    border-width: 5px;
    border-color: var(--gray);
}



/*********  NavBar    *********/

.navBar {
    background-color: var(--white);
}

#Logo {
    width: 9%;
    margin: 1%;
}

#optionsNavBar {
    margin: 1.5% 0%;
    display: block;
}

#phoneViewNB {
    display: none;
}

.navBar a {
    font-size: 18px;
    color: var(--gray);
    text-decoration: none;
    margin-right: 3%;
}

.navBar a:last-child {
    margin-right: 0;
}

.navBar a:hover {
    font-size: 21px;
    color: var(--clearShade);
    text-shadow: 0px 5px var(--gray);
}

#separadorNavBar {
    border-color: var(--gray);
}

/*********  Búsqueda    *********/

.contenedorBusqueda {
    background-color: var(--black);
    padding: 1.5% 0%;
}

#boxBusqueda {
    width: 24%;
    background-color: var(--white);
    color: var(--black);
    padding: 1.5%;
    margin: 0% auto;
    border-radius: 11px;
}

#boxBusqueda h2 {
    margin-bottom: 3%;
}

#boxBusqueda select {
    height: 30px;
    border-radius: 7px;
}

#boxBusqueda button {
    background-color: var(--black);
    padding: 1.5%;
    border-radius: 7px;
    font-family: 'PIRULEN';
    color: var(--white);
    font-size: 20px;
    font-weight: bolder;
    margin-top: 15px;
}

/*********  Slider-Box    *********/

.box {
    width: 66%;
    background-color: var(--gray);
    color: var(--white);
    padding: 0% 1%;
    margin: 0% auto;
    border-radius: 11px;
}

.slider-box {
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll;
    overflow-y: hidden;
}

.elements {
    flex: 1 0 auto;
    margin: 0 50px;
    background-color: var(--gray);
    width: 50%;
    height: 50%;
    padding: 3% 0%;
}

/*********  Servicios / Taurino Care    *********/

.contenedorTaurinoCare {
    margin: 3% auto;
    padding: 0.5% 1%;
    border-radius: 14px;
    width: 50%;
    background-color: var(--gray);
    color: var(--white);
}

.contenedorTaurinoCare h2 {
    text-align: center;
    margin-bottom: 1.5%;
}

/*********  Vendidos - Recientemente    *********/

.contenedorVendidos {
    margin: 3% auto;
    padding: 0.5% 0%;
    border-radius: 14px;
    width: 30%;
    background-color: var(--gray);
    color: var(--white);
    text-align: center;
}

.unidadesVendidas {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    height: 93vh;
    position: relative;
    overflow: hidden;
}

#carousel .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#carousel .slide.activo {
    opacity: 1;
    z-index: 1;
}

.contenedoresUnidades {
    padding: 10.5px;
    background-color: var(--gray);
    color: var(--white);
    margin: 3% auto;
    border-radius: 14px;
}

.galeriaUnidad {
    width: 360px;
    margin-left: 9%;
}

.tituloUnidad {
    margin: 15px 0px;
    text-align: center;
}

.tituloUnidad span {
    margin-right: 15px;
}

.textoContenedor {
    margin-left: 25%;
    text-align: left;
}

/*********  Galería    *********/

.contenedorGaleria {
    margin: 3% auto;
    padding: 0.5% 0%;
    border-radius: 14px;
    width: 50%;
    background-color: var(--gray);
    color: var(--white);
    text-align: center;
}

.unidadesVendidas {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    height: 93vh;
    position: relative;
    overflow: hidden;
}

#carousel .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#carousel .slide.activo {
    opacity: 1;
    z-index: 1;
}

.contenedoresUnidades {
    padding: 10.5px;
    background-color: var(--gray);
    color: var(--white);
    margin: 3% auto;
    border-radius: 14px;
}

.galeriaUnidad {
    width: 360px;
    margin-left: 9%;
}

.tituloUnidad {
    margin: 15px 0px;
    text-align: center;
}

.tituloUnidad span {
    margin-right: 15px;
}

.textoContenedor {
    margin-left: 25%;
    text-align: left;
}

/*********  Contacto    *********/

.fondoContacto {
    background-color: var(--black);
    padding: 3% 0%;
}

#contenedorContacto {
    margin: 0% 33%;
    width: 30%;
    padding: 1.5% 1%;
    background-color: var(--white);
    color: var(--black);
    opacity: 1;
    border-radius: 11px;
}

#formRegistroContactos {
    text-align: center;
}

#formRegistroContactos h1 {
    margin-bottom: 9%;
}

.preguntaContacto input {
    width: 90%;
    height: 30px;
    border-radius: 7px;
}

.preguntaContacto #formAsunto {
    height: 60px;
}

#submitContactenme {
    background-color: var(--black);
    padding: 1.5%;
    border-radius: 7px;
    font-family: 'PIRULEN';
    color: var(--white);
    font-size: 20px;
    font-weight: bolder;
    margin-top: 30px;
}

.preguntaContacto {
    margin: 3%;
    font-size: 20px;
}

#pieDePagina {
    border-color: var(--gray);
}



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

    #Logo {
        width: 30%;
        margin: 3%;
    }

    #phoneViewNB {
        display: block;
    }

    .navBar a {
        margin-right: 0%;
    }

    #optionsNavBar {
        display: none;
    }

    /*********  Buscador    *********/

    .contenedorBusqueda {
        padding: 6% 0%;
    }

    #boxBusqueda {
        width: 77%;
    }

    #boxBusqueda select {
        width: 99%;
    }

    /*********  Servicios / Taurino Care    *********/

    .contenedorTaurinoCare {
        width: 80%;
    }

    /*********  Vendidos - Recientemente    *********/

    .contenedorVendidos {
        width: 70%;
    }

    .unidadesVendidas {
        height: 70vh;
    }

    .galeriaUnidad {
        width: 90%;
        margin-left: 5%;
    }

    .tituloUnidad span {
        margin-right: 7px;
    }

    .textoContenedor {
        margin-left: 10%;
    }

    /*********  Galería    *********/

    .contenedorGaleria {
        width: 80%;
    }

    /*********  Contacto    *********/
    .fondoContacto {
        padding: 10% 0%;
    }

    #contenedorContacto {
        width: 70%;
        margin-left: 15%;
    }
}