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

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

h1 {font-family: "Roboto Slab", 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;
}

section img {
  float:right; padding-left:10px;
}


.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;}




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



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;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;
}




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




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



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;}






@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;}




.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;}



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#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;}
  
}