*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}










html{
    scroll-behavior: smooth;
}

body{
    background-image: linear-gradient(rgba(0,0,0,0.9), #9d81619a), url(IMAGES/FinishedFiles/3d/FotosST/FOTOLOGO2.jpg);

            height: 100%; 

            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

            background-attachment: fixed;
}
/*
body{
    background: linear-gradient(-45deg, #552c07, #9d8161);
}*/
li, a, button{
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: white;
    text-decoration: none;
}
#BGGENERAL{
    position: absolute;
    width: 100%;
    top: 99vh;
   background: repeating-linear-gradient(
        35deg,
        #552c07 0px 2px,
        #9d816100 0px 4px
      );    z-index: -1;
    height: 75vh;
    animation: none 40000ms infinite linear;
    box-shadow: black 0px 0px 100px;
    border: 2px solid white;

}

.videointro{
   /* border: 2px solid white;
    border-radius: 1%;
    position: absolute;
    width: 50%;
    left: calc(50% - 25%);
    opacity: 100;
    top: 113vh;*/
    z-index: 99;
    position: absolute;
    left: calc(50% - 25%);
    width: 50%;
    top: 15.3%;
    border: 2px solid white;
    border-radius: 15px;
    color: #804000;



}
.video-js {
    position: absolute;
    height: calc(100% - 195px);
    position: absolute;
    border-radius: 15px;
    color: #804000;
  }
#INTRO{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.674);
    font-family: 'Times New Roman', Times, serif;
}
#header{
    position: fixed;
    top: 0%;
    left: 0;
    height: 125px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 7%;
    background-color: #c1b59f4b;
    background-size: cover;
    backdrop-filter: blur(5px);
    background-position: top;
    overflow: hidden;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    transition: 0.7s ease-in-out;
    z-index: 100;
    opacity: 1;
    transition: all .8s ease;
    transform: translateY(0px);

}
#header.active{
    position: fixed;
    top: 0%;
    left: 0;
    height: 125px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 7%;
    background-color: #c1b59f4b;
    background-size: cover;
    backdrop-filter: blur(5px);
    background-position: top;
    overflow: hidden;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    transition: 0.7s ease-in-out;
    z-index: 100;
    opacity: 1;
    transition: all .8s ease;
    transform: translateY(0px);

}
header.scrolled{
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    background-color: #7b5037;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    transform: translateY(-140px);
}
.logo{
    cursor: pointer;
    filter: brightness(99);
    margin-top: 10px;
    width: 300px;
    margin-left: -30%;
    transition: all .4s ease-in-out;
}
.nav__links{
    list-style: none;
}
.nav__links li{
    display: inline-block;
    padding: 0px 20px;
    z-index: 1000;
}
.nav__links li a{
    transition: all 0.7s ease 0s;
    margin-right: 160px;
    font-weight: 100;
    font-size: 1.3em;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    text-transform: uppercase;
    z-index: 1000;
}
.nav__links li a:hover{
    color: #ffca8e;
    text-decoration: none;
    letter-spacing: 2px;
}
#cont {
    padding: 9px 25px;
    background-color: #c1b59f;
    border: none;
    position: absolute;
    margin-top: -20px;
    right: 170px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1.2em;
    transition: all 0.7s ease 0s;

}
#cont:hover{
    background-color: #9d8161;
}
.temawrapper{
    background-color: rebeccapurple;
}
.social-links3{
    display: block;    
}
.social-links3.scrolled:hover{
    transform: translateY(15px);
}
.social-links3{
    position: absolute;
    display: flex;
    right: 0px;
    margin-top: 10px;
    justify-content: center;
    margin-right: 20px;
    margin-bottom: 15px;
    transition: transform .5s ease 0s;
    
}
.social-links3 button{
    width: 60px;
    height: 60px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px 5px rgba(33, 31, 31, 0.336);
    outline: none;
    background: transparent;
    border: 0px solid black;
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform all 0.5s ease-in-out;
}
.social-links3 button #fa-solid{
    margin-top: 0px;
    font-size: 30px;
    line-height: 80px;
    position: relative;
    text-decoration: none;
    color: rgb(255, 255, 255);
    transition: color .5s;
}
#fa-solid:hover{
    text-decoration: none;
    color: white;

}

