// https://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm
// Extra small devices (<768px): width: auto (or no width)
// Small Devices (≥768px): width: 750px
// Medium Devices (≥992px): width: 970px
// Larger Devices (≥1200px): width: 1170px

/* Extra Small Devices, Tablets */

.container{
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media only screen and (max-width : 767px) {
  .container {
    width: 'auto';
  }
  #hero .logo{
    left: 2em;
    top: 2em;
  }
  #hero h2{
    font-size: 2em;
  }
  #hero h6{
    font-size: 0.9em;
  }
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .container {
    width: 750px;
  }
  #hero .logo{
    left: 4em;
    top: 2em;
  }
  #hero h2{
    font-size: 4em;
  }
  #hero h6{
    font-size: 1em;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  .container {
    width: 970px;
  }
  #hero .logo{
    left: 6em;
    top: 2.5em;
  }
  #hero h2{
    font-size: 5em;
  }
  #hero h6{
    font-size: 1.2em;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  .container {
    width: 1170px;
  }
  #hero .logo{
    left: 8em;
    top: 2.5em;
  }
  #hero h2{
    font-size: 5.5em;
  }
  #hero h6{
    font-size: 1.4em;
  }
}