@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
 font-family: "Open Sans", sans-serif;
 font-size: 1.125em;
 background-color: #c7ffde;
 display: flex;
}

div#wrapper{
 max-width: 80%;
 margin: auto;
}

h1{
 text-align: center;
 font-size: 2em;
 margin: 0px;
}

h2{margin-top: 0px;}

h2#mainpage {text-align: center; font-size: 1.4em; width: 53vw; margin: 0 auto;}


h3 {margin-bottom: 0px;}

p{
 text-align: justify;
}

h3 + p, h3 + ol {margin-top: 0.5em;}

li {margin-bottom: 0.3em;}

span.nw{
white-space: nowrap;
}

.half{
 max-width: calc(50% - 20px);
}

#opening{
 float: left;
}

div#opening img {
display: block; width: 25vw; max-width: 200px; margin-top: .4em; margin-left: auto; margin-right: auto;
border: 2px solid #065; border-radius: 5px;
background-color: #ffffb9;
}

#fullform{
 margin: 20px 10px 15px 10px;
 float: right;
 position: sticky;
 position: -webkit-sticky;
 top: 0;
}

.formpart, #mc_embed_signup{
 border-left: 1px solid black;
 border-right: 1px solid black;
 padding-left: 10px;
 padding-right: 10px;
 margin: auto;
 max-width: 100%;
}

#formtop{
 border-top: 1px solid black;
 padding-top: 10px;
 padding-bottom: 10px;
 height: 55px;
 margin-bottom: 0px;
 background-color: #365;
 background: linear-gradient(to right, #365, #354);
 color: white;
 border-radius: 5px 5px 0px 0px;
}

#arrow{
 margin: -10px;
 height: 75px;
 left: 0px;
 top: 0px;
 float: left;
}

p#u50{
 margin: 0;
 font-size: 25pt;
 text-align: center;
 transform: translate(-5px,4px);
}

#formtextbox {background-color: white; padding-top: .3em; padding-bottom: 1.5em;}

h2#form {margin-top: 0; margin-bottom: .1em;}

#formtext {margin-top: 0; margin-bottom: 0;}


div#description{
 background-color: white;
 padding-top: 10px;
 padding-bottom: 10px;
 margin-bottom: 0px;
}

p#descriptext{
 font-size: 12pt;
 margin: 0px;
}

#mc_embed_signup{
 background-color: white;
 padding-top: 5px;
 padding-bottom: 10px;
}

#mc_embed_signup_scroll{
 font-family: "Open Sans";
 font-size: 16px;
}

.indicates-required{
 color:#555;
 position: relative;
 top: -1em;
 float: right;
}


span.asterisk{
 color: red;
}

input{font-family: "Open Sans";}

input[type="text"], input[type="email"], select, textarea{
 box-sizing: border-box;
 width: 100%;
 font-size: 1em;
 padding: 7px 7px;
 margin: 8px 0;
 border: 1px solid black;
 border-radius: 5px;
 background-color: white;
 transition: border .15s;
}

input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus{
 border: 1px solid #076;
}

div.input-group label{
 font-size: 18px;
}

ul{
 list-style: none;
 margin: 0;
 padding: 5px;
}

li label {margin-left: 3pt;}

input[type="submit"], button{
 display: block;
 font-size: 18px;
 padding: 5px 7px;
 border-radius: 5px;
 background-color: #003328;
 color: white;
 width: 80%;
 margin: 8px auto;
}

input[type="submit"]:hover, button:hover{
 background-color: #002f25;
 color: #ddd;
}

input[type="submit"]:active, button:active{
 background-color: #00473e;
}

#powered{
 font-size: 14px;
}

p#thanks{
 text-align:center;
}

span.big{
 font-size: 20px;
}

div#priv{
 background-color: white;
 border-bottom: 1px solid black;
 padding-top: 0px;
 margin-top: -20px;
 border-radius: 0px 0px 5px 5px;
}

p#priv{
 margin-bottom: 8px;
}

p.foot{
 width: 100%;
 text-align:center;
 color: #00352d;
 font-size: 0.9em;
}

/*----------RESPONSIVE DESIGN STARTS HERE----------*/
@media only screen and (max-width: 1200px) {
 div#wrapper{
  max-width: 80%;
  margin: auto;
 }

 p#u50{
 font-size: 20pt;
 margin-top: 3px;
 transform: translate(-3%,-3px);
 }

 #arrow{
 height: 60px;
 }

 #formtop{
 height: 40px;
 }
}

@media only screen and (max-width: 900px) {
 h1{font-size: 22pt;} 

 h2,h2#mainpage{
  font-size: 15pt;
 }

 p#u50{
 font-size: 17pt;
 margin-top: 3px;
 transform: translate(-2%,-4px);
 }

 #arrow{
 height: 50px;
 }

 #formtop{
 height: 30px;
 }

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


 .half{
  max-width: 100%;
  margin: auto;
 }

 #opening, #fullform{
  float: none;
 }

 div#opening img {margin-top: .2em;}

 p#u50{
 font-size: 17pt;
 margin-top: 0px;
 transform: translate(-2%,-2px);
 }
}

@media only screen and (max-width: 400px) {
 h1 {font-size: 7.5vw;}
 h2#mainpage {font-size: 5vw;}
}