/*Basics*/

html{
  width: 100%;
  overflow-x: hidden;
}
body{
  background-color: #F4F4F4;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 225px;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  min-width: 320px;
}
h1{}
h2{
  margin: auto;
  font-size: 30px;
}

/* ---------------- HEADER NAV STUFF ----------------*/

.stickynav{
  position: fixed;
  top: 0;
  width: 100%;
  margin-bottom: 30px;
  z-index: 1;
  height: 39px;
}

.subindexheader h1{
  padding: 55px 4px 0px 4px;
  font-family: "Lato";
  font-weight: 600;
  margin: auto;
  text-align: center;
  font-size: 70px;
}
.subindexheader h3{
  padding: 0px 4px;
  font-family: "Lato";
  font-weight: 600;
  margin: auto;
  text-align: center;
  font-size: 27px;
}

/* ------------------- PAGE CONTENT STUFF --------------- */

.logoheader {
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin: auto;
}
.logoheader img {
    width: 100%;
}

.frontpageheader{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 70px;
  height: 300px;
}

.frontpagebox{
  font-family: "Lato";
  font-weight: 300;
  letter-spacing: -3px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 70px;
  line-height: 80px;
}
.frontpagebox a{
  text-decoration: none;
}

.frontpageboxleft{
  color: #E2E2E2;
  height: 425px;
  padding-top: 115px;
}
.frontpageboxmid{
  color: #E2E2E2;
  height:  425px;
  padding-top: 115px;
}
.frontpageboxright{
  color: #E2E2E2;
  height:  425px;
  padding-top: 115px;
}

