/*
 * Affix and center
 */


@media (min-width: 28em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}
@media (min-width: 20em) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0;
  }
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
  /* Start the vertical centering */
  .section-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
}
@media (max-width: 40em) {
  .mastfoot .inner img{
    width: 50%;
    height: auto;
  }
  .footer img.goat{
    width: 36%;
    left: -35%;
  }

}

@media (min-width: 600px) and (max-width: 959px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 52rem;
  }
  .section-wrapper-inner{
    top: 0%;
  }

}

@media (max-width: 600px){
  h1.cover-heading-sub{
    font-size: 3rem;
    line-height: 3rem;
  }
  p.sub-lead{
    font-size: 1.75rem;
  }
  .modal-content h1{
    font-size: 2em;
  }
  .modal-content label{
    font-size: 1.5em;
  }
  .footer .bottombar .wechat{
    font-size: 1em;
  }
}
@media (max-width: 700px) and (orientation: landscape){
.footer img.goat{
    width: 12%;
    left: -40%;
  }
  .footer .bottombar{
    height: 40px;
  }
  .footer .bottombar img{
    height: 20px;
  }
  .cover-container {
    width: 38rem;
  }
  h1.cover-heading-sub{
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-top: 0;
    margin-bottom: 5px;
  }
  h1.cover-heading{
    font-size: 6.5rem;
  }
  h1.cover-heading,p.lead{
    padding: 0;
    margin: 0;
  }
  h2.cover-heading-sub{
        font-size: 2rem;
    font-weight: normal;
    margin: 0;
    padding-top: 10px;
  }
  p.sub-lead{
    font-size: 1.5rem;
  }
  .mastfoot .inner img{
    width: 30%;
  }
  .mastfoot{
    width: 38rem;
  }
  .player-container{
        width: 65%;
    text-align: center;
    margin: 0 auto;
  }
  .section-wrapper-inner{
     vertical-align: top;
    padding-top: 30px;

  }
  .modal-content h1{
    font-size: 2em;
  }
  .modal-content img{
    width: 38%;
  }
  .modal-content .btn-default{
    margin-top: 5px;
  }
  .modal-body{
    padding:0;
  }

}

@media (min-width: 960px){
  .masthead,
  .mastfoot,
  .cover-container {
    width: 72rem;
  }
  /*.section-wrapper-inner{
    top: -5%;
  }*/
}