/* !$ Layout */

*, *:before, *:after{
    margin:0;
    padding:0;
    border:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

body {
 font-family: Arial, sans-serif;
 font-size: 15px;
 -webkit-tap-highlight-color: transparent;
 max-width: none !important;
}

main {
 /*padding: 30px 10vw;*/
}




/* !$ Text */

h1 {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: 700;
 font-size: 35px;
 margin-bottom: 30px;
 color: rgb(24,55,130);
}

.form__element__label {
 font-weight: 700;
 line-height: 150%;
 color: rgb(24,55,130);
 margin-bottom: 15px;
 display: block;
}

.radio-group label, .form__checkbox__label, .form__notice p {
 line-height: 150%;
 font-weight: 300;
 color: rgb(179,178,178);
}

input, textarea {
 line-height: 150%;
 font-weight: 300;
 color: rgb(0,32,91);
}

::-webkit-input-placeholder {
 color: rgb(179,178,178);
}
::-moz-placeholder {
 color: rgb(179,178,178);
}
:-ms-input-placeholder {
 color: rgb(179,178,178);
}
:-moz-placeholder {
 color: rgb(179,178,178);
}




/* !$ Form */

.form__element, .form__notice {
 position: relative;
 margin-bottom: 20px;
}

.form__notice {
 margin-top: 20px;
}

.form__element--flow {
 margin-bottom: 30px;
}

.form__element__container {
 position: relative;
}

input {
 position: relative;
 height: 42px;
 width: 100%;
 padding: 6px 42.5px 6px 12px;
 display: block;
 border-bottom: 1px solid rgb(179,178,178);
 background-color: rgb(247,247,247);
}

textarea {
 position: relative;
 min-height: 195px;
 width: 100%;
 padding: 6px 12px;
 border: 1px solid rgb(179,178,178);
 background: rgb(247,247,247);
}

input[type="radio"], input[type="checkbox"] {
 position: absolute;
 width: 30px;
 height: 30px;
 top: 0;
 left: 0;
 opacity: 0;
 margin: 0;
 padding: 0;
}

.radio-group {
 margin-top: 20px;
}

.radio-group label {
 position: relative;
 margin-bottom: 15px;
 display: block;
 padding-left: 40px;
}

.radiobutton__circle {
 position: absolute;
 width: 30px;
 height: 30px;
 left: 0px;
 top: -6px;
 background: white;
 border-radius: 50%;
 border: 1px solid rgb(179,178,178);
}

.radiobutton__circle:after {
 position: relative;
 top: 8px;
 left: 8px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: rgb(0,32,91);
 content: "";
}

input[type="radio"]:checked + .radiobutton__circle {
 border-color: rgb(0,32,91);
}

input[type="radio"]:checked + .radiobutton__circle:after {
 display: block;
}

.form__checkbox__label {
 position: relative;
 padding-left: 40px;
 display: block;
}

.form__checkbox__label a {
 color: rgb(179,178,178);
}

.form__checkbox__label a:hover {
 color: rgb(24,55,130);
}

.checkbox__square {
 position: absolute;
 width: 30px;
 height: 30px;
 left: 0px;
 top: -5px;
 background: white;
 border: 1px solid rgb(179,178,178);
}

.checkbox__square:after {
 position: absolute;
 width: 15.68px;
 height: 15px;
 top: 5px;
 left: 6px;
 content: url('data:image/svg+xml;utf8,<svg width="15.68px" height="15px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.68 15"><path fill="rgb(0,32,91)" d="M7,15a.64.64,0,0,1-.2,0,.52.52,0,0,1-.15-.07L.26,10.56a.55.55,0,0,1-.25-.4A.66.66,0,0,1,.1,9.68L2,6.93a1.21,1.21,0,0,1,.24-.21.61.61,0,0,1,.3-.08.52.52,0,0,1,.18,0,.35.35,0,0,1,.16.08L5.93,8.82,11.62.29a.61.61,0,0,1,.24-.21A.6.6,0,0,1,12.15,0l.19,0A.48.48,0,0,1,12.5.1l2.92,2a.69.69,0,0,1,.16.18.49.49,0,0,1,.08.22.62.62,0,0,1,0,.27.4.4,0,0,1-.09.21L7.48,14.68a.64.64,0,0,1-.25.24A.67.67,0,0,1,7,15Z"/></svg>');
 visibility: hidden;
}

input[type="checkbox"]:checked + .checkbox__square {
 border-color: rgb(0,32,91);
}

input[type="checkbox"]:checked + .checkbox__square:after {
 visibility: visible;
}

button {
 position: relative;
 height: 42px;
 line-height: 42px;
 padding: 0 40px;
 font-size: 15px;
 font-weight: 700;
 border: 1px solid rgb(179,178,178);
 color: rgb(24,55,130);
 background: white;
}




/* !$ Status styles */

.error-notice {
 margin-top: 10px;
 margin-bottom: 20px;
 color: rgb(228,0,43);
 visibility: hidden;
 max-height: 0;
}

fieldset ~ .error-notice {
 margin-top: -10px;
 margin-bottom: 30px;
}

.form__element.has-error input, input.required:invalid {
 background-color: rgba(228,0,43,.15);
 border-color: rgb(228,0,43);
}

.form__element.has-error .error-notice, input.required:invalid ~ .error-notice, fieldset.required:invalid ~ .error-notice {
 visibility: visible;
 max-height: none;
}

.form__element.has-error .checkbox__square, input.required:invalid ~ .checkbox__square {
 background-color: rgba(228,0,43,.15);
 border-color: rgb(228,0,43);
}

textarea:focus, input:focus {
 background-color: white;
}

input:valid {
 background-color: white;
 border-color: rgb(132,189,0);
}

.checkmark-notice {
 position: absolute;
 right: 15px;
 top: 0;
 width: 15px;
 height: 42px;
 visibility: hidden;
}

input:valid + .checkmark-notice {
 visibility: visible;
}

.checkmark-notice:after {
 position: absolute;
 right: 0;
 top: 13px;
 width: 15px;
 height: 15px;
 content: url('data:image/svg+xml;utf8,<svg width="15.68" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.68 15"><path fill="rgb(132,189,0)" d="M7,15a.64.64,0,0,1-.2,0,.52.52,0,0,1-.15-.07L.26,10.56a.55.55,0,0,1-.25-.4A.66.66,0,0,1,.1,9.68L2,6.93a1.21,1.21,0,0,1,.24-.21.61.61,0,0,1,.3-.08.52.52,0,0,1,.18,0,.35.35,0,0,1,.16.08L5.93,8.82,11.62.29a.61.61,0,0,1,.24-.21A.6.6,0,0,1,12.15,0l.19,0A.48.48,0,0,1,12.5.1l2.92,2a.69.69,0,0,1,.16.18.49.49,0,0,1,.08.22.62.62,0,0,1,0,.27.4.4,0,0,1-.09.21L7.48,14.68a.64.64,0,0,1-.25.24A.67.67,0,0,1,7,15Z"/></svg>');
}








/* !$ >= 700px */
@media all and (min-width: 700px){
 
 
 /* !$ Layout */

 main {
  /*padding: 50px 8vw;*/
 }
 
 main::after {
   content: "";
   display: block;
   clear: both;
 }
 
 
 
 /* !$ Text */

 h1 {
  font-size: 45px;
  padding: 0 2vw;
 }
 
 
 
 /* !$ Form */
 
 .form__element--100, .form__element--66, .form__element--33 {
  width: 100%;
  padding: 0 2vw;
 }
 
 .form__element--50 {
  width: 50%;
  float: left;
  padding: 0 2vw;
 }
 
 .form__element--flow {
  width: 50%;
  float: left;
  padding: 0 2vw;
 }
 
 .radio-group {
  margin: 0 -2vw;
 }
 
 .radio-group .form__element__label {
  padding: 0 2vw;
 }
 
 .form__radio__label:hover, .form__checkbox__label:hover {
  cursor: pointer;
 }

 button:hover {
  color: white;
  background: rgb(0,32,91);
  cursor: pointer;
 }
 
 
 
 /* !$ Status styles */
 
 fieldset ~ .error-notice {
  margin-top: -20px;
 }
 
}





/* !$ >= 850px */
@media all and (min-width: 850px){
 
 .flow-group {
  position: relative;
  padding: 0 1vw;
 }
 
 .form__element--flow {
  width: 33.333333%;
  padding: 0 1vw;
 }
 
 
}





/* !$ >= 1000px */
@media all and (min-width: 1000px){
 
 
 /* !$ Text */

 h1 {
  font-size: 60px;
  margin-bottom: 50px;
 }
 
 .title__block {
  white-space: nowrap;
  display: block;
 }
 
 
 
 /* !$ Form */
 
 .form__element--100 {
  width: 100%;
  float: left;
  padding: 0 2vw;
  clear: both;
 }
 
 .form__element--66 {
  width: 66.666666%;
  float: left;
  padding: 0 2vw;
 }
 
 .form__element--33 {
  width: 33.333333%;
  float: left;
  padding: 0 2vw;
 }
 
 .form__element--flow {
  width: 50%;
 }
 
 
}





/* !$ >= 1200px */
@media all and (min-width: 1200px){
 
 
 .form__element--flow {
  width: 33.333333%;
 }
 
 
}



/* !$ >= 1500px */
@media all and (min-width: 1500px){
 
 /* !$ Text */

 h1 {
  font-size: 80px;
 }
 
 button, body {
  font-size: 16px;
 }
 
 
 
 /* !$ Form */
 
 input, button, .checkmark-notice {
  height: 48px;
 }
 
}



/* !$ >= 1800px */
@media all and (min-width: 1800px){
 
 
 .form__element--flow {
  width: 25%;
 }
 
 
}