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

:root {
    --main_text_color: #152700;
    --hovering_text_color: #686604;
    --main-background_color: rgb(212,215,62);
}

html {
    max-width: 1920px;
    overflow-x: hidden;
    margin: 0 auto;
    scroll-behavior: smooth;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, 
    rgb(252,252,216) 10%, 
    rgb(212,215,62) 70%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 999;
}

.spinner {
    width: 200px;
    height: 200px;
    background-image: url(Assets/Eye.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    animation: spin 4s linear infinite;
    margin: 150px auto 0 auto;
}

.loading-text {
    font-family: "Oswald", sans-serif;
    font-weight: 900;
    font-size: 2em;
    ;
    color: var(--main_text_color);
    margin: 20px auto 0 auto;
    animation: fadeInfadeOut 5s ease;
}

@keyframes fadeInfadeOut {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}

a {
    text-decoration: none;
    color: var(--main_text_color);
}

header {
    width: 100%;
    height: 80px;
    display: flex;
    padding-left: 5px;
    overflow-y: hidden;
    padding-top: 10px;
    /* border: 1px solid var(--main_text_color); */
    box-shadow: 0 4px 4px rgba(57, 58, 0, 0.603);
    position: relative;
    z-index: 10;
}

.logo_header {
    width: 20%;
    height: 100px;
    overflow-y: hidden;
    /* border: 1px solid red; */
}

.logo {
    width: 80%;
    height: 100%;
    object-fit: contain;
    padding-left: 20px;
    transform: translateY(-20px);

}

nav {
    margin: 0 5% 0 5%;
    padding: 0 5%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow-y: auto;

}

nav>ul {
    display: flex;
    list-style: none;
    color: black;
    width: 100%;
    flex-direction: row;
    gap: 6px
}


nav>ul>li {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: visible;
    /* border: 1px solid red; */
}

nav>ul>li>a>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.2s ease;
    filter: drop-shadow(2px 2px 3px rgba(42, 43, 0, 0.63));
}

nav>ul>li>a>img:hover {
    transform: rotate(-2deg) translateY(-5px);
    filter: drop-shadow(4px 4px 4px rgba(42, 43, 0, 0.63));
}

/* 
nav>ul>li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    height: 100%;
    width: 1px;
    background-color: var(--hovering_text_color);
} */

nav>ul>li>a:hover {
    color: var(--hovering_text_color);
}

.social_media {
    display: flex;
    margin: 4px auto 0 auto;
    flex-direction: column;
    align-items: center;
    width: 5%;
    gap: 3px;
    position: relative;
}

.social_media2 {
    display: flex;
    margin: 4px auto 0 auto;
    flex-direction: column;
    align-items: center;
    width: 5%;
    gap: 3px;
    position: relative;
}


.instagram_logo {
    width: 25px;
    object-fit: contain;
}

.tiktok_logo {
    width: 25px;
    object-fit: contain;

}

.lang {
    margin: 10px auto 0 20px;
    width: 5%;
    color: var(--main_text_color);
    font-family: "Oswald", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.9em;
}

.lang>p>a:hover {
    color: rgb(128, 139, 0);
}



.collage_container {
    width: 100%;
    height: 780px;
    margin: 0 auto 0 auto;
    position: relative;
    background: radial-gradient(circle at 50% 0, 
    rgb(252,252,216) 10%, 
    rgb(212,215,62) 70%);
    padding: 0 10px 0 10px;
}

.Collage-text-1 {
    position: absolute;
    width: 100%;
    top: 240px;
    left: 0;
    color: rgb(238, 187, 79);
    font-family: "Oswald", sans-serif;
    font-size: 7em;
    font-weight: 900;
    text-align: center;
    z-index: 1;
    background-color: white;
    /* box-shadow: 0px 3px 4px rgba(26, 10, 0, 0.486); */
    line-height: 0.8;
    padding: 10px 10px;
    overflow-y: hidden;
    overflow-x: hidden;

}