.social-links3 button::after{
    content: '';
    width: 60px;
    height: 60px;
    top: -70px;
    z-index: -1;
    left: 0;
    background: linear-gradient(-45deg, rgb(255, 255, 255), #9d8161);
    position: absolute;
    transition: 0.7s;

}
.social-links3 button:hover::after{
    top: 0;
}
.social-links3 button:hover .fab-brands{
    color: white;
}
.social-links4{
    display: block;    
}
.social-links4{
    position: absolute;
    display: flex;
    left: 10px;
    top: 30px;
    justify-content: center;
    margin-right: 20px;
    margin-bottom: 15px;
    transition: transform .5s ease 0s;
    
}
.social-links4 button{
    width: 60px;
    height: 60px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px 5px rgba(33, 31, 31, 0.336);
    outline: none;
    background: transparent;
    border: 0px solid black;
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
}
.social-links4 button .fa-solid{
    margin-top: -9px;
    font-size: 20px;
    line-height: 80px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    color: rgb(255, 255, 255);
    transition: color .5s;
}
.social-links4 button::after{
    content: '';
    width: 60px;
    height: 60px;
    top: -70px;
    left: 0;
    background: linear-gradient(-45deg, rgb(255, 255, 255), #9d8161);
    position: absolute;
    transition: 0.7s;

}
.social-links4 button:hover::after{
    top: 0;
}
.social-links4 button:hover .fab-brands{
    color: white;
}
.social-links4 button:hover{
    transform: translateY(-10px);
}


.wrapper4{
    position: absolute;
    background-image: url(BACKGROUND/BACKGROUND5.png);
    background-size: cover;
    background-position: top;
    overflow: hidden;
    width: 100%;
    height: 500px;
    top: 270vh;
    background-size: cover;
    background-position: top;
    overflow: hidden;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    z-index: 1;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

#logo2{
    width: 130px;
    margin-top: 20px;
    filter: brightness(1.3);
    margin-left: 0px;

}

.cloumn1 h1{
    color: white;
    position: absolute;
    font-weight: 300;
    left: calc(50% - 900px);
}

.social-links7{
    display: block;    
}

.social-links7{
    position: absolute;
    display: flex;
    margin-top: 100px;
    justify-content: center;
    left: 220px;
    top: 120px;
    
}

.social-links7 button{
    width: 70px;
    height: 70px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px 5px rgba(33, 31, 31, 0.336);
    outline: none;
    background: rgba(255, 255, 255, 0.184);
    border: 0px solid black;
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
}

.social-links7 button .fa-brands{
    margin-top: -5px;
    font-size: 30px;
    line-height: 80px;
    position: relative;
    text-decoration: none;
    color: white;
    transition: color .5s;
}

.social-links7 button::after{
    content: '';
    z-index: -1;
    width: 70px;
    height: 70px;
    top: -70px;
    left: 0;
    background: linear-gradient(-45deg, rgb(172, 210, 158), rgb(98, 177, 143));
    position: absolute;
    transition: 0.7s;

}

.social-links7 button:hover::after{
    top: 0;
}

.social-links7 button:hover .fa-brands{
    color: white;
}

.social-links7 button:hover{
    transform: translateY(-10px);
}

.social-links6{
    display: block;    
}

.social-links6{
    position: absolute;
    display: flex;
    margin-top: 100px;
    justify-content: center;
    left: 100px;
    top: 120px;
    
}

.social-links6 button{
    width: 70px;
    height: 70px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px 5px rgba(33, 31, 31, 0.336);
    outline: none;
    background: rgba(255, 255, 255, 0.184);
    border: 0px solid black;
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
}

.social-links6 button .fa-brands{
    margin-top: -5px;
    font-size: 30px;
    line-height: 80px;
    position: relative;
    text-decoration: none;
    color: white;
    transition: color .5s;
}

.social-links6 button::after{
    content: '';
    z-index: -1;
    width: 70px;
    height: 70px;
    top: -70px;
    left: 0;
    background: linear-gradient(-45deg, rgb(227, 170, 170), rgb(177, 98, 98));
    position: absolute;
    transition: 0.7s;

}

.social-links6 button:hover::after{
    top: 0;
}

.social-links6 button:hover .fa-brands{
    color: white;
}

.social-links6 button:hover{
    transform: translateY(-10px);
}

.social-links8{
    display: block;    
}

.social-links8{
    position: absolute;
    display: flex;
    margin-top: 100px;
    justify-content: center;
    left: 340px;
    top: 120px;
    
}

.social-links8 button{
    width: 70px;
    height: 70px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px 5px rgba(33, 31, 31, 0.336);
    outline: none;
    background: rgba(255, 255, 255, 0.184);
    border: 0px solid black;
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
}

.social-links8 button .fa-brands{
    margin-top: -5px;
    font-size: 30px;
    line-height: 80px;
    position: relative;
    text-decoration: none;
    color: white;
    transition: color .5s;
}

.social-links8 button::after{
    content: '';
    z-index: -1;
    width: 70px;
    height: 70px;
    top: -70px;
    left: 0;
    background: linear-gradient(-45deg, rgb(147, 147, 147), rgb(70, 67, 67));
    position: absolute;
    transition: 0.7s;

}

.social-links8 button:hover::after{
    top: 0;
}

.social-links8 button:hover .fa-brands{
    color: rgb(255, 255, 255);
}

.social-links8 button:hover{
    transform: translateY(-10px);
}

.social-links9{
    display: block;    
}

.social-links9{
    position: absolute;
    display: flex;
    margin-top: 100px;
    justify-content: center;
    left: 460px;
    top: 120px;
    
}

.social-links9 button{
    width: 70px;
    height: 70px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px 5px rgba(33, 31, 31, 0.336);
    outline: none;
    background: rgba(255, 255, 255, 0.184);
    border: 0px solid black;
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
}

.social-links9 button .fa-brands{
    margin-top: -5px;
    font-size: 30px;
    line-height: 80px;
    position: relative;
    text-decoration: none;
    color: white;
    transition: color .5s;
}

.social-links9 button::after{
    content: '';
    z-index: -1;
    width: 70px;
    height: 70px;
    top: -70px;
    left: 0;
    background: linear-gradient(-45deg, rgb(187, 231, 245), rgb(98, 157, 177));
    position: absolute;
    transition: 0.7s;

}

.social-links9 button:hover::after{
    top: 0;
}

.social-links9 button:hover .fa-brands{
    color: rgb(255, 255, 255);
}

.social-links9 button:hover{
    transform: translateY(-10px);
}

.social-links10{
    display: block;    
}

.social-links10{
    position: absolute;
    display: flex;
    margin-top: 100px;
    justify-content: center;
    left: 100px;
    top: 220px;
    
}

.social-links10 button{
    width: 70px;
    height: 70px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px 5px rgba(33, 31, 31, 0.336);
    outline: none;
    background: rgba(255, 255, 255, 0.184);
    border: 0px solid black;
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
}

.social-links10 button .fa-brands{
    margin-top: -5px;
    font-size: 30px;
    line-height: 80px;
    position: relative;
    text-decoration: none;
    color: white;
    transition: color .5s;
}

.social-links10 button::after{
    content: '';
    z-index: -1;
    width: 70px;
    height: 70px;
    top: -70px;
    left: 0;
    background: linear-gradient(-45deg, rgb(164, 204, 220), rgb(16, 84, 106));
    position: absolute;
    transition: 0.7s;

}

.social-links10 button:hover::after{
    top: 0;
}

.social-links10 button:hover .fa-brands{
    color: rgb(255, 255, 255);
}

.social-links10 button:hover{
    transform: translateY(-10px);
}

.social-links11{
    display: block;    
}

.social-links11{
    position: absolute;
    display: flex;
    margin-top: 100px;
    justify-content: center;
    left: 340px;
    top: 220px;
    
}

.social-links11 button{
    width: 70px;
    height: 70px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px 5px rgba(33, 31, 31, 0.336);
    outline: none;
    background: rgba(255, 255, 255, 0.184);
    border: 0px solid black;
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
}

.social-links11 button .fa-brands{
    margin-top: -5px;
    font-size: 30px;
    line-height: 80px;
    position: relative;
    text-decoration: none;
    color: white;
    transition: color .5s;
}

.social-links11 button::after{
    content: '';
    z-index: -1;
    width: 70px;
    height: 70px;
    top: -70px;
    left: 0;
    background: linear-gradient(-45deg, rgb(189, 138, 203), rgb(171, 39, 166));
    position: absolute;
    transition: 0.7s;

}

.social-links11 button:hover::after{
    top: 0;
}

.social-links11 button:hover .fa-brands{
    color: rgb(255, 255, 255);
}

.social-links11 button:hover{
    transform: translateY(-10px);
}

.social-links12{
    display: block;    
}

.social-links12{
    position: absolute;
    display: flex;
    margin-top: 100px;
    justify-content: center;
    left: 220px;
    top: 220px;
    
}

.social-links12 button{
    width: 70px;
    height: 70px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px 5px rgba(33, 31, 31, 0.336);
    outline: none;
    background: rgba(255, 255, 255, 0.184);
    border: 0px solid black;
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
}

.social-links12 button .fa-brands{
    margin-top: -5px;
    font-size: 30px;
    line-height: 80px;
    position: relative;
    text-decoration: none;
    color: white;
    transition: color .5s;
}

.social-links12 button::after{
    content: '';
    z-index: -1;
    width: 70px;
    height: 70px;
    top: -70px;
    left: 0;
    background: linear-gradient(-45deg, rgb(0, 0, 0), rgb(183, 91, 186));
    position: absolute;
    transition: 0.7s;

}

.social-links12 button:hover::after{
    top: 0;
}

.social-links12 button:hover .fa-brands{
    color: rgb(255, 255, 255);
}

.social-links12 button:hover{
    transform: translateY(-10px);
}

.social-links13{
    display: block;    
}

.social-links13{
    position: absolute;
    display: flex;
    margin-top: 100px;
    justify-content: center;
    left: 460px;
    top: 220px;
    
}

.social-links13 button{
    width: 70px;
    height: 70px;
    text-align: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px 5px rgba(33, 31, 31, 0.336);
    outline: none;
    background: rgba(255, 255, 255, 0.184);
    border: 0px solid black;
    margin: 0 30px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
}

.social-links13 button .fa-brands{
    margin-top: -5px;
    font-size: 30px;
    line-height: 80px;
    position: relative;
    text-decoration: none;
    color: white;
    transition: color .5s;
}

.social-links13 button::after{
    content: '';
    z-index: -1;
    width: 70px;
    height: 70px;
    top: -70px;
    left: 0;
    background: linear-gradient(-45deg, rgb(201, 251, 255), rgb(183, 91, 186));
    position: absolute;
    transition: 0.7s;

}

.social-links13 button:hover::after{
    top: 0;
}

.social-links13 button:hover .fa-brands{
    color: rgb(255, 255, 255);
}

.social-links13 button:hover{
    transform: translateY(-10px);
}

#tituloau{
    color: white;
    position: absolute;
    font-weight: 300;
    right: calc(50% - 900px);
}

.lista a{
    color: white;
    position: absolute;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 250px;
    right: calc(50% - 865px);
    margin-top: 80px;
    letter-spacing: 1px;
    text-decoration: none;
    font-size: 1.12em;
    transition: all .5s ease 0s;
}

.lista a:hover{
    text-decoration: none;
    color: #9d8161;
    letter-spacing: 2px;
}

#about212{
    color: white;
    position: relative;
    margin-top: -110px;
    margin-right: -30px;
    margin-bottom: 30px;
    letter-spacing: 30px;
    font-weight: 300;
}

