/*FONT*/
@font-face {
    font-family: 'GT Walsheim Bold';
    src: url('../font/gt-walsheim-bold-webfont.ttf') format('truetype');
    font-family: 'GT Walsheim Light';
    src: url('../font/gt-walsheim-regular-webfont.ttf') format('truetype');
}

/***********************************/
/***                             ***/
/***          Carousel           ***/
/***                             ***/
/***********************************/
body {
    background: #1A2247;
}

.basics__landing {
    position: absolute;
    height: 75vh;
    top: 100px;
    width: 80%;
    left: 10%;
    background-color: #e1f0ff;
    z-index: 99;
}

.basics__landing-content {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:    "landing-text1"
                            "landing-text2"
                            "landing-button";
    width: 80%;
    height: 80%;
    margin: 0 auto;
    margin-top: 6%;
}

.basics__landing-content p {
    line-height: 30pt;
    font-size: 20pt;
}

.basics__landing-content a {
    line-height: 30pt;
    font-size: 20pt;
    width: 200px;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;

    display: block;
    padding: 10px;
    background-color: #5e7aff;
    font-weight: 700;
    color: #E1F0FF;
}

.basics__landing-content a:hover {
    background-color: #ACC0FF;
    cursor: pointer;
}

#basics__landing-text1 {
    grid-area: landing-text1;
}

#basics__landing-text2 {
    grid-area: landing-text2;
}

#basics__landing-text3 p{
    font-size: 16pt;
}

#basics__landing-button {
    grid-area: landing-button;
    align-self: center;
}

.basics__landing-info {
    right: 11%;
    top: 120px;
    position: absolute;
    z-index: 98;
    background-color: rgba(0,0,0,0);
    color: #ACC0FF;
    border: none;

}

.basics__landing-info:focus {
    outline: none;
}

.basics__landing-info:hover {
    color: #5e7aff;
    cursor: pointer;
}

.carousel {
    position: relative;
    height: 75vh;
    width: 80%;
    top: 100px;
    margin: 0 auto;
    background: #E1F0FF;
    transition: ease-in-out 0.2s;
}


.carousel__track-container {
    background: #e1f0ff;
    height: 55vh;
    position: relative;
    overflow: hidden;
}

.carousel__track {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    height: 100%;
    transition: transform 250ms ease-in;
}

.carousel__slide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.carousel__nav-content {
    display: grid;
    height: 10vh;
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-areas: "button-left dots button-right";
    background: #E1F0FF;
    transition: ease-in-out 0.2s;
}

.carousel__button {
    background: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
}

.carousel__button--left {
    grid-area: button-left;
}

.carousel__button--right {
    grid-area: button-right;
}

.carousel__button img {
    width: 40px;
}

.carousel__nav {
    width: 100%;
    height: 14px;
    grid-area: dots;
    display: grid;
    margin: 2.5vh 0;
    grid-template-columns: repeat(25, 14px);
    grid-gap: 1.5%;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 30px;
}

.carousel__indicator {
    width: 14px;
    height: 14px;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    border-style: none;
    color: #5e7aff;
    background-color: #ACC0FF;
    border-radius: 100%;
    overflow: hidden;
    text-align: center;
    padding:0;
}

.carousel__indicator-checked {
    background-color: #48e5c2;
}

.carousel__indicator-missed {
    background-color: #FE938C;
}

.carousel__indicator-pagenumber {
    display: none;
}

.carousel__indicator.current-slide {
    background: #0000FF;
}

.carousel__breaker {
    background-color: rgba(0,0,0,0);
    border-radius: 0;
}

.carousel__breaker.current-slide {
    background-color: rgba(0,0,0,0);
    border-radius: 0;
    color: #0000FF;
}

.is-hidden {
    display: none;
}


/***********************************/
/***                             ***/
/***           BASICS            ***/
/***                             ***/
/***********************************/

.carousel__basics-nav {
    position: relative;
    display: grid;
    grid-template-rows: 8vh 2vh;
    grid-template-areas:    "basics-letter"
    "basics-terms";
    margin: 0 auto;
    width: 80%;
    height: 10vh;
}


.carousel__basics {
    box-sizing: border-box;
    display: grid;
    grid-area: basics-letters;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    height: 8vh;
}

.carousel__basics-letter {
    height: 5vh;
    margin: 0 auto;
    align-self: center;
}

.carousel__basics-blue {
    position: absolute;
}


.carousel__basics-white {
    position: absolute;
}
.basics__term {
    grid-area: basics-terms;
    display: grid;
    align-self: start;
    grid-template-columns: repeat(6, 1fr);
    z-index: 98;
}

.basics__term-text {
    margin: 0 auto;
    font-size: 13pt;
    color: #5e7aff;
    line-height: normal;
}

.hidden-letter {
    opacity: 0;
}

.hidden-text{
    opacity: 0;
}





/***********************************/
/***                             ***/
/***       Slide Content         ***/
/***                             ***/
/***********************************/


.slide__content {
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 100%;
}

.slide__question {
    height: 30%;
    width: 100%;
    align-self: center;
    font-family: GT Walsheim Bold, Poppins, sans serif;
    font-weight: 800;
}

.slide__question-text {
    position: relative;
    width: 67%;
    margin: 0 auto;
    text-align: center;
    line-height: 30pt;
    font-size: 28pt;
}