.Collage-text-2 {
    position: absolute;
    width: 40%;
    max-width: 300px;
    top: 55%;
    left: calc(40% - 4vw);
    font-size: 0.7em;
    text-align: left;
    background-color: #8b9703;
    color: white;
    padding: 8px;
    transform: rotate(12deg) translate(-500%, -500%);
    box-shadow: 4px 4px 4px rgba(57, 58, 0, 0.603);
    font-family: Tahoma, sans-serif;
    font-weight: 600;
    /* letter-spacing: 2px; */
    z-index: 4;

}

.Collage-text-3 {
    position: absolute;
    width: 40%;
    max-width: 300px;
    top: 80%;
    right: calc(40% - 4vw);
    font-size: 0.7em;
    text-align: left;
    background-color: #8b9703;
    color: white;
    padding: 8px;
    transform: rotate(-5deg) translate(500%, 500%);
    box-shadow: 4px 4px 4px rgba(57, 58, 0, 0.603);
    font-family: Tahoma, sans-serif;
    font-weight: 600;
    /* letter-spacing: 2px; */
    z-index: 4;
}

.placing_on_top1 {
    animation: place_on_top1 2s ease forwards;
    animation-delay: 2.2s;
}

@keyframes place_on_top1 {
    0% {
        transform: translate(-500%, -500%);
    }

    100% {
        transform: translate(0, 0) scale(1) rotate(12deg);
    }
}

.placing_on_top2 {
    animation: place_on_top2 2s ease forwards;
    animation-delay: 2.2s;
}

@keyframes place_on_top2 {
    0% {
        transform: translate(500%, 500%);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) scale(1) rotate(-5deg);
        opacity: 1;
    }
}


.collage_element {
    padding-top: 62px;
    width: 100%;
    height: 840px;
    position: absolute;
    object-fit: contain;
    top: 0;
    left: 0;
    filter: drop-shadow(2px 2px 3px rgba(42, 43, 0, 0.63));
    z-index: 3;
    contain: layout paint;
    /* border: 1px solid var(--main_text_color); */
}

.marquee-container {
    width: 120%;
    height: 60px;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    background-color: white;
    z-index: 1;
    top: 520px;
    transform: rotate(2deg);
    box-shadow: 0 4px 6px rgba(59, 51, 0, 0.473);
}

.marquee-container2 {
    width: 120%;
    height: 60px;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    background-color: white;
    z-index: 3;
    top: 573px;
    transform: rotate(-3deg);
    box-shadow: 0 4px 6px rgba(59, 51, 0, 0.473), 0 -4px 6px rgba(59, 51, 0, 0.473);
}

.marquee {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 310s linear infinite;
    padding: 7px;
}

.marquee2 {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 220s linear infinite;
    padding: 7px;
}

.marquee span {
    display: inline-block;
    font-family: "Stardos Stencil", system-ui;
    font-weight: 700;
    font-style: normal;
    font-size: 2em;
    letter-spacing: 1px;
    color: rgb(243, 183, 54);
}

.marquee2 span {
    display: inline-block;
    font-family: "Stardos Stencil", system-ui;
    font-weight: 700;
    font-style: normal;
    font-size: 2em;
    letter-spacing: 1px;
    color: rgb(243, 183, 54);
}



@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}


/* grid gallery */



.gridContainer {
    display: grid;
    position: relative;
    place-items: center;
    min-height: 700px;
    background-color: white;
    overflow-x: hidden;
    overflow-y: hidden;
}

.gallery-text {
    position: absolute;
    display: inline;
    z-index: 1;
    Top: -48px;
    width: 100%;
    font-family: "Oswald", sans-serif;
    font-weight: 900;
    font-size: clamp(1rem, 7rem, 8rem);
    text-align: center;
    color: var(--main-background_color);
}

.gallery-text2 {
    position: absolute;
    display: inline;
    z-index: 1;
    Bottom: -40px;
    width: 100%;
    font-family: "Oswald", sans-serif;
    font-weight: 900;
    font-size: clamp(1rem, 7rem, 8rem);
    text-align: center;
    color: rgb(212,215,62);
}

