body {font-family: "Roboto Slab", sans-serif;}

a {color:#ff6600;text-decoration:underline;}

header {
  padding: 100px 0 100px;background:url('images/old-and-bold-banner.jpg');background-size: cover;
  color:#000; font-weight: 900;background-position: 60% 25%;
}

.page {
  padding: 100px 0 40px;background:url('images/old-and-bold-banner.jpg');background-size: cover;
  color:#000; font-weight: 900;
}
.old {font-weight:300;}
.oldbold {background:#fff;display: inline-block; padding:10px 10px 7px 10px; border:solid #000 5px; color:#000;}
.oldbold-help {font-size: 1.2em; font-weight:300; display: inline-block; position:relative; top:30px;color:#fff; width:96%; 
padding:10px 10px 10px 20px;background-image: linear-gradient(to right, rgba(7, 51, 7, 1), rgba(7, 51, 7, 0.5), rgba(7, 51, 7, 0.2), rgba(7, 51, 7, 1));
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0);}
.inspired {font-size:1.5em;}



.quote {font-size:1.5em; font-style:italic;}
.tag {font-size:1.7em;text-align:center;}
.tagblock {text-align:center;padding:60px 0;}

img.socials {
  transition: filter .5s ease-in-out;
filter: saturate(70%);
}
img.socials:hover {
filter: contrast(100%) brightness(102%) saturate(110%);
}

h1 {font-family: 'Lato', sans-serif;font-weight: 900;}
h2, h3, h4, h5 {font-family: "Roboto Slab", serif;font-weight:300;}
.card-title a {font-weight:900;text-transform:uppercase;}
.button-on-post {display:none;}


a.text-link {color:#444; text-decoration:none; border-bottom:dashed #004974 2px;
will-change: transform;
transition: transform 1s;}
a.text-link:hover {color:#444; text-decoration:none; border-bottom:dashed #ff6600 2px;}




section {
  padding: 150px 0;overflow:hidden;
}

.active {color:#86a477 !important; border-bottom: solid #86a477 1px !important;}
li.nav-item active  {color:#86a477 !important; border-bottom: solid #86a477 1px !important;}


.toby {background-color:#eaf4e5; border:solid #fff 8px;}
         audio{
           max-height: 100%;
           max-width: 100%;
           margin: auto;
           object-fit: contain;
         }
         
         figcaption {font-style:italic; font-size:0.8em;text-align:left; margin-top:10px;}
         
         .tobyquotes {font-style:italic; font-size:0.9em;}
         
         
         /* BLOG */



.comment-form {margin-top:60px;}
.comment-form legend h3 {font-size:0.8em;}
.comment-form input {background: #fff !important; color: #000;border-radius:0 !important;height:50px !important;}
input#form1_submitComment {padding:10px; background:#000 !important;color:#fff;font-family: 'Lato', sans-serif;font-weight: bold;}


.fields {color:#000;}
.fields a {color:#000;}


.meta_lists h3 {font-weight:normal;font-size:1em;}
.meta_lists li {list-style:none;}


.form-control {border-radius:0 !important;}
input {background: #000; color: #fff;border-radius:0 !important;height:50px !important;}
.form-control-inline {width:90%;}
.fields {color:#fff;}
.fields a {color:#fff;}

section#cards {background:#f7f5f1;
  padding: 10px 0; margin-top:0;
}


section#contactt{
  padding: 30px 0;  background:#c7e0f8;color:#000;
}

section#guru {
  padding: 20px 0 20px;overflow:hidden; background:#fac371;color:#000;
}


section#about {
  padding: 20px 0 20px;overflow:hidden; background:#ececec;color:#000;
}

section#about h3 {padding:10px 0;}

section#resources {
  padding: 50px 0;text-align: center;overflow:hidden;background:#f5d5f1;color:#000;
}

section#gallery {
  padding: 30px 0;overflow:hidden;background:#c7e0f8;color:#000;
}

section#khen {
  padding: 30px 0;overflow:hidden;background:#f0ebe5;color:#000;
}


.one { background: #87a579; color:#fff;padding:20px;min-height:175px;}
.two { background: #476e47;color:#fff;padding:20px;min-height:175px;}
.three { background: #073207;color:#fff;padding:20px;min-height:175px;}
.four { background: #8fac96;color:#fff;padding:30px;min-height:175px;}

.book {margin-top: 30px;}
.book a {padding:10px; background:#86a577;color:#fff;font-family: 'Lato', sans-serif;font-weight: 300;}

.box {margin-top: 30px;}
.box a {padding:10px; background:#004974;color:#fff;font-family: 'Lato', sans-serif;font-weight: 300; text-decoration: none;font-weight: 900;}
.box a:hover {background:#0387b1;color:#fff;}

.box-green {margin-top: 30px;}
.box-green a {padding:10px; background:#87a479;color:#fff;font-family: 'Lato', sans-serif;font-weight: 300; text-decoration: none;font-weight: 300;}
.box-green a:hover {background:#8fac96;color:#fff;}




.cosimage {border:solid #ececec 8px; margin-bottom: 20px;}




.modal-body p {font-family: 'Lato', sans-serif;font-weight: 300;text-align: left;}

#general p {text-align: left; }
#hygieneModal {text-align: left; }
.fade {

    -webkit-transition: opacity .1s linear;
    transition: opacity .1s linear;
}


section#school {
  padding: 40px 0 0;
  background:#f1f3f4;
  text-align: left; 
  color:#000;

}

section#podcasts {
background:#f7f5f1;
  padding: 10px 0;margin-top:0px;

}


.school {margin-bottom: 40px;}
.school .col-md-4 {margin: 10px 0 10px;}
.school .col-md-8 {margin: 10px 0 10px;}



.school img {border:solid #fff 8px;}

.bottom {color:#fff;}
.bottom a {color:#fff;}
.times {margin-top: 10px;}


.form-control {border-radius:0 !important;}
input {background: #000; color: #fff;border-radius:0 !important;height:50px !important;}
.form-control-inline {width:90%;}
.fields {color:#fff;}
.fields a {color:#fff;}
.map-snazzer {width:100%; height:500px;border:none;float:none;margin-top:-5px;}
.mapper {background:#86a477;}
.matomo {float:none;}




/* BLOG */



.comment-form {margin-top:60px;}
.comment-form legend h3 {font-size:0.8em;}
.comment-form input {background: #fff !important; color: #000;border-radius:0 !important;height:50px !important;}
input#form1_submitComment {padding:10px; background:#000 !important;color:#fff;font-family: 'Lato', sans-serif;font-weight: bold;}


.fields {color:#fff;}
.fields a {color:#fff;}


.meta_lists h3 {font-weight:normal;font-size:1em;}
.meta_lists li {list-style:none;}







@media only screen and (min-width: 768px) {

section#school {
  background:#f1f3f4;
  padding: 50px 0 50px;
  text-align: left; 
  color:#000;

}

section#podcast {
  background:#f1f3f4;
  padding: 50px 0 50px;
  text-align: left; 
  color:#000;

}

figcaption {font-style:italic; font-size:0.8em;text-align:left;}

.old {font-weight:300;}
.school {margin-bottom: 40px;}
.school .col-md {margin: 40px 0 40px;}

.oldbold-help {font-size: 1.2em; font-weight:300; display: inline-block; position:relative; top:230px;color:#fff; width:70%; 
padding:10px 1px 10px 20px;
background-image: linear-gradient(to right, rgba(7, 51, 7, 1), rgba(7, 51, 7, 0.5), rgba(7, 51, 7, 0.2), rgba(7, 51, 7, 1));
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
.inspired {font-size:1.5em;}



.form-control {border-radius:0 !important;}
input {background: #000; color: #fff;border-radius:0 !important;height:50px !important;}
.form-control-inline {width:90%;}
.fields {color:#fff;}
.fields a {color:#fff;}

.one { background: #87a579; color:#fff;padding:30px;min-height:300px;}
.two { background: #476e47;color:#fff;padding:30px;min-height:300px;}
.three { background: #073207;color:#fff;padding:30px;min-height:300px;}
.four { background: #8fac96;color:#fff;padding:30px;min-height:300px;}

header {
  padding: 300px 0 300px;background:url('images/old-and-bold-banner.jpg');background-size: cover;
  color:#000; font-weight: 900;
}

h1 {font-family: 'Lato', sans-serif;font-weight: 900;}
h2, h3, h4, h5 {font-family: "Roboto Slab", serif;font-weight:300;}
section {
  padding: 50px 0;
}

section#about {
padding: 60px 0 60px;
}


section#cards {background:#f7f5f1;
  padding: 10px 0;margin-top:60px;
}




section#blog {
  padding: 30px 0;
}

section#treatments {
  padding: 0;
}



section#about h3 {padding:10px 0;}


section#cosmetic {
  padding: 100px 0 100px;text-align: left;
  background:#c8e0f8; color:#000;
}



section#contact {
background:#86a577;
  padding: 0;
  text-align: left; 
  color:#fff;

}

section#piece {padding: 30px 0;}
.times {margin-top: 0;}


section#newsletter{
  padding: 10px 0;
}


} 

section#podcasts {
background:#f7f5f1;
  padding: 10px 0;margin-top:0px;

}


.masonry-with-columns { margin:30px 0px 40px 0px;
  columns: 5;
  column-gap: 0rem;}
  
@for $i from 1 through 36 { 
    div:nth-child(#{$i}) {
      $h: (random(400) + 100) + px;
      height: $h;
      line-height: $h;
    }
  }

  .masonry-with-columns div {
    margin: 0 1rem 1rem 0;
    display: inline-block;
    width: 100%;
    text-align: center;
  } 

.item {background-color:#004974;border-radius:10px; padding:10px;font-weight:bold;color:#fff;}
.card {border-radius:10px; border:none;margin-bottom:30px;animation-fill-mode: none;
}
.card-body {border:none; background-color:#f7f5f1;font-family: "Roboto Slab", serif;}
.card-img-top {border-top-left-radius:10px;border-top-right-radius:10px;}
.carditem {background-color:#88b6d0;color:#fff;border-radius:5px; padding:2px 8px;font-weight:bold;font-size:0.8em; margin-bottom:10px;}







@media (max-width: 568px) {
.masonry-with-columns {
  columns: 2;
  column-gap: 0;}

.masonry-with-columns div {
    margin: 0 1rem 1rem 0;
    display: inline-block;
    width: 97%;
    text-align: center;}
  
}