/* Global */
.container{
  width:80%;
  overflow:hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0%;
  margin-bottom: 1%;
  vertical-align: middle;
}
/* Newsletter */
#newsletter{
  padding:15px;
  color:#ffff;
  background:#35424a;
  height: 80px;
}

#newsletter h1{
  float: left;
  margin-left: 20%; 
}


/* Boxes */
#boxes{
  margin-top:20px;
  display: flex;
  justify-content: space-around;
  align-content: center;

}

#boxes .box{
  float:left;
  text-align: center;
  width: 22%;
  padding:1.5%;
  
}

#boxes .box img{
  width:220px;
}


.burger div
{
   width: 25px;
   height: 2px;
   background-color: white;
   margin:5px;
   transition: all 0.3s ease;
} 
.burger
{
  display: none;
}

/* Media Queries */
@media(max-width: 768px){
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  #boxes .box,
  article#main-col,
  aside#sidebar{
    float:none;
    text-align:center;
    width:100%;
  }
#boxes .container .box {
width: 95%;
flex-direction: column;

}

  #newsletter button, .quote button, #newsletter input{
    display:block;
    width:100%;
  }

  #newsletter input {
    margin-bottom: 5px;
  }

  #newsletter form {
  display: block;

  
}

#container{
  margin: 0;
}

body{
      overflow-x: hidden;
      overflow-y: scroll;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 2vh;
    background-color: rgba(0,0,0,0.9);
    display: none;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;

  }
.burger{

    display: block !important;
    cursor: pointer;
  }

}

.nav-active
{
  transform: translateX(0%);
  display: flex;
}

@media screen and (max-width: 768px){
#newsletter h1{
  
  margin-left: 0%; 
}
}