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;
  }
  
}

/* Layout
------------------------------------------*/

.container,
footer {
  margin: 0 auto;
  width: 88%;
  max-width: 1080px;
}

.wrapper {
  padding: 1em 0;
}

/* Section at top of impacts page
------------------------------------------*/
.start-impacts {
    background-color: #314455;
    padding:2%;
    width:80%;
    margin-left:8%;
    top:18%;
    position:relative;
    padding-bottom:10%;
    margin-bottom:-1%;
}
.start-impacts h1 {
    color:white;
    text-align: center;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 4vw;
}

.start-impacts p {
    color:white;
    text-align: center;
    font-family:'Lato', sans-serif;
    font-size:1.5vw;
    padding-left:3%;
    padding-right:3%;
    padding-bottom:2%;
}

@media (max-width:67em) {
  .start-impacts p {
    margin-top:-2%;
    font-size:20px;
  }

  .start-impacts h1 {
    font-size: 40px;
  }
}

@media (max-width: 50em) {
  .start-impacts h1 {
    margin: 0.2% 0.2% 0.5% 0.2%;
    font-size: 45px;
  }

  .start-impacts p {
    margin-bottom: 10%;
    margin-top: 5%;
    font-size:20px;
  }

}

@media (max-width: 52em) {
  .wrapper {
    margin-left: 10%;
  }
}

@media (max-width: 40em) {
  .start-impacts h1 {
    margin: 0.2% 0.2% 0.5% 0.2%;
  }

  .start-impacts p {
    margin-bottom: 20%;
  }

  .wrapper {
    margin-left:18%;
  }
}

@media (max-width: 40em) {
  .start-impacts h1 {
    margin: 0.2% 0.2% 0.5% 0.2%;
  }

  .start-impacts p {
    margin-bottom: 20%;
  }

  .wrapper {
    margin-left:18%;
  }
}

@media (max-width: 30em) {

  .wrapper {
    margin-left:10%;
  }

  .start-impacts p {
    margin-bottom: 30%;
  }

}

/* Gallery
------------------------------------------*/
.gallery {
  display:flex;
  flex-wrap:wrap;
  position:relative;
  margin-left:5%;
}

.gallery a {
  margin: 1em 1em 0 0;
  position:relative;
  overflow:hidden;
}

.gallery span {
  position:absolute;
  bottom: -71px;
  left: 0;
  text-align: center;
  width: 100%;
  background: rgba(250,250,250,0.8);
  padding: .7em 0 1.1em 0;
  font-size: 1.5em;
  transition: 1s;
  color:black;
  font-family: 'Alegreya Sans SC', sans-serif;
}

.gallery a:hover span {
  bottom: 0;
}

.gallery a,
.gallery img {
  display:block;
} /* gets rid of the line at the bottom of box */

/* Inflation Section
------------------------------------------*/

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


.inflation {
    position: relative;
    background-color: #314455;
    height:40%;
    margin-top:-5%;
}

.inflation h2 {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 4vw;
    position:relative;
    top:35%;
    margin-right:5%;
    color: white;
    text-align: center;
    width:35%;
}

.inflation p {
    font-family: 'Lato', sans-serif;
    position: absolute;
    top:18%;
    left: 35%;
    width:55%;
    color: white;
    font-size: 1.4vw;
    text-align: justify;
}

/* Inflation Section Responsive
------------------------------------------*/
@media (max-width: 70em) {
    .inflation h2 {
      font-size:55px;
      margin-top:2%;
    }

    .container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    
    .secondary {
      box-sizing: border-box;
      width: 36%;
      border-radius: 5px;
      padding: .5em;
      border: 1px dotted red;
    }

    .inflation {
        height:50%;
        padding-top:1%;
    }

    .inflation p {
        margin-top: 2%;
        font-size: 20px;
    }
  }

@media (max-width:60em) {
  .inflation h2 {
    font-size:55px;
    margin-top:2%;
  }
  
  .inflation p {
    margin-top: -1%;
    font-size: 20px;
    margin-bottom: 2%;
  }
}

@media (max-width:52em) {
  .inflation h2 {
    font-size:55px;
    margin-top:-15%;
    left:30%;
  }
  
  .inflation p {
    margin-top: 5%;
    font-size: 20px;
    margin-bottom: 2%;
    left:7%;
    width:85%;
  }
}

@media (max-width:37em) {
  .inflation h2 {
    font-size:55px;
    margin-top:-20%;
    left:30%;
  }
  
  .inflation p {
    margin-top: 8%;
    font-size: 20px;
    margin-bottom: 2%;
    left:7%;
    width:85%;
  }

  .inflation {
    height:55%;
  }
}

@media (max-width:34em) {
  .inflation h2 {
    font-size:55px;
    margin-top:-25%;
    left:30%;
  }
  
  .inflation p {
    margin-top: 5%;
    font-size: 20px;
    margin-bottom: 2%;
    left:7%;
    width:85%;
  }

  .inflation {
    height:65%;
  }
}

