@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap');

* {
    margin: 0;
}

body,
html {
    margin: 0;
    font-family: 'Audiowide', cursive, sans-serif;
    background-color: transparent;
    text-align: center;
}

dl {
    font-weight: bold;
}

dt {
    /*text-shadow: 2px 2px 2px black;*/
    font-weight: bold;
    line-height: 1.5;
    padding-left: 20px;
}

dd {
    text-shadow: 1px 1px 2px white;
    font-family: 'Nova Mono', monospace, cursive;
    font-weight: bold;
    line-height: 1.5;
    padding-left: 40px;
    margin-bottom: 15px;
}


h1 {
    color: steelblue;
    text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em firebrick;
}

h2 {
    font-family: 'Faster One', cursive, sans-serif;
    font-weight: bold;
    padding-bottom: 1%;
    word-spacing: 0.2em;
}

h3 {
    font-family: 'Audiowide', cursive, sans-serif;
    font-weight: bold;
    padding-bottom: 5%;
}

h4 {
    font-family: 'Faster One', cursive, sans-serif;
    word-spacing: 0.25em;
}

img.oops {
    position: relative;
    max-width: 50%;
    max-height: 35vh;
    margin-left: 18%;
    z-index: 1;
    padding-bottom: 1%;
}

img.error {
    position: absolute;
    top: 1%;
    left: 66%;
    max-width: 15%;
    max-height: 15vh;
    z-index: 2;
}

label.fondo {
    background-color: #A7A8A7;
}

nav {
    position: sticky;
    top: 1px;
    margin: 1px 1px;
    background-color: #D6A229;
    border-radius: 25px;
    padding-left: 5px;
    z-index: 100;
}

p {
    margin-bottom: 3px;
}

ul,
li {
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: left;
    background-color: transparent;
    list-style: none;
}

.barra {
    margin: 1px 1px;
    background-color: #D6A229;
    border-radius: 25px;
    padding-top: 5px;
}

.blk {
    color: black;
    z-index: 10;
}

.bold {
    font-weight: 900;
    text-shadow: firebrick 1px 2px 2px;
}

.boton {
    padding: 4px 20px;
    font-family: 'Audiowide', cursive, sans-serif;
    border-radius: 10px;
    border: white 8px outset;
    background-color: lightblue;
    box-shadow: blue 3px 3px 2px;
}

.caja {
    font-family: 'Nova Mono', monospace;
    border-radius: 10px;
    border: white 5px groove;
    background-color: lightblue;
    box-shadow: blue 3px 3px 2px;
}

.center {
    text-align: center;
}

.claro {
    margin-top: 1px;
    border: 2px solid black;
    background-color: #D6A229;
}

.conborde {
    border: 1px solid blue;
}

.dark {
    background-color: rgb(95, 8, 3);
    color: #fff;
}

.flecharriba {
    position: fixed;
    right: .8%;
    bottom: 3%;
    z-index: 100;
}

.fondo {
    background-color: rgba(100%, 100%, 100%, .4);
}

.foot {
    background: #1e272e;
}

.foto1 {
    background-image: url(../assets/images/auto1.jpg);
    min-height: 100%;
}

.foto2 {
    background-image: url(../assets/images/local-big-1.jpeg);
    min-height: 100%;
}

.foto3 {
    background-image: url(../assets/images/maquina-vertical3.jpeg);
    min-height: 100%;
}

.foto4 {
    background-image: url(../assets/images/frenos-big.jpg);
    min-height: 100%;
}

.foto5 {
    background-image: url(../assets/images/publicidad-masterfren2.jpg);
    min-height: 70%;
}

.foto6 {
    background-image: url(../assets/images/local-4-ultra.jpg);
    min-height: 35%;
}

