body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-repeat: no-repeat;
    background: rgb(255, 255, 255);
    background: linear-gradient(127deg, rgba(255, 255, 255, 1) 0%, rgba(227, 234, 239, 1) 100%);
    /* background: linear-gradient(127deg, rgba(255, 255, 255, 1) 0%, rgb(255, 0, 0) 100%); */
    overscroll-behavior: none;
}

#fullpage {
    overflow-x: hidden;
}

#navigation-desktop {
    width: 100vw;
    position: fixed;
    top: 0;
    padding: 2vh 0;
    padding-right: 16vw;
    text-align: right;
    background: rgb(255, 255, 255);
    background: linear-gradient(141deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 22%, rgba(203, 226, 231, 1) 100%);
    border-bottom: 3vh solid #006081;
    box-sizing: border-box;
    z-index: 5;
}

#navigation-desktop ul {
    list-style: none;
    padding: 0px;
    margin: 0;
    margin-top: 0vh;
}

#navigation-desktop ul li {
    display: inline-block;
    padding: 1vw;
    margin-left: 3vw;
}

#navigation-desktop ul li.active a {
    color: #ff3a00;
}

li .lowDash {
    border-bottom: none;
    width: 1.2vw;
    display: inline-block;
}

li.active .lowDash {
    border-bottom: solid;
    border-color: #ff3a00;
    border-bottom-width: 1px;
}

a:hover {
    color: #ff3a00;
}

#background-gradient {
    /* background: rgba(203,226,231,1);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 3%, rgba(227,234,239,1) 100%);
position: relative; */
}

#scroll-down {
    position: absolute;
    text-align: center;
    bottom: 3vh;
}

.vertically-center-wrapper {
    display: inline-block;
    width: 61vw;
}

#welcome .fp-tableCell {
    display: block;
    text-align: center;
    vertical-align: top;
}

.sub-flexbox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.fullscreen-box #welcome {
    display: block;
}

#fixed-container-background {
    /* margin-top: -100px; */
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: fixed;
    background-image: url("../img/hive.svg");
    background-repeat: no-repeat;
    z-index: 0;
    background-position: bottom 0vh right -3vw;
    background-position-x: 54vw;
}

#fixed-container-background-bottom {
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-repeat: repeat-y;
    background-image: url("../img/rand-links.svg"), url("../img/rand-links.svg");
    background-size: 17vw, 17vw;
    opacity: 0.35;
    background-attachment: fixed;
    background-position: bottom 2vh right -1vw, bottom 2vh left -1vw;
    position: fixed;
    z-index: 0;
    display: none;
}

#logo-start {
    left: 7.5vw;
    position: fixed;
    width: 27vw;
    height: auto;
    z-index: 7;
    bottom: 60%;
    transition: transform 1.5s;
}

#logo-start.shrinkLogo {
    transform-origin: top left;
    left: 10vw;
    top: 3.3vh;
    left: 12vw;
    transform: scale(0.5);
}

#slogan {
    background-color: #006081;
    color: white;
    text-align: left;
    padding: 0.5vw;
    padding-right: 0px;
    padding-left: 7.5vw;
    font-size: 1.6vw;
    font-family: 'Open Sans', sans-serif;
    margin-top: 41vh;
    width: 27vw;
}

#headline {
    margin-left: 7vw;
    padding-top: 0vh;
    padding-bottom: 2vh;
    width: 28vw;
    margin-top: 0;
}

#headline,
#navigation-desktop a {
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    color: rgba(110, 110, 110, 100);
    text-align: left;
    font-size: 1.3vw;
}

#wrapper-title {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 34.5vw;
}

#bienenwaben-icon {
    position: absolute;
    width: 20vw;
    height: auto;
    margin-top: 23vh;
    transform-origin: center;
    right: -27vw;
}

#portrait {
    position: absolute;
    height: 94vh;
    width: auto;
    margin-bottom: 0vh;
    bottom: 0vh;
    right: 3vh;
}

.icon {
    margin-left: 8vw;
}

#company-icon {
    width: 20vw;
    height: auto;
}

.title {
    text-align: left;
}

#skills-icon {
    width: 25vw;
}

#contact-icon {
    width: 31vw;
    top: 0px;
    margin-left: 0vw;
}

#welcome {
    width: 100vw;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    color: rgba(49, 49, 49, 100);
    font-size: 2.5vw;
}