.slide__choices {
    width: 80%;
    position: relative;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 1fr 3fr;
    align-content: end;

}

.slide__choices-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-self:  end;
}

.slide__choices-radio {
    margin: 0 auto;
    height: 50px;
    width: 50px;
    border: 8px solid white;
    border-radius: 50px;
    cursor: pointer;
    background-color: white;
    color: #666;
    outline: none;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.slide__choices-radio:hover {
    background-color: #5e7aff;
}

.slide__choices-radio:checked {
    background-color: #1A2247;
}

.slide__choices-subtext {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    top: 0;
    align-self:  start;
    text-align: center;
    word-wrap: break-word;
}


/***********************************/
/***                             ***/
/***     Transition Slides       ***/
/***                             ***/
/***********************************/

.transition-slide {
    display: grid;
    height: 90%;
    grid-template-rows: 50% 50%;
    padding: 40px;
}

.transition-slide__reinhard {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: 1fr;
    grid-template-areas: "reinhard-image reinhard-message";
    align-items: center;
    justify-items: center;
}

.transition-slide__martin {
    display: grid;
    grid-template-columns: 75% 25%;
    grid-template-rows: 1fr;
    grid-template-areas: "martin-message martin-image";
    align-items: center;
    justify-items: center;
}

.reinhard-message {
    grid-area: reinhard-message;
    width: 80%;
    text-align: left;
    float: left;
}

.reinhard-image {
    grid-area: reinhard-image;
}

.martin-message {
    grid-area: martin-message;
    width: 80%;
    text-align: right;
    float: right;
}

.margin-image {
    grid-area: martin-image;
}

.transition-slide p {
    font-size: 1.6em;
    line-height: 1.4em;
}

.speech-bubble-right {
    position: relative;
    background-color: #ffffff;
    height: 100px;
    padding: 20px;
    border-radius: 20px;
    /*border: solid 4px #5e7aff;*/
    /*box-shadow:	0 0.125rem 0.5rem rgba(0, 0, 0, .1), 0 0.0625rem 0.125rem rgba(0, 0, 0, .1);*/
}


.speech-bubble-right:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-left-color: #ffffff;
    border-right: 0;
    margin-top: -25px;
    margin-right: -15px;
    /*filter: drop-shadow(0.25rem 0 0 rgba(94, 122, 255, 1));*/
}

.speech-bubble-left {
    position: relative;
    background-color: #ffffff;
    height: 100px;
    padding: 20px;
    border-radius: 20px;
    /*border: solid 4px #5e7aff;*/
    /*box-shadow:	0 0.125rem 0.5rem rgba(0, 0, 0, .1), 0 0.0625rem 0.125rem rgba(0, 0, 0, .1);*/
}

.speech-bubble-left:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-right-color: #ffffff;
    border-left: 0;
    margin-top: -25px;
    margin-left: -15px;
    /*filter: drop-shadow(-0.25rem 0 0 rgba(94, 122, 255, 1));*/
}

.transition-slide__image img {
    position: relative;
    width: 22vh;
    height: 22vh;
    /*width: 200px;
    height: 200px;*/
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
}


/***********************************/
/***                             ***/
/***       Contact Content       ***/
/***                             ***/
/***********************************/


.contact__content {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 27.5vh 27.5vh;
    grid-template-areas:    "message score mail"
                            "message score mail";
    height: 55vh;
    width: 100%;
}

.contact__message {
    grid-area: message;
    position: relative;
    display: grid;
    grid-template-rows: 1fr 2.5fr 1.5fr ;
    text-align: center;
    background-color: #E1F0FF;
    justify-self: center;
}

.contact__message h2 {
    align-self: center;
    font-size: 2.2em;
    line-height: 0.9em;
    text-align: left;
    width: inherit;
    margin: 0 auto;
}

.contact__message h3{
    align-self: center;
    font-size: 1.4em;
    line-height: 1.2em;
    text-align: left;
    width: 80%;
    margin: 0 auto;
}

#contact__message-wrapper{
    display: grid;
    grid-template-rows: 1fr 1fr;
    margin: 0 auto;
    width: 80%;
    align-self: center;
}

.contact__message p {
    font-size: 1.4em;
    line-height: 1.4em;
    align-self: center;
    text-align: left;
}

.contact__score {
    grid-area: score;
    background-color: #ffffff;
    display: grid;
    grid-template-rows: 1fr 4fr;
    font-family:  GT Walsheim Bold, Poppins, sans serif;
    font-weight: 800;
}

.contact__score h2 {
    align-self: center;
    font-size: 2.2em;
    line-height: 0.9em;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

#your-score-result {
    align-self: center;
}

#error-message {
    align-self: center;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-size: 1.6em;
    line-height: 1.2em;
}

#final-score{
    align-self: center;
    margin: 0 auto;
    min-width: 30%;
    max-width: 66%;
    text-align: center;
    font-size: 6em;
    line-height:1em;
    padding: 0;
}

#progress-bar {
    align-self: center;
    margin: 0 auto;
    min-width: 30%;
    max-width: 66%;
    height: 10px;
    background: #f2f2f2;
}

#progress-value{
    float: left;
    margin: 0 auto;
    width: 80%;
    height: 10px;
    background: #48e5c2;
}


.contact__mail {
    grid-area: mail;
    background-color: #5e7aff;
    text-align: left;

    display: grid;
    grid-template-rows: 1fr 4fr;
}