.ulGallery {
    position: relative;
    z-index: 4;
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.liGallery {
    padding: 0;
}

.imgGallery {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    transition: all 0.2s ease;
}

.ulGallery:is(:hover, :focus-within) img {
    opacity: calc(0.1 + (var(--active-lerp, 0) * 0.9));
    filter: grayscale(calc(1 - var(--active-lerp, 0)));
}

:root {
    --lerp-0: 1;
    --lerp-1: 0.5787037;
    --lerp-2: 0.2962963;
    --lerp-3: 0.125;
    --lerp-4: 0.037037;
    --lerp-5: 0.0046296;
    --lerp-6: 0;
}

.aGallery {
    outline-offset: 4px;
}

.liGallery {
    flex: calc(0.1 + (var(--active-lerp, 0) * 1));
    transition: flex 0.2s ease;
}

.liGallery:is(:hover, :focus-within) {
    --active-lerp: var(--lerp-0);
    z-index: 7;
}

.liGallery:has(+ .liGallery:is(:hover, :focus-within)),
.liGallery:is(:hover, :focus-within)+.liGallery {
    --active-lerp: var(--lerp-1);
    z-index: 6;
}

.liGallery:has(+ .liGallery + .liGallery:is(:hover, :focus-within)),
.liGallery:is(:hover, :focus-within)+.liGallery+.liGallery {
    --active-lerp: var(--lerp-2);
    z-index: 5;
}

.liGallery:has(+ .liGallery + .liGallery + .liGallery:is(:hover, :focus-within)),
.liGallery:is(:hover, :focus-within)+.liGallery+.liGallery+.liGallery {
    --active-lerp: var(--lerp-3);
    z-index: 4;
}

.liGallery:has(+ .liGallery + .liGallery + .liGallery + .liGallery:is(:hover, :focus-within)),
.liGallery:is(:hover, :focus-within)+.liGallery+.liGallery+.liGallery+.liGallery {
    --active-lerp: var(--lerp-4);
    z-index: 3;
}

.liGallery:has(+ .liGallery + .liGallery + .liGallery + .liGallery + .liGallery:is(:hover, :focus-within)),
.liGallery:is(:hover, :focus-within)+.liGallery+.liGallery+.liGallery+.liGallery+.liGallery {
    --active-lerp: var(--lerp-5);
    z-index: 2;
}

.liGallery:has(+ .liGallery + .liGallery + .liGallery + .liGallery + .liGallery + .liGallery:is(:hover, :focus-within)),
.liGallery:is(:hover, :focus-within)+.liGallery+.liGallery+.liGallery+.liGallery+.liGallery+.liGallery {
    --active-lerp: var(--lerp-6);
    z-index: 1;
}


/* grid gallery */


.info {
    width: 100%;
    height: 990px;
    /* background-color: rgb(212,215,62); */
    background: radial-gradient(circle at 50% 30%, 
    rgb(169, 184, 11) 0%,
    rgb(212,215,62) 30%,
    rgb(252,252,216) 80%); 
    position: relative;
    padding: 70px 20px 20px 30px;
    z-index: 1;
    
}

.info_collage_image {
    width: 100%;
    height: 100%;
    
    /* border: 2px solid var(--main_text_color);
    background-image: url('Assets/CollageImage1.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-radius: 500px 500px 500px 500px;
    box-shadow:
        inset 0 10px 10px rgba(26, 10, 0, 0.486),
        inset 0 40px 30px rgba(0, 0, 0, 0.3); */
    overflow: hidden;
    margin: 0 auto;

}

.form_container {
    width: 60%;
    height: 80%;
    position: absolute;
    top: 13%;
    left: 20%;
    background-color: rgba(69, 75, 0, 0.514);
    border-radius: 5%;
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5), -3px -3px 7px rgba(0, 0, 0, 0.5) ;
}

.contact_form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.form_title {
    width: 100%;
    font-family: "Oswald", sans-serif;
    font-weight: 900;
    font-size: 2.5em;
    color: rgb(255, 255, 255);
    text-shadow:
        0 2px 2px rgba(73, 48, 0, 0.9),
        0 4px 4px rgba(73, 48, 0, 0.9);
    text-align: center;
}

