@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;800&display=swap');

* {
  box-sizing:border-box;
  margin:0;
  padding:0;  
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  outline:none;
  border:none;
  background:transparent;
  text-decoration:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:root {
  --primary:1.75em;
  --secondary:1.375em;
  --nav:2.25em;
  --small:0.8em;
  --blue:#253a71;
  --mblue:#3e65c9;
  --lblue:#f7f7f7;
}
html {
  font:16px 'Mulish', sans-serif;
  color:var(--blue); 
}
body {
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  cursor:default;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  color:var(--blue); 
}
::-webkit-scrollbar {width:10px;}
::-webkit-scrollbar-track {background:transparent;}
::-webkit-scrollbar-thumb {background:var(--blue);}
::-webkit-scrollbar-thumb:hover {background:var(--mblue);}
h1{
  font-size:var(--primary);
  font-weight:400;
}
h2{
  margin:2em 0 .5em 0;
  font-size:var(--secondary);
  font-weight:400;
}
p {
  line-height:2em;
}
a {
  color:var(--mblue);
}
a:hover {
  color:var(--blue);
}
button {
  font:1em 'Mulish', sans-seif;
  color:#FFF;
  background:var(--mblue);
  background-position: center;   
  transition: background 0.8s;
  cursor:pointer;
}
button:hover {
  background: var(--mblue) radial-gradient(circle, transparent 1%, var(--mblue) 1%) center/15000%;
  cursor:pointer;
}
button:active {
  background-color:#339cff;
  background-size: 100%;
  transition: background 0s;
}
ul {
  list-style:none;
}
.small {
  font-size:var(--small);
}
header {
  width:100vw;
  min-height: 4em;
  position:fixed;
  z-index:3;
  display:grid;
  grid-template-columns:3fr 1fr;
  align-items:center;
  background:#FFF;
  border-bottom:1px solid var(--blue);
}
.header-nav {
  display:none;
}
.logo {
  margin:1.1em 0 .7em 10vw;
  font-weight: 800;
}
.menu-btn {
  height:100%;
  font-size:var(--small);
  font-weight: 800;
  text-transform:uppercase;
}
.menu-btn:hover {
  background:var(--blue);
  color:#FFF;
  transition: 0;
}
.nav-menu::-webkit-scrollbar{
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  background:transparent;
}
.nav-menu {
  width:100vw;
  height:0;
  left:0;
  bottom:0; 
  position:fixed;
  z-index:2;
  overflow-y:auto;
  background:#FFF;
  text-align:left;
  transition:0.5s ease-out;
}
.menu {
  width:100vw;
  align-self:start;
  padding:30vh 14vw;
  text-align:left;
  font-size:2em;
}
.menu-item--level1,
.menu-item--link,
.menu-item--level2 ul li a {
  display:grid;
  grid-template-columns:1em auto;
  margin: 0 0 1.2em 0;
  cursor:pointer;
}
.menu-item--level1:before{
  content:'\002B';
}
.active-menu:before{
  content:'\2212';
}
.menu-item--link:before,
.menu-item--level2 ul li a:before {
  content:'\203A';
}
.menu-item--level2 {
  height:0;
  display:grid;
  justify-content:start;
  align-self:start;
  overflow:auto;
  transition:0.5s;
}
.menu-item--level2 ul, 
.menu-item--level2 {
  margin-left:.2em;
}
.menu-item--level2 ul li a {
  opacity:1;
}
.menu-item--level2 ul .menu-item--level2 ul li{
  margin-bottom:1.2em;
  margin-left:.2em;
  font-weight:400;
}
.dropdown {
  display:none;
}
footer {
  width:100vw;
  padding:3em 10vw;
  background:var(--lblue);
}
footer ul li {
  margin:.8em 0;
}
footer a {
  color:var(--blue);
}
.footer-page {
  padding:1em 10vw;
  text-align:center;
  font-size:var(--small);
}
@keyframes landing {
  0% {opacity:0; margin:0 0 0 -.5em;}
  100%{opacity:1; margin:0;}
}
.landing {
  width:100vw;
  min-height:100vh;
  height:auto;
  padding:10vh 10vw;
  display:grid;
}
.landing h1,
.landing p {
  -webkit-animation:home 3s forwards;
  animation:landing 3s forwards;
}
.landing h1 {
  align-self:end;
  font-size:10vmin;
  line-height: 1.1;
  font-weight:700;
  margin-bottom: 1em;
}
.landing p {
  padding:1em 0 0 0;
  align-self:start;
  font-size:var(--secondary);
  line-height:1.6em;
}
.landing p br {
  display:none;
}
.landing-btn {
  padding:1.2em;
  align-self:end;
  justify-self:start;
  text-align:left;
  letter-spacing:1px; 
  background:var(--mblue);
  background-position: center;   
  color:#FFF;
  transition:background 0.8s;
}
.landing-btn:hover {
  background: var(--blue) radial-gradient(circle, transparent 1%, var(--blue) 1%) center/15000%;
  cursor:pointer;
  color:#FFF;
}
.landing-btn:active {
  background-color:#339cff;
  background-size:100%;
  transition:background 0s;
}

.main-page,
.error-page {
  width:100vw;
  padding:20vh 10vw;
  display:grid;
  justify-items:center;
} 
.process,
.error-page {
  justify-items:start;
}
.error-page {
  height:100vh;
  align-content:start;
}
form {
  width:100%;
  max-width:32em;
  height:auto;
  margin:0;
  font:var(--font);
}
form h1 {
  margin:0 0 .2em 0;
  font-size:var(--primary);
  font-weight:400;
  line-height:1.3em;
} 
form p {
  margin:0 0 1em 0;
} 
fieldset {
  width:100%;
  margin:.7em 0;
  display:grid;
  align-items:center;
}
label {
  min-width:auto;
  padding:0 .2em;
  position:relative;
  top:.6em;
  left:.5em;
  font-size:var(--small);
  color:rgba(0, 84, 165,0.6);
}
.label--focus {
  color:rgba(0, 84, 165, 1);
}
.label--bg {
  background:linear-gradient(120deg, #FFF 0%, #FFF 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  padding:0 5px;
}
::placeholder {
  font-family:'Mulish', sans-serif;
  font-weight:400;
  color:var(--blue);
}
.hidden {
  display: none;
}
.checkbox-fieldset {
  margin:1.7em 0 0 0;
  padding:0 .7em 1.1em 0;
  border:1px solid rgba(0, 84, 165, .3);
}
.checkbox-fieldset div {
  padding:0 0 0 .5em;
}
.checkbox-fieldset:hover {
  border:1px solid rgba(0, 84, 165,1);
}
.checkbox-fieldset:hover .checkbox-fieldset-label {
  color:rgba(0, 84, 165, 1);
}
.checkbox-fieldset-label {
  top:-0.65em;
  left:.5em;
}
.checkbox-input-label {
  display:block;
  position:relative;
  padding:0 0 0 1.8em;
  margin:0 0 .7em 0;
  cursor:pointer;
  font-size:1em;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  color:var(--blue);
}
.checkbox-input-label input{
  opacity:0;
  cursor:pointer;
  position:absolute;
}
.checkmark{
  position:absolute;
  top:2px;
  left:2.5px;
  height:15px;
  width:15px;
  background-color:transparent;
  border:1px solid var(--blue)
}
.checkbox-input-label:hover input ~ .checkmark{
  background-color:var(--mblue);
}
.checkmark:after{
  content:"";
  position:absolute;
  display:none;
}
.checkbox-input-label input:checked ~ .checkmark:after {
  display:block
}
.checkbox-input-label .checkmark:after {
    top:-0.2px;
    left:4.05px;
    width:3px;
    height:10px;
    border:solid var(--blue);
    border-width:0 1px 1px 0;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}

input[type=text],
input[type=number],
input[type=email],
input[type=tel],
select,
textarea {
  width:100%;
  padding:.8em;
  border:1px solid rgba(0, 84, 165,0.3);
  border-radius:0;
  font-size:1em;
  color:var(--blue);
  font-family:'Mulish', sans-serif;
}
select:focus,
input[type=number]:focus, 
input[type=text]:focus, 
input[type=email]:focus, 
input[type=tel]:focus, 
textarea:focus {
  border:1px solid rgba(0, 84, 165, 1);
}
textarea {
  resize:none;
  height:8em;
}
.submit-btn {
  width:100%;
  margin:4em 0 3em 0;
  padding:1em;
  font-weight:400;
  letter-spacing:1px; 
}

@media only screen and (min-width:720px) {
  :root {
    --primary:2.25em;
    --secondary:1.625em; 
    --nav:1.2em; 
    --small:0.8em;
  }
  header {
    padding:1em 0;
    grid-template-columns:auto auto;
  }
  .header-home {
    border-bottom:0;
  }
  .logo {
    margin:0.77em 0 .4em 10vw;
    font-size:var(--nav);
  }
  .header-nav {
    display:grid;
    margin:0 10vw 0 0;
    text-align:right;
    font-size:var(--nav);
  }
  .header-nav ul li,
  .dropdown-btn {
    display:inline;
    margin:0 0 0 2.8em;
  }
  .header-nav ul li a,
  .dropdown-btn {
    color:var(--blue);
    opacity:1;
    cursor:pointer;
  }
  .dropdown-btn,
  .dropdown-btn:hover {
    background:none;
    color:var(--blue);
  }
  .nav-dropdown {
    position:relative;
    display:initial;
  }
  .dropdown {
    width:100vw;
    position:fixed;
    left:0;
    z-index:2;
    grid-template-columns:1fr 1fr 1fr;
    margin:0;
    padding:3em 10vw 1em 10vw;
    background-color:#FFF;
    border-bottom:1px solid var(--blue);
    text-align:left;
    line-height:1.2em;
  } 
  .dropdown-home {
    padding:2em 10vw 1em 10vw;
  }
  .dropdown ul li {
    margin:1.1em 0 0 0;
  }
  .dropdown h3 {
    margin-top:2em;
    font-size:1em;
    font-weight:700;
  }
  .dropdown-cl1,
  .dropdown-cl2,
  .dropdown-cl3 {
    height:100%;
    padding:1.5em 1em 2em 1em;
  }
  .dropdown-cl1 {grid-column:1/2}
  .dropdown-cl2 {grid-column:2/3}
  .dropdown-cl3 {grid-column:3/4}
  .show {display:grid}
  .nav-menu,
  .menu-btn {
    display:none;
  }
  footer {
    padding:2em 10vw;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    font-size:var(--small);
  }
  .footer-l ul li {
    display:inline;
    margin:0 2em 0 0;
  } 
  .footer-r {
    justify-self:end;
    text-align:right;
  }
  .footer-page {
    grid-template-columns:auto;
  }
  .landing p br {
    display:initial;
  }
  .landing-btn {
    align-self:start;
    margin-top: 2em;
  }
  .main-page { 
   padding:23vh 10vw;
  }
  .process,
  .error-page {
    padding:23vh 18vw;
  }
  textarea {
    height:10em;
  }
}
@media only screen and (min-width:1000px) {
  :root {
    --secondary:1.625em; 
  }
  .landing {
    padding:15vh 10vw 5vw 10vw;
  }
  .landing h1 {
    font-size:5vmax;
  }
  .process,
  .error-page {
    padding:23vh 25vw;
  }
}