.contact__mail h2 {
    align-self: center;
    font-size: 2.2em;
    line-height: 0.9em;
    text-align: left;
    width: 80%;
    margin: 0 auto;
    color: #E1F0FF;
}

#contact__mail-wrapper{
    align-self: center;
}

#contact__base-info {
    font-size: 1.3em;
    line-height: 1.6em;
    align-self: center;
    width: 80%;
    margin: 0 auto;
    text-align: left;
    list-style: none;
    color: #ffffff;
    padding:0;
}

#contact__mail-button a {
    display: inline-block;
    width: 40%;
    margin-top: 10%;
    margin-left: 10%;
    line-height: 18pt;
    font-size: 16pt;
    text-align: center;
    text-decoration: none;
    padding: 12px 0;
    background-color: #0000A0;
    color: #E1F0FF;
    font-weight: 600;
}

#contact__mail-button a:hover {
    cursor: pointer;
    background-color: #1A2247;
}


/***********************************/
/***                             ***/
/***           MOBILE            ***/
/***                             ***/
/***********************************/


@media only screen and (max-width: 1160px) {

    .contact__message {
        grid-template-rows: 1fr 4fr;
    }

    .contact__message h3 {
        display: none;
    }

    .contact__message {
        grid-template-rows: 1fr 4fr;
    }

    .contact__message p {
        font-size: 1.2em;
        line-height: 1.2em
    }

    .contact__message h2 {
        font-size: 1.8em;
        width: inherit;
    }

    .contact__score h2 {
        font-size: 1.8em;
    }

    .contact__mail h2 {
        font-size: 1.8em;
    }
}

/*** ultra slim desktop browser ***/
@media only screen and (min-width: 1450px) and (max-height: 850px) {
    .basics__landing-content p{
        line-height: 18pt;
        font-size: 14pt;
    }

    #basics__landing-text3 p {
        font-size: 11pt;
    }
}

/*** iPad Pro 11 ***/
@media only screen and (min-width: 834px) and (max-width: 1450px) and (min-height: 600px){ /*** former max-width: 1194px ***/

    /*** Landing ***/

    .basics__landing {
        width: 100vw;
        height: 90vh; /*Fallback*/
        top: 8vh;
        left: 0;

        height: calc(var(--vh, 1vh)* 90); /*Height with custom CSS Property scaling content to the actual height.*/
    }

    .basics__landing-content {
        margin-top: 10vh;
    }

    .basics__landing-content p {
        line-height: 22pt;
        font-size: 14pt;
    }

    #basics__landing-text3 p{
        font-size: 10pt;
        line-height: 12pt;
    }

    .basics__landing-content a {
        font-size: 16pt;
        padding: 5px;
        width: 150px;
    }

    #basics__landing-button {
        align-self: center;
    }

    #basics__landing-info {
        top: unset;
        width: 20%;
        bottom: 15px;
        right: 50%;
        left: 50%;
        padding: 0;
        margin-left: -10%;
        margin-right: 10%;
        text-align: center;
    }

    #basics__landing-info {
        bottom: 5%;
    }

    #basics__landing-info img {
        overflow: visible;
    }

    /*** carousel ***/

    .carousel {
        height: 100vh;
        width: 100vw;
        top: 0;
        overflow: hidden;
        background: #E1F0FF;
        grid-template-rows: 25vh 60vh 10vh;
        grid-template-areas: "basics-nav" "track-container" "nav-content";

        height: calc(var(--vh, 1vh) * 100); /*Height with custom CSS Property scaling content to the actual height.*/
        grid-template-rows: calc(var(--vh, 1vh) * 30) calc(var(--vh, 1vh) * 60) calc(var(--vh, 1vh) * 10);
    }

    .carousel__track-container {
        grid-area: track-container;
        height: 65vh;
        height: calc(var(--vh, 1vh)* 65); /*Height with custom CSS Property scaling content to the actual height.*/
    }

    .carousel__indicator-pagenumber {
        opacity: 0; /* Hiding the page number as per customer wish*/
        position: relative;
        margin: 0 auto;
        align-self: center;
        display: inline-block;
        grid-area: pagenumber;
    }

    .carousel__nav-content {
        grid-area: nav-content;
        width: 90%;
        height: 15vh;
        margin: 0 auto;
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 5vh 10vh;
        grid-template-areas: "dots dots dots"
        "button-left pagenumber button-right";

        height: calc(var(--vh, 1vh)* 15); /*Height with custom CSS Property scaling content to the actual height.*/
        grid-template-rows: calc(var(--vh, 1vh)* 5) calc(var(--vh, 1vh)* 10);
    }

    .carousel__nav {
        grid-area: dots;
        width: 100%;
        margin: 0;
        padding: 0;
        align-self: end;
        grid-template-columns: repeat(25, 3%);
        grid-template-rows: 1fr;
        grid-gap: 1%;
    }

    .carousel__indicator {
        width: 15px;
        height: 15px;
        overflow: revert;
    }


    .fa, .far, .fas {
        font-size: 1em;
    }

    .carousel__indicator-pagenumber {
        font-size: 3vh;
        height: 2vh;
        margin: 0 auto;
        bottom: 1.6em;
        color: #5e7aff;
    }

    .carousel__button {
        height: 100%;
        padding-top: 20px;
    }

    .carousel__button img{
        height: 100%;
    }


    /***           BASICS            ***/
    .carousel__basics-nav {
        margin-top: 10vh;
        grid-area: basic-nav;
        position: relative;
        width: 90vw;
        height: 15vh;
        padding-top: 0;
        grid-template-rows: 10vh 5vh;
        height: calc(var(--vh, 1vh)* 15); /*Height with custom CSS Property scaling content to the actual height.*/

    }

    .carousel__basics {
        margin: 0 auto;
        z-index: 1; /*fix to put elements above slide-content*/
        height: 8vh;
        height: calc(var(--vh, 1vh)* 8); /*Height with custom CSS Property scaling content to the actual height.*/

    }

    .carousel__basics-letter{
        height: 6vh;
        padding-top: 20px;
    }

    .basics__term {
        height: 5vh;
        margin: 0;
    }

    .carousel__track-container {
        height: 55vh;
        height: calc(var(--vh, 1vh)* 55); /*Height with custom CSS Property scaling content to the actual height.*/

    }

    .slide__content {
        height: 100%;
    }

    .carousel__nav-content {
        bottom: 0;
    }


    /*** transition slide ***/
    .transition-slide {
        padding: 0 40px;
    }

    .transition-slide__image img{
        width: 180px;
        height: 180px;
    }


    .martin-message p{
        width: 90%;
        font-size: 1.6em;
        line-height: 1.3em;
    }

    .reinhard-message p{
        width: 90%;
        font-size: 1.6em;
        line-height: 1.3em;
    }

    /*** question slide ***/
    .slide__question-text {
        font-size: 22pt;
        line-height: 24pt;
    }

    /*** contact slide ***/
    .contact__message p {
        font-size: 1.2em;
        line-height: 1.2em;
    }
}

