*, *:before, *:after {
     box-sizing: border-box;
}
 html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     text-size-adjust: none;
}
 footer, header, nav, section, main {
     display: block;
}
 input {
     appearance: auto;
}

/* Style to hide navigation controls */
html:-webkit-full-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body:-webkit-full-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

 @font-face {
     font-family: 'unity';
     src: url('fonts/TCCCUnity-Black.ttf') format('truetype');
}
html{
    height: 100vh;
    overflow:hidden;
}
 body {
     font-family: 'unity', sans-serif;
     color:#fff;
     background-color: #01b8ce;
     background-image: url('../img/bg.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center center;
     height:100%;
     height:100%;
     font-size: clamp(2rem, 1.3538rem + 3.4462vh, 4.8rem);
     line-height: 1.2em;
     overflow: hidden;
}
 .btn {
     width:90%;
     justify-self: center;
}
 .viewscreen {
     position: relative;
     height: 100%;
     width: 100%;
     overflow-x: hidden;
     background-image: url('../img/bg_grid.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center center;
     overflow: hidden;
}
 .logo {
     width: 100%;
     max-width: 260px;
     justify-self: center;
     grid-area: logo;
}
 section {
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     overflow: hidden;
     margin: 0;
     padding: 10% clamp(2rem, 1.3538rem + 3.4462vh, 4.8rem);
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr;
     grid-template-areas: 
        "logo"
        "slide";
}
 section .slide {
     grid-area: slide;
     position: absolute;
     display: none;
     pointer-events: none;
     padding-top: clamp(2rem, 1.3538rem + 3.4462vh, 4.8rem);
     grid-gap: clamp(2rem, 1.3538rem + 3.4462vh, 4.8rem);
     width: 100%;
     max-width: 1360px;
     height: 100%;
     justify-self: center;
     align-items: start;
     justify-items: center;
     text-align: center;
     grid-template-rows: auto 1fr auto;
}
 section .slide.is-active, section .slide.is-next {
     display: grid;
}
 section .slide.is-active {
     pointer-events: auto;
}
 section .slide .btn {
     align-self: end;
     width:75%;
     max-size:360px;
}
 section.is-active, section.is-next {
     display: grid;
}


section .slide div, section .slide p{ 
    text-align: center;
    width: 100%;
}

section .slide #msg_review{ line-height: 1em; }

 .message-option {
    width:100%;
    background-color: #fff;
    font-size: clamp(1rem, 0.8615rem + 0.7385vh, 1.6rem);
    border-radius: 2em;
    text-align: left;
    padding:.5em 1.5em;
    line-height: 1.1em;
    color: #a465a9;
    margin-top: 1.5em;
    min-height: 4em;
    display: flex;
    place-content: center;
    justify-content: center;
    transition: 0.3s;
}
 .message-option.selected{
     color: #fff;
     background-color: #a465a9;
}
 .inputfield {
     width: 100%;
     margin:0 auto
}
 .inputfield input {
     width:100%;
     border:6px solid #fff;
     background-color: #fff;
     text-transform: uppercase;
     font-size: clamp(1.6rem, 1.2769rem + 1.7231vh, 3rem);
     border-radius: 2em;
     text-align: left;
     font-weight: bold;
     padding:.5em;
     color: #000000;
     transition: 0.3s;
}
 .inputfield input::placeholder {
     color: #a465a9;
     text-align: center;
}
 .inputfield .errormessage{
    font-size: 45%;
    line-height: 2em;
    display: block;
    margin:0;
    visibility: hidden;
    letter-spacing: 2px;
    font-weight: normal;
    text-shadow: 2px 2px #955a2;
    transition: 0.3s;
}
 .inputfield.error input{
     border-color: #e41e2b;
}
 .inputfield.error .errormessage{
     visibility: visible;
}

section #m-0.slide { grid-template-rows: 1fr auto; }
section #m-3.slide { grid-template-rows: 1fr auto auto; }


.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-player {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.section-2{
    padding: 0;
    grid-template-rows: 1fr;
    grid-template-areas: "slide";
}