.frontpagemedbox{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.frontpagemedbox h2{
  font-family: "Lato";
  font-weight: 600;
  width: 100%;
  font-size: 45px;
  text-align: center;
  padding-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
.frontpagemedbox p{
  margin: auto;
  width: 85%;
  padding: 15px;
  font-size: 28px;
  line-height: 50px;
  text-align: center;
}

.frontpagemedbox ul{
  margin: auto;
  list-style: none;
  text-align: center;
  padding: 30px 20px;
}
.frontpagemedbox li{
  color: #000000;
  display: inline;
  padding: 20px;
  transition: all 100ms ease-in-out;
}
.frontpagemedbox li:hover{
  background-color: #d1d1d1;
  border-radius: 7px;
  padding: 20px;
  cursor: pointer;
}
.frontpagemedbox li img{
  width: 50px;
  transition: all 100ms ease-in-out;
}

.frontpagemedbox li:hover img{
  transition: all 100ms ease-in-out;
}
.frontpagemedbox li:active{
  background-color: #C3BFBF;
}

.listentolatest{
  background: #668e53 url("../images/icons/playlight.svg") no-repeat center;
  background-size: 575px;
  transition: all 200ms ease-in-out;
}
.journal{
  background: #536c8e url("../images/icons/booklight.svg") no-repeat center;
  background-size: 575px;
  transition: all 200ms ease-in-out;
}
.previousepisodes{
  background: #784c83 url("../images/icons/menulight.svg") no-repeat center;
  background-size: 575px;
  transition: all 200ms ease-in-out;
}

.listentolatest:hover{
  font-size: 72px;
  background: #7cb362 url("../images/icons/play.svg") no-repeat center;
  background-size: 500px;
  cursor: pointer;
}
.journal:hover{
  font-size: 72px;
  background: #6786b1 url("../images/icons/book.svg") no-repeat center;
  background-size: 500px;
  cursor: pointer;
}
.previousepisodes:hover{
  font-size: 72px;
  background: #965da4 url("../images/icons/menu.svg") no-repeat center;
  background-size: 500px;
  cursor: pointer;
}

.pagecontent{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 75px;
  margin-top: 40px;
  font-family: "Lato";
}
.pagecontent p{
  padding-left: 15px;
  padding-right: 15px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-size: 23px;
  line-height: 35px;
  font-weight: 300;
  text-align: center;
}
.pagecontent p a{
  color: #000000;
  font-weight: normal;
  transition: all 200ms ease-in-out;
}
.pagecontent p a:hover{
  text-decoration: none;
  font-weight: 600;
  color: #74a25e;
  cursor: pointer;
}
.pagecontent ul{
  margin: auto;
  list-style: none;
  padding-left: 0px;
}
.pagecontent li{
  text-align: center;
  font-size: 23px;
  line-height: 35px;
  font-weight: 300;
}
.pagecontent h2{
  font-size: 38px;
  text-align: center;
  margin-bottom: 15px;
}
.pagecontent h3{
  font-size: 33px;
  text-align: center;
}
.pagecontent h4, .pagecontent h4 a{
  font-weight: 500;
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.pagecontent h4 img{
  width: 22px;
  vertical-align: top;
}
.pagecontent img{
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
}
.pagecontent .episodebanner{
  margin: auto;
  max-width: 800px;
  padding-top: 5px;
  padding-bottom: 12px;
}
.pagecontent .episodebanner img{
  border-radius: 8px;
}

.episodesection{
  margin-bottom: 75px;
}

/* ------------------- FOOTER STUFF --------------- */

/*footer nav*/
.footernav{
  font-family: "Lato";
  font-weight: normal;
  width: 100%;
  color: #000000;
  background-color: #e7e3e3;
  font-size: 21px;
  padding-top: 7px;
  padding-bottom: 5px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  border-top: 0.05em solid #dad8d8;
}
.bottomnav{
  text-align: center;
  font-size: 20px;
}
.bottomnav a{
  color: #1d1d1d;
  text-decoration: none;
  transition: all 200ms ease-in-out;
}
.bottomnav a:hover{
  color: #74a25e;
  cursor: pointer;
}

.newsletterbox{
  text-align: center;
  width: 50%;
  margin: auto;
  font-size: 20px;
  font-weight: normal;
  margin-top: 10px;
}
.lbBtn{
  font-size: 17px;
  background-color: #74a25e;
  transition: all 200ms ease-in-out;
  border: none;
  border-radius: 4px;
  height: 34px;
  padding: 7px 18px;
  line-height: 20px;
}
.lbBtn:hover{
  background-color: #8DC772;
}
.lbfieldandbutton{
  margin-top: 10px;
}
.form-control{
  color: #000000;
}
.credits{
  font-family: "Lato";
  font-weight: normal;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  text-align: center;
  font-size: 17px;
}

/* ------------------- OTHER STYLING STUFF --------------- */

.creditsbutton{
  transition: all 200ms ease-in-out;
  background-color: #D4D4D4;
  border: none;
  padding: 15px;
  border-radius: 8px;
}
.creditsbutton:hover{
  background-color: #8DC772;
}
.creditsbutton:focus{
  outline: 0;
}

.mobilehidden{
  display: inherit;
}
.mobilevisible{
  display: none;
}
.smallvisible{
  display: none;
}
.nopadding{
  padding-left: 0px;
  padding-right: 0px;
}

.subscribebuttons{
  margin: auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 125px;
}
.subscribebuttons a{
  color: #000000;
  font-size: 28px;
  font-weight: normal;
  font-family: "Lato";
  text-decoration: none;
  transition: all 200ms ease-in-out;
  line-height: 45px;
}
.subscribebuttons a:hover{
  color: #74a25e;
}

.center{
  font-size: 75px;
  margin: auto;
  text-align: center;
  padding-bottom: 20px;
}

#itunes img{
  height: 50px;
  width: auto;
}
#rss img{
  height: 50px;
  width: auto;
}


/* ----------------- FONT STUFF ---------------*/

@font-face{
  font-family: "Lato";
  src: url("fonts/lato/Lato-Bold.ttf");
  font-weight: 700;
}
@font-face{
  font-family: "Lato";
  src: url("fonts/lato/Lato-Semibold.ttf");
  font-weight: 600;
}
@font-face{
  font-family: "Lato";
  src: url("fonts/lato/Lato-Regular.ttf");
  font-weight: normal;
}
@font-face{
  font-family: "Lato";
  src: url("fonts/lato/Lato-Light.ttf");
  font-weight: 300;
}

/*------------ MEDIA STUFF -------------*/

@media (max-width: 1500px ) {
  .frontpagebox{
    font-size: 57px;
    line-height: 75px;
  }
  .frontpagemedbox h2{
    font-size: 35px;
    text-align: center;
  }
  .frontpagemedbox p{
    font-size: 24px;
    line-height: 35px;
  }
  .listentolatest:hover{
    font-size: 60px;
  }
  .previousepisodes:hover{
    font-size: 60px;
  }
  .journal:hover{
    font-size: 60px;
  }
}

@media (max-width: 1200px ) {
  .frontpagebox{
    font-size: 50px;
    line-height: 65px;
  }
  .frontpagemedbox p{
    width: 90%;
  }
  .listentolatest:hover{
    font-size: 53px;
  }
  .previousepisodes:hover{
    font-size: 53px;
  }
  .journal:hover{
    font-size: 53px;
  }
}

@media (max-width: 991px ) {
  .frontpagebox{
    font-size: 65px;
  }
  .listentolatest:hover{
    font-size: 68px;
  }
  .previousepisodes:hover{
    font-size: 68px;
  }
  .journal:hover{
    font-size: 68px;
  }
  .frontpageboxleft{
    height: 300px;
    padding-top: 85px;
  }
  .frontpageboxmid{
    height: 300px;
    padding-top: 85px;
  }
  .frontpageboxright{
    height: 300px;
    padding-top: 85px;
  }
  .newsletterbox{
    font-size: 20px;
    width: 75%;
  }
}

@media (max-width: 767px){
  .lbBtn{
    margin-top: 5px;
  }
  .frontpagemedbox p{
    width: 100%;
  }
  .subindexheader h1{
    font-size: 55px;
  }
  .subindexheader h3{
    font-size: 23px;
  }
  .frontpagemedbox li{
    padding: 12px;
  }
  .logoheader {
      width: 100%;
  }
  .pagecontent h2{
    font-size: 33px;
    margin-bottom: 20px;
  }
}

@media (max-width: 450px ) {
  .subindexheader h1{
    font-size: 45px;
    line-height: 40px;
  }
  .frontpagebox{
    font-size: 55px;
    line-height: 55px;
  }
  .listentolatest:hover{
    font-size: 58px;
  }
  .previousepisodes:hover{
    font-size: 58px;
  }
  .journal:hover{
    font-size: 58px;
  }

  .frontpagemedbox h2{
    font-size: 30px;
  }
  .frontpagemedbox p{
    font-size: 18px;
    line-height: 30px;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
  .frontpagemedbox li{
    padding: 7px;
  }
  .frontpagemedbox li img{
    width: 30px;
    transition: all 100ms ease-in-out;
  }
  .frontpagemedbox li:hover{
    padding: 10px;
  }
  .frontpagemedbox ul{
    padding-top: 15px;
  }

  .newsletterbox{
    font-size: 18px;
    width: 85%;
  }

  .pagecontent p{
    font-size: 18px;
    line-height: 25px;
  }
  .pagecontent li{
    font-size: 18px;
  }
  .pagecontent h2{
    font-size: 28px;
    margin-bottom: 20px;
  }

  .bottomnav{
    text-align: center;
    font-size: 17px;
  }
}