:root {
  --blue: #5CA6AA;
  --light-blue: #C4F1F4;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #E6B658;
  --yellow: #FCFFCB;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --brown-dark: #482902;
  --brown: #c9bb86;
  --white: #fff;
  --black: #000;
  --gray: #6c757d;
  --gray-light: #efefef;
  --gray-lighter: #f9f9f9;
  --gray-dark: #343a40;
  --gray-darker: #343a40;
  
  --primary: #19386A;
  --primary-dark: #1C84C6;
  --secondary: #EE2934;
  --secondary-dark: #00A751;

--creo-dark-blue: #19386A;
--creo-light-blue: #1C84C6;
--creo-lighter-blue: #67D2E6;
--creo-light-brown: #fcfae2;



--creo-red: #EE2934;
--creo-light-red: #DA8078;
--creo-green: #69CD85;
--creo-light-green: #e7ffee;
--social-fb: #0570E6;
--social-insta: #0570E6;


  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --btn-primary-color: var(--primary);
  --btn-secondary-color: var(--secondary);
}
 
@font-face {
  font-family: 'Billow';
  src: url('fonts/billow.ttf')  format('truetype'), /* Safari, Android, iOS */
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
  text-align: left;
  background-color: #FFF;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Billow', Gochi Hand, sans-serif; 
 color: var(--primary); font-weight: bold;}
footer h5 {font-family: 'Poppins', sans-serif;}

.billow-font {font-family: 'Billow', Gochi Hand, sans-serif;}

#class-page .page-header {width: 100%;}
#class-page h1 {font-size: 150px; position: relative; z-index: 5; color: var(--white); text-shadow: 2px 10px 15px var(--black);}
#class-page h2 {font-size: 100px;}
#class-page h3 {font-size: 30px; margin-top: 20px; margin-bottom: 20px; font-family: 'Poppins', sans-serif!important;}
#class-page .watercolor img {display: none; width: 100%; max-width: 700px; margin: 0 auto; }

#class-page .house {margin: 0 auto;}
#class-page  .page-header {width: 100%; max-width: 100%;  margin: 0 auto; z-index: 5; display: flex; justify-content: center; align-items: center; flex-flow: column;}
#class-page .house  {width: 115px;}
#class-page .title-wrap {padding: 20px 40px;}

#esperanza h2 {font-size: 60px;}

#auction-items span {font-size: 18px;}
#auction-items img {width: 100%; max-width: 500px; margin: 0 auto;}


.bg-header {position: absolute; top:-13px; left: 0; right: 0; margin: 0 auto;}
.bg-grass {background-image: url(../images/bg-grass.jpg); background-size: 100%; padding: 4vh 0; position: relative;}

