* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    body, html  {
    height: 100vh;
    width:100%;
    font-family: 'Verdana', sans-serif;
    color: white;
    font-size:16px;
    line-height:1.6;
    font-weight: 300;
    background-color: #333333 ;
    }
   
   /*MOBILE FIRST LOAD */
   .grid-main {
   display: grid;
   grid-gap: 1em;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   grid-template-areas:
   /* STACKED **/ 
   "nav"
   "toptext"
   "info"
   "img-L"
   "footer"
   ;
   }
   
   
   /*LARGER SCREENS ONLY*/
   @media  only screen and (min-width: 981px){
   .grid-main{
   display: grid;
   grid-gap: 1em;
   grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
   grid-template-areas:
   "nav              nav                 nav           nav "
   " toptext       toptext          toptext        toptext   "
   " img-L         img-L               info        .   "
   "footer       footer               footer         footer "
   ;
   }
   }
   a{
   text-decoration: none;
   color: #405bff;
   }
   header {
   grid-area: nav;
   }
   .toptext{
   grid-area: toptext;
   background-color: rgba(75, 74, 73, 0.897);
   min-height: 100px;
   text-align: center;
   }
   .toptext h1{
   font-size: 3vw;
   font-weight: 300;
   color:white;
   margin-top: 30px;
   text-align: center;
   }
   .info{
   grid-area: info;
   color: black;
   font-weight: 500;
   border-radius: 3px;
   padding: 5px;
   margin: 20px 0;
   background-color: transparent;
   
   }
   .img-L{
   grid-area: img-L;
   }
   
   /* BACK TO TOP BTN **/
   #myBtn {
   display: none; /* Hidden by default */
   position: fixed; /* Fixed/sticky position */
   bottom: 20px; /* Place the button at the bottom of the page */
   right: 30px; /* Place the button 30px from the right */
   z-index: 999; /* Make sure it does not overlap */
   border: 2px solid white; /* Remove borders */
   outline: none; /* Remove outline */
   background-color: rgb(12, 239, 247); /* Set a background color */
   color: black; /* Text color */
   cursor: pointer; /* Add a mouse pointer on hover */
   padding: 10px; /* Some padding */
   border-radius: 3px;    /* Rounded corners */
   font-size: 16px; /* Increase font size */
   font-weight: 500;
   }
   #myBtn:hover {
   background-color: transparent; /* Add a dark-grey background on hover */
   color: white;
   font-weight: 700;
   border: rgb(75, 73, 73) 2px solid;
   }
   
   
   /* FORM*/
   label {
   color: white;
   font-family: "Lato";
   font-size: 0.9em;
   }
   
   input[type=text], select {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border-radius:var(--border-radius);
   border: 1px solid black;
   box-sizing: border-box;
   color: black;
   font-family: "Lato";
   }
   input[type=email], select {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border-radius: var(--border-radius);
   box-sizing: border-box;
   border: 1px solid black;
   color: black;
   font-family: "Lato";
   }
   /* input[type=submit] {
   font-size: 1em;
   text-decoration: none;
   padding: 10px 30px;
   border: 2px solid white;
   border-radius: 2px;
   cursor: pointer;
   font-weight: 300;
   } */
   input[type=text]::placeholder {
   color: black;
   font-family: "Lato" !important;
   font-size: 0.9em;
   }
   input{
    color: black;
    font-family: "Lato" !important;
    font-size: 0.9em;
   
   }
   textarea {
   width: 100%;
   height: 100px;
   padding: 12px 20px;
   box-sizing: border-box;
   border-radius: var(--border-radius);
   resize: none;
   color: black;
   font-family: "Lato";
   font-size: 0.9em;
   }
   
   /* FORM END */
   
   
   .btn-cta {
    background-color: #90D5FF;
    color: black; 
    cursor: pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 10px ;
    text-decoration:none;
    font-size:1em;
    width:15em;
    height: 40px;
    padding:5px 10px;
    margin:auto;
    border: 1px solid black;
    }
    .btn-cta:hover{ 
      transform: translateY(-0.25em);
      border-color: white;
      color: white;
      background-color: #98A869;
      cursor: pointer;
    
    }
   footer{
   grid-area: footer;
   }
   
   /* NAVIGATION */
   
   .main_h {
   position: fixed;
   top: 0px;
   max-height: 70px;
   z-index: 998;
   width: 100vw;
   padding-top: 20px;
   background: none;
   overflow: hidden;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   opacity: 0;
   top: -100px;
   padding-bottom: 6px;
   font-family: 'Lato',  Arial, sans-serif;
   
   }
   @media only screen and (max-width: 1200px) {
   .main_h {
   padding-top: 25px;
   }
   }
   .open-nav {
   max-height: 400px !important;
   }
   .open-nav .mobile-toggle {
   transform: rotate(-180deg);
   -webkit-transform: rotate(-180deg);
   }
   .sticky {
   background-color: rgb(46, 47, 48);
   opacity: 1;
   top: 0px;
   border-bottom: 1px solid gainsboro;
   padding: 20px;
   }
   .logo {
   width: 50px;
   font-size: 1em;
   color: #0ac4a5;
   text-transform: uppercase;
   float: left;
   display: block;
   margin-top: 0;
   line-height: 1;
   margin-bottom: 10px;
   }
   @media only screen and (max-width: 1200px) {
   .logo {
   float: none;
   }
   }
   nav {
   float: right;
   width: 95%;
   }
   
   @media only screen and (max-width: 1200px) {
   nav {
   width: 100%;
   }
   }
   nav ul {
   list-style: none;
   overflow: hidden;
   text-align: right;
   float: right;
   }
   @media only screen and (max-width: 1200px) {
   nav ul {
   padding-top: 10px;
   margin-bottom: 22px;
   float: left;
   text-align: left;
   width: 100%;
   }
   }
   nav ul li {
   display: inline-block;
   margin-left: 35px  ;
   line-height: 1.5;
   }
   @media only screen and (max-width: 1200px) {
   nav ul li {
   width: 100%;
   padding: 7px 0;
   margin: 0;
   }
   }
   nav ul a {
   color: white;
   text-transform: uppercase;
   font-size: 0.9em;
   }
   nav ul a:hover{
   text-decoration: none;
   color: #0ac4a5;
   }
   .mobile-toggle {
   display: none;
   cursor: pointer;
   font-size: 20px;
   position: absolute;
   right: 22px;
   top: 0;
   width: 30px;
   -webkit-transition: all 200ms ease-in;
   -moz-transition: all 200ms ease-in;
   transition: all 200ms ease-in;
   }
   @media only screen and (max-width: 1200px) {
   .mobile-toggle {
   display: block;
   }
   }
   .mobile-toggle span {
   width: 30px;
   height: 4px;
   margin-bottom: 6px;
   border-radius: 1000px;
   background: white;
   display: block;
   }
   .row {
   width: 100%;
   max-width: 85%;
   margin: 0 auto;
   position: relative;
   padding: 0 2%;
   }
   a {
   text-decoration: none;
   }
   .content {
   padding: 50px 2% 250px;
   }
   @-webkit-keyframes scroll {
   0% {
   opacity: 1;
   -webkit-transform: translateY(0);
   transform: translateY(0);
   }
   100% {
   opacity: 0;
   -webkit-transform: translateY(20px);
   transform: translateY(20px);
   }
   }
   @keyframes scroll {
   0% {
   opacity: 1;
   -webkit-transform: translateY(0);
   -ms-transform: translateY(0);
   transform: translateY(0);
   }
   100% {
   opacity: 0;
   -webkit-transform: translateY(20px);
   -ms-transform: translateY(20px);
   transform: translateY(20px);
   }
   }
   /* NAV END */
   
   /* FOOTER */
   #section-footer{
   grid-area: footer;
   padding: 40px;
   }
   .footer{
   background-color: #212121;
   min-height: 400px;
   bottom: 0px;
   left: 0px;
   line-height: 50px;
   color: #aaa;
   text-align: center;
   width: 100%;
   }
   .footer ul{
   list-style: none;
   }
   .footer li::before {
   content: "."; 
   color: transparent;
   }
   .footer li::before {
   content: ".";
   color: transparent;
   display: inline-block; width: 1em;
   margin-left: -1em;
   font-weight: 700;
   } 
   
   .footer a {
   color: rgb(163, 157, 157);
   }
   .footer a:hover  {
   color: #0ac4a5;
   } 
   .grid2 {
   display: grid;
   align-content: space-around;
   grid-gap: 2em;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   grid-template-rows: auto;
   }
   .subitem3 {
   padding: 40px;
   display: block;
   text-align: center;
   background-color: #212121;
   margin-bottom: 5px;
   color: rgb(163, 157, 157);
   }
   .subitem4 {
   padding: 40px;
   display: block;
   text-align: left;
   background-color: #212121;
   margin-bottom: 5px;
   color: rgb(163, 157, 157);
   text-align: center;
   }
   .subitem5 {
   padding: 40px;
   display: block;
   text-align: left;
   background-color: #212121;
   margin-bottom: 5px;
   color: rgb(163, 157, 157);
   text-align: center;
   }
   .footer h4 {
   text-decoration: underline;
   color: rgb(19, 209, 243);
   font-size: 1.1em;
   
   }
   .subitem3 h2 {
   font-size: 1.1em;
   color: white;
   }
   .subitem3 h3 {
   font-size: 1.1em;
   color: white;
   }
   .subitem4 h4 {
   font-size: 1.1em;
   color: white !important;
   text-decoration: none !important;
   }
   .subitem5 h5 {
   font-size: 1.1em;
   color: white;
   }
   /* FOOTER END */
   
   /*  SEND BUTTON */
   .btn-4 {
   color: black;
   display:flex;
   align-items:center;
   justify-content:center;
   border:rgb(128, 125, 125) solid .2rem;
   text-decoration:none;
   font-size:1em;
   font-weight:bold;
   width:17rem;
   padding:1rem;
   margin:auto;
   cursor: pointer;
   background-color: transparent;
   }
   .btn-4:hover {
   color: white;
   margin:auto; text-decoration: none;
   background-color: rgb(20, 199, 145) ;
   }
   
   
   
   
   
   /* MQ */
   @media  only screen and (max-width: 480px){
   .grid2 {
   display: block;
   
   }
   .toptext h1{
   font-size: 8vw;
   font-weight: 300;
   
   }
   }