/* Custom style for thomas-aillerie.com */

/*in BOOTSTRAP 4 they have extended breakpoints: XS:0 (Extra small screen / phone), SM:544px (Small screen / phone), MD:768px (Medium screen / tablet), LG:992px (Large screen / desktop), XL:1200px (Extra large screen / wide desktop)*/


/* From skeleton.css */
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

body {
  background: black;
  height: 100%;
}

#mission-statement {
  color: black;
  position: asolute;
  top: -20px;
  z-index: -1;
}

.wrapper {
  background-image: url('../images/bratsche_thomas_aillerie.jpg');
  background-size: auto 100%;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: black;
  width:     100%;
  min-width: 100%;
  max-width: 100%;
  height:     100%;
  min-height: 100%;
  max-height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.container {
  width:     100%;
  min-width: 100%;
  max-width: 100%;
  height:     100%;
  min-height: 100%;
  max-height: 100%;
}

.container h1, h2 {
  font-family: 'Seria';
  /* TODO: fallback fonts: font-family: "Times New Roman", Times, serif; */
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
}

.container h1 {
  color: #303030;
  font-size: 2.5rem;
}

.container h2 {
  color: #404040;
  font-size: 2.2rem;
  ccccmargin-bottom: 0.9rem;
}

.container p {
  color: #4E4E4E;
  font-family: 'Serifa BT';
  font-weight: normal;
  font-style: normal;
  font-size: 1.4rem;
  line-height: 1.7rem;
}

.contact {
  color: #444;
  padding-left: 2em;
  padding-top: 1em;
  margin: 0 auto;
  width: 50%;
}

@media only screen and (min-width: 240px) and (max-width: 479px) {
  .contact {
    text-align: left;
    width: 90%;
  }
  .container h1 {
    font-size: 1.8rem;
  }
  .container h2 {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
  }
  .container p {
    font-size: 0.9rem;
    line-height: 1.0rem;
  }
  /*
  .wrapper {
    background-size: auto 110%;
  }*/
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .contact {
    text-align: left;
    width: 90%;
  }
  .container h1 {
    font-size: 1.8rem;
  }
  .container h2 {
    font-size: 1.3rem;
    margin-bottom: 0.7rem;
  }
  .container p {
    font-size: 0.9rem;
    line-height: 1.1rem;
  }
  /*
  .wrapper {
    background-size: auto 110%;
  }*/
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact {
    margin-top: 2.0rem;
    text-align: left;
  }
  .container h1 {
    font-size: 2.2rem;
  }
  .container h2 {
    font-size: 1.4rem;
  }
  .container p {
    margin-top: 0.4em;
    font-size: 1.0rem;
    line-height: 1.0rem;
  }
  /*
  .wrapper {
    background-size: auto 110%;
  }*/
}

@media only screen and (min-width: 992px) {
  .contact {
    margin-top: 3.0rem;
    text-align: left;
  }
  .container p {
    font-size: 1.0rem;
    line-height: 1.4rem;
  }
  /*
  .wrapper {
    background-size: auto 100%;
  }
  */
}

/* Select background height according to screen height */
@media only screen and (min-height: 0px) and (max-height: 311px) {
  .wrapper {
    background-size: auto 115%;
  }
}

@media only screen and (min-height: 320px) and (max-height: 479px) {
  .wrapper {
    background-size: auto 115%;
  }
}

@media only screen and (min-height: 480px) and (max-height: 767px) {
  .wrapper {
    background-size: auto 110%;
  }
}

@media only screen and (min-height: 768px) and (max-height: 991px) {
  .wrapper {
    background-size: auto 100%;
  }
}

@media only screen and (min-height: 992px) {
  .wrapper {
    background-size: auto 100%;
  }
}

@media only screen and (max-height: 768px) and (min-width: 767px) {
  .wrapper {
    background-size: auto 110%;
  }
}

@media only screen and (max-height: 479px) and (min-width: 520px) and (max-width: 790px) {
  .contact {
    margin-left: 8.0rem;
    text-align: left;
  }
  /*
  .container p {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  */
}