@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');

body {background: #f3f3f3; margin:0; font-family: 'Roboto', sans-serif; font-size: 13px; width:100%; height:100vh; }
body.demo {background: url(../img/bg_demo.jpg) center center repeat;}
a {color:#222; text-decoration: none; cursor: pointer;}
h1, h2 {font-weight: 300; padding: 0 0 1rem ; margin:0;text-align: center; font-size: 1.5rem;}
h2 {font-size: 1.5rem; text-align: left;}
button, .btn {display:inline-block; color:white; border:0; padding: 10px 15px; font-weight: 900; 
     text-transform: uppercase; background: rgba(128,0,229,1);
 cursor: pointer; font-size: 0.7rem; line-height: 0.7rem; transition: 0.5s;
    vertical-align: top; font-family: 'Roboto', sans-serif; outline:none;}
.btn-secondary {background:rgba(140,140,160,1)}
button:hover, .btn:hover {background: rgb(158,0,128);}
.btn-secondary:hover {background:rgba(100,100,100,1)}

input, textarea, select {width:100%; display: block; box-sizing: border-box; 
    background:transparent; border:1px solid #afafaf;  line-height: 1rem; height:2rem; padding:0 8px; outline: none;
    margin-bottom:20px; color:#222;} 
input:focus, textarea:focus, select:focus {background: rgba(255,255,255,0.15);}
.input-error {margin-top:2px; color: #f44}
textarea {font-family: 'Roboto', sans-serif; padding:8px;height:120px; }
label {margin-bottom:5px; display:block; text-align: center; color:#797979}
option {color:black;}
.center {text-align: center;}
.animate {visibility: hidden; overflow: hidden; max-height: 0; transition: 0.3s;}
.show {visibility: visible;max-height: 480px;}
.row:after {clear:both; display: table; content:""}
.overflow {width:100%; height:100vh; position: fixed; top:0; left:0; background: rgba(255,255,255,1);z-index: 9;}
.overflow h1 {color:#222; margin-top:50px;}

.client .container {width:400px; max-width: 100%; box-sizing: border-box; padding:0 20px; color:#222; margin:auto;}
.client .container .bg-white {background:white;  box-shadow: 0 0 15px rgba(0,0,0,0.1);padding: 30px; box-sizing: border-box;}
.modal {width:100%; min-height:100vh; box-sizing: border-box;padding: 70px 0; position: absolute;top:0;background: rgba(0,0,0,0.75); visibility: hidden; opacity: 0; transition: 0.3s;}
.modal .inner{width:400px; margin:auto; background:#0C4377; padding: 30px; 
    box-shadow: 0 0 10px rgba(0,0,0,0.8); position: relative; top:50px; transition: 0.5s;}
.modal.show {visibility: visible; opacity: 1;}
.modal.show .inner{top:0;}

.logo-top {padding-top:40px; padding-bottom:10px;}

#panel a {display:block; padding:30px; text-align: center; color:white; box-sizing: border-box;
     font-size: 2em; font-weight: 300; transition: 0.3s;}
#panel a:hover {transform:scale(1.1)}
#panel a:first-of-type{background: rgb(128,0,229);margin-bottom:10px;}
#panel a:last-of-type{background: rgb(158,0,128);}

input[type=radio] {display:none;}
.quiz-radio {padding:10px; box-sizing: border-box; border:1px solid #e9e9e9;
text-align: center; font-size: 1em; color:black; font-weight: 300; cursor: pointer;}
.quiz-radio:hover {background:#e9e9e9;}
input[type=radio]:checked + .quiz-radio {box-shadow: 0 0 0 2px rgb(200,200,200);background:#e9e9e9;}

.next{margin-top:20px;}

.logo-preview {display:block;height:132px; background: transparent center center no-repeat; background-size:contain;}