.container {
  max-width: 100%;
  height: auto;
  overflow: hidden;
}
.quote-container {
  max-width: 700px;
  height: auto;
  margin: 1em auto;
  padding: 2em 0;
  background-color: #007399;
  border-radius: 10px;
}
h1.header-text {
  max-width: 70%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  font-size: 3em;
  font-family: 'Paytone One', sans-serif;
  line-height: 1em;
}
hr {
  max-width: 80%;
  height: 1px;
  margin-top: 1em;
  background-color: rgba(255, 255, 255, 0.7);
  border: 0;
}
#share {
  max-width: 150px;
  margin-top: 0.8em;
  margin-right: 10%;
  margin-bottom: 2.5em;
  padding: 3px 7px;
  float: right;
  background-color: rgba(255, 255, 255, 0.4);
  font-size: 0.8em;
  font-family: 'Raleway', sans-serif;
  color: #fff;
  font-weight: 400;
  text-align: center;
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
#share a {
  text-decoration: none;
  color: #fff;
}
#quote-body {
  max-width: 75%;
  min-height: 130px;
  margin: 0 auto;
  padding: 0 4em;
  clear: both;
}
q {
  quotes:  """ """;
}
#quote {
  margin: 2em 0;
  color: #fff;
  font-size: 1.5em;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  position: relative;
  text-align: center;
  animation: fadeIn 1s ease 1;
}
@keyframes fadeIn {
  from{
    right: -100%;
    opacity: 0;
  }
  to {
    right: 0;
    opacity 1;
  }
}
.visible {
  display: block;
}
.quote-author {
  display: block;
  margin: 0.5em 0 0;
  font-size: 0.7em;
  text-align: right;
  font-weight: 400;
  font-style: italic;
}
#quote-btn {
  display: block;
  margin: 0 auto;
  padding: 0.5em 1.5em;
  background-color: #ff33cc;
  color: #fff;
  border: none;
  border-radius: 40px;
  box-shadow: inset 0 0 0 0 #00bfff;
  transition: all 0.4s ease-in-out;
  font-size: 1.1em;
}
#quote-btn:hover {
  box-shadow: inset 0 70px 0 0 #00bfff,
    0 10px 15px -10px #333;
  cursor: pointer;
}
.footer {
  margin: 2em 0 1em;
  text-align: center;
}
.footer-copyright {
  margin-bottom: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  color: #007399;
}
.footer-social-btn {
  padding: 0.7em 0;
}
.fa.fa-twitter-square,
.fa.fa-codepen,
.fa.fa-github-square {
  margin: 0 1px;
  color: #007399;
}

/* media queries */

@media screen
    and (min-width: 320px)
    and (max-width: 760px)
    and (orientation: portrait){

      #share {
        font-size: 0.9em;
      }
      .quote-body {
        max-width: 90%;
        padding: 0 0.5em;
      }
      #quote {
        font-size: 1.4em;
      }
      #quote-btn {
        font-size: 1em;
      }
}