@font-face {
    font-family: "JosefinSans-Regular";
    src: url("font/JosefinSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "JosefinSans-Light";
    src: url("font/JosefinSans-Light.ttf") format("truetype");
}

@font-face {
    font-family: "JosefinSans-Bold";
    src: url("font/JosefinSans-Bold.ttf") format("truetype");
}

body {
    font-family: "JosefinSans-Regular", Helvetica, Arial, Verdana, sans-serif;
    font-size: 12px;
}

.font-bold {
    font-family: "JosefinSans-Bold", Helvetica, Arial, Verdana, sans-serif;
}

.font-light {
    font-family: "JosefinSans-Light", Helvetica, Arial, Verdana, sans-serif;
}

.section {
    text-align: center;
}

.section-1,
.section-3,
.section-5,
.section-6 {
    background: rgb(174, 28, 90);
    background: linear-gradient(127deg, rgba(174, 28, 90, 1) 0%, rgba(201, 37, 78, 1) 50%, rgba(219, 42, 71, 1) 100%);
    color: #FFF;
}

.section-2,
.section-4 {
    background: #eaeaea;
}

.section {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: 1s linear;
    position: relative;
}



.content-wrapper {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
    transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
    position: relative;
    padding-top: 35px;
}

h1,
h2 {
    font-size: 12px;
}

.logo {
    width: 75px;
    height: 75px;
    z-index: 1000;
    left: 50vw;
    top: 0;
    margin-left: -37.5px;
    cursor: pointer;
}

.menu {
    position: fixed;
    z-index: 999;
    background: rgb(174, 28, 90);
    background: linear-gradient(127deg, rgba(174, 28, 90, 1) 0%, rgba(201, 37, 78, 1) 50%, rgba(219, 42, 71, 1) 100%);
    color: #FFF;
    left: 0;
    top: -150%;
    width: 100vw;
    height: 100vh;
    transition: all .5s linear !important;
}

.menu.active {
    top: 0;
}

.menu .btn-close {
    position: absolute;
    right: 2%;
    top: 1%;
    cursor: pointer;
}

.menu h1 {
    font-family: "JosefinSans-Bold";
}

.intro-1 {
    transform: translatey(-20px);
    animation: intro1-fadeIn 2s ease-in-out forwards;
}


.intro-1-1 {
    animation: intro1-1-move 1s 2s linear forwards, fadeOut 1s 3s ease-in-out forwards;
}

.intro-1-2 {
    animation: intro1-2-move 1s 2s linear forwards, fadeOut 1s 3s ease-in-out forwards;
}

.intro-2 {
    animation: fadeIn 1s 3s ease-in-out forwards;
}

.star-1 {
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite;
}

.section.fp-completely.active {
    z-index: 20;
}

.section.active .content-wrapper {
    transform: translateY(-5vh);
    transition: all 2s cubic-bezier(0.22, 0.44, 0, 1) !important;
}

.section.fp-completely .content-wrapper {
    transform: translateY(5vh);
    transition: all 2s cubic-bezier(0.22, 0.44, 0, 1) !important;
}

.section.fp-completely.active .content-wrapper {
    margin-top: 0;
    transform: translateY(0);
    position: relative;
}

.section.prev.down {
    animation-name: toup;
}

.section.active.up {
    animation-name: fromup;
}

.section.active.down {
    animation-name: fromdown;
    z-index: 12;
}

.section.next.up {
    animation-name: todown;
    z-index: 12;
}

.fade-1-1 {
    opacity: 0;
    animation: fadeIn 1s 3.5s linear forwards;
}

.ani-1-1 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 4s ease-in-out forwards, float 3s ease-in-out infinite;
}

.ani-1-2 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 6s ease-in-out forwards, float 6s ease-in-out infinite;
}

.ani-1-3 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 3s ease-in-out forwards, float 4s ease-in-out infinite;
}

.ani-1-4 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 5s ease-in-out forwards, float 5s ease-in-out infinite;
}

.active .ani-2-1 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 1s ease-in-out forwards, float 3s ease-in-out infinite;
}

.active .ani-2-2 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 1.5s ease-in-out forwards, float 5s ease-in-out infinite;
}

.active .ani-2-3 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 2s ease-in-out forwards, float 6s ease-in-out infinite;
}

.active .ani-3-1 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 1.5s ease-in-out forwards, float 6s ease-in-out infinite;
}

.active .ani-3-2 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 1s ease-in-out forwards, float 3s ease-in-out infinite;
}

.active .ani-3-3 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 2s ease-in-out forwards, float 4s ease-in-out infinite;
}

.active .ani-3-4 {
    opacity: 0;
    transform: translatex(-50px);
    animation: slide-fadeIn 1s 2s ease-in-out forwards;
}

.active .ani-4-1 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 1.5s ease-in-out forwards, float 6s ease-in-out infinite;
}

.active .ani-4-2 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 1s ease-in-out forwards, float 3s ease-in-out infinite;
}

.active .ani-4-3 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 2s ease-in-out forwards, float 4s ease-in-out infinite;
}

.active .ani-5-1 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 1.5s ease-in-out forwards, float 6s ease-in-out infinite;
}

.active .ani-5-2 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 1s ease-in-out forwards, float 3s ease-in-out infinite;
}

.active .ani-5-3 {
    opacity: 0;
    transform: translatey(0px);
    animation: fadeIn 1s 2s ease-in-out forwards, float 4s ease-in-out infinite;
}

.active .c-fade-1 {
    opacity: 0;
    animation: fadeIn 1s 0.5s ease-in-out forwards;
}

.active .c-fade-2 {
    opacity: 0;
    animation: fadeIn 1s 1.5s ease-in-out forwards;
}

.active .c-fade-3 {
    opacity: 0;
    animation: fadeIn 1s 2s ease-in-out forwards;
}

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

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slide-fadeIn {
    0% {
        opacity: 0;
        transform: translatex(-50px);
    }

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

@keyframes intro1-fadeIn {
    0% {
        opacity: 0;
        transform: translatey(-20px);
    }

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

@keyframes intro1-1-move {
    0% {
        left: 0;
        top: 0;
    }

    100% {
        left: 0;
        top: 37px;
    }
}

@keyframes intro1-2-move {
    0% {
        left: 105px;
        top: 0;
    }

    100% {
        left: 0;
        top: -82px;
    }
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-20px);
    }

    100% {
        transform: translatey(0px);
    }
}


@keyframes fromdown {
    from {
        transform: translateY(0%);
    }

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

@keyframes toup {
    from {
        z-index: 20;
        transform: translateY(0%);
    }

    100% {
        z-index: 20;
        transform: translateY(-0%);
    }
}

@keyframes fromup {
    from {
        z-index: 20;
        transform: translateY(-0%);
    }

    100% {
        z-index: 20;
        transform: translateY(0%);
    }
}

@keyframes todown {
    from {
        transform: translateY(0%);
    }

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


@media only screen and (min-width: 768px) {
    .logo {
        width: 100px;
        height: 100px;
        left: 10vw;
        top: 0;
    }

    .brandname {
        position: fixed;
        z-index: 1000;
        width: 300px;
        left: calc(10vw + 80px);
        top: 20px;
    }

    @keyframes intro1-1-move {
        0% {
            left: 0;
            top: 0;
        }
    
        100% {
            left: 0;
            top: 13px;
        }
    }
}