@media only screen and (min-width: 834px) and (max-height: 600px){

    /*** Landing ***/
    .basics__landing {
        width: 100vw;
        height: 90vh; /*Fallback*/
        top: 10vh;
        left: 0;

        height: calc(var(--vh, 1vh)* 90); /*Height with custom CSS Property scaling content to the actual height.*/
    }

    .basics__term-text{
        display: none;
    }

    .basics__landing-content {
        margin-top: 10vh;
    }

    .basics__landing-content p {
        line-height: 22pt;
        font-size: 14pt;
    }

    #basics__landing-text3 p{
        font-size: 10pt;
        line-height: 12pt;
    }

    .basics__landing-content a {
        font-size: 16pt;
        padding: 5px;
        width: 150px;
    }

    #basics__landing-button {
        align-self: center;
    }


    #basics__landing-info {
        font-size: 2em;
        top: unset;
        width: 20%;
        bottom: 20px;
        right: 50%;
        left: 50%;
        padding: 0;
        margin-left: -10%;
        margin-right: 10%;
        text-align: center;
    }

    #basics__landing-info img {
        overflow: visible;
    }

    /*** Carousel ***/
    body {
        background: #E1F0FF;
    }

    .carousel {
        height: 100vh;
        width: 100vw;
        top: 0;
        overflow: hidden;
        background: #E1F0FF;
        grid-template-rows: 35vh 55vh 10vh;
        grid-template-areas: "basics-nav"
                            "track-container"
                            "nav-content";

        height: calc(var(--vh, 1vh)* 100); /*Height with custom CSS Property scaling content to the actual height.*/
        grid-template-rows: calc(var(--vh, 1vh)* 35) calc(var(--vh, 1vh)* 55) calc(var(--vh, 1vh)* 10);

    }

    .carousel__track-container {
        grid-area: track-container;
        height: 65vh;
        height: calc(var(--vh, 1vh)* 65); /*Height with custom CSS Property scaling content to the actual height.*/

    }

    .carousel__indicator-pagenumber {
        opacity: 0; /* Hiding the page number as per customer wish*/
        position: relative;
        margin: 0 auto;
        align-self: center;
        display: inline-block;
        grid-area: pagenumber;
    }

    .carousel__nav-content {
        grid-area: nav-content;
        width: 90%;
        height: 15vh;
        margin: 0 auto;
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 5vh 10vh;
        grid-template-areas: "dots dots dots"
        "button-left pagenumber button-right";

        height: calc(var(--vh, 1vh)* 15); /*Height with custom CSS Property scaling content to the actual height.*/
        grid-template-rows: calc(var(--vh, 1vh)* 5) calc(var(--vh, 1vh)* 10);
    }

    .carousel__nav {
        grid-area: dots;
        width: 100%;
        margin: 0;
        padding: 0;
        align-self: end;
        grid-template-columns: repeat(25, 3%);
        grid-template-rows: 1fr;
        grid-gap: 1%;
    }

    .carousel__indicator {
        width: 15px;
        height: 15px;
        overflow: revert;
        pointer-events: none;
    }

    .fa, .far, .fas {
        font-size: 0.8em;
    }

    .carousel__indicator-pagenumber {
        font-size: 3vh;
        height: 2vh;
        margin: 0 auto;
        bottom: 1.6em;
        color: #5e7aff;
    }

    .carousel__button {
        height: 100%;
    }

    .carousel__button img{
        height: 100%;
    }

    /***           BASICS            ***/

    .carousel__basics-nav {
        grid-area: basic-nav;
        position: relative;
        width: 90vw;
        height: 20vh;
        padding-top: 0;
        grid-template-rows: 1fr;
        height: calc(var(--vh, 1vh)* 20); /*Height with custom CSS Property scaling content to the actual height.*/

    }

    .carousel__basics {
        margin: 0 auto;
        align-self: end;
        z-index: 1; /*fix to put elements above slide-content*/
        height: 8vh;
        height: calc(var(--vh, 1vh)* 8); /*Height with custom CSS Property scaling content to the actual height.*/

    }
    .basics__term {
        display: none;
    }

    /***       Slide Content         ***/


    .slide__content {
        height: 60vh;
        grid-template-rows: 1fr 1fr;

        height: calc(var(--vh, 1vh)* 60);
    }

    .slide__question {
        height: revert;
        width: 100%;
    }

    .slide__question-text {
        position: relative;
        width: 90%;
        line-height: 4.0vh;
        font-size: 3.8vh;
    }

    .slide__choices {
        width: 95%;
        margin: 0 auto;
        grid-template-rows: 1fr 1fr;
        align-self: center;
    }

    .slide__choices-subtext {
        font-size: 2vh;
        hyphens: manual;
        word-wrap: break-word;
        line-height: 1.1em;
        grid-gap: 1%;
    }

    /*** Transition Slides ***/

    .transition-slide {
        padding: 20px;
    }

    .transition-slide__reinhard {
        grid-template-columns: 15% 85%;
    }

    .transition-slide__martin {
        grid-template-columns: 85% 15%;
    }

    .transition-slide__image img{
        width: 100px;
        height: 100px;
    }

    .reinhard-image {
        padding-left: 10px;
        padding-bottom: 100px;
        z-index: 80;
    }

    .martin-image {
        padding-right: 10px;
        padding-bottom: 100px;
    }

    .reinhard-message {
        width: 100%;
        font-size: 9pt;
        line-height: 14pt;
        text-align: left;
    }

    .speech-bubble-left {
        padding-left: 40px;
    }

    .martin-message {
        width: 100%;
        font-size: 9pt;
        line-height: 14pt;
        text-align: left;
    }

    .speech-bubble-left {
        height: auto;
    }

    .speech-bubble-right {
        height: auto;
    }

    .speech-bubble-right:after {
        opacity: 0;
    }

    .speech-bubble-left:after {
        opacity: 0;
    }

    /***       Contact Content       ***/

    .contact__content {
        height: 100vh;
        width: 100vw;
        grid-template-columns: 1fr;
        grid-template-rows: 15vh 25vh 25vh;
        grid-template-areas: "score score"
                            "message message"
                            "mail mail";

        height: calc(var(--vh, 1vh)* 65); /*Height with custom CSS Property scaling content to the actual height.*/
        grid-template-rows: calc(var(--vh, 1vh)* 15) calc(var(--vh, 1vh)* 25) calc(var(--vh, 1vh)* 25); /*Grid-Rows with custom CSS Property scaling content to the actual height.*/
    }

    .contact__message {
        display: inline-block;
        height: 100%;
        width: 100vw;
        margin: 0;
    }

    .contact__message h2 {
        display: none;
    }

    #contact__message-wrapper {
        height: 100%;
        width: 90%;
        grid-gap: 1vh;
    }

    .contact__message p {
        font-size: 10pt;
        line-height: 14pt;
        text-align: center;
    }

    .contact__score {
        background: #ffffff;
        height: 100%;
        width: 100vw;
        grid-template-rows: 1fr;
    }

    .contact__score h2 {
        display: none;
    }

    #error-message {
        width: 100vw;
        font-size: 1.4em;
        line-height: 1em;
        text-align: center;
    }

    #final-score {
        font-size: 6em;
    }

    .contact__mail {
        height: 100%;
        width: 100vw;
        display: inline-block;
    }

    #contact__mail-wrapper{
        align-self: center;
        display: grid;
        grid-template-rows: 1fr 1fr;
        height: 100%;
    }

    .contact__mail h2 {
        display: none;
    }

    #contact__base-info {
        font-size: 10pt;
        line-height: 14pt;
        margin: 0;
        padding-left: 5vw
    }

    #contact__mail-button {
        padding-top: 11pt;
        align-content: center;
        align-self: center;
        align-items: center;
    }

    #contact__mail-button a {
        width: 90%;
        margin: 0 5%;
    }
}