.listas a{
    color: white;
    align-items: left;
    width: 250px;
    margin-top: 80px;
    margin-right: 30px;
    letter-spacing: 1px;
    text-decoration: none;
    font-size: 1.12em;
    transition: all .5s ease 0s;
}

.listas a:hover{
    text-decoration: none;
    color: #9d8161;
    letter-spacing: 2px;
}

#textCC{
    color: rgb(181, 181, 181);
    letter-spacing: 5px;
}




.wrapper1{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 30%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Paciente\ crítico.jpg);
    left: calc(50% - 45%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
}

.wrapper1:hover{
    cursor: pointer;
    transform: translateY(-40px);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
    filter: grayscale(0);

}


.wrapper2{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 30%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Alteraciones\ del\ agua\ y\ electrolitos.png);
    right: calc(50% - 20%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
}
.wrapper2:hover{
    cursor: pointer;
    transform: translateY(-40px);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
    filter: grayscale(0);

}

.wrapper3{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 30%;
    background-color: rgba(34, 31, 31, 0.424) ;    
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Códigos.png);
    left: calc(50% - 20%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper3:hover{
    cursor: pointer;
    transform: translateY(-40px);
    filter: grayscale(0);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper5{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 30%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Trastornos\ ácido\ base.png);
    right: calc(50% - 45%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper5:hover{
    cursor: pointer;
    transform: translateY(-40px);
    filter: grayscale(0);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.title{
    align-items: center;
    text-align: center;
    margin-top: 90%;
    color: white;
    font-weight: 200;
    height: 200px;
    padding-top: 5px;
    transition: all .8s ease;
}

.wrapper6{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 75%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Toxicología.jpg);
    right: calc(50% - 45%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper6:hover{
    cursor: pointer;
    transform: translateY(-40px);
    filter: grayscale(0);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper7{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 75%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Respiratorio.png);
    right: calc(50% - 20%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper7:hover{
    cursor: pointer;
    transform: translateY(-40px);
    filter: grayscale(0);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper8{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 75%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Cardiaco.png);
    left: calc(50% - 20%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper8:hover{
    cursor: pointer;
    transform: translateY(-40px);
    filter: grayscale(0);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper9{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 75%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Neurológico.png);
    left: calc(50% - 45%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper9:hover{
    cursor: pointer;
    filter: grayscale(0);
    transform: translateY(-40px);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper10{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 120%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Traumatología.jpg);
    left: calc(50% - 45%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper10:hover{
    cursor: pointer;
    filter: grayscale(0);
    transform: translateY(-40px);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.title2{
    align-items: center;
    text-align: center;
    margin-top: 300px;
    color: white;
    font-weight: 200;
    height: 200px;
    padding-top: 5px;
    font-size: 36px;
    transition: all .8s ease; 
}

.wrapper11{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 120%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Infeccioso.png);
    left: calc(50% - 20%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper11:hover{
    cursor: pointer;
    transform: translateY(-40px);
    filter: grayscale(0);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper12{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 120%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Digestivo.png);
    right: calc(50% - 20%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}

.wrapper12:hover{
    cursor: pointer;
    filter: grayscale(0);
    transform: translateY(-40px);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper13{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 120%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Cirugía.png);
    right: calc(50% - 45%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper13:hover{
    cursor: pointer;
    filter: grayscale(0);
    transform: translateY(-40px);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper14{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 165%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/NEfrourológicas.png);
    left: calc(50% - 45%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper14:hover{
    cursor: pointer;
    filter: grayscale(0);
    transform: translateY(-40px);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper15{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 165%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Hematopoyéticos.png);
    left: calc(50% - 20%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper15:hover{
    cursor: pointer;
    transform: translateY(-40px);
    filter: grayscale(0);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper16{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 165%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/ORL\ y\ oftalmología.png);
    right: calc(50% - 20%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper16:hover{
    cursor: pointer;
    filter: grayscale(0);
    transform: translateY(-40px);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper17{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 165%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Reumatología.png);
    right: calc(50% - 45%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper17:hover{
    filter: grayscale(0);

    cursor: pointer;
    transform: translateY(-40px);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.wrapper18{
    height: 34%;
    width: 15%;
    position:absolute; 
    top: 210%;
    background-image: url(IMAGES/Imagenesfinales/Fondos\ de\ áreas/Endocrinometabólico.png);
    left: calc(50% - 45%);
    background-size: cover;
    background-position: center;
    border: 2px solid white;
    overflow: hidden;
    box-shadow: inset 0px -100px 95px 5px rgba(0, 0, 0, 0.988);
    transition: all .8s ease .0s;
    border-radius: 25px;
}
.wrapper18:hover{
    filter: grayscale(0);

    cursor: pointer;
    transform: translateY(-40px);
    box-shadow: inset 0px -23px 25px 5px rgba(0, 0, 0, 0.4);
}

.title3{
    align-items: center;
    text-align: center;
    margin-top: 280px;
    color: white;
    font-weight: 200;
    height: 200px;
    padding-top: 0;
    font-size: 36px;
    transition: all .8s ease; 
}

.wrapperblur{
    width: 100%;
    height: 250vh;
    z-index: -2;
    background-color: transparent;
    backdrop-filter: blur(10px);
    pointer-events: none;
    opacity: 0;
    transition: all .6s ease;

}
.wrapperblur.active{
    width: 100%;
    height: 280vh;
    z-index: -2;
    background-color: transparent;
    backdrop-filter: blur(10px);
     
    pointer-events: all;
    opacity: 1;
    transition: all .6s ease;
}






.closeicon{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}
.closeicon:hover{
    background-color: rgb(169, 13, 13);
}



.closeicon8{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}
.closeicon8:hover{
    background-color: rgb(169, 13, 13);
}



.closeicon9{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}
.closeicon9:hover{
    background-color: rgb(169, 13, 13);
}



body {
    scrollbar-width: thin;
    scrollbar-color: #4d7fff #ddd;
}
body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom right, #9d8161, #7b5037);
    border-radius: 5px;
}
body::-webkit-scrollbar-track {
    background-color: #ddd;
}


.wrapperList17{
    position: absolute;
    width: 30%;
    height: 55%;
    left: calc(50% - 15%);
    top: calc(50% - 22.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList17.active{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 22.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList17 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList17 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList17 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


/*
#Monoartritis a{
    left: 35px;
    top: 50px;
}
#Poliartritis a{
    left: 35px;
    top: 140px;
}
#Cervicalgia a{
    left: 35px;
    top: 230px;
}
#Hombros a{
    left: 35px;
    top: 320px;
}
#Lumbalgia a{
    left: 35px;
    top: 410px;
}

*/
.closeicon17{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon17:hover{
    background-color: rgb(169, 13, 13);
}











#Insuficiencia a{
    left: 35px;
    top: 50px;
}
#Renal a{
    left: 35px;
    top: 140px;
}
#Síndrome a{
    left: 35px;
    top: 230px;
}
#nefrítico a{
    left: 35px;
    top: 320px;
}
#Rabdomiólisis a{
    left: 35px;
    top: 410px;
}

#Hematuria a{
    left: 35px;
    top: 500px;
}
#Retención a{
    left: 35px;
    top: 590px;
}
#Cólico a{
    left: 555px;
    top: 50px;
}
#Infecciones a{
    left: 555px;
    top: 140px;
    font-size: 0.85em;
}

#Prostatitis a{
    left: 555px;
    top: 230px;
}
#Pielonefritis a{
    left: 555px;
    top: 320px;
}

#Escrotal a{
    left: 555px;
    top: 410px;
}


.closeicon14{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon14:hover{
    background-color: rgb(169, 13, 13);
}





.closeicon16{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon16:hover{
    background-color: rgb(169, 13, 13);
}



.closeicon7{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon7:hover{
    background-color: rgb(169, 13, 13);
}




.closeicon12{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon12:hover{
    background-color: rgb(169, 13, 13);
}






.closeicon10{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon10:hover{
    background-color: rgb(169, 13, 13);
}










.closeicon18{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon18:hover{
    background-color: rgb(169, 13, 13);
}

.closeicon2{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon2:hover{
    background-color: rgb(169, 13, 13);
}





.closeicon01{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon01:hover{
    background-color: rgb(169, 13, 13);
}



.closeicon5{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}
.closeicon5:hover{
    background-color: rgb(169, 13, 13);
}






.closeicon11{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon11:hover{
    background-color: rgb(169, 13, 13);
}

.TITULO{
    color: white;
    position: absolute;
    font-weight: 100;
    font-size: 2.5em;
    width: 100%;
    background-color: gray;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    text-align: center;
    top: calc(50% - 7.5%);
    height: 15%;

}



.closeicon6{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon6:hover{
    background-color: rgb(169, 13, 13);
}






.closeicon13{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon13:hover{
    background-color: rgb(169, 13, 13);
}








.closeicon15{
    color: white;
    background-color: rgb(108, 16, 16);
    position: absolute;
    width: 180px;
    height: 100px;
    text-align: center;
    font-size: 2.5em;
    border-top-left-radius: 20px;
    right: 0px;
    bottom: -40px;
    cursor: pointer;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: all .5s ease;
}

.closeicon15:hover{
    background-color: rgb(169, 13, 13);
}






/*MEDIA OF THE NAVBAR*/


@media (max-width: 2050px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 130px;

    }
    #cont{
        font-size: 0.9em;
    }
    .logo{
        width: 250px;
        margin-left: 0;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
    }
}
@media (max-width: 1730px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 100px;

    }
    #cont{
        font-size: 0.9em;
        right: 150px;
    }
    .logo{
        width: 250px;
        margin-left: 0;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
    }
}
@media (max-width: 1590px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 80px;

    }
    #cont{
        font-size: 0.9em;
        right: 120px;
    }
    .logo{
        width: 250px;
        margin-left: 0;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
    }
}
@media (max-width: 1470px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 20px;
        padding: 0px 5px;
        text-align: center;

    }
    #cont{
        font-size: 0.9em;
        right: 170px;
        padding: 9px 25px;

    }
    .logo{
        width: 250px;
        margin-left: 50px;
        position:absolute; 
        top: -30px; 
        left: 0;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
    }
}
@media (max-width: 1280px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 20px;
        padding: 0px 5px;
        text-align: center;

    }
    #cont{
        font-size: 0.9em;
        right: 160px;
        padding: 9px 25px;

    }
    .logo{
        width: 200px;
        margin-left: 50px;
        position:absolute; 
        top: -20px; 
        left: 0;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
    }
    #header{
        box-shadow: none;
        backdrop-filter: none;

    }
}
@media (max-width: 1175px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 20px;
        padding: 0px 5px;
        text-align: center;

    }
    #cont{
        font-size: 0.9em;
        right: 120px;
        padding: 9px 25px;

    }
    .logo{
        width: 160px;
        margin-left: 50px;
        position:absolute; 
        top: 0px; 
        left: 0;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
    }
}
@media (max-width: 1090px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 25px;
        padding: 0px 5px;
        text-align: center;

    }
    .nav__links li{
        display: inline-block;
        padding: 0px 20px;
        text-align: center;
    }
    .nav__links{
        list-style: none;
        position: absolute;
        right: 90px;
    }
    #cont{
        font-size: 0.9em;
        right: 82%;
        padding: 9px 25px;
        position: absolute;
        left: 3%;
    }

    .logo{
        width: 160px;
        margin-left: 50px;
        position:absolute; 
        top: 0px; 
        left: 0;
        opacity: 0;
        pointer-events: none;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
    }
}
@media (max-width: 940px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 25px;
        padding: 0px 5px;
        text-align: center;

    }
    .nav__links li{
        display: inline-block;
        padding: 0px 20px;
        text-align: center;
    }
    .nav__links{
        list-style: none;
        position: absolute;
        right: 10px;
    }
    #cont{
        font-size: 0.9em;
        right: 82%;
        padding: 9px 25px;
        position: absolute;
        left: 3%;
    }

    .logo{
        width: 160px;
        margin-left: 50px;
        position:absolute; 
        top: 0px; 
        left: 0;
        opacity: 0;
        pointer-events: none;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
        pointer-events: none;
        opacity: 0;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
        pointer-events: none;
        opacity: 0;
    }
}
@media (max-width: 850px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 5px;
        padding: 0px 5px;
        text-align: center;

    }
    .nav__links li{
        display: inline-block;
        padding: 0px 20px;
        text-align: center;
    }
    .nav__links{
        list-style: none;
        position: absolute;
        right: 10px;
    }
    #cont{
        font-size: 0.9em;
        right: 82%;
        padding: 9px 25px;
        position: absolute;
        left: 3%;
    }
    #cont:hover{
        margin-right: -30px;
    
    }

    .logo{
        width: 160px;
        margin-left: 50px;
        position:absolute; 
        top: 0px; 
        left: 0;
        opacity: 0;
        pointer-events: none;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
        pointer-events: none;
        opacity: 0;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
        pointer-events: none;
        opacity: 0;
    }
}
@media (max-width: 720px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 0px;
        padding: 0px 5px;
        text-align: center;

    }
    .nav__links li{
        display: inline-block;
        padding: 0px 20px;
        text-align: center;
    }
    .nav__links{
        list-style: none;
        position: absolute;
        right: 10px;
    }
    #cont{
        font-size: 0.9em;
        right: 82%;
        padding: 9px 5px;
        position: absolute;
        left: 3%;
    }

    .logo{
        width: 160px;
        margin-left: 50px;
        position:absolute; 
        top: 0px; 
        left: 0;
        opacity: 0;
        pointer-events: none;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
        pointer-events: none;
        opacity: 0;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
        pointer-events: none;
        opacity: 0;
    }
}
@media (max-width: 680px) {
    .nav__links li a{
        font-size: 1em;
        margin-right: 0px;
        padding: 0px 5px;
        text-align: center;

    }
    .nav__links li{
        display: inline-block;
        padding: 0px 20px;
        text-align: center;
    }
    .nav__links{
        list-style: none;
        position: absolute;
        text-align: center;
        width: 90%;
        right: calc(50% - 45%);
    }
    #cont{
        font-size: 0.9em;
        right: 82%;
        padding: 9px 5px;
        position: absolute;
        left: 3%;
        opacity: 0;
        pointer-events: 0;
    }

    .logo{
        width: 160px;
        margin-left: 50px;
        position:absolute; 
        top: 0px; 
        left: 0;
        opacity: 0;
        pointer-events: none;
    }
    .social-links3 button{
        width: 50px;
        height: 50px;
        pointer-events: none;
        opacity: 0;
    }
    .social-links3{
        right: 0px;
        top: 35px;  
        pointer-events: none;
        opacity: 0;
    }
    #texto{
        font-size: 1em;
        bottom: 30%;
    }

}
@media (max-height: 790px) {
    .logo{
        opacity: 0;
    }
    .social-links3{
        opacity: 0;
    }
}


@media (max-width: 2440px) {
    .TITULO{
        font-size: 2em;
        height: 10%;
        top: calc(50% - 5%);
    }
}

@media (max-width: 2000px) {
    .TITULO{
        font-size: 2em;
        height: 10%;
        top: calc(50% - 5%);
    }
    .wrapper18{
        width: 20%;
        left: 3%;
    }
    .wrapper17{
        width: 20%;
        right: 3%;
    }
    .wrapper16{
        width: 20%;
        right: calc(3% + 20% + 5%);
    }
    .wrapper15{
        width: 20%;
        left: calc(3%);
    }
    .wrapper14{
        width: 20%;
        left: calc(3% + 20% + 5%);
    }

    .wrapper13{
        width: 20%;
        right: 3%;
    }
    .wrapper12{
        width: 20%;
        right: calc(3% + 20% + 5%);
    }
    .wrapper11{
        width: 20%;
        left: calc(3%);
    }
    .wrapper10{
        width: 20%;
        left: calc(3% + 20% + 5%);
    }

    
    .wrapper9{
        width: 20%;
        left: 3%;
    }
    .wrapper8{
        width: 20%;
        left: calc(3% + 20% + 5%);
    }
    .wrapper7{
        width: 20%;
        right: calc(3%);
    }
    .wrapper6{
        width: 20%;
        right: calc(3% + 20% + 5%);
    }

    .wrapper5{
        width: 20%;
        right: calc(3% + 20% + 5%);
    }
    .wrapper3{
        width: 20%;
        left: calc(3% + 20% + 5%);
    }
    .wrapper2{
        width: 20%;
        right: calc(3%);
    }
    .wrapper1{
        width: 20%;
        left: calc(3%);
    }
}

@media (max-width: 1260px) {
    .TITULO{
        font-size: 2em;
        height: 10%;
        top: calc(50% - 5%);
    }
    .wrapper18{
        width: 20%;
        left: 3%;
        height: 30%;
        top: 170%;
    }
    .wrapper17{
        width: 20%;
        right: 3%;
        height: 30%;
        top: 135%;
    }
    .wrapper16{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 30%;
        top: 135%;
    }
    .wrapper15{
        width: 20%;
        left: calc(3%);
        height: 30%;
        top: 135%;
    }
    .wrapper14{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 30%;
        top: 135%;
    }

    .wrapper13{
        width: 20%;
        right: 3%;
        height: 30%;
        top: 100%;
    }
    .wrapper12{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 30%;
        top: 100%;
    }
    .wrapper11{
        width: 20%;
        left: calc(3%);
        height: 30%;
        top: 100%;
    }
    .wrapper10{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 30%;
        top: 100%;

    }

    
    .wrapper9{
        width: 20%;
        left: 3%;
        height: 30%;
        top: 65%;
    }
    .wrapper8{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 30%;
        top: 65%;
    }
    .wrapper7{
        width: 20%;
        right: calc(3%);
        height: 30%;
        top: 65%;
    }
    .wrapper6{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 30%;
        top: 65%;
    }

    .wrapper5{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 30%;
    }
    .wrapper3{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 30%;
    }
    .wrapper2{
        width: 20%;
        right: calc(3%);
        height: 30%;
    }
    .wrapper1{
        width: 20%;
        left: calc(3%);
        height: 30%;
    }
}

@media (max-width: 1000px) {
    .TITULO{
        font-size: 1.5em;
    }
}


@media (max-width: 836px) {
    .TITULO{
        font-size: 1.2em;
        height: 12%;
    }

    .wrapper18{
        width: 20%;
        left: 3%;
        height: 25%;
        top: 150%;
    }
    .wrapper17{
        width: 20%;
        right: 3%;
        height: 25%;
        top: 120%;
    }
    .wrapper16{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
        top: 120%;
    }
    .wrapper15{
        width: 20%;
        left: calc(3%);
        height: 25%;
        top: 120%;
    }
    .wrapper14{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
        top: 120%;
    }

    .wrapper13{
        width: 20%;
        right: 3%;
        height: 25%;
        top: 90%;
    }
    .wrapper12{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
        top: 90%;
    }
    .wrapper11{
        width: 20%;
        left: calc(3%);
        height: 25%;
        top: 90%;
    }
    .wrapper10{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
        top: 90%;

    }

    
    .wrapper9{
        width: 20%;
        left: 3%;
        height: 25%;

        top: 60%;
    }
    .wrapper8{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
        top: 60%;
    }
    .wrapper7{
        width: 20%;
        right: calc(3%);
        height: 25%;
        top: 60%;
    }
    .wrapper6{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
        top: 60%;
    }

    .wrapper5{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
    }
    .wrapper3{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
    }
    .wrapper2{
        width: 20%;
        right: calc(3%);
        height: 25%;
    }
    .wrapper1{
        width: 20%;
        left: calc(3%);
        height: 25%;
    }
}
@media (max-width: 675px) {
    .TITULO{
        font-size: 1.2em;
        height: 12%;
        background-color: transparent;
    }

    .wrapper18{
        width: 20%;
        left: 3%;
        height: 25%;
        top: 150%;
    }
    .wrapper17{
        width: 20%;
        right: 3%;
        height: 25%;
        top: 120%;
    }
    .wrapper16{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
        top: 120%;
    }
    .wrapper15{
        width: 20%;
        left: calc(3%);
        height: 25%;
        top: 120%;
    }
    .wrapper14{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
        top: 120%;
    }

    .wrapper13{
        width: 20%;
        right: 3%;
        height: 25%;
        top: 90%;
    }
    .wrapper12{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
        top: 90%;
    }
    .wrapper11{
        width: 20%;
        left: calc(3%);
        height: 25%;
        top: 90%;
    }
    .wrapper10{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
        top: 90%;

    }

    
    .wrapper9{
        width: 20%;
        left: 3%;
        height: 25%;

        top: 60%;
    }
    .wrapper8{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
        top: 60%;
    }
    .wrapper7{
        width: 20%;
        right: calc(3%);
        height: 25%;
        top: 60%;
    }
    .wrapper6{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
        top: 60%;
    }

    .wrapper5{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
    }
    .wrapper3{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
    }
    .wrapper2{
        width: 20%;
        right: calc(3%);
        height: 25%;
    }
    .wrapper1{
        width: 20%;
        left: calc(3%);
        height: 25%;
    }
}
@media (max-width: 650px) {
    .TITULO{
        font-size: 1em;
        height: 10%;
        background-color: transparent;
    }

    .wrapper18{
        width: 20%;
        left: 3%;
        height: 25%;
        top: 150%;
    }
    .wrapper17{
        width: 20%;
        right: 3%;
        height: 25%;
        top: 120%;
    }
    .wrapper16{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
        top: 120%;
    }
    .wrapper15{
        width: 20%;
        left: calc(3%);
        height: 25%;
        top: 120%;
    }
    .wrapper14{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
        top: 120%;
    }

    .wrapper13{
        width: 20%;
        right: 3%;
        height: 25%;
        top: 90%;
    }
    .wrapper12{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
        top: 90%;
    }
    .wrapper11{
        width: 20%;
        left: calc(3%);
        height: 25%;
        top: 90%;
    }
    .wrapper10{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
        top: 90%;

    }

    
    .wrapper9{
        width: 20%;
        left: 3%;
        height: 25%;

        top: 60%;
    }
    .wrapper8{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
        top: 60%;
    }
    .wrapper7{
        width: 20%;
        right: calc(3%);
        height: 25%;
        top: 60%;
    }
    .wrapper6{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
        top: 60%;
    }

    .wrapper5{
        width: 20%;
        right: calc(3% + 20% + 5%);
        height: 25%;
    }
    .wrapper3{
        width: 20%;
        left: calc(3% + 20% + 5%);
        height: 25%;
    }
    .wrapper2{
        width: 20%;
        right: calc(3%);
        height: 25%;
    }
    .wrapper1{
        width: 20%;
        left: calc(3%);
        height: 25%;
    }
}
@media (max-width: 525px) {
    .TITULO{
        font-size: 1em;
        height: 10%;
        background-color: transparent;
    }

    .wrapper18{
        width: 27%;
        left: 3%;
        height: 25%;
        top: 150%;
    }
    .wrapper17{
        width: 27%;
        right: calc(3%);
        height: 25%;
        top: 150%;
    }
    .wrapper16{
        width: 27%;
        right: calc(3%);
        height: 25%;
        top: 120%;
    }
    .wrapper15{
        width: 27%;
        left: calc(3%);
        height: 25%;
        top: 120%;
    }
    .wrapper14{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
        top: 120%;
    }

    .wrapper13{
        width: 27%;
        left: 3%;
        height: 25%;
        top: 180%;
    }
    .wrapper12{
        width: 27%;
        right: calc(3%);
        height: 25%;
        top: 90%;
    }
    .wrapper11{
        width: 27%;
        left: calc(3%);
        height: 25%;
        top: 90%;
    }
    .wrapper10{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
        top: 90%;

    }

    
    .wrapper9{
        width: 27%;
        left: 3%;
        height: 25%;

        top: 60%;
    }
    .wrapper8{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
        top: 60%;
    }
    .wrapper7{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
        top: 180%;
    }
    .wrapper6{
        width: 27%;
        right: calc(3%);
        height: 25%;
        top: 60%;
    }

    .wrapper5{
        width: 27%;
        right: calc(3%);
        height: 25%;
    }
    .wrapper3{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
    }
    .wrapper2{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
        top: 150%;
    }
    .wrapper1{
        width: 27%;
        left: calc(3%);
        height: 25%;
    }
}
@media (max-width: 400px) {
    .TITULO{
        font-size: .8em;
        height: 10%;
        background-color: transparent;
    }

    .wrapper18{
        width: 27%;
        left: 3%;
        height: 25%;
        top: 150%;
    }
    .wrapper17{
        width: 27%;
        right: calc(3%);
        height: 25%;
        top: 150%;
    }
    .wrapper16{
        width: 27%;
        right: calc(3%);
        height: 25%;
        top: 120%;
    }
    .wrapper15{
        width: 27%;
        left: calc(3%);
        height: 25%;
        top: 120%;
    }
    .wrapper14{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
        top: 120%;
    }

    .wrapper13{
        width: 27%;
        left: 3%;
        height: 25%;
        top: 180%;
    }
    .wrapper12{
        width: 27%;
        right: calc(3%);
        height: 25%;
        top: 90%;
    }
    .wrapper11{
        width: 27%;
        left: calc(3%);
        height: 25%;
        top: 90%;
    }
    .wrapper10{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
        top: 90%;

    }

    
    .wrapper9{
        width: 27%;
        left: 3%;
        height: 25%;

        top: 60%;
    }
    .wrapper8{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
        top: 60%;
    }
    .wrapper7{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
        top: 180%;
    }
    .wrapper6{
        width: 27%;
        right: calc(3%);
        height: 25%;
        top: 60%;
    }

    .wrapper5{
        width: 27%;
        right: calc(3%);
        height: 25%;
    }
    .wrapper3{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
    }
    .wrapper2{
        width: 34%;
        left: calc(50% - 17%);
        height: 25%;
        top: 150%;
    }
    .wrapper1{
        width: 27%;
        left: calc(3%);
        height: 25%;
    }
}

#tit1{
    color: white;
    font-weight: 100;
    letter-spacing: 2px;

}




.wrapperList18{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList18.active{
    position: absolute;
    width: 30%;
    height: 150%;
    left: calc(50% - 15%);
    top: calc(50% - 30%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 90;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList18 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList18 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList18 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList17{
    position: absolute;
    width: 30%;
    height: 55%;
    left: calc(50% - 15%);
    top: calc(50% - 22.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList17.active{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 22.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList17 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList17 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList17 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList16{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList16.active{
    position: absolute;
    width: 30%;
    height: 100%;
    left: calc(50% - 15%);
    top: calc(50% - 30%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 90;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList16 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList16 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList16 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList15{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList15.active{
    position: absolute;
    width: 30%;
    height: 30%;
    left: calc(50% - 15%);
    top: calc(50% - 15%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 90;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList15 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList15 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList15 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList14{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList14.active{
    position: absolute;
    width: 30%;
    height: 100%;
    left: calc(50% - 15%);
    top: calc(50% - 30%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 90;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList14 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList14 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList14 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList13{
    position: absolute;
    width: 30%;
    height: 25%;
    left: calc(50% - 15%);
    top: calc(50% - 22.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList13.active{
    position: absolute;
    width: 30%;
    height: 15%;
    left: calc(50% - 15%);
    top: calc(50% - 7.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList13 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList13 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList13 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList12{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList12.active{
    position: absolute;
    width: 30%;
    height: 100%;
    left: calc(50% - 15%);
    top: calc(50% - 30%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 90;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList12 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList12 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList12 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList11{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList11.active{
    position: absolute;
    width: 30%;
    height: 30%;
    left: calc(50% - 15%);
    top: calc(50% - 15%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 90;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList11 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList11 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList11 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList10{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList10.active{
    position: absolute;
    width: 30%;
    height: 70%;
    left: calc(50% - 15%);
    top: calc(50% - 30%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 90;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList10 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList10 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList10 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList9{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList9.active{
    position: absolute;
    width: 30%;
    height: 90%;
    left: calc(50% - 15%);
    top: calc(50% - 30%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 90;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList9 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList9 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList9 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList8{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList8.active{
    position: absolute;
    width: 30%;
    height: 135%;
    left: calc(50% - 15%);
    top: calc(50% - 30%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 90;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList8 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList8 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList8 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList7{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList7.active{
    position: absolute;
    width: 30%;
    height: 65%;
    left: calc(50% - 15%);
    top: calc(50% - 30%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList7 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList7 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList7 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList6{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList6.active{
    position: absolute;
    width: 30%;
    height: 37%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList6 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList6 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList6 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList5{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList5.active{
    position: absolute;
    width: 30%;
    height: 35%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList5 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList5 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList5 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList3{
    position: absolute;
    width: 30%;
    height: 45%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList3.active{
    position: absolute;
    width: 30%;
    height: 35%;
    left: calc(50% - 15%);
    top: calc(50% - 17.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList3 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList3 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList3 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList2{
    position: absolute;
    width: 30%;
    height: 85%;
    left: calc(50% - 15%);
    top: calc(50% - 30.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList2.active{
    position: absolute;
    width: 30%;
    height: 75%;
    left: calc(50% - 15%);
    top: calc(50% - 30.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList2 ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList2 ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList2 ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapperList{
    position: absolute;
    width: 30%;
    height: 50%;
    left: calc(50% - 15%);
    top: calc(50% - 22.5%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}
.wrapperList.active{
    position: absolute;
    width: 30%;
    height: 40%;
    left: calc(50% - 15%);
    top: calc(50% - 20%);
    background-color: rgba(255, 255, 255, 0.408);
    border-radius: 20px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 100;
    opacity: 1;
    pointer-events: all;
    transition: all .4s ease-in-out;

}
.wrapperList ul li{
    list-style: none;
    text-align: center;
    margin-top: 60px;
    
}
.wrapperList ul li a{
    background-color: rgba(0, 0, 0, 0.334);
    padding: 10px;
    border: 2px solid white;
    border-radius: 30px;
    transition: all .4s ease-in-out;
}
.wrapperList ul li a:hover{
    text-decoration: none;
    color: white;
    background-color: #c1b59f;
    transition: all .4s ease-in-out;
}


.wrapper1.nouse{
    filter: grayscale(1);
}
.wrapper2.nouse{
    filter: grayscale(1);
}
.wrapper3.nouse{
    filter: grayscale(1);
}
.wrapper4.nouse{
    filter: grayscale(1);
}
.wrapper5.nouse{
    filter: grayscale(1);
}
.wrapper6.nouse{
    filter: grayscale(1);
}
.wrapper7.nouse{
    filter: grayscale(1);
}
.wrapper8.nouse{
    filter: grayscale(1);
}
.wrapper9.nouse{
    filter: grayscale(1);
}
.wrapper10.nouse{
    filter: grayscale(1);
}
.wrapper11.nouse{
    filter: grayscale(1);
}

.wrapper12.nouse{
    filter: grayscale(1);
}
.wrapper13.nouse{
    filter: grayscale(1);
}
.wrapper14.nouse{
    filter: grayscale(1);
}
.wrapper15.nouse{
    filter: grayscale(1);
}
.wrapper16.nouse{
    filter: grayscale(1);
}
.wrapper17.nouse{
    filter: grayscale(1);
}
.wrapper18.nouse{
    filter: grayscale(1);
}



#loginIcon{
    cursor: pointer;
 }
 #loginIcon:hover{
    cursor: pointer;
 }