#div-1 {
       width: 100%;
       height: 100vh;
       background-color: #FAF3E0;
       background-size: cover;
       background-position: center;
       display: none;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       position: fixed;
       top: 0;
       left: 0;
       z-index: 10;
}

#div-1.visible {
       display: flex;
}

#div-1 a {
       color: rgb(33, 8, 8);
       text-decoration: none;
       font-size: 1.125rem;
       position: absolute;
       bottom: 0;
}

#div-1 a:hover,
#div-1 a:active {
       color: #e0e0e0;
}

#div-2,#div-3,#div-4,#div-5,#div-6,#div-7,#div-8,#div-9,#div-10,#div-11,#div-12,#div-13 {
       width: 100%;
       padding: 0;
       overflow-x: hidden;
       position: relative;
}

#div-2 {
       background-color: #f9f4e8;
       --background-color1: #f9f4e8;
       --background-color2: #f9f4e8;
       --background-color3: #f9f4e8;
       --background-color4: #f9f4e8;
}

#div-3 {
       background-color: #FAF3E0;
       --background-color1: #FAF3E0;
       --background-color2: #FAF3E0;
       --background-color3: #FAF3E0;
       --background-color4: #FAF3E0;
}

#div-4 {
       background-color: #f9f4e8;
       --background-color1: #f9f4e8;
       --background-color2: #f9f4e8;
       --background-color3: #f9f4e8;
       --background-color4: #f9f4e8;
}

#div-5 {
       background-color: #FAF3E0;
       --background-color1: #FAF3E0;
       --background-color2: #FAF3E0;
       --background-color3: #FAF3E0;
       --background-color4: #FAF3E0;
}

#div-6 {
       background-color: #f9f4e8;
       --background-color1: #f9f4e8;
       --background-color2: #f9f4e8;
       --background-color3: #f9f4e8;
       --background-color4: #f9f4e8;
}

#div-7 {
       background-color: #FAF3E0;
       --background-color1: #FAF3E0;
       --background-color2: #FAF3E0;
       --background-color3: #FAF3E0;
       --background-color4: #FAF3E0;
}

#div-8 {
       background-color: #f9f4e8;
       --background-color1: #f9f4e8;
       --background-color2: #f9f4e8;
       --background-color3: #f9f4e8;
       --background-color4: #f9f4e8;
}

#div-9 {
       background-color: #FAF3E0;
       --background-color: #FAF3E0;
       --background-color2: #FAF3E0;
       --background-color3: #FAF3E0;
       --background-color4: #FAF3E0;
}

#div-10 {
       background-color: #f9f4e8;
       --background-color1: #f9f4e8;
       --background-color2: #f9f4e8;
       --background-color3: #f9f4e8;
       --background-color4: #f9f4e8;
}

#div-11 {
       background-color: #FAF3E0;
       --background-color1: #FAF3E0;
       --background-color2: #FAF3E0;
       --background-color3: #FAF3E0;
       --background-color4: #FAF3E0;
}

#div-12 {
       background-color: #f9f4e8;
       --background-color1: #f9f4e8;
       --background-color2: #f9f4e8;
       --background-color3: #f9f4e8;
       --background-color4: #f9f4e8;
}

#div-13 {
       background-color: #FAF3E0;
       --background-color1: #FAF3E0;
       --background-color2: #FAF3E0;
       --background-color3: #FAF3E0;
       --background-color4: #FAF3E0;
}

[id^="div-"].background-image {
       background-repeat: no-repeat;
       background-position: center center;
       background-size: cover;
}

#div-2.background-image {background-image: url('/img/bg.webp');}
#div-3.background-image {background-image: url('/img/bannerBG1_1.webp');}
#div-4.background-image {background-image: url('/img/perspectiva.png');}
#div-5.background-image {background-image: url('../img/perspectiva.webp');}
#div-6.background-image {background-image: url('/img/bannerBG1_1.webp');}
#div-7.background-image {background-image: url('/img/bannerBG1_1.webp');}
#div-8.background-image {background-image: url('/img/bannerBG1_1.webp');}
#div-9.background-image {background-image: url('/img/bannerBG1_1.webp');}
#div-10.background-image {background-image: url('/img/bannerBG1_1.webp');}
#div-11.background-image {background-image: url('/img/bg.webp');}
#div-12.background-image {background-image: url('/img/bg.webp');}
#div-13.background-image {background-image: url('/img/bg.webp');}

[id^="div-"].background-image.overlay-active::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 1;
       pointer-events: none;
}

#div-2.background-image.overlay-active::after {background-color: rgba(0, 128, 0, 0.5);}
#div-3.background-image.overlay-active::after {background-color: rgba(0, 128, 0, 0.5);}
#div-4.background-image.overlay-active::after {background-color: rgba(238, 238, 238, 0.957);}
#div-5.background-image.overlay-active::after {background-color: rgba(234, 232, 232, 0.972);}
#div-6.background-image.overlay-active::after {background-color: rgba(255, 255, 0, 0.5);}
#div-7.background-image.overlay-active::after {background-color: rgba(128, 0, 128, 0.5);}
#div-8.background-image.overlay-active::after {background-color: rgba(0, 255, 255, 0.5);}
#div-9.background-image.overlay-active::after {background-color: rgba(255, 165, 0, 0.5);}
#div-10.background-image.overlay-active::after {background-color: rgba(128, 128, 128, 0.5);}
#div-11.background-image.overlay-active::after {background-color: rgba(255, 192, 203, 0.5);}
#div-12.background-image.overlay-active::after {background-color: rgba(128, 128, 128, 0.5);}
#div-13.background-image.overlay-active::after {background-color: rgba(255, 192, 203, 0.5);}

.content {
       position: relative;
       z-index: 2;
       max-width: 1800px;
       margin: 0 auto;
       padding: 10px;
       box-sizing: border-box;
}

@media(min-width:2100px) {
       .content {
              max-width: 3000px;
              z-index: 25;
       }
}

@media(max-width:768px) {
       #div-1 a {
              bottom: 35px;
       }
}