.loader {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background: #f66c61; */
    background-color: linear-gradient(to right, #fff7ad, #ffa9f9);
    transform: translateY(100%);
}

.loader__light {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateY(100%);
}

.effect-show {
    position: relative;
    overflow: hidden;
}

.effect-show span {
    display: block;
}

@-webkit-keyframes effect-loader {
    0% {
        transform: translateY(100%);
    }

    50% {
        transform: translateY(0%);
    }

    99% {
        transform: translateY(0%);
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes effect-loader {
    0% {
        transform: translateY(100%);
    }

    50% {
        transform: translateY(0%);
    }

    99% {
        transform: translateY(0%);
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes effect-show {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes effect-show {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@-webkit-keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes fade-in-down--sml {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down--sml {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.loaded .menu-button,
.loaded .navbar-brand,
.loaded .nav-right a,
.loaded .contact-btn {
    opacity: 0;
    transform: translateY(-30px);
    -webkit-animation: fade-in-down 1;
    animation: fade-in-down 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;
    -webkit-animation-delay: 700ms;
    animation-delay: 700ms;
}

.loaded .navbar-brand {
    -webkit-animation-delay: 900ms;
    animation-delay: 900ms;
}

.loaded .nav-right a {
    -webkit-animation-delay: 1100ms;
    animation-delay: 1100ms;
}

.loaded .contact-btn {
    opacity: 0;
    transform: translateY(-15px);
    -webkit-animation: fade-in-down--sml 1;
    animation: fade-in-down--sml 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 450ms;
    animation-duration: 450ms;
    -webkit-animation-delay: 1200ms;
    animation-delay: 1200ms;
}

.loaded .contact-btn:nth-of-type(2) {
    -webkit-animation-delay: 1250ms;
    animation-delay: 1250ms;
}

.loaded .contact-btn:nth-of-type(3) {
    -webkit-animation-delay: 1350ms;
    animation-delay: 1350ms;
}

.loaded .effect-show span {
    opacity: 0;
    transform: translateY(-100%);
    -webkit-animation: effect-show 1;
    animation: effect-show 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 450ms;
    animation-duration: 450ms;
    -webkit-animation-delay: 1550ms;
    animation-delay: 1550ms;
}

.loaded .effect-show:nth-of-type(2) span {
    -webkit-animation-delay: 1650ms;
    animation-delay: 1650ms;
}

.loaded .effect-show:nth-of-type(3) span {
    -webkit-animation-delay: 1750ms;
    animation-delay: 1750ms;
}

.loader.loaded {
    -webkit-animation: effect-loader 1;
    animation: effect-loader 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-timing-function: cubic-bezier(0.445, 0.04, 0.075, 0.98);
    animation-timing-function: cubic-bezier(0.445, 0.04, 0.075, 0.98);
}

.loader.loaded .loader__light {
    -webkit-animation: effect-loader 1;
    animation: effect-loader 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
    -webkit-animation-timing-function: cubic-bezier(0.445, 0.04, 0.075, 0.98);
    animation-timing-function: cubic-bezier(0.445, 0.04, 0.075, 0.98);
}

.none {
    display: none;
}