@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);
}

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

#contenedorBusquedaVehiculos {
    width: 27%;
    padding: 1.5%;
    background-color: var(--white);
    color: var(--black);
    border-radius: 11px;
}

.parametrosBuscador {
    margin: 3% auto;
    border-collapse: separate;
    border-spacing: 39px 0px;
}

.btnRegresarBuscador {
    background-color: var(--black);
    padding: 1.5%;
    border-radius: 10.5px;
    margin-top: 3%;
    font-family: 'PIRULEN';
    color: var(--white);
    font-weight: bolder;
    font-size: large;
    text-align: center;
}

/*********  Contenedores    *********/

.contenedoresUnidades {
    width: 30%;
    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%;
}

#btnVerUnidad {
    padding: 3% 5%;
    background-color: var(--white);
    border-radius: 10.5px;
    margin: 30px 16%;
    font-family: 'PIRULEN';
    font-weight: bolder;
    font-size: large;
    text-align: center;
}

/*********  Paginación    *********/

#pagination {
    padding: 1.5% 0%;
}

#pagination button {
    margin: 0 5px;
    border: 2px solid var(--gray);
    color: var(--gray);
    background-color: var(--white);
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
  }
  
  #pagination button:hover {
    background-color: var(--black);
    color: var(--white);
  }  



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

    #Logo {
        width: 30%;
        margin: 3%;
    }
    
    #phoneViewNB {
        display: block;
    }
    
    .navBar a {
        margin-right: 0%;
    }

    #optionsNavBar {
        display: none;
    }

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

    #contenedorBusquedaVehiculos {
        width: 77%;
        padding: 3%;
        margin: 6% 0%;
    }

    /*********  Contenedores    *********/

    .contenedoresUnidades {
        width: 80%;
        margin: 6% 10%;
    }

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

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

    .textoContenedor {
        margin-left: 10%;
    }

    #btnVerUnidad {
        width: 70%;
        height: 42px;
        margin-left: 9%;
    }
}