.foto1,
.foto2,
.foto3,
.foto4,
.foto5,
.foto6 {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.full {
    width: 100%;
    height: 100vh;
}

/* boton vistoso */
.highlight .button {
    font-family: 'Faster One', cursive, sans-serif;
    text-align: center;
    display: inline-block;
    color: #D6A229;
    background-color: rgb(95, 8, 3, .7);
    margin: 1px;
    padding: 0 5px;
    line-height: 30px;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
}

.highlight .button:before {
    content: "";
    position: absolute;
    top: -30px;
    left: -80px;
    height: 100px;
    width: 70px;
    background: rgba(255, 255, 255, .7);
    transform: rotate(20deg);
}

.highlight .button:hover:before {
    left: 150px;
    transition: all .9s;
}

.highlight {
    margin-bottom: 100px;
}

/*fin boton que se ilumina*/

.ifi {
    position: relative;
    float: left;
    margin: 8px;
}

.ifr {
    position: relative;
    float: right;
    margin: 8px;
}

.letrero {
    color: #5c1a28;
}

.letrero2 {
    background-color: gray;
    color: #79293c;
}

.letrero3 {
    background-color: gray;
    color: #79293c;
}

.letrero4 {
    padding: 2% 1% 2% 5%;
    color: darkblue;
    text-align: left;
    z-index: 10;
}

.letrero5 {
    padding: 2% 1% 2% 5%;
    color: darkblue;
    text-align: left;
    z-index: 10;
}

.letrero,
.letrero2,
.letrero3,
.letrero4,
.letrero5 {
    position: relative;
    max-width: 100%;
    text-transform: uppercase;
    letter-spacing: 4px;
    background-color: transparent;
}

.logodata {
    width: 6%;
}

.logow3org {
    width: 6%;
    height: 3%;
}

.logo,
.logo1,
.logo2,
.logo3,
.logo4,
.logo5,
.logo6,
.logo7,
.logo8,
.logo9 {
    width: 15%;
}

/* Posicionamiento de los logos  */
.logo:hover {
    position: relative;
    display: inline;
    top: 15%;
    left: 4%;
    box-shadow: 20px 10px 20px black;
    transform: scale(1.5);
    z-index: 10;
}

.logo1:hover {
    position: relative;
    display: inline;
    box-sizing: content-box;
    top: 15%;
    left: 6%;
    box-shadow: 20px 10px 20px black;
    transform: scale(1.5);
    z-index: 10;
}

.logo2:hover {
    position: relative;
    display: inline;
    top: 15%;
    left: 6%;
    box-shadow: 20px 10px 20px black;
    transform: scale(1.5);
    z-index: 10;
}

.logo3:hover {
    position: relative;
    display: inline;
    top: 15%;
    left: 8%;
    box-shadow: 20px 10px 20px black;
    transform: scale(1.5);
    z-index: 10;
}

.logo4:hover {
    position: relative;
    display: inline;
    top: 15%;
    left: 10%;
    box-shadow: 20px 10px 20px black;
    transform: scale(1.5);
    z-index: 10;
}

.logo5:hover {
    position: relative;
    display: inline;
    top: 25%;
    left: 12%;
    box-shadow: 20px 10px 20px black;
    transform: scale(1.5);
    z-index: 10;
}

.logo6:hover {
    position: relative;
    display: inline;
    top: 15%;
    left: 12%;
    box-shadow: 20px 10px 20px black;
    transform: scale(1.5);
    z-index: 10;
}

.logo7:hover {
    position: relative;
    display: inline;
    top: 15%;
    left: 12%;
    box-shadow: 20px 10px 20px black;
    transform: scale(1.5);
    z-index: 10;
}

.logo8:hover {
    position: relative;
    display: inline;
    top: 15%;
    right: 2%;
    box-shadow: 20px 10px 20px black;
    transform: scale(1.5);
    z-index: 10;
}

.logo9:hover {
    position: relative;
    display: inline;
    top: 15%;
    left: 9%;
    box-shadow: 20px 10px 20px black;
    transform: scale(1.5);
    z-index: 10;
}

/* fin posicionamiento de logos */

.mini,
.small,
.medium,
.big {
    text-align: center;
    display: none;
}

.nova {
    font-family: 'Nova Mono', monospace;
}

.negrita {
    font-weight: 900;
}

.redondear {
    border-radius: 10px;
    width: 250px;
    height: 20px;
}

.subtitulo,
.subtitulo2,
.subtitulo3 {
    font-family: 'Audiowide', cursive, sans-serif;
    font-weight: bold;
}

.transform:hover {
    position: relative;
    right: 30%;
    transform: scale(1.8);
    margin: auto;
}

.wht {
    color: white;
    /* background-color: rgba(128, 128, 128, .5);  */

}

/* pantalla muy grande */
@media only screen and (max-width: 6980px) and (min-width: 1600px) {
    h1 {
        font-size: 14rem;
    }

    h2 {
        font-size: 5.5rem;
    }

    h3 {
        font-size: 3.5rem;
    }

    h4 {
        font-size: 3rem;
    }

    .letrero {
        font-size: 6rem;
    }

    .letrero2 {
        font-size: 4.5rem;
    }

    .letrero3 {
        font-size: 3rem;
    }

    .letrero4,
    .letrero5 {
        font-size: 2rem;
    }

    .grand {
        font-size: 5rem;
        font-weight: bold;
    }

    .fl::first-letter {
        font-size: 5rem;
        font-weight: bold;
    }

    li {
        font-size: 1.5rem;
    }

    .big {
        display: block;
    }

    .subtitulo {
        font-size: 5.5rem;
    }

    .subtitulo2 {
        font-size: 4.5rem;
    }

    .subtitulo3 {
        font-size: 6rem;
    }

    .cartel {
        font-size: 1.3rem;
    }

    .blk {
        font-size: 1.4rem;
    }

    .foot {
        font-size: 1.7rem;
    }
}

/* Pantalla grande */
@media only screen and (max-width: 1599px) and (min-width: 1300px) {
    h1 {
        font-size: 11rem;
    }

    h2 {
        font-size: 4.4rem;
    }

    h3 {
        font-size: 2rem;
    }

    h4 {
        font-size: 2.5rem;
    }

    .letrero {
        font-size: 6rem;
    }

    .letrero2 {
        font-size: 3rem;
    }

    .letrero3 {
        font-size: 2.5rem;
    }

    .letrero4,
    .letrero5 {
        font-size: 1.5rem;
    }

    .grand {
        font-size: 3.5rem;
        font-weight: bold;
    }

    .fl::first-letter {
        font-size: 3.5rem;
        font-weight: bold;
    }

    li {
        font-size: 1.2rem;
    }

    .medium {
        display: block;
    }

    .subtitulo {
        font-size: 4.5rem;
    }

    .subtitulo2 {
        font-size: 3.5rem;
    }

    .subtitulo3 {
        font-size: 5rem;
    }

    .cartel {
        font-size: 1.1rem;
    }

    .blk {
        font-size: 1.1rem;
    }

    .foot {
        font-size: 1.3rem;
    }
}

/* Pantalla mediana */
@media only screen and (max-width: 1299px) and (min-width: 1000px) {
    h1 {
        font-size: 7rem;
    }

    h2 {
        font-size: 2.8rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    h4 {
        font-size: 2rem;
    }

    .letrero {
        font-size: 4rem;
    }

    .letrero2 {
        font-size: 2rem;
    }

    .letrero3 {
        font-size: 1.8rem;
    }

    .letrero4,
    .letrero5 {
        font-size: .8rem;
    }

    .grand {
        font-size: 2.5rem;
        font-weight: bold;
    }

    .fl::first-letter {
        font-size: 2.5rem;
        font-weight: bold;
    }

    li {
        font-size: 1rem;
    }

    .medium {
        display: block;
    }

    .subtitulo {
        font-size: 3.7rem;
    }

    .subtitulo2 {
        font-size: 2.5rem;
    }

    .subtitulo3 {
        font-size: 4rem;

    }

    .cartel {
        font-size: 1.1rem;
    }

    .blk {
        font-size: .9rem;
    }

    .foot {
        font-size: 1rem;
    }
}

/* Pantalla chica*/
@media only screen and (max-width: 999px) and (min-width: 540px) {
    h1 {
        font-size: 3.6rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: .9rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    .letrero {
        font-size: 2rem;
    }

    .letrero2 {
        font-size: 1rem;
    }

    .letrero3 {
        font-size: .8rem;
    }

    .letrero4,
    .letrero5 {
        font-size: .7rem;
    }

    .grand {
        font-size: 1.8rem;
        font-weight: bold;
    }

    .fl::first-letter {
        font-size: 1.8rem;
        font-weight: bold;
    }

    li {
        font-size: .9rem;
    }

    .small {
        display: block;
    }

    .subtitulo {
        font-size: 2.8rem;
    }

    .subtitulo2 {
        font-size: 1.5rem;
    }

    .subtitulo3 {
        font-size: 3rem;
    }

    .cartel {
        font-size: .7rem;
    }

    .blk {
        font-size: .8rem;
    }

    .foot {
        font-size: 0.6rem;
    }
}

/* Pantalla muy chica */
@media only screen and (max-width: 539px) and (min-width: 350px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1rem;
    }

    h3 {
        font-size: .7rem;
    }

    h4 {
        font-size: 1rem;
    }

    .letrero {
        font-size: 1rem;
    }

    .letrero2 {
        font-size: .8rem;
    }

    .letrero3 {
        font-size: .4rem;
    }

    .letrero4,
    .letrero5 {
        font-size: .6rem;
    }

    .grand {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .fl::first-letter {
        font-size: 1.5rem;
        font-weight: bold;
    }

    li {
        font-size: .7rem;
    }

    .small {
        display: block;
    }

    .subtitulo {
        font-size: 1.8rem;
    }

    .subtitulo2 {
        font-size: 1.2rem;
    }

    .subtitulo3 {
        font-size: 2rem;
    }

    .cartel {
        font-size: .6rem;
    }

    .blk {
        font-size: 0.5rem;
    }

    .foot {
        font-size: 0.4rem;
    }

    .button {
        font-size: .6rem;
    }



}

/* Pantalla mini */
@media only screen and (max-width: 349px) and (min-width: 200px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: .9rem;
    }

    h3 {
        font-size: .6rem;
    }

    h4 {
        font-size: .5rem;
    }

    .letrero {
        font-size: .9rem;
    }

    .letrero2 {
        font-size: .7rem;
    }

    .letrero3 {
        font-size: .3rem;
    }

    .letrero4,
    .letrero5 {
        font-size: .5rem;
    }

    .grand {
        font-size: 1.3rem;
        font-weight: bold;
    }

    .fl::first-letter {
        font-size: 1.3rem;
        font-weight: bold;
    }

    li {
        font-size: .6rem;
    }

    .mini {
        display: block;
    }

    .subtitulo {
        font-size: 1.5rem;
    }

    .subtitulo2 {
        font-size: 1.1rem;
    }

    .subtitulo3 {
        font-size: 1.8rem;
    }

    .cartel {
        font-size: .5rem;
    }

    .blk {
        font-size: .8rem;
    }

    .foot {
        font-size: 0.3rem;
    }

    .button {
        font-size: .4rem;
    }

    .flecharriba {
        /* left: 5px; */
        bottom: 1%;
        z-index: 100;
    }

    .redondear {
        border-radius: 10px;
        width: 200px;
        height: 20px;
    }

    .caja {
        width: 199px;
    }
}