html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: white;
}

@font-face {
    font-family: 'Lapsus-pro';
    src: url('fonts/LapsusPro-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/BebasNeue-Regular.ttf') format('opentype');
}

@font-face {
    font-family: 'frankbk';
    src: url('fonts/FRABK.TTF') format('opentype');
}

@font-face {
    font-family: 'frankit';
    src: url('fonts/FRABKIT.TTF') format('opentype');
}

.area1 {
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

video {
    opacity: 60%;
    object-fit: cover; 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.menu {
    height: 5vh;
    width: 60%;
    max-width: 100vw;
    border-radius: 40px;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
    padding-right: 20px;
    position: fixed; 
    z-index: 1; 
    top: 30px; 
}

.left-logo{
    height: 10%;
    width: 70%;
    margin-right: 30%;
    backdrop-filter: none;
}

.left-logo-2{
    display: none;
}

.menu-option {
    text-decoration: none;    
    font-family: 'Lapsus-pro';
    font-size: 17px;
    margin-left: 20px;
    color: rgb(0, 142, 255);
    cursor: pointer;
    backdrop-filter: none;
}

.menu-option:hover {
    color: rgb(255, 228, 152);
    text-decoration: none;
}

.animation-text {
    position: absolute;
    top: 40%;
    left: 1%;
    transform: translateX(-100%);
    white-space: normal; /* Para que el texto no se divida en varias líneas NoWrap */
    font-size: 6em; 
    font-family: 'BebasNeue';
    text-align: left;
    color: white;
    animation: slideIn 2s forwards; 
}

@keyframes slideIn {
    to {
        transform: translateX(0);
    }
}

.area2{
    height: 100vh;
    width: 100vw;
    background-color: rgb(255, 255, 255);
    background-image: url('img/portrait-about-us.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    overflow: hidden;
}

.about-us-p{
    width: 52vw;
    height: 30vh;
    margin-left: 40%;
    padding-top: 5%;
    font-size: 13px;
    font-family: 'frankit';
    white-space: normal; 
    text-align: left;  
}

/*--------------------Area FOTOS DESKTOP------------------*/

.area3{
    border-top-right-radius: 80px;
    height: 100vh;
    width: 100vw;
    background-color: rgb(18, 121, 204);
    background-image: url('img/portrait-fotos.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    overflow: hidden;
}

.titles-area3{
    align-items: right;
    justify-content: right;
    font-family: 'BebasNeue';
    font-size: 20px;
    color: white;
    height: 15vh;
    width: 5vw;
    margin:0.5%;
}

/*--------Contenedores de Imagenes 1---HALLOWEEN PARTY------*/

.cont-img-1{
    height: 50vh;
    width: 60vw;
    display: flex;
    flex-wrap: wrap;
    margin-left: 35%;
    padding-top: 8%;
    justify-content: center;
}

.cont1-1{
    background-image: url('img/hall-1.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}
.cont2-1{
    background-image: url('img/hall-2.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}
.cont3-1{
    background-image: url('img/hall-3.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}
.cont4-1{
    background-image: url('img/hall-4.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}
.cont5-1{
    background-image: url('img/hall-5.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}
.cont6-1{
    background-image: url('img/hall-6.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}
.cont7-1{
    background-image: url('img/hall-7.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}
.cont8-1{
    background-image: url('img/hall-8.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont1-1:hover, .cont2-1:hover, .cont3-1:hover, .cont4-1:hover, .cont5-1:hover, 
.cont6-1:hover, .cont7-1:hover, .cont8-1:hover {
    transform: scale(1.1); 
    transition: transform 0.3s ease; 
}

.cont1-1, .cont2-1, .cont3-1, .cont4-1, .cont5-1, 
    .cont6-1, .cont7-1, .cont8-1 {
        margin:0.5%;
        height: 15vh;
        width: 5vw;
}

/*--------Contenedores de Imagenes 2--MAGIK DAY-------*/

.cont-img-2{
    height: 30vh;
    width: 60vw;
    display: flex;
    flex-wrap: wrap;
    margin-left: 35%;
    margin-top: -10%;
    justify-content: center;
}

.cont1:hover, .cont2:hover, .cont3:hover, .cont4:hover, .cont5:hover, 
.cont6:hover, .cont7:hover, .cont8:hover, .cont9:hover, .cont10:hover, 
.cont11:hover, .cont12:hover, .cont13:hover, .cont14:hover, .cont15:hover, 
.cont16:hover, .cont17:hover, .cont18:hover, .cont19:hover, .cont20:hover, .cont21:hover, 
.cont22:hover, .cont23:hover, .cont24:hover, .cont25:hover {
    transform: scale(1.1); 
    transition: transform 0.3s ease; 
}

.cont1, .cont2, .cont3, .cont4, .cont5, 
    .cont6, .cont7, .cont8, .cont9, .cont10, 
    .cont11, .cont12, .cont13, .cont14, .cont15, 
    .cont16, .cont17, .cont18, .cont19, .cont20, .cont21, .cont22,
    .cont23, .cont24, .cont25 {
        margin:0.5%;
        height: 15vh;
        width: 5vw;
}

.cont1{
    background-image: url('img/img1.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont2{
    background-image: url('img/img2.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont3{
    
    background-image: url('img/img3.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont4{
    
    background-image: url('img/img4.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont5{
    
    background-image: url('img/img5.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont6{
    
    background-image: url('img/img6.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont7{
    
    background-image: url('img/img7.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont8{
    
    background-image: url('img/img8.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont9{
    
    background-image: url('img/img9.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont10{
    
    background-image: url('img/img10.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont11{
    
    background-image: url('img/img11.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont12{
    
    background-image: url('img/img12.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont13{
    
    background-image: url('img/img13.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont14{
    
    background-image: url('img/img14.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont15{
    
    background-image: url('img/img15.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont16{
    
    background-image: url('img/img16.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont17{
    
    background-image: url('img/img17.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont18{
    
    background-image: url('img/img18.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont19{
    
    background-image: url('img/img19.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont20{
    
    background-image: url('img/img20.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont21{
    
    background-image: url('img/img21.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont22{
    
    background-image: url('img/img22.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont23{
    
    background-image: url('img/img23.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont24{
    
    background-image: url('img/img24.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.cont25{
    
    background-image: url('img/img25.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}


/*-------------memory1----DESKTOP-------------------*/

.memory1{
    height: 60vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(18, 121, 204);
    overflow: hidden;
}

.memo-1-title{
    width: 25vw;
    font-family: 'BebasNeue';
    font-size: 60px;
    text-align: left;
    color: white;
    padding: 10%;
    text-shadow: 8px 8px 4px rgba(0, 0, 0, 0.5);
    transform: rotate(-8deg);
}

.memo-1-p{
    width: 50vw;
    font-family: 'frankit';
    font-size: 26px;
    text-align: left;
    margin-left: -10%;
    color: white;
    padding: 5%;
}


/*-------------contenedor de videos----------*/

.area4{
    height: 100vh;
    width: 100vw;
    align-items: center;
    background-color: rgb(255, 255, 255);
    background-image: url('img/portrait-videos.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    overflow: hidden;
}

.cont-vid-1{
    height: 50vh;
    width: 60vw;
    display: flex;
    flex-wrap: wrap;
    margin-left: 35%;
    padding-top: 6%;
    justify-content: center;
}

.cont-vid-2{
    height: 50vh;
    width: 60vw;
    display: flex;
    flex-wrap: wrap;
    margin-left: 35%;
    margin-top: -5%;
    justify-content: center;
}

.titles-area4{
    align-items: right;
    justify-content: right;
    font-family: 'BebasNeue';
    font-size: 20px;
    color: rgb(0, 0, 0);
    height: 15vh;
    width: 10vw;
    margin: 0.5%;
}

.play-button{
    max-width: 60%; 
    max-height: 60%;
    backdrop-filter: none;
}

.play-button:hover {
    transform: scale(0.8); 
    transition: transform 0.3s ease;
}

.cont-v1:hover, .cont-v2:hover, .cont-v3:hover, .cont-v4:hover, .cont-v5:hover, 
.cont-v6:hover, .cont-v7:hover {
    transform: scale(1); 
    transition: transform 0.3s ease; 
}

.cont-v1{
    margin:0.5%;
    height: 35vh;
    width: 5vw;
    background-image: url('img/vid-img-1.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center; 
}
.cont-v2{
    margin:0.5%;
    height: 35vh;
    width: 5vw;
    background-image: url('img/vid-img-2.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont-v3{
    margin:0.5%;
    height: 35vh;
    width: 5vw;
    background-image: url('img/vid-img-3.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont-v4{
    margin:0.5%;
    height: 35vh;
    width: 5vw;
    background-image: url('img/vid-img-4.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont-v5{
    margin:0.5%;
    height: 35vh;
    width: 5vw;
    background-image: url('img/vid-img-5.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont-v6{
    margin:0.5%;
    height: 35vh;
    width: 5vw;
    background-image: url('img/vid-img-6.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cont-v7{
    margin:0.5%;
    height: 35vh;
    width: 5vw;
    background-image: url('img/vid-img-7.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.area5{
    border-top-right-radius: 80px;
    height: 100vh;
    width: 100vw;
    background-color: rgb(18, 121, 204);
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    overflow: hidden;
}

/*-----------------MOBILE SETTINGS--------------*/

@media screen and (max-width: 600px){

    .menu {
        height: 5vh;
        width: 80%;
        max-width: 100vw;    
    }

    .menu-option {
        font-size: 16px;
        margin-left: 10px;
    }

    .left-logo{
        display: none;
    }

    .left-logo-2{
        display: block;
        height: 30%;
        width: 100%;
        margin-right: 0%;
    }

    .animation-text {
        position: absolute;
        top: 50%;
        left: 1%;
        transform: translateX(-100%);
        white-space: normal; 
        font-size: 2.7em;
        text-align: left;
    }

    .area2{
        height: 1100px;
        background-image: url('img/portrait-about-us-mobile.png');
    }

    .about-us-p{
        width: 92vw;
        height: 30vh;
        margin-left: 4%;
        padding-top: 75%;
        font-size: 12px;
        font-family: 'frankit';
        white-space: normal; 
        text-align: left;  
    }

    .area3{
        height: 150vh;
        border-top-right-radius: 50px;
        border-bottom: 10px solid rgb(18, 121, 204);
        background-image: url('img/portrait-fotos-mobile.png');
        gap: 0;
    }

    .titles-area3{
        margin:0.5%;
        font-size: 18px;
        height: 10vh;
        width: 20vw;
    }

    .cont-img-1{
        height: 10vh;
        width: 90vw;
        display: flex;
        flex-wrap: wrap;
        margin-left: 5%;
        padding-top: 70%;
    }

    .cont1-1, .cont2-1, .cont3-1, .cont4-1, .cont5-1, 
    .cont6-1, .cont7-1, .cont8-1 {
        margin:0.5%;
        height: 10vh;
        width: 20vw;
}

    .cont-img-2{
        height: 50vh;
        width: 90vw;
        display: flex;
        flex-wrap: wrap;
        margin-left: 5%;
        margin-top: 45%;
    }

    .cont1, .cont2, .cont3, .cont4, .cont5, 
    .cont6, .cont7, .cont8, .cont9, .cont10, 
    .cont11, .cont12, .cont13, .cont14, .cont15, 
    .cont16, .cont17, .cont18, .cont19, .cont20, .cont21, .cont22,
    .cont23, .cont24, .cont25 {
    margin:0.5%;
    height: 10vh;
    width: 20vw;
}

.memory1{
    height: 70vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    gap: 0;
}

.memo-1-title{
    width: 80vw;
    font-family: 'BebasNeue';
    font-size: 40px;
    margin-left: 0%;
    padding-left: 0%;
    margin-top: 10%;
    text-align: center;
    padding: 0%;
    text-shadow: 8px 8px 4px rgba(0, 0, 0, 0.5);
    transform: rotate(-8deg);
}

.memo-1-p{
    height: 30vh;
    width: 90vw;
    font-size: 16px;
    text-align: left;
    align-items: center;
    color: white;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 10%;
    margin-left: 0%;
}

.area4{
    height: 100vh;
    width: 100vw;
    background-image: url('img/portrait-videos-mobile-2.png'); 
    
}

.cont-vid{
    height: 50vh;
    width: 90vw;
    display: flex;
    flex-wrap: wrap;
    margin-left: 5%;
    padding-top: 65%;
}

.cont-v1, .cont-v2, .cont-v3, .cont-v4, .cont-v5, 
.cont-v6, .cont-v7 {
margin:0.5%;
height: 20vh;
width: 15vw;
}

.cont-vid-1{
    height: 50vh;
    width: 90vw;
    display: flex;
    flex-wrap: wrap;
    margin-left: 2%;
    padding-top: 65%;
}

.cont-vid-2{
    height: 50vh;
    width: 95vw;
    display: flex;
    flex-wrap: wrap;
    margin-left: 2%;
    margin-top: -40%;
}

.titles-area4{
    align-items: right;
    justify-content: right;
    font-family: 'BebasNeue';
    font-size: 16px;
    color: rgb(0, 0, 0);
    height: 15vh;
    width: 20vw;
    margin: 1%;
}

}

/*-----------------TABLET SETTINGS--------------*/

@media screen and (min-width: 601px) and (max-width: 1024px){

    .menu {
        height: 5vh;
        width: 90%;
        max-width: 100vw;    
    }

    .menu-option {
        font-size: 22px;
        margin-left: 10px;
    }

    .left-logo{
        height: 10%;
        width: 90%;
        margin-right: 10%;
    }

    .animation-text {
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translateX(-100%);
        white-space: normal;
        font-size: 5em;
        text-align: left;
    }

    .area2{
        height: 130vh;
        background-image: url('img/portrait-about-us-mobile.png'); 
    }

    .about-us-p{
        width: 90vw;
        height: 30vh;
        margin-left: 5%;
        padding-top: 45%;
        font-size: 18px;
        font-family: 'frankit';
        white-space: normal; 
        text-align: left;  
        min-height: min-content;
    }

    .area3{
        
        height: 160vh;
        background-image: url('img/portrait-fotos-mobile.png')
    }

    .titles-area3{
        font-size: 26px;
        height: 10vh;
        width: 20vw;
    }

    .cont-img-1{
        height: 20vh;
        width: 90vw;
        display: flex;
        flex-wrap: wrap;
        margin-left: 5%;
        padding-top: 55%;
    }

    .cont1-1, .cont2-1, .cont3-1, .cont4-1, .cont5-1, 
    .cont6-1, .cont7-1, .cont8-1 {
        margin:0.5%;
        height: 10vh;
        width: 20vw;
    }

    .cont-img-2{
        height: 50vh;
        width: 90vw;
        display: flex;
        flex-wrap: wrap;
        margin-left: 5%;
        padding-top: 35%;
    }

    .cont1, .cont2, .cont3, .cont4, .cont5, 
    .cont6, .cont7, .cont8, .cont9, .cont10, 
    .cont11, .cont12, .cont13, .cont14, .cont15, 
    .cont16, .cont17, .cont18, .cont19, .cont20, .cont21, .cont22,
    .cont23, .cont24, .cont25 {
        margin:0.5%;
        height: 10vh;
        width: 20vw;
    }

    .memory1{
        height: 50vh;
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        justify-content: center;
        align-items: center;
        border-top: 10px solid rgb(18, 121, 204);
    }
    
    .memo-1-title{
        width: 80vw;
        font-family: 'BebasNeue';
        font-size: 60px;
        text-align: center;
        padding: 5%;
        text-shadow: 8px 8px 4px rgba(0, 0, 0, 0.5);
        transform: rotate(-8deg);
    }
    
    .memo-1-p{
        width: 100vw;
        font-family: 'frankit';
        font-size: 20px;
        text-align: left;
        align-items: center;
        color: white;
        padding-left: 5%;
        padding-right: 5%;
        margin-top: -20%;
        margin-left: 0%;
    }

    .area4{
        height: 100vh;
        width: 100vw;
        background-image: url('img/portrait-videos-mobile-2.png'); 
        
    }

    .cont-vid{
        height: 50vh;
        width: 90vw;
        display: flex;
        flex-wrap: wrap;
        margin-left: 5%;
        padding-top: 40%;
    }

    .cont-v1, .cont-v2, .cont-v3, .cont-v4, .cont-v5, 
    .cont-v6, .cont-v7 {
    margin:0.5%;
    height: 20vh;
    width: 10vw;
    }

    .cont-vid-1{
        height: 50vh;
        width: 90vw;
        display: flex;
        flex-wrap: wrap;
        margin-left: 2%;
        padding-top: 55%;
    }
    
    .cont-vid-2{
        height: 50vh;
        width: 95vw;
        display: flex;
        flex-wrap: wrap;
        margin-left: 2%;
        margin-top: -35%;
    }
    
    .titles-area4{
        align-items: right;
        justify-content: right;
        font-family: 'BebasNeue';
        font-size: 16px;
        color: rgb(0, 0, 0);
        height: 15vh;
        width: 20vw;
        margin: 1%;
    }


}

/*-----------------TABLET HORIZONTAL SETTINGS--------------*/

@media screen and (min-width: 1114px) and (max-width: 705px){

    .area2{
        height: 120vh;
    }

}