body, html {
    margin: 0;
    padding: 0;
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    /*font-family: 'neue', Fallback, sans-serif;*/
    /*font-family: Arial, sans-serif;*/
    /*letter-spacing: 1px;*/
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
    max-width: 100% ;
    display: flex;

}


/*@font-face {*/
/*    font-family: 'neue';*/
/*    src: url('assets/fonts/NeueHaasDisplay-Mediu.woff2') format('woff2'),*/
/*    url('assets/fonts/NeueHaasDisplay-Mediu.woff') format('woff');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

#container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.screen {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
}

.transition-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: opacity 0.6s ease;
    opacity: 0;
}

.screen.active .transition-wrapper {
    opacity: 1;
}

.content {
    width: 100%;
    flex-grow: 1;
    z-index: 0;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.logo {
    margin-left: -2%;
    min-width: 400px;
    max-width: 400px;
    width: 100%;
    position: absolute;
    top: 15%;
}


.description, .email, .welcome {
    margin: 0.5em 0;
    font-size: xx-large;
    font-weight: bold;
}

.description,.welcome {
    margin-top: 10%;
}

.description {
    line-height: 1.6;
    /*font-weight: 600;*/
}

.welcome {
    margin-left: -1%;
    font-size: 4em;
    font-weight: bold;
}

.highlight, .email {
    font-weight: bold;
    color: rgb(96, 149, 64);
}

.email {
    font-size: 2.5em;
}

#page-indicators {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.page-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: black;
    margin: 0 5px;
    border-radius: 50%;
    cursor: pointer;
}

.page-dot.active {
    background-color: rgb(96, 149, 64);
}


/*@media only screen and (max-width: 768px) {*/
/*    .company-name {*/
/*        font-size: 1em;*/
/*    }*/
/*    .welcome, .slogan, .description{*/
/*        font-size: 1.2em;*/
/*        margin-top: 30%;*/
/*    }*/
/*    .logo {*/
/*        max-width: 120px;*/
/*    }*/
/*}*/

/*//small hack for smaller screen*/
@media only screen and (min-width: 481px) and (max-width: 661px) {
    /* Styles for screens between 481px and 768px */
    .company-name {
        font-size: 1em;
    }

    .welcome, .slogan, .description{
        font-size: 1.4em;
        margin-top: 15%;
    }
    .logo {
        max-width: 120px;
    }

    .welcome {
        font-size: 2.3em;
    }

    #screen5 .description {
        margin-top: 20%;
    }

    .email {
        font-size: 2em;
    }

}



@media only screen and (min-width: 662px) and (max-width: 768px) {
    /* Styles for screens between 481px and 768px */

    .company-name {
        font-size: 1em;
    }
    .welcome, .slogan, .description{
        font-size: 1.4em;
        margin-top: 15%;
    }
    .logo {
        max-width: 120px;
    }

    .welcome {
        font-size: 2em;
    }

    #screen5 .description {
        margin-top: 20%;
    }
    .email {}


}

@media only screen and (min-width: 769px) and (max-width: 992px) {
    /* Styles for screens between 769px and 992px */

    .company-name {
        font-size: 1em;
    }
    .welcome, .slogan, .description{
        font-size: 1.7em;
        margin-top: 15%;
    }
    .logo {
        max-width: 120px;
    }

    .welcome {
        margin-top: 15%;
        font-size: 2em;
    }

    #screen5 .description {
        margin-top: 20%;
    }
    .email {}

}

@media only screen and (min-width: 993px) and (max-width: 1200px) {
    /* Styles for screens between 993px and 1200px */

    .company-name {
        font-size: 1em;
    }
    .welcome, .slogan, .description{
        font-size: 2em;
        margin-top: 15%;
    }
    .logo {
        max-width: 120px;
    }

    .welcome {
        margin-top: 10%;
        font-size: 2.5em;
    }


    .email {}



}

@media only screen and (max-width: 320px) {
    /* Styles for screens with a maximum width of 320px */



}

@media only screen and (min-width: 1201px) {
    .company-name {
        font-size: 1em;
    }
    .welcome, .slogan, .description{
        font-size: 2.5em;
        margin-top: 15%;
    }
    .logo {
        max-width: 120px;
    }

    /*#screen5 .description {*/
    /*    margin-top: 45%;*/
    /*}*/
    .welcome {
        margin-top: 7%;
        font-size: 3em;
    }

    /*#screen5 .description {*/
    /*    margin-top: 0%;*/
    /*    background-color: cornflowerblue;*/
    /*}*/

    /*#screen5 .description {*/
    /*    margin-top: 23%;*/
    /*}*/
    .email {}

}

@media screen and (max-device-width: 600px) {
    /*.highlight, .email {*/
    /*    font-weight: bold;*/
    /*    color: rgb(96, 49, 64);!important;*/
    /*}*/

    .welcome {
        font-size: 3.6em;

    }
    .slogan, .description{
        font-size: 2.1em;

        margin-top: 30%;
    }

    .email {
        font-size: 3.1em;
    }

    .page-dot {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: black;
        margin: 0 20px;
        border-radius: 50%;
        cursor: pointer;
    }

    .page-dot.active {
        background-color: rgb(96, 149, 64);
    }

    .logo {
        margin-left: -2%;
        min-width: 400px;
        max-width: 700px;
        width: 100%;
        position: absolute;
        top: 15%;
    }


}


@media only screen and (max-width: 480px) {
    /* Styles for screens with a maximum width of 480px */

    .company-name {
        font-size: 1em;
    }
    .welcome {
        margin-top: 70%;
        margin-left: -5%;
    }


    .slogan, .description{
        font-size: 0.8em !important;
        margin-top: 70%;
        margin-left: -5%;
    }




    .email {
        margin: 0 0;
        font-size: x-large;
        font-weight: bold;
    }

    .welcome {
        font-size: 1.5em;
    }

    .description {
        font-size: 0.8em;
    }
    .logo {
        max-width: 120px;
    }


    .logo {
        margin-left: -7%;
        min-width: 200px;
        max-width: 300px;
        width: 100%;
        position: absolute;
        top: 25%;
    }

    /*body {*/
    /*    background-color: cornflowerblue;*/
    /*}*/



    @font-face{font-family:neue haas grotesk display pro;font-style:normal;font-weight:400;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayLight.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:italic;font-weight:400;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayLightItalic.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:normal;font-weight:100;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayXXThin.ttf') format('woff')}@font-face{font-family:neue haas grotesk display pro;font-style:italic;font-weight:100;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayXXThinItalic.ttf') format('woff')}@font-face{font-family:neue haas grotesk display pro;font-style:normal;font-weight:200;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayXThin.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:italic;font-weight:200;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayXThinItalic.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:normal;font-weight:300;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayThin.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:italic;font-weight:300;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayThinItalic.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:normal;font-weight:500;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayRoman.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:italic;font-weight:500;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayRomanItalic.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:normal;font-weight:600;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayMediu.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:italic;font-weight:600;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayMediumItalic.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:normal;font-weight:700;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayBold.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:italic;font-weight:700;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayBoldItalic.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:normal;font-weight:900;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayBlack.ttf') format('ttf')}@font-face{font-family:neue haas grotesk display pro;font-style:italic;font-weight:900;src:local('Neue Haas Grotesk Display Pro'),url('assets/fonts/NeueHaasDisplayBlackItalic.ttf') format('ttf')}

}