body{
  margin-top:10em;
  background-color:#fafafa;
  color:#404040;
  font-family: Arial, sans-serif;
  font-size: 16px;
}
h1{
  font-size: 32px;
  margin-top: 0;
  text-transform: uppercase;
}
h2{
  font-size:24px;
  margin-bottom: 0;
  text-transform: uppercase;
}
a{
  color:#00BFFF;
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
ul{
  padding-left:1.5em;
}
li{
  font-weight:bold;
  line-height: 2em;
  font-size: 16px;
}
.banner{
  width:750px;
  margin:0 auto;
  display:flex;
  justify-content: space-between;
  background-color: #fff;
  padding:25px;
}
.banner img{
  width:50%;
}
.text{
  margin-left:10px;
  width:45%;
}
.meta-text{
  width:750px;
  padding:0 25px;
  margin:1em auto;
}
.margin{
  text-transform: none;
  margin-top:2.3em;
}

@media only screen and (max-width: 800px) {
  body{
    margin-top:5em;
  }
  .banner, .meta-text{
    width:500px;
  }
  h1{
   font-size:18px;
  }
  h2{
    font-size:16px;
  }
  .banner img{
    width:300px;
  }
  .text{
    width:40%;
  }
  .margin{
    margin-top:3.5em;

    }

}
@media only screen and (max-width: 576px) {
  h1{
    margin-top:1em;
    font-size:18px;
  }
  h2{
    font-size:16px;
  }
  .banner{
    width:400px;
    flex-direction: column;
    background-color: transparent;
  }
  .banner img{
    width:400px;
    margin:0 auto;
  }
  .text{
    width: 400px;
    margin: 1em  auto 0 auto;
  }
  .meta-text{
    width:400px;
    margin: 0 auto;
  }
  .margin{
    margin-top:2em;
  }
}
@media only screen and (max-width: 576px){
   .banner, .banner img, .text, .meta-text{
    width:300px;
   }
   body{
    margin-top:0;
   }

}