@media only screen and (max-width: 833px){

    /*** Landing ***/
    .basics__landing {
        width: 100vw;
        height: 90vh; /*Fallback*/
        top: 10vh;
        left: 0;

        height: calc(var(--vh, 1vh)* 90); /*Height with custom CSS Property scaling content to the actual height.*/
    }

    .basics__term-text{
        display: none;
    }

    .basics__landing-content {
        margin-top: 10vh;
    }

    .basics__landing-content p {
        line-height: 22pt;
        font-size: 14pt;
    }

    #basics__landing-text3 p{
        font-size: 10pt;
        line-height: 12pt;
    }

    .basics__landing-content a {
        font-size: 16pt;
        padding: 5px;
        width: 150px;
    }

    #basics__landing-button {
        align-self: center;
    }


    #basics__landing-info {
        font-size: 2em;
        top: unset;
        width: 20%;
        bottom: 20px;
        right: 50%;
        left: 50%;
        padding: 0;
        margin-left: -10%;
        margin-right: 10%;
        text-align: center;
    }

    #basics__landing-info img {
        overflow: visible;
    }

    /*** Carousel ***/
    body {
        background: #E1F0FF;
    }

    .carousel {
        height: 100vh;
        width: 100vw;
        top: 0;
        overflow: hidden;
        background: #E1F0FF;
        grid-template-rows: 35vh 55vh 10vh;
        grid-template-areas: "basics-nav"
                            "track-container"
                            "nav-content";

        height: calc(var(--vh, 1vh)* 100); /*Height with custom CSS Property scaling content to the actual height.*/
        grid-template-rows: calc(var(--vh, 1vh)* 35) calc(var(--vh, 1vh)* 55) calc(var(--vh, 1vh)* 10);

    }

    .carousel__track-container {
        grid-area: track-container;
        height: 65vh;
        height: calc(var(--vh, 1vh)* 65); /*Height with custom CSS Property scaling content to the actual height.*/

    }

    .carousel__indicator-pagenumber {
        opacity: 0; /* Hiding the page number as per customer wish*/
        position: relative;
        margin: 0 auto;
        align-self: center;
        display: inline-block;
        grid-area: pagenumber;
    }

    .carousel__nav-content {
        grid-area: nav-content;
        width: 90%;
        height: 15vh;
        margin: 0 auto;
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 5vh 10vh;
        grid-template-areas: "dots dots dots"
        "button-left pagenumber button-right";

        height: calc(var(--vh, 1vh)* 15); /*Height with custom CSS Property scaling content to the actual height.*/
        grid-template-rows: calc(var(--vh, 1vh)* 5) calc(var(--vh, 1vh)* 10);
    }

    .carousel__nav {
        grid-area: dots;
        width: 100%;
        margin: 0;
        padding: 0;
        align-self: end;
        grid-template-columns: repeat(25, 3%);
        grid-template-rows: 1fr;
        grid-gap: 1%;
    }

    .carousel__indicator {
        width: 15px;
        height: 15px;
        overflow: revert;
        pointer-events: none;
    }

    .fa, .far, .fas {
        font-size: 0.8em;
    }

    .carousel__indicator-pagenumber {
        font-size: 3vh;
        height: 2vh;
        margin: 0 auto;
        bottom: 1.6em;
        color: #5e7aff;
    }

    .carousel__button {
        height: 100%;
    }

    .carousel__button img{
        height: 100%;
    }

    /***           BASICS            ***/

    .carousel__basics-nav {
        grid-area: basic-nav;
        position: relative;
        width: 90vw;
        height: 20vh;
        padding-top: 0;
        grid-template-rows: 1fr;
        height: calc(var(--vh, 1vh)* 20); /*Height with custom CSS Property scaling content to the actual height.*/

    }

    .carousel__basics {
        margin: 0 auto;
        align-self: end;
        z-index: 1; /*fix to put elements above slide-content*/
        height: 8vh;
        height: calc(var(--vh, 1vh)* 8); /*Height with custom CSS Property scaling content to the actual height.*/

    }
    .basics__term {
        display: none;
    }

    /***       Slide Content         ***/


    .slide__content {
        height: 60vh;
        grid-template-rows: 1fr 1fr;

        height: calc(var(--vh, 1vh)* 60);
    }

    .slide__question {
        height: revert;
        width: 100%;
    }

    .slide__question-text {
        position: relative;
        width: 90%;
        line-height: 4.0vh;
        font-size: 3.8vh;
    }

    .slide__choices {
        width: 95%;
        margin: 0 auto;
        grid-template-rows: 1fr 1fr;
        align-self: center;
    }

    .slide__choices-subtext {
        font-size: 2vh;
        hyphens: manual;
        word-wrap: break-word;
        line-height: 1.1em;
        grid-gap: 1%;
    }

    /*** Transition Slides ***/

    .transition-slide {
        padding: 20px;
    }

    .transition-slide__reinhard {
        grid-template-columns: 15% 85%;
    }

    .transition-slide__martin {
        grid-template-columns: 85% 15%;
    }

    .transition-slide__image img{
        width: 100px;
        height: 100px;
    }

    .reinhard-image {
        padding-left: 10px;
        padding-bottom: 100px;
        z-index: 80;
    }

    .martin-image {
        padding-right: 10px;
        padding-bottom: 100px;
    }

    .reinhard-message {
        width: 100%;
        font-size: 9pt;
        line-height: 14pt;
        text-align: left;
    }

    .speech-bubble-left {
        padding-left: 40px;
    }

    .martin-message {
        width: 100%;
        font-size: 9pt;
        line-height: 14pt;
        text-align: left;
    }

    .speech-bubble-left {
        height: auto;
    }

    .speech-bubble-right {
        height: auto;
    }

    .speech-bubble-right:after {
        opacity: 0;
    }

    .speech-bubble-left:after {
        opacity: 0;
    }

    /***       Contact Content       ***/

    .contact__content {
        height: 100vh;
        width: 100vw;
        grid-template-columns: 1fr;
        grid-template-rows: 15vh 25vh 25vh;
        grid-template-areas: "score score"
                            "message message"
                            "mail mail";

        height: calc(var(--vh, 1vh)* 65); /*Height with custom CSS Property scaling content to the actual height.*/
        grid-template-rows: calc(var(--vh, 1vh)* 15) calc(var(--vh, 1vh)* 25) calc(var(--vh, 1vh)* 25); /*Grid-Rows with custom CSS Property scaling content to the actual height.*/
    }

    .contact__message {
        display: inline-block;
        height: 100%;
        width: 100vw;
        margin: 0;
    }

    .contact__message h2 {
        display: none;
    }

    #contact__message-wrapper {
        height: 100%;
        width: 90%;
        grid-gap: 1vh;
    }

    .contact__message p {
        font-size: 10pt;
        line-height: 14pt;
        text-align: center;
    }

    .contact__score {
        background: #ffffff;
        height: 100%;
        width: 100vw;
        grid-template-rows: 1fr;
    }

    .contact__score h2 {
        display: none;
    }

    #error-message {
        width: 100vw;
        font-size: 1.4em;
        line-height: 1em;
        text-align: center;
    }

    #final-score {
        font-size: 6em;
    }

    .contact__mail {
        height: 100%;
        width: 100vw;
        display: inline-block;
    }

    #contact__mail-wrapper{
        align-self: center;
        display: grid;
        grid-template-rows: 1fr 1fr;
        height: 100%;
    }

    .contact__mail h2 {
        display: none;
    }

    #contact__base-info {
        font-size: 10pt;
        line-height: 14pt;
        margin: 0;
        padding-left: 5vw
    }

    #contact__mail-button {
        padding-top: 11pt;
        align-content: center;
        align-self: center;
        align-items: center;
    }

    #contact__mail-button a {
        width: 90%;
        margin: 0 5%;
    }
}


