:root {
    --darkbg: #313131;
    --lightbg: #f5f5f5;

}
body,
html {
  position: fixed;
}
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    vertical-align: baseline;
}

/*html, body {margin: 0; height: 100%; overflow: hidden}*/

html {
    /*-ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;*/
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #313131;
    text-align: left;
    background-color: #fff;
    height: 100%;
    overflow: auto;
    width: 100%;
}

.header {
    width: 100%;
    height: 50px;
    text-align: center;
    background-color: var(--darkbg);
}
    
.comment {
    width: 100%;
    text-align: center;
    /* height: 50px; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    line-height: 50px;
    background-color: #eee;   
    
}

.header a {
    height: 50px;
    display: block;
}

.header img {
    width: 190px;
    margin-top: 6px;
}

.hidden {
    float: right;
    z-index: 999;
    width: 50px;
    height: 50px;
    color: #fff;
    background-color: #fff;
    position: absolute;
    right: 0;
}

.hiddenblock {
    display: none;
}

.skip {
    margin-top: 72px;
    font-size: 26px;
    padding: 24px 46px;
    background-color: #eee;
    border-radius: 60px;    
}

.question {
    height: calc( 50vh - 50px );
    /*background-color: #f4d;*/
    text-align: center;
    display: flex;
    align-items: center;
}

.question .textcontainer {
    width: 100%;
    /*background-color: #ff6a6a;*/
}

.question .textcontainer h1 {
    font-size: 4vw;
    padding: 0 2.5vw;
}

h2 {
    font-size: 2.1vw;
    padding: 0 2.5vw;
    text-align: center;
    margin: 15px;   
}

.answerskip {
    display: flex;
    justify-content: center;
}

.answer {
    display: flex;
    gap: 20px;
    /*background-color: #ccc;*/
    justify-content: space-evenly;
    /*height: calc( 50vh - 50px );*/
}

.answer input,.answerskip input {
    margin:0;
    padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.answer .answerimage {
    width: 13vw;
    height: 13vw;
    /*background-size: 13vw;*/
    -webkit-tap-highlight-color: transparent;
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
}

.answer .a1 { background-image:url(/images/a1.svg);}
.answer .a2 { background-image:url(/images/a2.svg);}
.answer .a3 { background-image:url(/images/a3.svg);}
.answer .a4 { background-image:url(/images/a4.svg);}
.answer .a5 { background-image:url(/images/a5.svg);}


.answer input:active +.answerimage{
  /*opacity: .8;*/
}

.answer input:checked +.answerimage{
    
    /*-webkit-filter: brightness(.8) grayscale(0) opacity(1);
           -moz-filter: brightness(.8) grayscale(0) opacity(1);
                filter: brightness(.8) grayscale(0) opacity(1);     */

    
}


.answer a {
    /*background-color: #ddd;*/
    border-radius: 100%;

}


.answer a img {
    width: 13vw;
    
}

.answer a:hover {
    background-color: #ccc;
}



.newslettercontainer {
    
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    width: 100%;
}
.textcontainer {
    width: 100%;
}