.form_paragraph {
    width: 50%;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-size: 1.2em;
    color: rgb(255, 255, 255);
    /* text-shadow:
        0 2px 2px rgba(73, 48, 0, 0.9),
        0 4px 4px rgba(73, 48, 0, 0.9); */
    text-align: justify;
}

.form_label {
    width: 50%;
    transform: translateY(6px);
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 1.2em;
    color: rgb(255, 255, 255);
    /* text-shadow:
        0 2px 2px rgba(73, 48, 0, 0.9),
        0 4px 4px rgba(73, 48, 0, 0.9); */
    text-align: left;
}

.form_input {
    all: unset;
    width: 50%;
    height: 30px;
    font-family: "Oswald", sans-serif;
    border-radius: 10px;
    border: 2px solid rgb(173, 142, 0);
    background-color: rgb(255, 255, 255);
    color: rgb(12, 27, 0);
    padding-left: 8px;
}

#message {
    all: unset;
    width: 50%;
    height: 150px;
    font-family: "Oswald", sans-serif;
    border-radius: 10px;
    border: 2px solid rgb(173, 142, 0);
    background-color: rgb(255, 255, 255);
    color: rgb(27, 21, 0);
    padding-left: 8px;
    padding-top: 4px;
}

#submitButton {
    all: unset;
    width: 10%;
    height: 40px;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    color: rgb(255, 255, 255);
    background-color: rgb(173, 142, 0);
    border-radius: 10px;
    border: 2px solid rgb(71, 58, 0);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: 0 4px 6px rgba(59, 51, 0, 0.473);
}

#submitButton:hover {
    background-color: rgb(71, 58, 0);
    border: 2px solid rgb(173, 142, 0);
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 8px 6px rgba(59, 51, 0, 0.473);
}


.footer_container {
    width: 100%;
    height: 150px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 -4px 6px rgba(59, 51, 0, 0.473);
    display: flex;
    padding: 35px 10% 20px 25%;
    gap: 0;
    position: relative;
    z-index: 10;
}

.footer_text_container {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    position: relative;
    z-index: 10;
    /* border: 2px solid rgb(173, 142, 0); */

}

.footer_text {
    font-family: "Oswald", sans-serif;
    font-size: 0.8em;
    color: rgb(27, 21, 0);
    text-align: left;
    position: relative;
    z-index: 11;
    width: 100%;
    /* border: 2px solid rgb(173, 142, 0); */
}

@media (max-width: 670px) {

    header {
        margin-top: 1px;
        margin-bottom: 2px;
        padding-bottom: 5px;
        height: 200px;
        overflow-y: hidden;
    }

    nav {
        font-size: 0.6em;
        width: 40%;
        padding-left: 10px;
        overflow: hidden;
    }

    nav>ul {
        flex-direction: column;
        gap: 5px;
        /* border-left: 1px solid var(--hovering_text_color); */
        overflow: visible;
    }

    .social_media {
        margin-top: 50px !important;
        transform: translateX(-30px);
    }

    .social_media2 {
        transform: translateX(-30px);
    }


    .lang {
        font-size: 0.6em;
        margin-top: 20px;
        transform: translateX(-20px) translateY(40px);

    }

    /* li:not(:last-child)::after {
        background-color: transparent !important;
    } */

    nav>ul>li>a>img {
        width: 63%;
        object-fit: contain;
        transition: all 0.2s ease;
        filter: drop-shadow(2px 2px 3px rgba(42, 43, 0, 0.63));
        overflow: visible;
    }

    .logo_header {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .logo {
        transform: rotate(-90deg) translateX(-10px);
        width: 120px;
        overflow: visible;
        scale: 1.8;
    }

    .collage_element {
        padding-top: 350px;
        animation: none !important;
        opacity: 1 !important;
        transform: translate(0, 0) scale(1) !important;
    }

    .Collage-text-1 {
        top: 60px;
        left: 0 !important;
        font-size: 3em !important;
        padding: 5px 5px !important;
        /* border: 2px solid red; */
    }

    .gallery-text {
        font-size: 3.2em;
        top: -14px
    }

    .gallery-text2 {
        font-size: 3em;
        bottom: -14px
    }


    .form_title {
        font-size: 1em;
    }

    .form_paragraph {
        font-size: 0.8em !important;
        width: 90%;
    }

    .form_label {
        width: 90%;
        font-size: 0.8em !important;
    }

    .form_input {
        width: 90%;
        font-size: 0.8em !important;
    }

    #message {
        width: 90%;
        font-size: 0.8em !important;
    }

    #submitButton {
        font-size: 0.8em !important;
        width: 20%;
    }

    .footer_container {
        padding: 35px 4% 20px 4% !important;

    }

    .footer_text {
        font-size: 0.7em !important;
    }

}