.text {
    width: 30vw;
    font-size: 1.1vw;
    line-height: 170%;
    font-family: 'Open Sans', sans-serif;
    color: rgba(110, 110, 110, 100);
    text-align: left;
    margin-bottom: 0;
}

.social-media-button {
    width: 3vw;
    display: block;
    margin-right: 1vw;
}

#mail-wrapper a {
    text-decoration: none;
    color: white;
    background-color: #ec6936;
    color: white;
    border-radius: 12px;
    padding: 1vw 1.5vw;
    margin-top: 0vw;
    display: inline-block;
}

#social-media-button-wrapper {
    display: flex;
    flex-direction: row;
    margin-top: 0vh;
}

#phone-number {
    display: block;
    width: 60vw;
    font-size: 1.1vw;
    line-height: 200%;
    font-family: 'Open Sans', sans-serif;
    color: rgba(110, 110, 110, 100);
    text-align: left;
}

#social-media-text {
    display: block;
	width: 60vw;
	font-size: 1.1vw;
    line-height: 200%;
    font-family: 'Open Sans', sans-serif;
    color: rgba(110, 110, 110, 100);
	text-align: left;
    margin-bottom: 2vh;
}

#phone-call-mobile {
    display: none;
}

#contact-text {
    display: flex;
    flex-direction: column;
    width: 16vw;
    z-index: 20;
}

#social-media-wrapper {
    display: flex;
    flex-direction: column;
}

#mobile,
#mobile-xtraheight,
#desktop,
#desktop-xtrawidth,
#tablet,
#square {
    display: none;
}

.fp-tableCell {
    text-align: center;
}


/* DESKTOP */


/* Landscape */

@media (min-aspect-ratio: 7/5) {
    body {
        /* background: yellow; */
    }
    #desktop {
        position: fixed;
        top: 0;
        bottom: 0;
        /* border: 1px solid red; */
        display: block;
        height: 20px;
        width: 20px;
    }
    h1 {
        /* font-size: 4.5vw; */
    }
}


/* DESKTOP */


/* Landscape XTRALength */

@media (min-aspect-ratio: 10/5) {
    body {
        /* background: orange; */
    }
    #desktop-xtrawidth {
        display: block;
    }
}


/* 
MOBILE, PORTRAIT
*/