.title-flex {display: flex; justify-content: center; align-items: center; flex-flow: column;}
.hero-settings {display: flex; justify-content: center; align-items: center;}
.bg-honeybee {background-image: url(../images/Creo_Classrooms_Honeybee.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;}
.bg-hummingbird {background-image: url(../images/Creo_Classrooms_Hummingbird.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;}
.bg-butterfly {background-image: url(../images/Creo_Classrooms_Butterfly.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;}
.bg-cactuswren {background-image: url(../images/Creo_Classrooms_CactusWren.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;}
.bg-bobcat {background-image: url(../images/Creo_Classrooms_Bobcat.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;}
.bg-grayfox {background-image: url(../images/Creo_Classrooms_Grayfox.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;}
.bg-jackrabbit {background-image: url(../images/Creo_Classrooms_Jackrabbit.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;}
.bg-coyote {background-image: url(../images/Creo_Classrooms_Coyote.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;}
.bg-blackbear {background-image: url(../images/Creo_Classrooms_Blackbear.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;}
.bg-falcon {background-image: url(../images/Creo_Classrooms_Falcons.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;}
.bg-creofarm {background-image: url(../images/Creo_Classrooms_Farm.jpg); min-height: 900px; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed; background-position-y: -23vw;}


p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a { color: var(--black);}

a:hover,
a:active, a:focus { color: var(--gray); text-decoration: underline; } 


.pad, .block-pad, .pad-content{padding:1em}
.pad-left, .block-pad-left, .pad-content-left{padding-left:1em}
.pad-right, .block-pad-right, .pad-content-right{padding-right:1em}
.pad-top, .block-pad-top, .pad-content-top{padding-top:1em}
.pad-bottom, .block-pad-bottom, .pad-content-bottom{padding-bottom:1em}
.pad-remove,.no-padding,.no-pad,.remove-pad{padding:0}
.pad-small{padding:.5em}
.pad-left-small, .pad-content-left-sm{padding-left:.5em}
.pad-right-small, .pad-content-right-sm{padding-right:.5em}
.pad-top-small, .pad-content-top-sm{padding-top:.5em}
.pad-bottom-small, .pad-content-bottom-sm{padding-bottom:.5em}
.margin-content,.margin{margin:1em}
.margin-auto{margin-left:auto;margin-right:auto}
.margin-bottom,.margin-content-bottom{margin-bottom:1em}
.margin-top,.margin-content-top{margin-top:1em}
.margin-left, .margin-content-left{margin-left:1em}
.margin-right,.margin-content-right{margin-right:1em}
.margin-remove,.no-margin,.remove-margin{margin:0}
.margin-bottom-small,.margin-content-bottom-sm,.margin-bottom-sm{margin-bottom:.5em}
.margin-top-small,.margin-content-top-sm, .margin-top-sm{margin-top:.5em}
.margin-left-small,.margin-content-left-sm, .margin-left-sm{margin-left:.5em}
.margin-right-small,.margin-content-right-sm,.margin-right-sm{margin-right:.5em}



  .img-responsive {display: block; max-width: 100%; height: auto;}
  .img-fluid {width: 100%;}

  .primary-border-top {border-top: 5px solid var(--primary);}
  .primary-border-bottom {border-bottom: 5px solid var(--primary);}
  .secondary-border-top {border-top: 5px solid var(--secondary);}
  .secondary-border-bottom {border-bottom: 5px solid var(--secondary);}

/* site: text and backgrounds */
  .text-primary {color: var(--primary)!important; }
  .text-primary-dark {color: var(--primary-dark); }
  .text-secondary {color: var(--secondary); }
  .text-accent {color: var(--secondary-dark); }
  .text-white {color: var(--white); }
  .text-black {color: var(--black); }
  .text-gray-lighter {color: var(--gray-lighter); }
  .text-gray-light {color: var(--gray-light); }
  .text-gray-base {color: var(--gray-base); }
  .text-gray-dark {color: var(--gray-dark); }
  .text-gray-darker {color: var(--gray-darker); }

  .bg-primary { background-color: var(--primary)!important; color: var(--white); }
  .bg-primary-dark { background-color: var(--primary-dark);}
  .bg-secondary { background-color: var(--secondary)!important; }
  .bg-secondary-dark { background-color: var(--secondary-dark); }
  .bg-blue { background-color: var(--light-blue); }
  .bg-lighter-blue { background-color: var(--creo-lighter-blue); }
  .bg-light-blue { background-color: var(--light-blue); }
  .bg-light-brown { background-color: var(--creo-light-brown); }
  .bg-light-green { background-color: var(--creo-light-green); }

  .bg-yellow { background-color: var(--yellow); }

  .bg-white { background-color: var(--white); }
  .bg-black { background-color: var(--black); color: var(--white); }
  .bg-gray-lighter { background-color: var(--gray-lighter);}
  .bg-gray-light { background-color: var(--gray-light); }
  .bg-gray-base { background-color: var(--gray-base);}
  .bg-gray-dark { background-color: var(--gray-dark);}
  .bg-gray-darker { background-color: var(--gray-darker);}

  .bg-fb {background-color: var(--social-fb);}

  .bg-insta {
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  }
  .btn { transition: all .3s ease-in-out; border-radius: 0;}


  .btn-primary {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--priamry);
  }

  .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
  }

  .btn-primary.disabled, .btn-primary:disabled {
    color: var(--white);
    background-color: var(--priamry);
    border-color: var(--priamry);
  }
  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
  .show > .btn-primary.dropdown-toggle {
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
  }


  .btn-green {
    color: var(--white);
    background-color: var(--creo-green);
    border-color: var(--creo-green);
  }

  .btn-green:hover, .btn-green:active, .btn-green:focus {
    color: var(--white);
    background-color: var(--creo-red);
    border-color: var(--creo-red);
  }

  .btn-blue {
    color: var(--white);
    background-color: var(--creo-light-blue);
    border-color: var(--creo-light-blue);
  }

  .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
    color: var(--white);
    background-color: var(--creo-red);
    border-color: var(--creo-red);
  }


  .btn-orange {
    color: var(--creo-dark-blue);
    background-color: var(--orange);
    border-color: var(--orange);
    font-weight: bold; padding: 15px 15px;
  }

  .btn-orange:hover, .btn-orange:active, .btn-orange:focus {
    color: var(--black);
    background-color: var(--creo-light-red);
    border-color: var(--creo-light-red);
  }


  .btn-secondary {
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
  }

  .btn-secondary:hover {
    color: var(--white);
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
  }

  .btn-secondary.disabled, .btn-secondary:disabled {
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
  }

  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
  .show > .btn-secondary.dropdown-toggle {
    color: var(--white);
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
  }

#header-primary-nav-container {}

#creo-modal {display: flex; flex-flow: row wrap;}
#creo-modal .close {margin: 0; float: right; padding: .5rem 1rem;}
.modal-header, .modal-body {width: 100%;}


.modal-dialog {
    max-width: 800px;
    margin: 1.75vh auto;
    padding-top: 13vh;
}

.sticky {
  position: fixed;
  top: 1000px;
  width: 100%;
  animation: fadeInDown 1s;
}

.sticky + .creo-classes {
  padding-top: 1000px;
}

#header-wrap {display: flex; flex-flow: column;}



#header-layout-container {width: 100%; margin: auto; order: 1;}
#header-layout-container .logo-main {width: 100%; max-width: 200px; margin: 0 auto;}

#header-layout-wrap {width: 100%; max-width: 1440px; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center;}
#header-layout-wrap .header-01 {width: 100%; text-align: center; padding: 40px 10px;}

#header-primary-nav-container {order: 2;}

#pri-nav-wrap {width: 100%; max-width: 880px; margin: 0 auto; padding: 10px 0;}
#primary-nav-container {padding: 0; font-weight: bold;}
#primary-nav-container button {width: 20%; font-size: 50px; border: 0; outline: 0; font-weight: bold; line-height: 60px; color: var(--white); transition: background-color .5s; padding: 10px 15px; border: 0; border-radius: 0;}
#primary-nav-container button:hover {}

#primary-nav-container .navbar-nav {width: 100%; display: flex; justify-content: space-around; font-family: 'Montserrat', sans-serif; text-transform: uppercase;}


.nav-link {font-size: 18px; line-height: 50px; margin: 0 10px; color: var(--creo-dark-blue); transition: all .5s;}

.nav-item:nth-of-type(1) .nav-link {background-color: var(--creo-light-red); } 
.nav-item:nth-of-type(2) .nav-link {background-color: var(--yellow); } 
.nav-item:nth-of-type(3) .nav-link {background-color: var(--creo-green); } 
.nav-item:nth-of-type(4) .nav-link {background-color: var(--creo-lighter-blue); } 
.nav-item:nth-of-type(5) .nav-link {background-color: var(--gray-darker);} 
.nav-item:nth-of-type(6) .nav-link {transition: all .5s; background-color: var(--gray-darker);} 


.nav-item .nav-link:hover,
.nav-item .nav-link:active,
.nav-item .nav-link:focus { color: var(--white); background-color: var(--creo-dark-blue); text-decoration: none; } 

.navbar-nav .nav-link {padding-right: 2rem; padding-left: 2rem;}


main {overflow: hidden; text-align: center; position: relative; z-index: 10;}




/* index: rpi */
#featured-rpi {position: relative; overflow: hidden; }
  .slider {height: 100%; position: relative; overflow: hidden; z-index: 0; }
  .slider .rpi-nav { position: relative; text-align: center; }
  .slider .rpi-nav .rpi-nav-dot span { height: 10px; display: block; border-radius: 30px; }
  .slider .rpi-nav .rpi-nav-dot  {background-color: var(--black); margin: .2rem;}    
  .slider .rpi-nav .rpi-nav-dot:hover{ opacity: .5; background-color: var(--primary);}


.slider .rpi-nav .rpi-nav-dot { 
    position: relative;
    z-index: 3;
    display: inline-block;
    background-color: #333;
    border-radius: 25px;
    border: none;
    margin: .1rem;
}


#creo-map { 
position: relative; width: 100%; max-width: 800px; margin: 0 auto;}



.creo-land {width: 100%; max-width: 100%; margin: 0 auto; opacity: 1; animation: fadeInDown 4s 1s ease-in both;}
.white-border {position: absolute; z-index: 5; bottom: -40px; left: 0; }
.yellow-border {position: absolute; z-index: 5; bottom: -40px; left: 0; }

.creo-classes h3 {font-size: 18px; padding-top: 10px;}
.class {position: absolute; bottom: 0;}
.class-wrap {position: relative;}
.hero-house {position: absolute; top: -150px; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 1500px; opacity: .16;}


#home-header h2 {font-size: 130px; position: relative; z-index: 10; font-family: 'Billow', Gochi Hand, sans-serif;}
#home-header .bg-header {opacity: .3; top: 20px;}



@keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
} 


@keyframes fadeInDown {
   0% {
      opacity: 0;
      transform: translateY(-20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
} 

@keyframes bounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform:     translateY(0);
    transform:         translateY(0)
  }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform:     translateY(-30px);
    transform:         translateY(-30px)
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform:     translateY(-15px);
    transform:         translateY(-15px)
  }
}


.classroom {transform: scale(1); transition: all .3s;}

.classroom:hover {transform: scale(1.2);}

#custompage-hero .page-header {
    animation: fadeInDown .5s;
    position: absolute;
    margin: 0 auto;
    top: 0;
    bottom: 20px;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center; align-items: center;
}
#custompage-hero h1 {color: var(--white);}

.creo-cards-wrap h4 {font-size: 18px; font-weight: bold; color: var(--black);}
.creo-cards-wrap p {padding-top: 1rem; font-size: 12px; color: var(--black);}
.creo-cards-wrap {min-height: 600px; display: flex; flex-flow: row wrap; justify-content: center;}
#creo-cards .filterDiv {display: none;}
#creo-cards .show {display: block;}




footer {background-color: var(--white); margin-top: 50px;}
#footer-wrap {width: 100%; max-width: 1440px; margin: 0 auto;}

  .iframe-wrap {width: 100%; display: flex!important; justify-content: center; align-content: center;}
  iframe {width: 900px; margin: 0 auto; height: 1250px;}



@media (max-width: 767px){
.nav-fill .nav-item, .nav-fill>.nav-link {padding-top: 10px; }

}


.top-left-side {width: 100%; position: absolute; top: 0; z-index: 10;}
.grid-cactuswren {
  top: 0;
  width: 24%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "cactuswren";
}
.cactuswren { grid-area: cactuswren; animation: fadeInDown 1s 1s ease-in both;}
.house-cactuswren  {width: 100%; position: relative; left: 30%; top: -10px;}

.grid-bobcat {
  top: 0;
  width: 22%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "cactuswren";
}
.bobcat {grid-area: bobcat; animation: fadeInDown 1s 1.5s ease-in both;}
.house-bobcat {width: 100%; position: relative; left: 50%; top: -50px;}


.grid-container {
  position: absolute;
width: 65%;
  top: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "top-right-side";
}

.top-right-side {
  position: absolute;
  z-index: 10;
width: 100%;  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "hummingbird honeybee butterfly butterfly"
    "hummingbird honeybee blackbear blackbear";
  grid-area: top-right-side;
}

.hummingbird { grid-area: hummingbird; animation: fadeInDown 1s 2s ease-in both;}
.house-hummingbird {width: 100%; position: relative; left: 50%; top: 43%;}


.honeybee { grid-area: honeybee; animation: fadeInDown 1s 2.5s ease-in both; height: 50%}
.house-honeybee {width: 100%; position: relative; right: 0px; top: 0px;}


.butterfly { grid-area: butterfly; animation: fadeInDown 1s 3s ease-in both;}
.house-butterfly {width: 66%; position: relative; left: -3vw;top: 0px;}


.blackbear { grid-area: blackbear; animation: fadeInDown 1s 3.5s ease-in both;}
.house-blackbear {width: 72%; position: relative; right: 60px; top: 0px;}



.bottom-left-side {
  z-index: 10;
  position: absolute;
  width: 50%;
  height: 74%;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.8fr 0.8fr 1.4fr;
  gap: 0px 0px;
  grid-template-areas:
    "jackrabbit jackrabbit grayfox grayfox"
    "jackrabbit jackrabbit grayfox grayfox"
    "creofarm creofarm creofarm creofarm";
}

.jackrabbit { grid-area: jackrabbit; animation: fadeInDown 1s 4s ease-in both; }
.house-jackrabbit {width: 65%; position: relative; left: -16%; top: 6%;}


.grayfox { grid-area: grayfox; animation: fadeInDown 1s 4.5s ease-in both; }
.house-grayfox {width: 60%; position: relative; left: -46%; top: 20%;}


.creofarm { grid-area: creofarm; animation: fadeInDown 1s 5s ease-in both;}
.house-creofarm {width: 100%; position: relative; left: 14%; top: -10%;}



.bottom-right-side {
  z-index: 10;
  position: absolute;
  width: 50%;
  height: 65%;
  bottom: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 2fr;
  gap: 0px 0px;
  grid-template-areas:
    "coyote coyote"
    "falcon falcon";
}
.coyote { grid-area: coyote; animation: fadeInDown 1s 3.5s ease-in both; }
.house-coyote {width: 56%; position: relative; right: -8%; top: 0%;}
.falcon { grid-area: falcon; animation: fadeInDown 1s 4s ease-in both; }
.house-falcon {width: 60%; position: relative; right: -12%; top: 12%;}
.village-mobile {width: 100%; max-width: 200px; margin: 20px auto; display: none;}
 #icon-section {width: 100%; max-width: 1024px; margin: 0 auto;}
 #icon-section img {width: 100%; max-width: 130px; margin: 0 auto;}
 #icon-section .item img {  
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

 #icon-section .item:hover  img{
  cursor: pointer;
  animation-name: bounce;
  -moz-animation-name: bounce;
}

@media (max-width: 1550px) {
.bg-creofarm {background-position-y: 0;}
.bg-honeybee,
.bg-hummingbird,
.bg-butterfly,
.bg-cactuswren,
.bg-bobcat,
.bg-grayfox,
.bg-jackrabbit,
.bg-coyote,
.bg-blackbear,
.bg-falcon,
.bg-creofarm
{background-attachment: scroll;}
}

@media (max-width: 1366px) {
  .classroom:hover {transform: none;}
.white-border {display: none;}
}


@media (max-width: 1199px) {
  #class-page h2 {font-size: 8vw;}
.bg-honeybee,
.bg-hummingbird,
.bg-butterfly,
.bg-cactuswren,
.bg-bobcat,
.bg-grayfox,
.bg-jackrabbit,
.bg-coyote,
.bg-blackbear,
.bg-falcon,
.bg-creofarm{min-height: 700px;}
#class-page h1 {font-size: 100px; text-shadow: 0px 5px 10px var(--black);}
}


@media (max-width: 991px) {
#creo-map {padding: 9vh 0; display: flex; flex-flow: row wrap; justify-content: center;}
.creo-land {display: none;}
.village-mobile {display: inherit;}
.house-cactuswren , .house-bobcat,.house-coyote, .house-falcon, .house-hummingbird, .house-honeybee, .house-butterfly,
.house-blackbear, .house-jackrabbit, .house-grayfox, .house-creofarm {width: 100%!important; right: 0!important; top: 0!important; left: 0!important; }
.grid-container, .top-left-side, .top-right-side, .grid-cactuswren, .grid-bobcat, .bottom-left-side, .bottom-right-side {display: inherit; width: 100%; position: relative;}

.creofarm {width: 100%;}
.bottom-left-side, .top-right-side {display: flex; flex-flow: row wrap}

.jackrabbit, .grayfox, .honeybee, .butterfly, .blackbear, .hummingbird {width: 50%;}
.classroom {transition: none;}
.bottom-left-side, .bottom-right-side {height: auto!important;}
 #esperanza h2 {font-size: 9vw;}
#class-page h3 {font-size: 2.3vw; margin-top: 20px; margin-top: 20px;}
.bg-grass {padding: 0;}
}


@media (max-width: 767px) {
  #header-primary-nav-container {background-color: var(--blue); }
  #header-layout-container {order: 2;}
  #header-primary-nav-container {order: 1; margin-bottom: 20px;}
  #header-layout-wrap .header-01 {width: 30%; padding: 0px 10px 20px;}
  #pri-nav-wrap {margin: 0 auto;}
  .creo-land {display: none!important;}
  #esperanza h2 {font-size: 8vw;}
  #class-page h1 {font-size: 13vw; text-shadow: 0px 3px 5px var(--black);}
  #class-page h3 {font-size: 3vw;}
  #class-page h2 {font-size: 8vw;}
.bg-honeybee,
.bg-hummingbird,
.bg-butterfly,
.bg-cactuswren,
.bg-bobcat,
.bg-grayfox,
.bg-jackrabbit,
.bg-coyote,
.bg-blackbear,
.bg-falcon,
.bg-creofarm {min-height: 450px;}
}

@media (max-width: 575px) {
  #class-page h1 {font-size: 10vw;}
  footer {text-align: center;}
}

@media (max-width: 475px) {
  #class-page h3 {font-size: 6vw;}
.bg-honeybee,
.bg-hummingbird,
.bg-butterfly,
.bg-cactuswren,
.bg-bobcat,
.bg-grayfox,
.bg-jackrabbit,
.bg-coyote,
.bg-blackbear,
.bg-falcon,
.bg-creofarm {min-height: 300px;}
}