@charset "utf-8";

@media screen {

   /* ------------------------------------------------------------------------------------------------------------------
      MAIN RESETS FOR OUR STYLES
      ------------------------------------------------------------------------------------------------------------------ */

   html {
      /*
      font-family attempts to use native fonts similar to how wordpress 4.6 did it
      https://make.wordpress.org/core/2016/07/07/native-fonts-in-4-6/
      */
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      font-size: 18px;
   }

   body {
      background-color: #fff;
      color: #000;
   }

   .clearfix:after               { visibility:hidden; display:block; font-size:0; content:" "; clear:both;  height:0; }
   * html .clearfix              { zoom:1; } /* IE6 */
   *:first-child+html .clearfix  { zoom:1; } /* IE7 */

   h1 {
      font-family: 'Playfair Display', serif;
      font-weight: 900;
      text-align: center;
      font-size: 2.6rem;
      margin: 1.8rem 0 0 0; }

   img { display: block; margin: 0 auto; }

   .child {
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -75%);
   }


}


/* ------------------------------------------------------------------------------------------------------------------
   RESPONSIVE MEDIA QUERIES
   ------------------------------------------------------------------------------------------------------------------ */

@media only screen and (max-width: 800px) {
   html { font-size: 14px; }
   img  { width: 70%; height: auto; }
}

@media only screen and (max-width: 700px) {
   img  { width: 80%; }
}

@media only screen and (max-width: 600px) {
   html { font-size: 12px; }
   img  { width: 80%; height: auto; }
}

@media only screen and (max-width: 450px) {
   html { font-size: 10px; }
   img  { width: 95%; height: auto; }
}