* { 
    margin: 0 auto;
}

body {
    font-family: Rubik, sans-serif;
}

a {
    text-decoration: none;
}
  
.main {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(244, 255, 109, 0.15);
}

video {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.main img {
    margin-bottom: 4vh;
    height: 8vh;
}

.main h1, .main h2 {
    color: white;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
}

.main h1 {
    font-size: 5.1vh;
    padding: 0.3vw;
    background-color: #256fff;
}

.main h2 {
    font-size: 2.7vh;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.5),
    0px 8px 10px rgba(0,0,0,0.2),
    0px 18px 20px rgba(0,0,0,0.2);
}

.contador {
    font-weight: 600;
    margin: 20vh 0 5vh 0;
    color: white;
    text-align: center;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.9),
    0px 8px 10px rgba(0,0,0,0.9),
    0px 18px 20px rgba(0,0,0,0.9);
}

.contador ul li {
    display: inline-block;
    font-size: 4vh;
}

.contador ul li:not(:last-child) {
    margin-right: 2rem;
}

.contador p {
    font-size: 2.5vh;
    color: #fedc2a;
    text-transform: uppercase;
}

.boton,
.boton *,
.boton :after,
.boton :before,
.boton:after,
.boton:before {
  border: 0 solid;
  box-sizing: border-box;
}

.boton:-moz-focusring {
  outline: auto;
}

.boton svg {
  display: block;
}

.boton [hidden] {
  display: none;
}

.boton {
    display: block;
    padding: 2vh 4vh;
    font-size: 1.7vh;
    background: #256fff;
    border: 1px solid #fff;
    border-radius: 999px;
    box-sizing: border-box;
    color: #fff;
    font-weight: 700;
    -webkit-mask-image: none;
    mask-image: none;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
    transition: 0.2s;
    cursor: pointer;
}

.boton:hover {
  box-shadow: 0 6px 0 -4px #fff, 0 9px 0 -4px #ffff, 0 12px 0 -4px #fff;
  transform: translateY(-5px);
}

footer { 
    margin: 2vw 0;
}

.flex1 {
    width: 30%;
    display: flex;
    margin-bottom: 2vw;
}

.orden {
    display: inline;
    width: auto;
}

.orden img:not(:last-child),
.orden div img:not(:last-child) {
    padding-right: 2vw;
}

.flex2 .orden div img { 
    justify-content: center;
    align-items: center;
}

.orden h2 {
    font-size: 1vw;
    color: #3d3d3d;
    text-align: center;
    padding-bottom: 0.7vw;
}

.orden div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex2 {
    width: 50%;
    display: flex;
}

footer:first-of-type .flex2 {
    margin-top: 1.5vw;
}



@media screen and (max-width: 800px) {
    
    .main h1 {
        font-size: 6vw;
        padding: 1vw;
    }

    .main h2 {
        font-size: 3vw;
    }

    .contador ul li {
        font-size: 5vw;
    }
    
    .contador ul li:not(:last-child) {
        margin-right: 3vw;
    }

    .contador p {
        font-size: 3.5vw;
    }

    .main img { 
        height: 9vw;
    }

    footer { 
        margin: 4vw 0;
    }

    .flex1, .flex2 {
        width: 100%;
    }

    .flex1 img {
        height: 10vh;
    }

    .flex2 img {
        width: 20vw;
    }

    .flex2:nth-child(3) {
        padding-top: 2vw;
    }

    .row1 img:nth-child(2) {
        width: 11vw;
    }
    
    .row2 img:nth-child(1) {
        width: 15vw;
    }
    
    .row2 img:nth-child(n+2) {
        width: 12vw;
    }

    .row2 img:nth-child(4) {
        width: 10vw;
    }

    .flex1 {
        margin-bottom: 20px;
    }

    .orden h2 {
        font-size: 3.2vw;
    }

}