/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 19 Nov 2020, 15:58:54
    Author     : skreq
*/

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

    header {
        left: 3rem;
    }

}

@media screen and (max-width: 1200px) {
.content {grid-template-columns: auto auto;}
.part.part2 {padding: 5rem; font-size: 4rem;}
div#textWrapper {padding: 4rem;}
.part .caption {font-size: 4rem;}
h1 {font-size: 2rem;}
#textWrapper p,
.part.part2 .content p {font-size: 1.2rem;}
.questionHolder span.answer {font-size: 1rem;}
}

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

    div#mainWrapper {
        grid-template-columns: 100%;
    }
    

    span.subcaption {
        font-size: 1.3rem;
    }

    .part.part2 {
        justify-content: flex-start;
    }

    .part.part2 .content {
        margin: 0 auto;
    }

    .part1 {order:1;}
    .part2 {order:0;}
    .content {grid-template-columns: 100%;}
    div#testWrapper {
        width: 100%;
    margin: 0px auto 0px;
    float:none;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
    }
    .textContent {padding: 50px 30px 40px 30px;}
    
   
    
    span.back.arrow {
        top: 25px;
    }

    .teaser {
        height: auto;
        display: none;
    }
    
    .teaser video {
    float: left;
    width: 100%;
    margin: 0;
    height: auto;
}
    
    /* RESPONSIVE REMOVE */
    .textContent,
    .underGraph,
    .content.half{
        display: none;
    }
}


@media screen and (max-width: 768px) {
    header .contact span.helpInfo {
    font-size: 11px;
}






    .content.half{grid-template-columns:100%; grid-gap: 30px;}
    .teaser {overflow: hidden;}
    .teaser img {
        display: none;
    height: 400px!important;
    float: left;
    width: auto;
    object-fit: none;
    max-width: none;
    margin-left: -90px;
    }
    
    div#testWrapper {
        margin-top: 0;
    }
    
    .thx-page {padding: 10px 30px;}
    #vielen-dank .teaser img {
    width: 100%;
    position: relative;
    margin-left: 0;
    float: left;
    object-fit: cover;
    }
}


@media screen and (max-width: 480px) {
    
    div#testHolder .questionHolder ul {
        grid-template-columns: repeat(1,1fr);
    }

    .part .caption {
        font-size: 2.5rem;
    }

    #textWrapper p, .part.part2 .content p {
        font-size: 1rem;
    }

    .questionHolder span.answer {
        font-size: 1rem;
    }

    div#testWrapper {
        margin-top: 20px!important;
    }

    #textWrapper {
        padding: 2rem!important;
    }

    h1 {
        font-size: 2rem;
    }
    
    .part.part2 {padding: 2rem;
    }


    .formHeader {
        font-size: 20px;
    }
    
    

    

    span.subcaption {
        font-size: 1rem;
    }

    
    
    .lb {
    padding: 30px;
    font-size: 14px!important;
    }
    
    .lb a,
    .lb p,
    .lb strong {
        font-size: 14px!important;
    }
    
    div#mainWrapper {padding:0;}
    header img#logo {max-height: 40px;}
    header {height: 70px;padding: 15px 20px;}

    
    img.testTrust {display: block;}
    .teaser img {
        height: 260px!important;
    margin-left: 0px;
    display: none;
    }
    
    div#testWrapper {
        margin: 0px auto 0px;
    }
    
    
}