* {
    margin: 0;
    padding: 0;

}

body {
    background-color: #FFF5EA;
}

@font-face {
    font-family: "Bernier";
    src: url("../fonts/BERNIERShade-Regular.otf");
}

@font-face {
    font-family: "Monthproof";
    src: url("../fonts/Mothproof_Script.ttf");
}

@font-face {
    font-family: "Berlin Sans";
    src: url("../fonts/Berlin\ Sans\ FB\ Demi\ Bold.ttf");
}

@font-face {
    font-family: "Las vegas";
    src: url("../fonts/LasVegasOT-Castaway.otf");
}

@media (min-width: 850px) {
    .sombrero {
        transform: translate(-50%, -50%);
        right: 18.7vw;
        position: absolute;
        top: 5vw;
        width: 12vw;
    }

    .sombrero:hover {
        transform: translate(-50%, -50%);
        right: 18.7vw;
        top: 5vw;
        position: absolute;
        width: 12vw;
        animation-name: sombrero;
        animation-duration: 1s;
    }

    .bigote {
        transform: translate(50%, -50%);
        right: 30.5vw;
        position: absolute;
        top: 11vw;
        width: 7vw;
    }

    .sombrerosubtitulo {
        transform: translate(50%, -50%);
        right: 31vw;
        position: absolute;
        top: 16vw;
        text-align: center;
        font-family: "Bernier";
        font-size: 2.5833rem;
        color: #FFF5EA;
    }

    .actionButton {
        z-index: 1;
        transform: translate(-50%, -50%);
        left: 25vw;
        position: absolute;
        top: 16vw;
    }


    .actionButton:hover .flechita_jumbo {
        transform: translate(-50%, -50%);
        left: 50%;
        width: 5rem;
        position: absolute;
        top: 119%;
        transition: top 0.3s linear;
    }
    .bigote:hover {
        transform: translate(50%, -50%);
        right: 30.5vw;
        position: absolute;
        top: 11vw;
        width: 7vw;
        animation-name: bigote;
        animation-duration: 0.5s;
    }
}

@media (max-width: 850px) {
    .sombrero {
        transform: translate(-50%, -50%);
        left: 50%;
        position: absolute;
        top: 10vh;
        width: 25vh;
    }

    .bigote {
        transform: translate(-50%, -50%);
        left: 50%;
        position: absolute;
        top: 22vh;
        width: 15vh;
    }

    .sombrerosubtitulo {
        transform: translate(-50%, -50%);
        left: 50%;
        position: absolute;
        top: 50%;
        text-align: center;
        font-family: "Bernier";
        font-size: 5vh;
        color: #FFF5EA;
    }

    .actionButton {
        z-index: 1;
        transform: translate(-50%, -50%);
        left:50%;
        position: absolute;
        bottom: 0vw;
    }
}

.jumbotron>.filtro {
    background-image: -moz-linear-gradient(top, #000000, rgba(0, 0, 0, 0.2), #000000), url(../img/fondo-jumbotron.png);
    background-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0.2), #000000), url(../img/fondo-jumbotron.png);
    background-image: linear-gradient(to right bottom, #000000, rgba(0, 0, 0, 0.2), #000000), url(../img/fondo-jumbotron.png);

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 70vh;
    position: relative;
}

.jumbotextbutton {
    z-index: 100;
    text-align: center;
    font-family: "Berlin Sans";
    font-size: 2rem;
    color: #FFF5EA;
    background-color: #578B61;
    padding: 2vw;
    border: 0.7rem solid #2E5639;
    text-transform: uppercase;
}


.actionButton:hover {
    cursor: pointer;
}

.flechita_jumbo {
    z-index: -100;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 5rem;
    position: absolute;
    top: 50%;
}

@keyframes sombrero {
    0% {
        transform: rotate(5deg) translate(-50%, -50%);
        right: 18.7vw;
        top: 5vw;
    }

    25% {
        transform: rotate(-5deg) translate(-50%, -50%);
        right: 18.7vw;
        top: 4vw;
    }

    50% {
        transform: rotate(5deg) translate(-50%, -50%);
        right: 18.7vw;
        top: 4vw;
    }

    100% {
        transform: rotate(0deg) translate(-50%, -50%);
        right: 18.7vw;
        top: 5vw;
    }
}

@keyframes bigote {
    0% {
        width: 7vw;
        right: 30.5vw;
        ;
        top: 11vw;
    }

    25% {
        width: 8vw;
        right: 30.5vw;
        ;
        top: 11vw;
    }

    50% {
        width: 7vw;
        right: 30.5vw;
        ;
        top: 11vw;
    }

    100% {
        width: 8vw;
        right: 30.5vw;
        ;
        top: 11vw;
    }
}