@charset "utf-8";

@media (min-width: 576px){
  .container {
    max-width: 100%;
  }
}

@media  (min-width: 768px){
  .container {
    max-width: 100%;
  }

  .main-content{
  	padding-top: 100px;
  }
}

@media (min-width: 992px){

  .container{
    max-width:960px;
    width:100%;
  }

  .footer-logo img{
    max-width: 170px;
    height: auto;
  }

  .main-content{
    padding-top: 110px;
  }
}

@media  (min-width: 1200px){

  .modal-lg {
   max-width: 1024px;
  }

  .container{
    max-width:1160px;
    width:100%;
  }

  .social .list-inline-item a{
    font-size: 2em;
    color: #FFF;
  }

  .main-content {
    padding-top: 130px;
  }
}

@media (min-width: 1400px){
  .container{
    max-width:1360px;
    width:100%;
  }

  #Home  .hero h2 span{
    max-width: 60%;
  }

}


@media (min-width: 1600px){
  .container{
    max-width:1560px;
    width:100%;
  }
}
@media (max-width: 1399px){
  #Home .hero h2 span {
    max-width: 60%;
  }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199px){

  .top-nav .nav-item:not(.book-link):not(.shop-link) {
    padding: .5rem;
  }
  .social .list-inline-item a{
    font-size: 1.5em;
    color: #FFF;
  }

  .top-nav .nav-item a:not(.bg-black):not(.bg-white) {
    font-size: 1rem;
  }

  .top-nav .nav-item a.bg-black,
  .top-nav .nav-item a.bg-white{
    font-size: 1.1rem;
  }

  .top-nav .nav-item:not(.book-link):not(.shop-link) {
    padding: .5rem 0.5rem;
    margin-right: 0.3rem;
  }

  .entry-half-box h2,
  .intro-half-box h2{
    font-size: 2.6rem;
  }

  .entry-half-box-image h3,
  .intro-half-box-image h3 {
    font-size: 3.2rem;
  }


  body,
  .entry-half-box p,
  .intro-half-box p{
    font-size: 1.3rem;
  }

  .entry-half-box .read-more,
  .intro-half-box .read-more{
    font-size: 1.5rem;
  }

  #Home .hero h2 span {
    max-width: 80%;
  }

  .btn-med{
    font-size: 1.6rem;
    line-height: 1.1em;
  }

}
/* Medium devices (tablets, less than 992px) */
@media (max-width: 991px){

  .top-nav .nav-item a:not(.bg-black) {
    font-size: .95rem;
  }

  .top-nav .nav-item a.bg-black {
    font-size: 0.95rem;
  }

  .btn-med{
    font-size: 1.6rem;
    line-height: 1.1em;
  }

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
  .section-card-image {
    height: 220px;
  }

  .entry-half-box h2,
  .intro-half-box h2{
    font-size: 2.6rem;
  }

  .entry-half-box-image h3,
  .intro-half-box-image h3{
    font-size: 3.2rem;
  }

  .entry-half-box p,
  .intro-half-box p {
    font-size: 1.2rem;
  }

  .hero h1,
  .header-section h1{
    font-size: 3.2rem;
  }

  #Home .hero h2{
    font-size: 3rem;
    height: auto;
  }

  .tagline h2 {
    position: relative;
    font-size: 2.5rem;
  }

  #Home .hero h2 span {
    max-width: 90%;
}

  .footer-logo img{
    max-width: 190px;
    height: auto;
  }
  #Home .header-graphic {
    position: relative;
    min-height: 750px;
    height: auto !important;
    height: 750px;
  }

  .top-nav .nav-item a:not(.bg-black):not(.bg-white){
    font-size: .75rem;
  }

  .top-nav .nav-item a.bg-black,
  .top-nav .nav-item a.bg-white {
    font-size: 0.5em;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px){
  .main-content {
    padding-top: 90px;
  }

  .tagline h2 {
    position: relative;
    font-size: 2.25rem;
  }

  h3 {
    font-size:1.75rem;
  }

  .entry-half-box .read-more,
  .intro-half-box .read-more,
  .intro .read-more {
    font-size: 1.5rem;
  }

  .navbar-brand img {
    height: 60px;
  }

  .hero h1,
  .header-section h1{
    font-size: 3.4rem;
  }
  #Home .hero h2{
    font-size: 2.3rem;
    height: auto;
  }

  #Home .hero h2 span {
    max-width: 80%;
}

  .hero h1:after,
  #Home .hero h2:after{
    display: none;
  }

  #Home .header-graphic {
    position: relative;
    min-height: 550px;
    height: auto !important;
    height: 550px;
  }

  .expander-graphic {
    min-height:350px;
    height:auto!important;
    height:350px;
  }

  .entry-half-box h2,
  .intro-half-box h2,
  .entry-half-box-image h3,
  .intro-half-box-image h3{
    font-size: 2rem;
  }

  .entry-half-box,
  .intro-half-box{
    min-height: auto;
    height: auto;
  }

  .entry-half-box-image{
    min-height: 250px;
    height: auto !important;
    height: 250px;
  }

  .intro-half-box-image{
    min-height: 340px;
    height: auto !important;
    height: 340px;
  }


  .section-card-image {
    height: 220px;
  }

  .footer-logo img{
    max-width: 220px;
    height: auto;
  }

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 320px) and (max-width: 767px) {

}