@media (max-width:30em) {
  .inflation h2 {
    font-size:55px;
    margin-top:-50%;
    left:20%;
  }
  
  .inflation p {
    margin-top: -2%;
    font-size: 20px;
    margin-bottom: 2%;
    left:7%;
    width:85%;
  }

  .inflation {
    height:70%;
  }
}



/* Food Shortage Section
------------------------------------------*/
.parallax-food {
    /* The image used */
    background-image: url('food-shortage.png');
  
    /* Full height */
    height: 80%; 
    top:15%;
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
  }

.food-short {
    position: relative;
    top:8%;
    background-color: #314455;
    height: 40%;
    margin-top: -9%;
}

.food-short h2 {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 4vw;
    position:relative;
    top:30%;
    width: 15%;
    left: 10%;
    text-align: center;
    color: white;
}

.food-short p {
    font-family: 'Lato', sans-serif;
    position: relative;
    top:-25%;
    left: 35%;
    width:55%;
    font-size: 1.4vw;
    padding-bottom: 5%;
    text-align: justify;
    color: white;
}

/* Food Shortage Section Responsive
------------------------------------------*/
@media (max-width: 75em) {
  .food-short h2 {
    font-size:55px;
    margin-top:2%;
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .secondary {
    box-sizing: border-box;
    width: 36%;
    border-radius: 5px;
    padding: .5em;
    border: 1px dotted red;
  }

  .food-short {
      height:50%;
      padding-top:1%;
  }

  .food-short p {
      margin-top: 2%;
      font-size: 20px;
  }
}

@media (max-width:60em) {
  .food-short h2 {
    font-size:55px;
    margin-top:2%;
    left:5%;
    text-align: center;
  }

  .food-short p {
    margin-top: -1%;
    font-size: 20px;
    margin-bottom: 2%;
  }
}

@media (max-width:52em) {
  .food-short h2 {
    font-size:55px;
    margin-top:-7%;
    left:15%;
    width:70%;
  }

  .food-short p {
    margin-top: 28%;
    font-size: 20px;
    left:7%;
    width:85%;
  }

  br {
    display:none;
  }

  .food-short {
    height:47%;
    margin-top:-15%;
  }

}

@media (max-width:43em) {
  .food-short h2 {
    font-size:55px;
    margin-top:-7%;
    left:15%;
    width:70%;
  }

  .food-short p {
    margin-top: 32%;
    font-size: 20px;
    left:7%;
    width:85%;
  }

}

@media (max-width:37em) {
  .food-short h2 {
    font-size:55px;
    margin-top:-10%;
    left:18%;
  }

  .food-short p {
    position:relative;
    margin-top: 45%;
    font-size: 20px;
    margin-bottom: 2%;
    left:7%;
    width:85%;
  }

  .food-short {
    height:55%;
  }
}

@media (max-width:34em) {
.food-short h2 {
  font-size:55px;
  margin-top:-20%;
  left:15%;
}

.food-short p {
  position:relative;
  margin-top: 55%;
  font-size: 20px;
  margin-bottom: 2%;
  left:7%;
  width:85%;
}

.food-short {
  height:65%;
}
}

@media (max-width:30em) {
  .food-short h2 {
    font-size:55px;
    margin-top:-35%;
    left:12%;
  }

  .food-short p {
    position: relative;
    margin-top: 93%;
    font-size: 20px;
    margin-bottom: 2%;
    left:7%;
    width:85%;
  }

  .food-short {
    height:67%;
    margin-top:-20%;
  }

}

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

.refugee {
    position: relative;
    top:5%;
    height: 40%;
    background: #314455;
    margin-top: -13%;
}


.refugee h2 {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 4vw;
    position:relative;
    top:20%;
    padding: 2% 5% 0% 1%;
    color: white;
    width: 35%;
    text-align: center;
}

.refugee p {
    font-family: 'Lato', sans-serif;
    position: absolute;
    top:13%;
    left: 35%;
    width:55%;
    color: white;
    font-size: 1.4vw;
    text-align: justify;
}

/* Refugee Section Responsive
------------------------------------------*/
@media (max-width: 75em) {
  .refugee h2 {
    font-size:55px;
    margin-top:2%;
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .secondary {
    box-sizing: border-box;
    width: 36%;
    border-radius: 5px;
    padding: .5em;
    border: 1px dotted red;
  }

  .refugee {
      height:50%;
      padding-top:1%;
  }

  .refugee p {
      margin-top: 2%;
      font-size: 20px;
  }
}

@media (max-width:60em) {
  .refugee h2 {
    font-size:55px;
    margin-top:2%;
    left:0%;
    text-align: center;
  }

  .refugee p {
    margin-top: -1%;
    font-size: 20px;
    margin-bottom: 2%;
  }
}

@media (max-width:52em) {
  .refugee h2 {
    font-size:55px;
    margin-top:-10%;
    left:15%;
    width:70%;
  }

  .refugee p {
    margin-top: 6%;
    font-size: 20px;
    left:7%;
    width:85%;
  }

  br {
    display:none;
  }

  .refugee {
    height:47%;
    margin-top:-15%;
  }

}

@media (max-width:43em) {
  .refugee h2 {
    font-size:55px;
    margin-top:-12%;
    left:15%;
    width:70%;
  }

  .refugee p {
    margin-top: 6%;
    font-size: 20px;
    left:7%;
    width:85%;
  }

  .refugee {
    height:54%;
    margin-top:-15%;
  }

}

@media (max-width:37em) {
  .refugee h2 {
    font-size:55px;
    margin-top:-15%;
    left:15%;
  }

  .refugee p {
    position:relative;
    margin-top: -2%;
    font-size: 20px;
    margin-bottom: 2%;
    left:7%;
    width:85%;
  }

  .refugee {
    height:58%;
  }
}

@media (max-width:34em) {
.refugee h2 {
  font-size:55px;
  margin-top:-20%;
  left:15%;
}

.refugee p {
  position:relative;
  margin-top: 5%;
  font-size: 20px;
  margin-bottom: 2%;
  left:7%;
  width:85%;
}

.refugee {
  height:63%;
}
}

@media (max-width:30em) {
  .refugee h2 {
    font-size:55px;
    margin-top:-33%;
    left:12%;
  }

  .refugee p {
    position: relative;
    margin-top: 3%;
    font-size: 20px;
    margin-bottom: 2%;
    left:7%;
    width:85%;
  }

  .refugee {
    height:77%;
    margin-top:-20%;
  }

}

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

.supply {
    position: relative;
    top:10%;
    background-color: #314455;
    height: 30%;
    margin-top:-13%;
    padding: 2%;
}
.supply h2 {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 4vw;
    position:relative;
    top:2%;
    margin-right:5%;
    color: white;
    text-align: center;
    width: 35%;
}

.supply p {
    font-family: 'Lato', sans-serif;
    position: absolute;
    top:20%;
    left: 37%;
    width:55%;
    color: white;
    margin-bottom: 2%;
    font-size: 1.4vw;
    text-align: justify;
}

/* Supply Chain Section Responsive
------------------------------------------*/
@media (max-width: 75em) {
  .supply h2 {
    font-size:55px;
    margin-top:5%;
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .secondary {
    box-sizing: border-box;
    width: 36%;
    border-radius: 5px;
    padding: .5em;
    border: 1px dotted red;
  }

  .supply {
    height:33%;
  }

  .supply p {
    margin-top: 0%;
    font-size: 20px;
  }
}

@media (max-width: 65em) {
  .supply {
    height:35%;
    top:-2%;
  }

  .supply h2 {
    top:7%;
  }
}

@media (max-width:60em) {
  .supply h2 {
    font-size:55px;
    margin-top:3%;
    left:7%;
    text-align: center;
    width:20%;
  }

  .supply p {
    margin-top: -2%;
    font-size: 20px;
    margin-bottom: 2%;
  }
}

@media (max-width:52em) {
  .supply h2 {
    font-size:55px;
    margin-top:2%;
    left:15%;
    width:70%;
  }

  .supply p {
    margin-top: 8%;
    font-size: 20px;
    left:7%;
    width:85%;
  }

  br {
    display:none;
  }

  .supply {
    height:47%;
    margin-top:-15%;
  }

}

@media (max-width:43em) {
  .supply h2 {
    font-size:55px;
    margin-top:2%;
    left:5%;
    width:90%;
  }

  .supply p {
    margin-top: 8%;
    font-size: 20px;
    left:7%;
    width:85%;
  }

  .supply {
    height:48%;
    margin-top:-15%;
  }

}

@media (max-width:37em) {
  .supply h2 {
    font-size:55px;
    margin-top:1%;
    left:5%;
  }

  .supply p {
    margin-top: 7%;
    font-size: 20px;
    margin-bottom: 2%;
    left:7%;
    width:85%;
  }

  .supply {
    height:50%;
  }
}

@media (max-width:34em) {
.supply h2 {
  font-size:55px;
  margin-top:2%;
  left:-1%;
  width:100%;
}

.supply p {
  margin-top: 7%;
  font-size: 20px;
  margin-bottom: 2%;
  left:7%;
  width:85%;
}

.supply {
  height:55%;
}
}

@media (max-width:30em) {
  .supply h2 {
    font-size:55px;
    margin-top:-1%;
    left:0%;
  }

  .supply p {
    margin-top: 18%;
    font-size: 20px;
    margin-bottom: 2%;
    left:7%;
    width:85%;
  }

  .supply {
    height:70%;
    margin-top:-20%;
  }

}