@media (max-width: 880px) {

    nav {
        font-size: 0.7em;
        width: 50%;
        overflow: visible;
    }

    .lang {
        font-size: 0.7em;

    }

    .social_media {
        width: 10%;
        margin-top: 0;
    }

    .social_media2 {
        width: 10%;
        margin-top: 0;
    }

    .instagram_logo {
        width: 20px;
        margin-top: 10px;
    }

    .tiktok_logo {
        width: 20px;
    }

    .logo_header {
        width: 25%;
    }

    nav>ul {
        gap: 2px;

    }

    .Collage-text-1 {
        left: 0;
        font-size: 6.5em;
    }

    .Collage-text-2 {
        left: 5%;
        font-size: 0.64em;
    }

    .Collage-text-3 {
        top: 70%;
        right: 5%;
        font-size: 0.64em;
    }

    .info {
        padding-left: 0;
        padding-right: 0;
    }

    .form_container {
        width: 90%;
        left: 5%;
    }

    .form_title {
        font-size: 2em;
    }

    .form_paragraph {
        font-size: 1em;
        width: 90%;
    }

    .form_label {
        width: 90%;
        font-size: 1em;
    }

    .form_input {
        width: 90%;
        font-size: 1em;
    }

    #message {
        width: 90%;
        font-size: 1em;
    }

    #submitButton {
        font-size: 1em;
        width: 20%;
    }

    
    .footer_container {
        padding: 35px 2% 20px 10%;
    }

}

.animation_1 {
    animation: Translate1 0.7s ease forwards;
    animation-delay: 1s;
    opacity: 0;
}

.animation_2 {
    animation: Translate2 0.8s ease forwards;
    animation-delay: 1.4s;
    opacity: 0;
}

.animation_4 {
    animation: Translate4 0.8s ease forwards;
    animation-delay: 1.3s;
    opacity: 0;
}

.animation_3 {
    animation: Translate4 0.8s ease forwards;
    animation-delay: 1.5s;
    opacity: 0;
}

.animation_5 {
    animation: Translate5 0.8s ease forwards;
    animation-delay: 1.6s;
    opacity: 0;
}

.animation_6 {
    animation: Translate6 0.8s ease forwards;
    animation-delay: 1.1s;
    opacity: 0;
}

.animation_7 {
    animation: Translate7 0.8s ease forwards;
    animation-delay: 1.9s;
    opacity: 0;
}

.animation_8 {
    animation: Translate8 0.8s ease forwards;
    animation-delay: 1.5s;
    opacity: 0;
}

.animation_9 {
    animation: Translate9 0.8s ease forwards;
    animation-delay: 1.7s;
    opacity: 0;
}

.animation_10 {
    animation: Translate10 0.8s ease forwards;
    animation-delay: 1.8s;
    opacity: 0;
}

.animation_11 {
    animation: Translate11 0.8s ease forwards;
    animation-delay: 1.9s;
    opacity: 0;
}

.animation_12 {
    animation: Translate12 0.8s ease forwards;
    animation-delay: 1.2s;
    opacity: 0;
}

.animation_13 {
    animation: Translate13 0.8s ease forwards;
    animation-delay: 1.4s;
    opacity: 0;
}

.animation_14 {
    animation: Translate14 0.8s ease forwards;
    animation-delay: 1.6s;
    opacity: 0;
}

.animation_15 {
    animation: Translate15 0.8s ease forwards;
    animation-delay: 1.7s;
    opacity: 0;
}

.animation_15 {
    animation: Translate15 0.8s ease forwards;
    animation-delay: 1.2s;
    opacity: 0;
}