@media (min-width: 641px) and (max-width: 767px){

}

@media (min-width: 576px) and (max-width: 767px){
  .section-card-image h3{
    font-size: 1.8rem;
    line-height: 1.1em;
    width: 83%;
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {

  .intro-full-box-image h3 {
    font-size: 2.8rem;
    line-height: 1.2em;
  }

  .hero h1,
  .header-section h1{
    max-width: 80%;
    font-size: 2.8rem;
  }

  #Home .hero h2{
    max-width: 80%;
    font-size: 2rem;
  }

  .section-card-image {
    height: 180px;
  }

  .section-card-image h3{
    font-size: 1.8rem;
    line-height: 1.1em;
    width: 83%;
  }

  .section-card-image .card-text .fa-plus{
    font-size: 1.5em;
  }

  /* spacing */
  .d-sm-inline-block {
    display: inline-block!important;
  }

  /* padding bottom */
  .pb-0, .py-0, .pb-sm-0, .py-sm-0{
    padding-bottom: 0!important;
  }

  .pb-1, .py-1, .pb-sm-1, .py-sm-1{
    padding-bottom: .25rem!important;
  }

  .pb-2, .py-2, .pb-sm-2, .py-sm-2{
    padding-bottom: .5rem!important;
  }

  .pb-sm-3, .py-sm-3 {
      padding-bottom: 1rem!important;
  }

  .pb-sm-4, .py-sm-4 {
      padding-bottom: 1.5rem!important;
  }

  .pb-sm-5, .py-sm-5 {
      padding-bottom: 3rem!important;
  }

  /* padding top */
  .pt-0, .py-0, .pt-sm-0, .py-sm-0{
    padding-top: 0!important;
  }

  .pt-1, .py-1, .pt-sm-1, .py-sm-1{
    padding-top: .25rem!important;
  }

  .pt-2, .py-2, .pt-sm-2, .py-sm-2{
    padding-top: .5rem!important;
  }

  .pt-sm-3, .py-sm-3 {
    padding-top: 1rem!important;
  }

  .pt-sm-4, .py-sm-4 {
    padding-top: 1.5rem!important;
  }

  .pt-sm-5, .py-sm-5 {
    padding-top: 3rem!important;
  }

  /* padding left */
  .pl-0, .px-0, .pl-sm-0, .px-sm-0{
    padding-left: 0!important;
  }

  .pl-1, .px-1, .pl-sm-1, .px-sm-1{
    padding-left: .25rem!important;
  }

  .pl-2, .px-2, .pl-sm-2, .px-sm-2{
    padding-left: .5rem!important;
  }

  .pl-sm-3, .px-sm-3 {
    padding-left: 1rem!important;
  }

  .pl-sm-4, .px-sm-4 {
    padding-left: 1.5rem!important;
  }

  .pl-sm-5, .px-sm-5 {
    padding-left: 3rem!important;
  }

  /* padding right */
  .pr-0, .px-0, .pr-sm-0, .px-sm-0{
    padding-right: 0!important;
  }

  .pr-1, .px-1, .pr-sm-1, .px-sm-1{
    padding-right: .25rem!important;
  }

  .pr-2, .px-2, .pr-sm-2, .px-sm-2{
    padding-right: .5rem!important;
  }

  .pr-sm-3, .px-sm-3 {
    padding-right: 1rem!important;
  }

  .pr-sm-4, .px-sm-4 {
    padding-right: 1.5rem!important;
  }

  .pr-sm-5, .px-sm-5 {
    padding-right: 3rem!important;
  }

  /* margin bottom */
  .mb-0, .my-0, .mb-sm-0, .my-sm-0{
    margin-bottom: 0!important;
  }

  .mb-1, .my-1, .mb-sm-1, .my-sm-1{
    margin-bottom: .25rem!important;
  }

  .mb-2, .my-2, .mb-sm-2, .my-sm-2{
    margin-bottom: .5rem!important;
  }

  .mb-sm-3, .my-sm-3 {
      margin-bottom: 1rem!important;
  }

  .mb-sm-4, .my-sm-4 {
      margin-bottom: 1.5rem!important;
  }

  .mb-sm-5, .my-sm-5 {
      margin-bottom: 3rem!important;
  }

  /* margin top */
  .mt-0, .my-0, .mt-sm-0, .my-sm-0{
    margin-top: 0!important;
  }

  .mt-1, .my-1, .mt-sm-1, .my-sm-1{
    margin-top: .25rem!important;
  }

  .mt-2, .my-2, .mt-sm-2, .my-sm-2{
    margin-top: .5rem!important;
  }

  .mt-sm-3, .my-sm-3 {
    margin-top: 1rem!important;
  }

  .mt-sm-4, .my-sm-4 {
    margin-top: 1.5rem!important;
  }

  .mt-sm-5, .my-sm-5 {
    margin-top: 3rem!important;
  }

  /* margin left */
  .ml-0, .mx-0, .ml-sm-02, .mx-sm-0{
    margin-left: 0!important;
  }

  .ml-1, .mx-1, .ml-sm-1, .mx-sm-1{
    margin-left: .25rem!important;
  }

  .ml-2, .mx-2, .ml-sm-2, .mx-sm-2{
    margin-left: .5rem!important;
  }

  .ml-sm-3, .mx-sm-3 {
    margin-left: 1rem!important;
  }

  .ml-sm-4, .mx-sm-4 {
    margin-left: 1.5rem!important;
  }

  .ml-sm-5, .mx-sm-5 {
    margin-left: 3rem!important;
  }

  /* margin right */
  .mr-0, .mx-0, .mr-sm-0, .mx-sm-0{
    margin-right: 0!important;
  }

  .mr-1, .mx-1, .mr-sm-1, .mx-sm-1{
    margin-right: .25rem!important;
  }

  .mr-2, .mx-2,  .mr-sm-2, .mx-sm-2{
    margin-right: .5rem!important;
  }

  .mr-sm-3, .mx-sm-3 {
    margin-right: 1rem!important;
  }

  .mr-sm-4, .mx-sm-4 {
    margin-right: 1.5rem!important;
  }

  .mr-sm-5, .mx-sm-5 {
    margin-right: 3rem!important;
  }

}

@media (max-width: 400px) {
  .top-nav .nav-item.book-link,
    .top-nav .nav-item.shop-link{
    display: none;
  }
  .navbar-brand img {
    height: 44px;
  }
  .main-content {
    padding-top: 75px;
  }

  .intro-full-box-image,
  .intro-full-box {
  	min-height:35vh;
  	height:auto!important;
  	height:35vh;
  }


  .intro-full-box-image h3 {
    font-size: 2.4rem;
    line-height: 1.2em;
  }

  .hero h1,
  .header-section h1{
    font-size: 2.4rem;
  }

  #Home .hero h2{
    font-size: 1.6rem;
  }

  #Home .hero h2 span {
    max-width: 90%;
  }

  .expander-graphic {
    min-height:250px;
    height:auto!important;
    height:250px;
  }
}

/* iPad mini in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  {
}

/* iPad mini in  landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {
}

/* iPad mini in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {
}

/* iPad  3 & 4  in portrait & landscape  */
@media only screen  and (min-device-width : 768px)  and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
}

/* iPad 3 & 4 in  landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2)  {
}

/* iPad 3 & 4 in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2)  {
}