*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}

html, body{
    width: 100%;
    height: 220vw;
}

body{
    background-color: #fff;
    font-size: 16px;
}

.menu-list{
    display: none;
}

.container{
    user-select: none;
    background-image: url(src/01.jpg);
    background-size: contain;
    height: inherit;
    width: inherit;
}

.wabtn{
    position: absolute;
    z-index: 100;
}

/* header */

nav{
    user-select: none;
    position: fixed;
    width: 100%;
    background-color: rgba(47, 2, 2, 0.65);
    box-shadow: 0px 1px 12px #ede74b;
    z-index: 100;
}

nav ul{
    align-items: center;
    display: flex;
    font-size: 110%;
    z-index: 100;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);}

nav ul li{
    font-family: monospace;
    font-weight: 550;
    margin: 0 0 0 2vw;
}

nav ul li .name{
    font-family: sans-serif;
    margin: 0 2vw 0 -1.8vw;
    font-size: 150%;
    cursor: default;
    filter: drop-shadow(0px 0px 2px #ede74b)
            drop-shadow(0px 0px 2px #7cffaf)
            drop-shadow(0px 0px 2px #ede74b);  
}

nav ul li a{
    color: #4b93c5;
    transition: 0.2s ease-in-out;
}

nav ul li a:hover{
    filter: drop-shadow(0px 0px 3px #ede74b)
            drop-shadow(0px 0px 1px #ede74b)
            drop-shadow(0px 0px 1px #ede74b);
}

nav ul li h1{
    user-select: all;
    font-size: 1.8vw;
    color: #fff;
    position: absolute;
    width: 28%;
    top: 0;
    left: 80vw;
    filter: drop-shadow(0px -1px 2px #000)
            drop-shadow(0px -1px 2px #000);
}

#whatsapp{
    position: relative;
    top: 0.15vw;
    font-size: 110%;
    color: #4fc95d;
    margin: 0 6% 0 0;
}

#email{
    position: relative;
    font-size: 140%;
    color: #4b4b4b;
    cursor: pointer;
    filter: drop-shadow(0px 0px 4px #7cffaf)
            drop-shadow(0px 0px 4px #7cffaf); 
}

/* boxes */

/* servicios */

.sidebar{
    border-right: 2px solid #ede74b;
    height: 114vw;
    position: absolute;
    right: 74vw;
    top: 44vw;
    border-radius: 50%;
}

.sidebar1{
    border-right: 2px solid #ede74b;
    height: 15vw;
    position: absolute;
    right: 65vw;
    top: 170.5vw;
    border-radius: 50%;
}

.box1{
    position: absolute;
    width: 70%;
    left: 15%;
    right: 15%;
    top: 10vw;
    font-family: sans-serif;
}

.box1 h1{
    text-align: center;
    color: #fff;
    font-size: 5.2vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.box1 h3{
    color: #fff;
    padding: 4% 0 0 0;
    position: inherit;
    width: 80%;
    left: 10%;
    right: 10%;
    font-weight: 200;
    font-size: 2.3vw;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.services{
    position: absolute;
    width: 70%;
    left: 15%;
    right: 15%;
    top: 10vw;
    font-family: sans-serif;
}

.services h2{
    position: absolute;
    text-align: center;
    color: #fff;
    top: 45vw;
    right: 45vw;
    width: 40%;
    font-size: 3vw;
    filter: drop-shadow(0px 0px 5px #000)
            drop-shadow(0px 0px 5px #000)
            drop-shadow(0px 0px 5px #000);
}

.services ul{
    position: absolute;
    text-align: center;
    color: #fff;
    top: 53vw;
    right: 40vw;
    width: 50%;
    font-size: 2vw;
    filter: drop-shadow(0px 0px 5px #000)
            drop-shadow(0px 0px 5px #000)
            drop-shadow(0px 0px 5px #000);
}

.services .li1 h1{
    position: absolute;
    color: #fff;
    top: 0;
    left: 2vw;
    width: 155%;
    font-size: 2.5vw;
}

.services .li1 h3{
    text-align: left;
    position: absolute;
    color: #fff;
    top: 5vw;
    left: 5.5vw;
    width: 140%;
    font-size: 1.8vw;
}

.services .li2 h1{
    position: absolute;
    color: #fff;
    top: 23vw;
    right: 2vw;
    width: 88%;
    font-size: 2.5vw;
}

.services .li2 h3{
    text-align: left;
    position: absolute;
    color: #fff;
    top: 28vw;
    left: 5.5vw;
    width: 140%;
    font-size: 1.8vw;
}

.services .li3 h1{
    position: absolute;
    color: #fff;
    top: 46vw;
    right: 17vw;
    width: 45%;
    font-size: 2.5vw;
}

.services .li3 h3{
    text-align: left;
    position: absolute;
    color: #fff;
    top: 51vw;
    left: 5.5vw;
    width: 140%;
    font-size: 1.8vw;
}

.services .li4 h1{
    position: absolute;
    color: #fff;
    top: 66vw;
    right: -16.5vw;
    width: 140%;
    font-size: 2.5vw;
}

.services .li4 h3{
    text-align: left;
    position: absolute;
    color: #fff;
    top: 71vw;
    left: 5.5vw;
    width: 140%;
    font-size: 1.8vw;
}

.services .li5 h1{
    position: absolute;
    color: #fff;
    top: 88vw;
    right: -6vw;
    width: 110%;
    font-size: 2.5vw;
}

.services .li5 h3{
    text-align: left;
    position: absolute;
    color: #fff;
    top: 93vw;
    left: 5.5vw;
    width: 140%;
    font-size: 1.8vw;
}

.box2{
    position: absolute;
    font-family: sans-serif;
    color: #fff;
    top: 195vw;
    right: 5.5vw;
    width: 75%;
    font-size: 2vw;
    filter: drop-shadow(0px 0px 5px #000)
            drop-shadow(0px 0px 5px #000)
            drop-shadow(0px 0px 5px #000);
}

.box2 h1{
    position: absolute;
    color: #fff;
    bottom: 9vw;
    left: 1vw;
    width: 75%;
    font-size: 3vw;
}

.box2 h3{
    position: absolute;
    color: #fff;
    bottom: 2vw;
    left: 1vw;
    width: 75%;
    font-size: 2vw;
}

/* buttons */ 

.box2 .btn1{
    position: inherit;
    left: 45%;
    bottom: 5vw;
    width: 35%;
    text-align: center;
    filter: drop-shadow(0px 0px 4px #ede74b);
}

.container a{
    position: relative;
    background: #444;
    color: #fff;
    text-decoration: none;
    font-size: 2.5vw;
    letter-spacing: 0.1em;
    padding: 10px 30px;
    transition: 0.4s ease-in-out;
}

.container a:hover{
    background: var(--clr);
    color: var(--clr);
    box-shadow: 0 0 35px var(--clr);
    letter-spacing: 0.25em;
}

.container a::before{
    content: '';
    position: absolute;
    inset: 2px;
    background: #27282c;
}

.container span{
    position: relative;
    z-index: 1;
}

.container a .btn{
    position: absolute;
    inset: 0;
    display: block;
}

.container a .btn::before{
    content: '';
    position: absolute;
    top: -1.25vw;
    left: 80%;
    width: 1vw;
    height: 1vw;
    border: 0.4vw solid var(--clr);
    border-radius: 50%;
    background: #27282c;
    transform: translateX(-50%);
    transition: 0.4s;
}

.container a:hover .btn::before{
    width: 20px;
    left: 20%;
}

.container a .btn::after{
    content: '';
    position: absolute;
    bottom: -1.25vw;
    left: 20%;
    width: 1vw;
    height: 1vw;
    border: 0.4vw solid var(--clr);
    border-radius: 50%;
    background: #27282c;
    transform: translateX(-50%);
    transition: 0.4s;
}

.container a:hover .btn::after{
    width: 20px;
    left: 80%;
}

/* icons */

.icons{
    position: relative;
    color: #2d2564;
    font-size: 8vw;
}

.data{
    position: absolute;
    top: 64vw;
    right: 15vw;
    transition: 0.3s ease-in-out;
    filter: drop-shadow(0px 0px 4px #7cffaf)
            drop-shadow(0px 0px 3px #7cffaf);
}

.pc{
    position: absolute;
    top: 87vw;
    right: 14vw;
    transition: 0.3s ease-in-out;
    filter: drop-shadow(0px 0px 4px #7cffaf)
            drop-shadow(0px 0px 3px #7cffaf);
}

.itserv{
    position: absolute;
    top: 110vw;
    right: 15.5vw;
    transition: 0.3s ease-in-out;
    filter: drop-shadow(0px 0px 4px #7cffaf)
            drop-shadow(0px 0px 3px #7cffaf);
}

.hsware{
    position: absolute;
    top: 131vw;
    right: 15.5vw;
    transition: 0.3s ease-in-out;
    filter: drop-shadow(0px 0px 4px #7cffaf)
            drop-shadow(0px 0px 3px #7cffaf);
}

.file{
    position: absolute;
    top: 153vw;
    right: 14vw;
    transition: 0.3s ease-in-out;
    filter: drop-shadow(0px 0px 4px #7cffaf)
            drop-shadow(0px 0px 3px #7cffaf);
}

/* footer */

footer{
    background-image: url(src/footer.jpg);
    background-size: contain;
    height: 3vw;
}

.footername{
    user-select: none;
    cursor: default;
    position: relative;
    font-family: sans-serif;
    font-size: 2vw;
    bottom: 2.7vw;
    width: 13%;
    padding: 0.5% 0 0 1%;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

.container .endbar{
    border-bottom: 2px solid #ede74b;
    width: 90%;
    margin: 0 5%; 0 5%;
    top: 220vw;
    position: relative;
    display: flex;
    left: 0;
    border-radius: 50%;
}

.instagram{
    font-size: 2.3vw;
    color: #fff;
    position: relative;
    text-decoration: none;
    left: 96%;
    z-index: 100;
    transition: 0.3s ease-in-out;
    filter: drop-shadow(0px 0px 5px #000)
            drop-shadow(0px 0px 5px #000);
}

.instagram:hover{
    color: #000;
    filter: drop-shadow(0px 0px 7px #7cffaf)
            drop-shadow(0px 0px 7px #7cffaf);
}

footer h1{
    user-select: none;
    color: #fff;
    font-size: 1.3vw;
    width: 33%;
    position: relative;
    left: 14%;
    bottom: 4.5vw;
    font-family: sans-serif;
    cursor: default;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

footer h2{
    user-select: none;
    color: #fff;
    font-size: 1.3vw;
    position: relative;
    left: 48%;
    width: 25%;
    bottom: 6vw;
    font-family: sans-serif;
    cursor: default;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

footer h4{
    user-select: all;
    color: #fff;
    font-size: 1.3vw;
    position: relative;
    left: 74%;
    width: 22%;
    bottom: 7.5vw;
    font-family: sans-serif;
    filter: drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000)
            drop-shadow(0px 0px 4px #000);
}

@media (max-width:720px){
    html, body{
        height: 385vw;
    }
    
      .menu-list{
        display: contents;
    }

    .box1{
        position: absolute;
        width: 90%;
        left: 5%;
        top: 25vw;
        font-family: sans-serif;
    }

    .box1 h1{
        font-size: 7.2vw;
    }

    .box1 h3{
        text-align: center;
        width:90%;
        left: 5%;
        font-weight: 600;
        font-size: 3.5vw;
    }
    
    .services{
        width: 99%;
        left: 0;
        right: 15%;
        top: 55vw;
        font-family: sans-serif;
    }

    .services h2{
        top: 45vw;
        right: 21vw;
        width: 90%;
        font-size: 6vw;
    }

    .services .li1 h1{
        top: 3vw;
        left: -4vw;
        width: 173%;
        font-size: 4vw;
    }

    .services .li1 h3{
        top: 11vw;
        left: 0;
        width: 175%;
        font-size: 3.2vw;
    }

    .services .li2 h1{
        top: 45vw;
        width: 125%;
        left: -10.5vw;
        font-size: 4vw;
    }

    .services .li2 h3{
        top: 54vw;
        left: 0;
        width: 175%;
        font-size: 3.2vw;
    }

    .services .li3 h1{
        top: 87vw;
        width: 50%;
        left: -4vw;
        font-size: 4vw;
    }

    .services .li3 h3{
        top: 97vw;
        left: 0;
        width: 175%;
        font-size: 3.2vw;
    }

    .services .li4 h1{
        top: 123vw;
        width: 156%;
        left:  -3.5vw;
        font-size: 4vw;
    }

    .services .li4 h3{
        top: 133vw;
        left: 0vw;
        width: 175%;
        font-size: 3.2vw;
    }

    .services .li5 h1{
        top: 163vw;
        width: 123%;
        left:  -3.5vw;
        font-size: 4vw;
    }

    .services .li5 h3{
        top: 173vw;
        left: 0vw;
        width: 175%;
        font-size: 3.2vw
    }
    
    .sidebar{
        border-right: 4px solid #ede74b;
        height: 203vw;
        right: 94vw;
        top: 42vw;
    }
    
    .sidebar1{
        border-right: 4px solid #ede74b;
        height: 25vw;
        right: 89vw;
        top: 269vw;
    }
    
    .box2{
        top: 347vw;
        right: 5.5vw;
        width: 75%;
    }

    .box2 h1{
        bottom: 13vw;
        left: -7vw;
        font-size: 6vw;
    }

    .box2 h3{
        bottom: 2vw;
        left: -7vw;
        width: 75%;
        font-size: 3.2vw;
    }
    
    .box2 .btn1{
        left: 42%;
        bottom: 5vw;
        width: 43%;
        padding: 4%;
        font-size: 3.5vw;
    }
    
    .container a .btn::after{
        bottom: -2.25vw;
        width: 2vw;
        height: 2vw;
        border: 0.8vw solid var(--clr);
    }
    
    .container a .btn::before{
        top: -2.25vw;
        width: 2vw;
        height: 2vw;
        border: 0.8vw solid var(--clr);
    }
    
    /* icons */

    .icons{
        top: 10vw;
        font-size: 12vw;
    }

    .data{
        top: 87vw;
    }

    .pc{
        top: 138vw;
    }

    .itserv{
        top: 180vw;
    }

    .hsware{
        right: 4vw;
        top: 216vw;
    }

    .file{
        top: 256vw;
    }

    /* footer */
    
    footer{
        height: 11vw;
    }
    
    .footername{
        top: -6.8vw;
        padding: 0 0 0 0.8%;
        font-size: 4vw;
        width: 27%;
    }

    .container .endbar{
        border-bottom: 3px solid #ede74b;
        top: 385vw;
    }

    .instagram{
        font-size: 7vw;
        left: 92.5%;
        top: 1.5vw;
    }

    footer h1{
        font-size: 1.88vw;
        left:1%;
        top: -5.5vw;
        width: 48%;
    }

    footer h2{
        font-size: 3.35vw;
        left: 29%;
        top: -13.1vw;
        width: 63%;
    }

    footer h4{
        font-size: 2.7vw;
        left: 48%;
        top: -12.3vw;
        width: 45%;
    } 
    
    /* header */

    nav ul li{
        font-weight: 550;
        margin: 0 0 0 2vw;
    }

    nav ul li .name{
        margin: 0 2vw 0 -1.8vw;
        font-size: 150%; 
    }

    nav ul li a{
        color: #4b93c5;
        transition: 0.2s ease-in-out;
    }

    nav ul li a:hover{
        filter: drop-shadow(0px 0px 2px #ede74b)
                drop-shadow(0px 0px 2px #ede74b)
                drop-shadow(0px 0px 2px #ede74b)
                drop-shadow(0px 0px 2px #ede74b);
    }

    nav ul li h1{
        user-select: all;
        font-size: 120%;
        color: #fff;
        position: absolute;
        width: 28%;
        top: 0.18vw;
        right: 0;
        filter: drop-shadow(0px -1px 2px #000)
                drop-shadow(0px -1px 2px #000);
    }

    #whatsapp{
        position: relative;
        top: 0.15vw;
        font-size: 110%;
        color: #4fc95d;
        margin: 0 6% 0 0;
    }
    
    #email{
        position: relative;
        font-size: 140%;
        left: 0;
        top: 15vw;
    }
    
    .bars{
        display: contents;
    }
    
    /* header */
    
    nav ul li a{
        display: none;
    }
    
    nav li h1{
        display: none;
    }
    
    #whatsapp{
        display: none;
    }
    
    nav ul li .name{
        font-size: 9vw;
        padding: 0 0 0 3%;
        width: 105%;
        filter: drop-shadow(0px 0px 1.5px #ede74b)
                drop-shadow(0px 0px 1.5px #7cffaf)
                drop-shadow(0px 0px 1.5px #ede74b);  
    }
    
    #menu {
        display: none;
    }

    input:checked ~ .menu{
        height: 100%;
        width: 100%;
    }

    .menu-list a{
        position: relative;
        display: block;
        text-align: center;
        font-size: 8vw;
        width: 98%;
        top: 5vw;
        height: 11vw;
        padding: 6% 0 0 0;
        margin: 0 0 2% 0;
        border-radius: 6%;
    }
    
    .menu-list h1{
        position: relative;
        display: block; 
        font-size: 5vw;
        width: 62.6%;
        left: 10vw;
        top: -13vw;
        border-radius: 6%;
        padding: 0 0 0 15%;
        margin: 5% 0 5% 0;
        transition: 0.1s ease-in;
    }

    .menu{
        background-color: rgba(47, 2, 2, 0.49);
        overflow: hidden;
        position:fixed;
        display: grid;
        align-content: center;
        width: 0;
        height: 0;
        top: 0;
        border-radius: 2%;
        z-index: 110;
        transition: 0.3s ease-in-out;
    }

    #whatsapp-menu{
        position: relative;
        top: 0.15vw;
        font-size: 120%;
        color: #4fc95d;
        margin: 0 6% 0 0;
    }
    
    .menu-logo{
        display: none;
        /*z-index: 300;
        position: absolute;
        width: 20%;
        top: 1%;
        left: 7%;
        filter: drop-shadow(0px 0px 2px #7cffaf)
                drop-shadow(0px 0px 3px #7cffaf);*/
    }
    
    .menu-list label:hover, 
    .menu-list label:active{
        z-index: 400;
        cursor: pointer;
    }
    
    .up{
        width: 6%;
        bottom: 13vw;
        position: absolute;
        display: flex;
        justify-content: center;
        left: 76.5vw;
        height: 1%;
        font-size: 10vw;
        color: #4b93c5;
        transition: .5s;
        z-index: 300;
        filter: drop-shadow(0px 0px 1.5px #ede74b)
                drop-shadow(0px 0px 1.5px #7cffaf)
                drop-shadow(0px 0px 1.5px #ede74b);  
    }

    .middle{
        width: 6%;
        position: absolute;
        display: flex;
        bottom: 9.9vw;
        left: 78vw;
        justify-content: center;
        height: 1%;
        font-size: 10vw;
        color: #514587;
        transition: .3s;
        z-index: 300;
        filter: drop-shadow(0px 0px 3px #7cffaf)
                drop-shadow(0px 0px 4px #7cffaf)
                drop-shadow(0px 0px 3px #7cffaf);   
    }

    .bottom{
        width: 6%;
        position: absolute;
        display: flex;
        bottom: 7vw;
        left: 75vw;
        height: 1%;
        font-size: 10vw;
        color: #4b93c5;
        transition: .5s;
        z-index: 300;
        filter: drop-shadow(0px 0px 1.5px #ede74b)
                drop-shadow(0px 0px 1.5px #7cffaf)
                drop-shadow(0px 0px 1.5px #ede74b);  
    }

    input:checked ~ .up{
        color: red;
        transform: rotate(45deg) translate(135%);
        filter: none;
    }

    input:checked ~ .middle{
        transform: translateX(100%);
        color: transparent;
        /*filter: none;*/
    }

    input:checked ~ .bottom{
        color: red;
        transform: rotate(-45deg) translate(-18%);
        filter: none;
    }
}