html {
    height:100%;
}

body.about, body.impacts, body.news, body.help, body.home {
    background-color: #97AABD;
    scroll-behavior: smooth;
    height:100%;
    
}

/* Navigation 
------------------------------------------*/

.title{
    display: inline;
    margin-right: 10px;
    font-size: 1.8vw;
    font-family: 'Amaranth', sans-serif;
    color:black;
}

.atitle{
    display: inline;
    margin-right: 10px;
    font-size: 1.8vw;
    font-family: 'Amaranth', sans-serif;
    color: white;
}
  
a {
    color:  #8c9497;
  }
  
  /* header */
  /* nav color*/
  .header {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    position: fixed;
    width: 100%;
    z-index: 3;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 1.5vw;
  }
  
  .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;

  }
  
  .header li a {
    display: block;
    padding: 20px 20px;

    text-decoration: none;
    color: white;
 
  }
  
  .header li a:hover,
  .header .menu-btn:hover {
    background-color: #ccd3d9;
  }
  
  .header .active {
    display: block;
    float: left;
    padding: 13px 20px;
    text-decoration: none;
    color: white;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 2.4vw;
  }
  
  /* menu */
  
  .header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }
  
  /* menu icon */
  
  .header .menu-icon {
    cursor: pointer;
    display: inline-block;
  
    padding: 28px 20px;
    position: relative;
    user-select: none;
  }
  
  .header .menu-icon .navicon {
    background:  white;
    display: block;
    height: 2px;
    position: relative;
    transition: .2s ease-out;
    width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
    background:  white;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  
  .header .menu-icon .navicon:before {
    top: 5px;
  }
  
  .header .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
  .header .menu-btn {
    display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  
@media (min-width: 50em) {
    .header li {
      float: left;
    }
    .header li a {
      padding: 20px 30px;
    }

    .header .menu {
        clear: none;
        float: right;
        max-height: none;
    }

    .header .menu-icon {
        display: none;
    }

    header {
        background-color: rgba(255, 255, 255, 0.4);
        background: transparent;
    }
}

@media (max-width:50em) {
  .header .active {
    font-size: 28px;
  }
}

@media (max-width:70em) {
  .header .active {
    font-size: 28px;
  }

  .header .menu {
    font-size: 18px;
  }
  
}

/* Home Page
------------------------------------------*/

 .main {
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    color: black;
    background-attachment: fixed;

}

 .main h1{
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 4.2vw;
    position:absolute;
    top: 14%;
    padding-top: 10%;
    left: 46%;
    color: black;
    text-align: center;
 }

 .main p{
    font-family: 'Lato', sans-serif;
    font-size: 1.9vw;
    position: absolute;
    top: 29%;
    padding-top:10%;
    left: 42%;
    margin:0%;
    width:45%;
    text-align: center;
 }

 .learnbutton {
    position:absolute;
    top:68%;
    left:59%;
    color: white;
    padding: 16px 32px;
    margin-top: 4% !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border: 2px solid black;
    background-color: white;
 }

 .learnbutton a {
     color: black;
     text-decoration: none;
 }

 .learnbutton:hover {
    background-color: black;
    color: white;
    text-decoration:none;
 }

 .learnbutton:hover a {
     color: white;
     text-decoration: none;
 }

@media (max-width:80em) {
    .learnbutton {
        top:63%;
        left:58%;
    }
}

@media (max-width:75em) {
    .learnbutton {
        top:60%;
        left:58%;
    }
}

 @media (max-width:65em) {
     .main p {
         padding-top: 7%;
         font-size: 20px;
         width: 50%;
         left:40%;
     }

     .learnbutton {
         top: 52%;
         left:57%;
     }
 }

 @media (max-width: 53em){
     .main p {
         padding-top: 5%;
         font-size: 20px;
     }

     .learnbutton {
         top: 53%;
         left:55%;
     }
 }

 @media (max-width:46em) {
     .learnbutton {
         top:56%;
     }
 }

 @media (max-width: 45em) {
     .main p {
         padding-top:3%;
         top:57%;
         left:20%;
         font-size: 20px;
         width:65%;
     }

     .main h1 {
         font-size: 45px;
         width:45%;
         padding-top:10%;
     }

     .learnbutton {
         top:78%;
         left:40%;
     }
 }

 @media (max-width: 38em) {
     .main p {
         top:50%;
         width: 75%;
         left:10%;
     }

     .learnbutton {
         top: 72%;
         left:32%;
     }
 }

 @media (max-width: 30em) {
    .main p {
        top:40%;
        width: 75%;
        left:10%;
    }

    .learnbutton {
        top: 72%;
        left:26%;
    }

    .main h1 {
        top:8%;
    }
}



 img {
    width:27%;
    height:auto;
    position:absolute;
    top:13%;
    left:5%;
 }



.home-image {
    width:50%;
}

.home-text {
    width:50%;
}

.main {
    margin-right: 10%;
    margin-bottom: 10%;

}



/* About Page
------------------------------------------*/
    /* Parallax 
    ------------------------------------------*/

    .parallax {
        /* The image used */
        background-image: url('parallax.jpg');
    
        /* Full height */
        height: 100%; 
        top:15%;
    
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position:center;
        background-repeat: no-repeat;
        background-size: cover;
    }

 .how {
    margin:2%;
    left: 5%;
 }

 .how h2{
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 2.8vw;
    position:absolute;
    top: 110%;
    left: 5%;
    color: black;
    text-align: left;
 }

 .how p{
    font-family: 'Lato', sans-serif;
    font-size: 1.2vw;
    position: absolute;
    top: 122%;
    left: 5%;
    margin:0%;
    width:33%;
    text-align: justify;
 }

 .how img {
    width:37%;
    height:auto;
    position:absolute;
    top:115%;
    left:55%;
 }

 .why h2{
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 2.8vw;
    position:absolute;
    top: 160%;
    left: 74.5%;
    color: black;
    text-align: justify;
    padding-right: 3%;
    width:40%;
 }

 .why p{
    font-family: 'Lato', sans-serif;
    font-size: 1.2vw;
    position: absolute;
    top: 172%;
    left: 55%;
    margin:0%;
    width:37%;
    text-align: justify;
 }

 .why img {
    width:33%;
    height:auto;
    position:absolute;
    top:160%;
    left:5%;
    padding-bottom: 1%;
 }

 @media (max-width:80em) {    
    .why img {
        top:153%;
    }

    .why h2 {
        top:150%;
    }

    .why p {
        top:160%;
    }
}

@media (max-width:75em) {
    .why img {
        top:150%;
    }
}

@media (max-width:65em) {
    .why p, .how p {
        font-size: 20px;
    }

    .how p {
        width: 80%;
        margin-left: 5%;
    }

    .why p {
        width:80%;
        left: 10%;
        top:205%;
    }

    .why h2, .how h2 {
        font-size: 45px;
        left:36%;
        width:80%;
    }

    .why h2 {
        top:190%;
    }

    .how img {
        top: 160%;
    }

    .why img {
        top:160%;
        left:10%;
    }
}

@media (max-width:43em) {
    .how p {
        width: 80%;
        margin-left: 5%;
    }

    .why p {
        width:80%;
        left: 10%;
        top:205%;
        margin-bottom: 2%;
    }

    .why h2, .how h2 {
        font-size: 45px;
        left:28%;
        width:80%;
    }

    .why h2 {
        top:190%;
    }

    .how img {
        top: 168%;
    }

    .why img {
        top:168%;
        left:10%;
    }
}

@media (max-width:39em) {
    .how p {
        width: 80%;
        margin-left: 5%;
    }

    .how img {
        top: 173%;
    }

    .why img {
        top:173%;
        left:10%;
    }

    .why h2 {
        top:193%;
        left:23%;
    }
}

@media (max-width:33em) {
    .how p {
        width: 80%;
        margin-left: 5%;
    }

    .how img {
        top: 178%;
    }

    .why img {
        top:178%;
        left:10%;
    }

    .why {
        padding-bottom:5%;
    }
}

@media (max-width:30em) {
    .how p {
        width: 80%;
        margin-left: 5%;
    }

    .how img {
        top: 235%;
        width:70%;
        height: auto;
        left: 13%;
    }

    .why img {
        top:200%;
        left:13%;
        width:70%;
        height:auto
    }

    .how h2 {
        left:13%;
    }

    .why h2 {
        left: 13%;
        top:260%
    }

    .why p {
        top:275%;
    }

}

/* Help Page
------------------------------------------*/

/* Parallax 
    ------------------------------------------*/

    .parallax-help {
        /* The image used */
        background-image: url('help-background6.png');
    
        /* Full height */
        height: 100%; 
        top:0%;
    
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position:center;
        background-repeat: no-repeat;
        background-size:cover;
    }

.main-help {
    height:100%;
}

.main-help h1 {
    position:absolute;
    top:125%;
    text-align:center;
    left:35%;
    color: white;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 5vw;
}

.main-help p {
    position:absolute;
    top:145%;
    left: 20%;
    width: 60%;
    text-align: center;
    color:white;
    font-family: 'Lato', sans-serif;
    font-size: 1.8vw;
}

.helpbutton {
    position:absolute;
    top:175%;
    left:42%;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border: 2px solid black;
    background-color: white;
 }

.helpbutton a {
    color: black;
    text-decoration: none;
}

.helpbutton:hover {
   background-color: black;
   color: white;
   text-decoration:none;
}

.helpbutton:hover a {
    color: white;
    text-decoration: none;
}

@media (max-width:85em) {
    .main-help h1 {
        top:125%;
    }

    .main-help p {
        top:142%;
    }

    .helpbutton {
        top: 165%;
    }
}

@media (max-width:76em) {
    .parallax-help {
        top:-5%;
    }
}


@media (max-width:73em) {
    .main-help h1 {
        top:125%;
        font-size: 60px;
    }

    .main-help p {
        top:140%;
        font-size: 23px;
    }

    .helpbutton {
        top: 168%;
        left:42%;
    }
}


@media (max-width:70em) {
    .main-help h1 {
        top:125%;
    }

    .main-help p {
        top:140%;
    }

    .helpbutton {
        top: 168%;
        left:41%;
    }  
}

@media (max-width:60em) {
    .main-help h1 {
        top:120%;
        left:33%;
    }

    .main-help p {
        top:135%;
    }

    .helpbutton {
        top: 168%;
        left:40%;
    }
}

@media (max-width:49em) {
    .main-help h1 {
        top:120%;
        left:30%;
    }

    .main-help p {
        top:135%;
    }

    .helpbutton {
        top: 172%;
        left:38%;
    }
}

@media (max-width:43em) {
    .main-help h1 {
        top:120%;
        left:26%;
    }

    .main-help p {
        top:135%;
    }

    .helpbutton {
        top: 175%;
        left:36%;
    }
}

@media (max-width:38em) {
    .main-help h1 {
        top:120%;
        left:24%;
    }

    .main-help p {
        top:135%;
    }

    .helpbutton {
        top: 180%;
        left:36%;
    }
}

@media (max-width:35em) {
    .main-help h1 {
        top:120%;
        left:23%;
    }

    .main-help p {
        top:135%;
    }

    .helpbutton {
        top: 183%;
        left:34%;
    }
}

@media (max-width:33em) {
    .main-help h1 {
        top:120%;
        left:21%;
    }

    .main-help p {
        top:135%;
    }

    .helpbutton {
        top: 185%;
        left:32%;
    }
}

@media (max-width:30em) {
    .main-help h1 {
        top:110%;
        left:10%;
        width:80%;
    }

    .main-help p {
        top:130%;
    }

    .helpbutton {
        top: 187%;
        left:28%;
    }
}