/*!
MODULAR SCALE : STARTER KIT
VERSION ....... 1.0
AUTHOR ....... Shawn Krohn / Sr. Interactive Designer - https://www.stephanbrady.com/
SOURCE MATERIALS ....... Modular Scale and responsive concepts adapted from the following: (https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
(http://www.modularscale.com/)
(https://www.degordian.com/education/blog/best-practice-for-responsive-typography/)
(https://viljamis.com/2013/prototyping-responsive-typography/)
*/


/*GLOBAL *
-----------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans:400,400i,700,700i');


.title-head {
  margin: 2em 0;
  font-family: 'Libre Baskerville', serif; !important;
  font-size: 75%;
  font-weight: normal;
  padding: 1em 0;
  color: #a5a5a5;
  border-bottom: 1px solid #e0e0e0;
}



/*LAYOUT *
-----------------------------------------------*/
* {
  box-sizing: border-box;
}
.wrapper {
  max-width:1300px !important;
  width: 80%;
  margin: 0 auto;
  padding-top:20px;
  padding-bottom:20px;
}

/*Added by me *
-----------------------------------------------*/

img {
  height: auto;
  width: 100%;
/* even more control with max-width */
/*  max-width: 720px; */
}


/*TYPOGRAPHY *
-----------------------------------------------*/
html{
  font-family: 'Libre Baskerville', serif; !important;
  line-height: 1.5; /* unitless values: multiplied by the element's font size */
  font-size: 100%; /* base font size 16px with 1.5 line-height */
  color: #212121;
  font-weight:400;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}
@media only screen and (max-width: 480px){
  html{
    font-size: 0.875em; /* base font size 14px */
  }
}
@media only screen and (min-width: 576px){
  html{
    font-size: 1em; /* base font size 16px */
  }
}
@media only screen and (min-width: 768px){
  html{
    font-size: 1.125em; /* base font size 18px */
  }
}
@media only screen and (min-width: 992px){
  html{
    font-size: 1.1875em; /* base font size 19px */
  }
}
@media only screen and (min-width: 1200px){
  html{
    font-size: 1.3125em; /* base font size 21px */
  }
}


/* Modular Scale with 1em base and 1.25 ratio as starting point then adjusted to make photoshop friendly numbers */
  h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Baskerville', serif; !important;
  font-weight: 400;
  color: #2f2f2f;
}
 
h1{
  font-size: 3.0625em; /* font size 49px = 3.0625em x 16px */
  line-height: 1.4;
  margin-bottom: 0;
}

@media only screen and (min-width:320px) and (max-width: 479px){
  h1 {
      line-height: 1.35;
      font-size: 2.5em; /* font size 35px = 2.5em x 14px */
  }
}

@media only screen and (min-width: 480px) and (max-width: 575px){
  h1 {
    line-height: 1.35;
  }
}



h2{
  font-size: 2.4375em; /* font size 39px = 2.4375em x 16px */ 
    line-height: 1.4;
    margin-bottom: 0;
}
@media only screen and (min-width:320px) and (max-width: 479px){
  h2 {
      line-height: 1.37;
      font-size: 2em; /* font size 28px = 2em x 14px */
  }
}
@media only screen and (min-width: 480px) and (max-width: 575px){
  h2 {
    line-height: 1.37;
  }
}


h3{
  font-size: 1.9375em; /* font size 31px = 1.9375em x 16px */ 
  line-height: 1.3;
  margin-bottom: 0;
}
@media only screen and (min-width:320px) and (max-width: 479px){
  h3 {
      line-height: 1.43;
      font-size: 1.75em; /* font size 24.5px = 1.75em x 14px */
  }
}
@media only screen and (min-width: 480px) and (max-width: 575px){
  h3 {
    line-height: 1.43;
  }
}


h4{
  font-size: 1.5625em; /* font size 25px = 1.5625em x 16px */ 
  line-height: 1.35;
  margin-bottom: 0;
}
@media only screen and (min-width:320px) and (max-width: 479px){
  h4 {
      line-height: 1.45;
      font-size: 1.5em; /* font size 21px = 1.5em x 14px */ 
  }
}
@media only screen and (min-width: 480px) and (max-width: 575px){
  h4 {
    line-height: 1.45;
  }
}


h5{
  font-size: 1.25em; /* font size 20px = 1.25em x 16px */  
  line-height: 1.4;
  margin-bottom: 0;
}
@media only screen and (min-width:320px) and (max-width: 479px){
  h5 {
      line-height: 1.55;
      font-size: 1.25em; /* font size 17.5px = 1.25em x 14px */ 
  }
}
@media only screen and (min-width: 480px) and (max-width: 575px){
  h5 {
    line-height: 1.5;
  }
}


p{
  font-family: 'Open Sans', "HelveticaNeue", "Helvetica", "Arial", sans-serif !important;
  line-height: 1.7;
  font-weight:400;
  font-size: 1em; /* base font size 16px */ 
  color: #212121;
}



a {
  color: #FF851B;
  text-decoration: underline;
  outline: 0;

}
  
  a:hover, a:focus {
    text-decoration: none;
    color: #FF851B;
    outline: 0; 
}


ul,
ol,
dl {
  font-size: 1em; /* font size 16px */ 
  line-height: 1.6;
  margin-bottom: 1.25em;
  padding-left:1.4em;
  font-family: inherit; }

ul li ol {
    margin-bottom: inherit; }
ul.square li ul, ul.circle li ul, ul.disc li ul {
  list-style: inherit; }
ul.square {
  list-style-type: square; }
ul.circle {
  list-style-type: circle; }
ul.disc {
  list-style-type: disc; }
ul.no-bullet {
  list-style: none; }
  
  


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

@media only screen and (min-width:320px) and (max-width: 479px){
#hide-xl.title-head { display: none; }
#hide-lg.title-head { display: none; }
#hide-md.title-head { display: none; }
#hide-sm.title-head { display: none; }
}
@media only screen and (min-width: 480px) and (max-width: 575px){
#hide-xl.title-head { display: none; }
#hide-lg.title-head { display: none; }
#hide-md.title-head { display: none; }
#hide-xs.title-head { display: none; }
}
@media only screen and (min-width: 576px) and (max-width: 767px){
#hide-xl.title-head { display: none; }
#hide-lg.title-head { display: none; }
#hide-sm.title-head { display: none; }
#hide-xs.title-head { display: none; }
}
@media only screen and (min-width: 768px) and (max-width: 991px){
#hide-xl.title-head { display: none; }
#hide-md.title-head { display: none; }
#hide-sm.title-head { display: none; }
#hide-xs.title-head { display: none; }
}
@media only screen and (min-width: 992px) and (max-width: 1920px) {
#hide-lg.title-head { display: none; }
#hide-md.title-head { display: none; }
#hide-sm.title-head { display: none; }
#hide-xs.title-head { display: none; }
}