@media (max-aspect-ratio: 5/8) {
    #mobile {
        display: block;
    }
    /* #square {
        height: 200px;
        width: 200px;
        background-color: black;
        position: fixed;
        top: 0px;
        right: 0px;
    } */
    body {
        /* background: pink; */
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    html {
        height: -webkit-fill-available;
    }
    h1 {
        font-size: 6.5vw;
    }
    #welcome .fp-tableCell {
        vertical-align: top;
    }
    .vertically-center-wrapper {
        width: 72vw;
        display: inline-block;
    }
    #fixed-container-background {
        background-image: none;
    }
    .fp-tableCell {
        text-align: center;
    }
    #logo-start {
        bottom: 86%;
        width: 67vw;
    }
    #logo-start.shrinkLogo {
        /* transform-origin: top left; */
        top: 4vh;
        left: 13vw;
    }
    #portrait {
        height: 79vh;
        right: -11vh;
    }
    #bienenwaben-icon {
        width: 44vw;
        margin-top: 26vh;
        right: -17vw;
    }
    #headline {
        margin-left: 0;
        position: absolute;
        bottom: 15vh;
        text-align: left;
        color: white;
        background-color: #006081;
        Padding: 2vh 2vw 2vh 6vw;
        width: 67vw;
        font-size: 4vw;
        opacity: 0.8;
        z-index: 20;
    }
    #scroll-down {
        bottom: 2vh;
        filter: brightness(13) saturate(0);
    }
    #scroll-down img {
        width: 5vh;
    }
    #slogan {
        padding: 1.5vw;
        padding-left: 8vw;
        position: absolute;
        width: 65vw;
        font-size: 4vw;
        margin-top: 15vh;
    }
    #wrapper-title {
        height: 100%;
    }
    h1 {
        margin-bottom: 0;
    }
    #fixed-container-background-bottom {
        /* background-color: lightskyblue; */
        background-color: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 3%, rgba(227, 234, 239, 1) 100%);
        /* background: linear-gradient(127deg, rgba(255, 255, 255, 1) 0%, rgb(193, 226, 7) 100%); */
        background-image: none;
    }
    #navigation-mobile {
        position: fixed;
        top: -7px;
        right: 116px;
        z-index: 16;
    }
    #menuToggle {
        display: block;
        position: relative;
        top: 5vh;
        left: 22vw;
        z-index: 13;
        -webkit-user-select: none;
        user-select: none;
    }
    #menuToggle a {
        text-decoration: none;
        color: #232323;
        transition: color 0.3s ease;
    }
    #menuToggle a:hover {
        color: #ff3a00;
    }
    #menuToggle input {
        display: block;
        width: 11vw;
        height: 7vh;
        position: absolute;
        top: -2vh;
        left: -3vw;
        cursor: pointer;
        opacity: 0;
        z-index: 14;
        /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }
    #menuToggle span {
        display: block;
        width: 30px;
        height: 3px;
        margin-bottom: 6px;
        position: relative;
        background: #ff4700;
        border-radius: 3px;
        z-index: 13;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
    }
    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }
    #menuToggle span:nth-last-child(2) {
        transform-origin: -6% 18%;
    }
    #menuToggle input:checked~span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #ffffff;
    }
    #menuToggle input:checked~span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }
    #menuToggle input:checked~span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }
    #menu {
        position: absolute;
        width: 246px;
        margin: -124px 0 0 -26vw;
        padding: 24px;
        padding-top: 119px;
        background: #006081;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */
        transform-origin: 0% 0%;
        transform: translate(+100%, 0);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-bottom-left-radius: 20px;
    }
    #menu li {
        padding: 10px 0;
        font-size: 22px;
    }
    #menuToggle li a {
        font-size: 4.6vw;
        line-height: 143%;
        font-family: 'Open Sans', sans-serif;
        color: white;
    }
    #menuToggle input:checked~ul {
        transform: none;
    }
    .sub-flexbox {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .text {
        width: 73vw;
        font-size: 3.3vw;
    }
    .icon {
        margin-left: 0vw;
        margin-top: 4vh;
    }
    #company-icon {
        width: 59vw;
    }
    #skills-icon {
        width: 62vw;
    }
    #sub-flexbox-contact {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #contact-text {
        width: 70vw;
        display: flex;
        flex-direction: row;
        margin-bottom: 4vh;
        font-size: 3.3vw;
        align-items: flex-end;
    }
    #left-row {
        display: flex;
        flex-direction: column;
        width: 44vw;
    }
    #contact-icon {
        width: 63vw;
        margin-right: 0;
        margin-left: 0;
        margin-top: 7vh;
    }
    #phone-call-mobile {
        display: block;
        width: 60vw;
        font-size: 3.3vw;
        line-height: 200%;
        font-family: 'Open Sans', sans-serif;
        color: #ff3a00;
        text-align: left;
    }
    #phone-number {
        display: none;
    }
    #mail-wrapper a {
        border-radius: 7px;
        padding: 2.5vw 2.5vw;
        margin-top: 3vw;
    }
    .social-media-button {
        width: 10.2vw;
        margin-right: 4vw;
    }
    #social-media-text {
        font-size: 3.4vw;
        margin-bottom: 2vh;
        width: 22vw;
    }
}


/* 
MOBILE, PORTRAIT XTRAhIgH
*/

@media (max-aspect-ratio: 6 / 11) {
    body {
        /* background: green; */
    }
    #mobile-xtraheight {
        display: block;
    }
    #logo-start {
        width: 65vw;
        bottom: 88%;
    }
    .text {
        width: 74vw;
        font-size: 3.5vw;
        line-height: 180%;
    }
    #social-media-text {
        font-size: 3.6vw;
    }
    #company-icon {
        margin-top: 9vh;
        margin-bottom: 0vh;
    }
    #slogan {
        width: 63vw;
        margin-top: 13vh;
    }
    #social-media-wrapper {
        margin-top: 5.7vh;
    }
    #contact-text {
        align-items: flex-end;
    }
}


/*
TABLET
*/