@media only screen and (max-width: 600px) {

    .carousel__indicator {
        width: 10px;
        height: 10px;
        pointer-events: none;
    }
}


@media only screen and (max-width: 500px) {

    .carousel__basics {
        margin: 0 auto;
        align-self: end;
        height: 60%;
    }

    .slide__question-text {
        position: relative;
        width: 90%;
        line-height: 1.1em;
        font-size: 2.0em;
    }

    .slide__choices-subtext {
        font-size: 1.0em;
        hyphens: manual;
        word-wrap: break-word;
        line-height: 1.1em;
        grid-gap: 1%;
    }

}

@media only screen and (max-width: 400px) {
    /*Basics landing*/
    .basics__landing-content p {
        line-height: 18pt;
        font-size: 14pt;
    }

    .basics__landing-content a {
        font-size: 11pt;
        padding: 5px;
        width: 100px;
    }

    #basics__landing-button {
        margin-top: 20px;
        align-self: end;
    }

    .carousel__basics {
        margin: 0 auto;
        align-self: end;
        height: 40%;
    }

    .slide__question-text {
        position: relative;
        width: 90%;
        line-height: 1.3em;
        font-size: 1.8em;
    }
}

/* smaller width than iPhone X */
@media only screen and (max-width: 374px) {

    .contact__content {
        height: 65vh;
        grid-template-rows: 20vh 45vh;
        grid-template-areas: "score message"
                             "mail mail";
    }

    .contact__mail h2{
        font-size: 12pt;
    }

    #contact__base-info {
        font-size: 11pt;
    }
}

