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



#hero {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('assets/ffm-mobile.jpg') no-repeat center center / 100% 100%;
    position: relative;
    @media only screen and (max-width: 767px) and (orientation: landscape) {
        background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('assets/ffm.jpg') no-repeat center center / 100% 100%;
    }
    @media only screen and (min-width: 768px) and (orientation: landscape) {
        background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('assets/ffm.jpg') no-repeat center center / 100% 100%;
    }
}

.container {
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
}


.launch {
    position: absolute;
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('assets/xxxxxx.svg') no-repeat center / 100% 100%;
    width: calc(100vh / 7);
    height: calc(100vh / 7);
    top: calc(100vh / 3.5);
    right: calc(100vh / 10);

    @media only screen and (max-width: 767px) and (orientation: landscape) {
        width: calc(100vh / 2.5);
        height: calc(100vh / 2.5);
        top: calc(100vh / 5);
        right: calc(100vh / 4);
    }

    @media only screen and (min-width: 768px) and (orientation: landscape) {
        width: calc(100vh / 2.5);
        height: calc(100vh / 2.5);
        top: calc(100vh / 5);
        right: calc(100vh / 4);
    }
}
.container .opening_teaser {
    position: absolute;
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('assets/xx.svg') no-repeat center / 100% 100%;
    width: calc(100vh / 6);
    height: calc(100vh / 10);
    left: 35%;
    top: 0;

    @media only screen and (max-width: 767px) and (orientation: landscape) {
        width: calc(100vw / 8);
        height: calc(100vw / 14);
        left: 50%;
    }

    @media only screen and (min-width: 768px) and (orientation: landscape) {
        width: 25%;
        height: 15%;
        left: 43%;
    }
}

.container .welcome {
    position: absolute;
    top: 38%;
    width: calc(100vh / 7);
    height: 5%;
    left: 50%;
    transform:translate(-150%, -50%);
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('assets/xxxxx.svg') no-repeat center / 100% 100%;

    @media only screen and (max-width: 767px) and (orientation: landscape) {
        width: calc(100vw / 6);
        height: 10%;
        left: 45%;
        top: 30%;
    }

    @media only screen and (min-width: 768px) and (orientation: landscape) {
        width: 20%;
        top: 28%;
    }
}
.container .center_teaser {
    position: absolute;
    width: calc(100vh / 2);
    height: 30%;
    top: 53%;
    left: 52%;
    transform:translate(-50%, -50%);
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('assets/x.svg') no-repeat center / 100% 100%;

    @media only screen and (max-width: 767px) and (orientation: landscape) {
        width: 70%;
        height: 50%;
        left: 50%;
        top: 55%
    }

    @media only screen and (min-width: 768px) and (orientation: landscape) {
        width: 80%;
        height: 50%;
        top: 55%;
    }
}

.container .online_tutor {
    position: absolute;
    width: calc(100vh / 2.5);
    height: 15%;
    left: 35%;
    top: 70%;
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('assets/xxxx.svg') no-repeat center / 100% 100%;
    transform:translate(-50%, -50%);

    @media only screen and (max-width: 767px) and (orientation: landscape) {
        width: 30%;
        height: 25%;
        left: 20%;
        top: 65%
    }

    @media only screen and (min-width: 768px) and (orientation: landscape)  {
        width: 40%;
        height: 25%;
        left: 20%;
    }


}

.container .instagram_teaser {
    position: absolute;
    width: 40%;
    height: 10%;
    left: 30%;
    top: 88%;

    transform:translate(-50%, -50%);
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('assets/xxx.svg') no-repeat center / 100% 100%;
    cursor: pointer;

    @media only screen and (max-width: 767px) and (orientation: landscape) {
        width: 30%;
        height: 15%;
        left: 35%;
        top: 90%
    }

    @media only screen and (min-width: 768px) and (orientation: landscape) {
        width: 30%;
        height: 15%;
        left: 88%;
    }

}

.container .instagram_click {
    position: absolute;
    width: 10%;
    height: 10%;
    left: 40%;
    top: 90%;

    transform:translate(-50%, -50%);
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('assets/click.svg') no-repeat center / 100% 100%;
    cursor: pointer;

    @media only screen and (max-width: 767px) and (orientation: landscape) {
        width: 5%;
        height: 10%;
        left: 35%;
        top: 95%
    }
    @media only screen and (min-width: 768px) and (orientation: landscape) {
        width: 10%;
        height: 15%;
        top: 90%;
        left: 90%;
    }
}