.animation_16 {
    animation: Translate16 0.8s ease forwards;
    animation-delay: 1.9s;
    opacity: 0;
}

.animation_17 {
    animation: Translate17 0.8s ease forwards;
    animation-delay: 1.4s;
    opacity: 0;
}

.animation_18 {
    animation: Translate18 0.8s ease forwards;
    animation-delay: 1.8s;
    opacity: 0;
}

.animation_19 {
    animation: Translate19 0.8s ease forwards;
    animation-delay: 1.6s;
    opacity: 0;
}

.animation_20 {
    animation: Translate20 0.8s ease forwards;
    animation-delay: 1.5s;
    opacity: 0;
}

.animation_21 {
    animation: Translate21 0.8s ease forwards;
    animation-delay: 1.4s;
    opacity: 0;
}

.animation_22 {
    animation: Translate22 0.8s ease forwards;
    animation-delay: 1.2s;
    opacity: 0;
}

.animation_23 {
    animation: Translate23 0.8s ease forwards;
    animation-delay: 1.7s;
    opacity: 0;
}

.animation_24 {
    animation: Translate24 0.8s ease forwards;
    animation-delay: 1.9s;
    opacity: 0;
}

.animation_25 {
    animation: Translate25 0.8s ease forwards;
    animation-delay: 1.8s;
    opacity: 0;
}

.animation_26 {
    animation: Translate26 0.8s ease forwards;
    animation-delay: 1.6s;
    opacity: 0;
}

.animation_27 {
    animation: Translate27 0.8s ease forwards;
    animation-delay: 1.7s;
    opacity: 0;
}

.animation_28 {
    animation: Translate28 0.8s ease forwards;
    animation-delay: 1.3s;
    opacity: 0;
}

.animation_29 {
    animation: Translate29 0.8s ease forwards;
    animation-delay: 1.8s;
    opacity: 0;
}

.animation_30 {
    animation: Translate30 0.8s ease forwards;
    animation-delay: 1.9s;
    opacity: 0;
}

.animation_31 {
    animation: Translate31 0.8s ease forwards;
    animation-delay: 1.3s;
    opacity: 0;
}

/* ------ Loader animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#main-content {
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.loaded #main-content {
    opacity: 1;
}

/* ------- Animations */
@keyframes Translate1 {
    from {
        opacity: 0;
        transform: translate(-100%, 50%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate2 {
    from {
        opacity: 0;
        transform: translate(-100%, -80%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate3 {
    from {
        opacity: 0;
        transform: translate(-90%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate4 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate5 {
    from {
        opacity: 0;
        transform: translate(120%, 70%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate6 {
    from {
        opacity: 0;
        transform: translate(129%, -52%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate7 {
    from {
        opacity: 0;
        transform: translate(110%, 720%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate8 {
    from {
        opacity: 0;
        transform: translate(-130%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate9 {
    from {
        opacity: 0;
        transform: translate(140%, -120%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate10 {
    from {
        opacity: 0;
        transform: translate(123%, -123%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate11 {
    from {
        opacity: 0;
        transform: translate(-160%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate12 {
    from {
        opacity: 0;
        transform: translate(140%, -180%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate13 {
    from {
        opacity: 0;
        transform: translate(-120%, 163%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate14 {
    from {
        opacity: 0;
        transform: translate(131%, -183%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate15 {
    from {
        opacity: 0;
        transform: translate(-154%, -140%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate16 {
    from {
        opacity: 0;
        transform: translate(90%, 90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate17 {
    from {
        opacity: 0;
        transform: translate(90%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate18 {
    from {
        opacity: 0;
        transform: translate(-140%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate19 {
    from {
        opacity: 0;
        transform: translate(-60%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate20 {
    from {
        opacity: 0;
        transform: translate(1720%, 172%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate21 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate22 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate23 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate24 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate25 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate26 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate27 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate28 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate29 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate30 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes Translate31 {
    from {
        opacity: 0;
        transform: translate(100%, -90%);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}