@media (min-aspect-ratio: 5/8) and (max-aspect-ratio: 1/1) {
    body {
        /* background: blue; */
    }
    #tablet {
        display: block;
    }
    #portrait {
        height: 87vh;
        right: 16vh;
    }
    #fixed-container-background {
        width: 131vw;
        background-position: bottom -61vh right -7vw;
    }
    #wrapper-title {
        height: 100%;
    }
    #slogan {
        padding-left: 8vw;
        padding-top: 1vh;
        padding-bottom: 1vh;
        width: 48vw;
        font-size: 3vw;
        margin-top: 19vh;
    }
    #headline {
        position: absolute;
        margin-left: 0;
        width: 51vw;
        padding-top: 2vh;
        font-size: 2.8vw;
        color: white;
        background-color: #006081;
        padding-left: 8vw;
        opacity: 0.8;
        bottom: 13vh;
    }
    #bienenwaben-icon {
        width: 29vw;
        margin-top: 30vh;
        right: -16vw;
    }
    #logo-start {
        bottom: 82%;
        width: 48vw;
    }
    #logo-start.shrinkLogo {
        transform-origin: top left;
        left: 8.5vw;
        margin-top: 0vh;
        top: 2.5vh;
    }
    #navigation-desktop {
        position: fixed;
        top: 0px;
        padding: 2vh 0px;
        padding-right: 8vw;
    }
    /* h1 {
font-size: 4vw;
} */
    li .lowDash {
        border-bottom: none;
        width: 1.2vw;
        display: inline-block;
    }
    #navigation-desktop a {
        font-size: 2.4vw;
    }
    #welcome .fp-tableCell {
        vertical-align: top;
    }
    .vertically-center-wrapper {
        width: 60vw;
        display: inline-block;
    }
    #scroll-down {
        position: absolute;
        bottom: 2vh;
        width: 0%;
        text-align: center;
        font-size: 3vw;
    }
    .sub-flexbox {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .icon {
        margin-left: 0;
        margin-top: 5vh;
    }
    .text {
        margin-top: 0px;
        width: 60vw;
        font-size: 2vw;
    }
    #company-icon {
        width: 39vw;
        height: auto;
    }
    #skills-icon {
        width: 40vw;
    }
    #contact-icon {
        margin-right: 0vh;
        margin-bottom: -9vh;
        width: 53vw;
    }
    #left-row {
        display: flex;
        flex-direction: column;
        border-right: 1px solid #cdd2d6;
        width: 34vw;
        margin-right: 10vw;
    }
    #contact-text {
        display: flex;
        flex-direction: row;
        width: 60vw;
        align-items: flex-end;
    }
    .social-media-button {
        margin-top: 0vh;
        width: 7vw;
        margin-right: 2vw;
    }
    #social-media-text {
        font-size: 2.8vw;
    }
    #phone-number {
        margin-top: 0;
        font-size: 2.2vw;
    }
    #mail-wrapper a {
        padding: 1.7vw 2.2vw;
    }
    /* #tablet {
display: block;
height: 200px;
width: 200px;
background-color: green;
position: fixed;
top: 0px;
right: 0px;
} */
}


/*  SQUARE */

@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 7/5) {
    body {
        /* background: lightgreen; */
    }
    #square {
        display: block;
    }
    /* #square {
        height: 200px;
        width: 200px;
        background-color: red;
        position: fixed;
        top: 0px;
        left: 0px;
    } */
    #logo-start {
        width: 38vw;
        bottom: 62%;
    }
    #slogan {
        padding-left: 8vw;
        width: 30vw;
        padding-top: 1vw;
        padding-bottom: 1vw;
        margin-top: 39vh;
        font-size: 2.3vw;
        width: 38vw;
    }
    #bienenwaben-icon {
        margin-top: 63vh;
        right: -4vw;
        width: 23vw;
    }
    #headline {
        font-size: 1.8vw;
        width: 38vw;
    }
    .vertically-center-wrapper {
        width: 40vw;
        display: inline-block;
    }
    .sub-flexbox {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #left-row {
        display: flex;
        flex-direction: column;
        border-right: 1px solid #cdd2d6;
        width: 20vw;
        margin-right: 2vw;
    }
    #contact-text {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        width: 40vw;
        margin-bottom: 5vh;
        justify-content: space-between;
    }
    #contact-icon {
        margin-bottom: -9vh;
        width: 40vw;
    }
    .icon {
        margin-top: 5vh;
        margin-left: 0;
    }
    .text {
        width: 40vw;
        font-size: 1.3vw;
    }
    #company-icon {
        width: 30vw;
    }
    #skills-icon {
        width: 34vw;
    }
}