@media only screen and (max-height: 736px) and (orientation: portrait){
    .basics__landing-content {
        grid-template-rows: 3fr 3fr 1fr;
        height: 80%;
        padding-top: 10px;
    }

    .basics__landing-content p {
        font-size: 12pt;
        line-height: 18pt;
    }

    .basics__landing-content a {
        font-size: 12pt;
        padding: 0;
    }

    #basics__landing-button {
        margin: 0;
    }

    /*** Transition Slide ***/

    .transition-slide p {
        line-height: revert;
    }

    .transition-slide__image img {
        width: 70px;
        height: 70px;
    }

    .speech-bubble-left {
        padding-left: 25px;
        height: 80%;
    }

    .speech-bubble-right {
        height: 80%;
    }

    .reinhard-image {
        padding-bottom: 70px;
    }

    .martin-image {
        padding-bottom: 70px;
    }

    .reinhard-message {
        font-size: 9pt;
        line-height: 20pt;
    }

    .martin-message {
        font-size: 9pt;
        line-height: 20pt;
    }

    /*** Carousel ***/

    .carousel__basics {
        height: 40%;
    }

    /*** Contact ***/

    #final-score {
        font-size: 4em;
    }

    #contact__mail-button {

    }

    #contact__mail-button a {
        font-size: 11pt;
        padding: 2px;
        margin: 0 5%;
        width: 90%;
    }
}

@media only screen and (max-height: 720px) and (orientation: landscape) {

    /* Contact Slide */

    .contact__message {
        grid-template-rows: 1fr 4fr;
    }

    .contact__message h3 {
        display: none;
    }

    .contact__message {
        grid-template-rows: 1fr 4fr;
    }

    .contact__message p {
        font-size: 1.2em;
        line-height: 1.2em
    }

    .contact__message h2 {
        font-size: 1.8em;
        width: inherit;
    }

    .contact__score h2 {
        font-size: 1.8em;
    }

    .contact__mail h2 {
        font-size: 1.8em;
    }
}


