
/*************** Global *****  font-size: 0.625em; **********/

* { box-sizing:border-box; }

html {
    font-size:0.4625em;
    background:#36225c; color:#78368c; cursor:default; overflow:hidden; overflow-y: auto; min-width:320px;
}
body { font-size: 3.2rem; font-weight: 300; font-family: 'Roboto', sans-serif; line-height:1.45; }

img { max-width:100%; height:auto; vertical-align: top; box-sizing: content-box; }

svg { height:auto; }
svg * { fill:currentColor; }

ul, ol, li { list-style: none; padding:0; margin:0; }
a { text-decoration: none; color:currentColor; }
p { margin:1.2em 0; }
blockquote { margin:10px 0; }

section { position: relative; }

strong, b { font-weight: 500; }
h1, h2, h3, h4, h5, h6 { display: block; margin:0; padding:0; font-weight:500;  }


/* Forms */

label { margin-bottom: 0.4em; }
label i { font-style: normal; color:#E41023; }
label span { font-weight: 300; }
label, select { cursor:pointer; display: block; font-weight: 500; color:currentColor; }
input[type=radio]:checked ~ label { cursor:default; }
input, textarea, select, button { color:currentColor; height:7.6rem; padding:1.3rem 2rem; font-size: 3.2rem; font-weight: 300; background:#C1E5F8; border:0; width:100%; max-width: 100%; }
input[type=checkbox], input[type=radio] { padding:inherit; height:auto; }
textarea { min-height: 21rem; min-width: 100%; width: 100% !important; display: block; }
input:focus, textarea:focus { background-color:#c9edff; outline: none; }

input[type=checkbox] ~ label,
input[type=radio] ~ label { position: relative; padding-right:2.4em; font-size: 3.2rem; font-weight: 300; user-select: none; }
input[type=checkbox] ~ label { padding-left:1.5em; padding-right: 0; }
input[type=checkbox], input[type=radio] { left:-100vw; position:absolute; opacity: 0; }
input[type=checkbox] ~ label:before,
input[type=radio] ~ label:before,
input[type=checkbox] ~ label:after,
input[type=radio] ~ label:after { content:' '; display:block; font-size:1.06em; width:1em; height:1em;  background:#C1E5F8; position:absolute; right:0; top:0.2em; margin:0; }
input[type=checkbox] ~ label:before,
input[type=checkbox] ~ label:after { border-radius: 0; left:0; right:auto; }
input[type=checkbox] ~ label:after,
input[type=radio] ~ label:after { background: none; transform: scale(0) translateY(-5%); transition: all 150ms ease-out; }
input[type=checkbox]:checked ~ label:after,
input[type=radio]:checked ~ label:after {  background:url('../img/svg/check.svg') no-repeat 50% 50%; background-size: contain; transform: scale(0.8) translateY(-5%); }

button { width:auto; font-weight:400; padding:2rem 6rem; height:auto; border:0; display: inline-block; text-transform: uppercase; background: none; transition:all 150ms ease-out; }


form ::-webkit-input-placeholder { color:#63318a; opacity:0.8; }
form ::-moz-placeholder { color:#63318a; opacity:0.8; }
form :-ms-input-placeholder { color:rgba(99,49,138,0.8); opacity:1; }
form ::placeholder { color:#63318a; opacity:0.8; }

form { margin-top: -2.5rem; }
form .wrapper-field { margin: 2.5rem 0; }
form .wrapper-field.field-radio .element { margin: 3rem 0 3rem; display: flex; flex-wrap: wrap; }
form .wrapper-field.field-radio .element .option { padding: 0 3.3rem 0 0; /*width: 33.3%;*/ }
form .wrapper-field.field-radio .element .option:first-child:last-child { padding: 0; width: auto; }
form .wrapper-field.field-radio + .field-radio { margin-top: -3rem; }
form .group { display: flex; margin: 0 -2rem; }
form .group > * { flex: 1; margin-left: 2rem; margin-right: 2rem; }
form .wrapper-group + .wrapper-group { margin-top: -2.5rem; }
form .field-button { margin-top: -0.3rem; text-align: center; }
form .is-field-error input,
form .is-field-error textarea,
form .is-field-error select {
    box-shadow: 0 0 0 0.2rem #E41023;
}
form .field-radio.is-field-error label:before {
    box-shadow: 0 0 0 0.2rem #E41023;
}

.responsive-embed { position: relative; padding-bottom: 56.25%; height:0; overflow: hidden; }
.responsive-embed .embeded,
.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed,
.responsive-embed video { position:absolute; top: 0; left: 0; width: 100%; height: 100%; margin:0; padding:0; }



/***** General *****/

#wrapper { overflow:hidden; min-height: 100vh; }

.wrapper { max-width:1280px; padding:0 3rem; margin:0 auto; position: relative; }




/* ************************            ************************ */
/* ************************ RESPONSIVE ************************ */
/* ************************            ************************ */


/* ****** Global html font size scaling ****** */

@media screen and (min-width:1500px) {



}

@media screen and (min-width:1920px) {




}

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




}

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



}