@media only screen and (max-height: 680px) and (orientation: landscape) {
    .carousel__basics-nav{
        grid-template-rows: 1fr;
        align-items: center;
    }

    .basics__term {
        height: 0;
        display: none;
    }

    .slide__choices {
        grid-template-rows: 1fr 1fr;
    }

    /* Transition Slides */

    .transition-slide {
        padding: 20px;
    }

    .transition-slide__reinhard {
        grid-template-columns: 15% 85%;
    }

    .transition-slide__martin {
        grid-template-columns: 85% 15%;
    }

    .transition-slide__image img{
        width: 100px;
        height: 100px;
    }

    .reinhard-image {
        padding-left: 10px;
        padding-bottom: 100px;
        z-index: 80;
    }

    .martin-image {
        padding-right: 10px;
        padding-bottom: 100px;
    }

    .reinhard-message {
        width: 100%;
        font-size: 9pt;
        line-height: 14pt;
        text-align: left;
    }

    .speech-bubble-left {
        padding-left: 40px;
    }

    .martin-message {
        width: 100%;
        font-size: 9pt;
        line-height: 14pt;
        text-align: left;
    }

    .speech-bubble-left {
        height: auto;
    }

    .speech-bubble-right {
        height: auto;
    }

    .speech-bubble-right:after {
        opacity: 0;
    }

    .speech-bubble-left:after {
        opacity: 0;
    }
}

@media only screen and (max-height: 620px) and (orientation: landscape) {

    /*** Transition Slide ***/

    .transition-slide {
        padding: 10px;
        align-content: center;
        grid-template-rows: auto auto;
    }

    .transition-slide__image img {
        width: 60px;
        height: 60px;
    }

    .speech-bubble-left {
        padding-left: 25px;
        height: 90%;
    }

    .speech-bubble-right {
        height: 90%;
    }

    .reinhard-image {
        padding-bottom: 70px;
    }

    .martin-image {
        padding-bottom: 70px;
    }

    .reinhard-message {
        font-size: 7pt;
        line-height: 14pt;
    }

    .martin-message {
        font-size: 7pt;
        line-height: 14pt;
    }
}


/*Include iPhone 6,7,8 Plus devices*/
@media only screen and (max-height: 680px) and (orientation: portrait) {

    #basics__landing-info {
        font-size: 2.5em;
    }

    .slide__question-text {
        position: relative;
        width: 90%;
        line-height: 1.1em;
        font-size: 1.5em;
    }

    /*** Carousel ***/
    .carousel__basics-nav {
        height: 20vh;

        height: calc(var(--vh, 1vh)* 20); /*Height with custom CSS Property scaling content to the actual height.*/
    }

    .carousel__track-container {
        height: 65vh;

        height: calc(var(--vh, 1vh)* 65); /*Height with custom CSS Property scaling content to the actual height.*/
    }


    .carousel__nav-content {
        height: 10vh;
        grid-template-rows: 3vh 7vh;
        grid-template-columns: 1fr 2fr 1fr;

        height: calc(var(--vh, 1vh)* 10); /*Height with custom CSS Property scaling content to the actual height.*/
        grid-template-rows: calc(var(--vh, 1vh)* 3) calc(var(--vh, 1vh)* 7);
    }

    .carousel__indicator {
        width: 8px;
        height: 8px;
    }


    .carousel__button {
        height: 80%;
        width: 100%;
        margin-top: 10%;
    }

    .fa, .far, .fas {
        font-size: 0.6em;
    }

    /*** Transition Slide ***/

    .transition-slide {
        padding: 10px;
        align-content: center;
        grid-template-rows: auto auto;
    }

    .transition-slide__image img {
        width: 60px;
        height: 60px;
    }

    .speech-bubble-left {
        padding-left: 25px;
        height: 90%;
    }

    .speech-bubble-right {
        height: 90%;
    }

    .reinhard-image {
        padding-bottom: 70px;
    }

    .martin-image {
        padding-bottom: 70px;
    }

    .reinhard-message {
        font-size: 7pt;
        line-height: 14pt;
    }

    .martin-message {
        font-size: 7pt;
        line-height: 14pt;
    }
}

@media only screen and (max-height: 600px){
    .basics__landing-content {
        padding-top: 0;
    }

    #basics__landing-text3 p {
        font-size: 10pt;
        line-height: 11pt;
    }

    .basics__landing-content p {
        font-size: 11pt;
        line-height: 13pt;
    }

    .carousel__basics-nav {
        height: 25vh;

        height: calc(var(--vh, 1vh)* 25); /*Height with custom CSS Property scaling content to the actual height.*/
    }

    .carousel__track-container {
        height: 60vh;

        height: calc(var(--vh, 1vh)* 60); /*Height with custom CSS Property scaling content to the actual height.*/
    }

    /***    contact    ***/
    .contact__content {
        height: 60vh;
        grid-template-rows: 20vh 40vh;
        grid-template-areas: "score message"
                             "mail mail";
    }
}

/* iPhone 5 */
@media only screen and (max-height: 500px) and (orientation: portrait) {
    .basics__landing-content {
        padding-top: 0;
    }

    #basics__landing-text3 p {
        font-size: 9pt;
        line-height: 10pt;
    }

    .basics__landing-content p {
        font-size: 10pt;
        line-height: 12pt;
    }

    #basics__landing-info {
        font-size: 2em;
        bottom: 10px;
    }

    .transition-slide p {
        font-size: 1.2em;
        line-height: 1.1em;
    }

    .carousel__basics-nav {
        height: 27vh;
        height: calc(var(--vh, 1vh)* 27);
    }

    .carousel__basics {
        height: 60%;
    }
}

@media only screen and (min-height: 781px) and (max-height: 850px) and (orientation: portrait) {
    #contact__mail-button {
        padding: 6px 0;
    }
}