/* Navigation */
.html{
  height: 100%;
  width: 100%;
}
.body{
  min-height: 100%;
  width: 100%;
  position: fixed;
  overflow: auto;
}
.navbar {
  padding: 0;
  list-style: none;
  float: right;
  padding-top: 1.2vw;
  padding-right: 0.7vw;
  font-family: 'Roboto';
  font-weight: 600;
  position: fixed;
  width: 100%;
  z-index: 9999;
  background-color: white;
}
.navbar li {
  display: inline-block;
  position: relative;
  line-height: 1vw;
  text-align: left;
}
.navbar li a {
  display: block;
  padding: 0.5vw 1.4vw;
  color: #513A40;
  text-decoration: none;
  text-decoration: none;
  line-height: 2vw;
  font-size: 1.3vw;
  position: relative;
  font-family: 'Roboto';
}
.navbar li a:hover {
  text-decoration: underline;
}
.navbar li ul.dropdown {
  min-width: 100%; /* Set width of the dropdown */
  display: none;
  position: absolute;
  background-color: white;
  z-index: 999;
  left: 0;
}
.navbar li:hover ul.dropdown {
  display: block; /* Display the dropdown */
}
.navbar li ul.dropdown li {
  display: block;
}

.logoM{
  display: none;
}

.mobile-nav{
  display: none;
}
 /* Naviagtion Mobile */
@media only screen and (max-device-width: 480px) {

  .navbar{
    display: none !important;
  }
  .logo{
    display: none;
  }
    nav {
    background-color: #513A40;
    height: 65px;

  }

  .logoM{
    display: contents!important;
    z-index: 999;
  }

  .navbar a{
    display: none;
  }

  .mobile-nav{
    display: contents !important;
    width: 100%;
    font-size: 2vw;
  }

  #menuToggle {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 25px;
    left: 25px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
  }

  #menuToggle input
  {
    display: flex;
    width: 40px;
    height: 32px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
  }

  #menuToggle span
  {
    display: flex;
    width: 29px;
    height: 2px;
    margin-bottom: 5px;
    position: relative;
    background: #ffffff;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 5px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }

  #menuToggle span:first-child
  {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2)
  {
    transform-origin: 0% 100%;
  }

  #menuToggle input:checked ~ span
  {
    opacity: 1;
    transform: rotate(45deg) translate(-3px, -1px);
    background: #36383F;
  }
  #menuToggle input:checked ~ span:nth-last-child(3)
  {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  #menuToggle input:checked ~ span:nth-last-child(2)
  {
    transform: rotate(-45deg) translate(0, -1px);
  }

  #menu
  {
    position: absolute;
    text-decoration: none;
    width: 800px;
    height: 1000px;
    box-shadow: 0 0 10px #85888C;
    margin: -50px 0 0 -30px;
    padding: 70px;
    padding-top: 60px;
    font-size: 2vw;
    background-color: #F5F6FA;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }

  #menu li
  {
    padding: 10px 0;
    transition-delay: 1s;
    text-decoration: none;
    font-size: 2vw;
  }

  #menuToggle input:checked ~ ul
  {
    transform: none;
    text-decoration: none;
  }
  a {
    text-decoration: none;
    color: #1E1E23;
    opacity:1;
    font-family: "Lato", sans-serif;
    font-size: 2vw;
    font-weight: 400;
    transition: 200ms;
  }
  a:hover {
    opacity:0.5;
  }
  ul {
    padding: 0;
    list-style-type: none;
    font-size: 2vw;
  }

}


/* Home Page */

  .slideshow-container {
    max-width: 100%;
    height: 47vw;
    position: relative;
    margin: auto;
  }

  .boxHome{
    border-radius: 4vw;
    background: #85E5EB;
    padding: 20px;
    width: 17vw;
    height: 13vw;
    position: absolute;
    margin-left: 10%;
    margin-top: 13%;
    filter: drop-shadow(0.1vw 0.1vw 0.1vw rgb(53, 52, 52));
  }

  .textHome{
    font-size: 1.7vw;
    color: white;
    text-align: center;
    font-family: 'Roboto';
    margin-top: 7%;
    position: absolute;
    margin-right: 5%;
  }

  .logoBox{
    text-align: center;
    margin-top: -55%;
    filter: drop-shadow(0.1vw 0.1vw 0.1vw rgb(53, 52, 52));
  }

  .circleOrg{
    height: 2vw;
    width: 2vw;
    border-radius: 50%;
    padding: 10px;
    background: #E99A25;
    color: #E99A25;
    position: absolute;
  }

  .circleGreen{
    height: 1vw;
    width: 1vw;
    border-radius: 50%;
    padding: 10px;
    background: #39DB49;
    color: #39DB49;
    position: absolute;
    margin-top: 35%;
    margin-left: 30%;
  }

  .circleRed{
    height: 1.5vw;
    width: 1.5vw;
    border-radius: 50%;
    padding: 10px;
    background: #FF3D3D;
    color: #FF3D3D;
    position: absolute;
    margin-top: 45%;
    margin-left: 60%;
  }

  .circleBlue{
    height: 1.5vw;
    width: 1.5vw;
    border-radius: 50%;
    padding: 10px;
    background: #99F3F9;
    color: #99F3F9;
    position: absolute;
    margin-top: 45%;
    margin-left: 60%;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    height: 1vw;
    width: 1vw;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    margin-top: 1%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active {
    background-color: #717171;
  }



  .title{
    font-size: 2.5vw;
    text-align: center;
    font-family: 'Roboto';
    font-weight: 1000;
    color: #513A40;
    margin-top: -12%;
  }

  .title2{
    font-size: 2.5vw;
    text-align: center;
    font-family: 'Roboto';
    font-weight: 1000;
    color: #513A40;
  }

  .titlept{
    font-size: 2.5vw;
    text-align: center;
    font-family: 'Roboto';
    font-weight: 1000;
    color: #513A40;
  }

  .normText{
    color: #513A40;
    font-family: 'Roboto';
    font-size: 1.3vw;
    margin-top: 2%;
    letter-spacing: .05em;
    margin-left: 15%;
    margin-right: 15%;
  }
 /* Slideshow 1 hidden on mobile */
  @media only screen and (max-device-width: 480px) {
    .slideshow-container{
      display: none;
    }

 /* Slideshow-blog-posts styling */    
  }

  html{
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
  }

  .slider {
    position: relative;
    width: 100%;
    height: 27vw;
    margin: 50px auto;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
      0 3px 1px -2px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    background-color: #EEEBEB;
  }
  
  .slider-controls {
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 200px;
    text-align: center;
    transform: translatex(-50%);
    z-index: 900;
  
    list-style: none;
    text-align: center;
  }
  
  .slider input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider-controls label {
    display: inline-block;
    border: none;
    height: 1.3vw;
    width: 1.3vw;
    border-radius: 50%;
    cursor: pointer;
    background-color: #212121;
    transition: background-color 0.2s linear;
  }
  
  #btn-1:checked ~ .slider-controls label[for="btn-1"] {
    background-color: #99F3F9;
  }
  
  #btn-2:checked ~ .slider-controls label[for="btn-2"] {
    background-color: #99F3F9;
  }
  
  #btn-3:checked ~ .slider-controls label[for="btn-3"] {
    background-color: #99F3F9;
  }
  
  .slides {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
  
  .slide {
    position: absolute;
    top: 0;
    left: 0;
  
    display: flex;
    justify-content: space-between;
    padding: 20px;
    width: 100%;
    height: 100%;
  
    opacity: 0;
    transform: translatex(100%);
    transition: transform 250ms linear;
  }
  
  .slide-content {
    width: 70%;

  }
  
  .slide-title {
    margin-left: 10%;
    margin-top: 7%;
    font-size: 2.5vw;
    color: #E99A25;
  }
  
  .slide-text {
    margin-bottom: 20px;
    margin-top: 2%;
    margin-left: 13%;
    width: 60%;
    line-height: 1.3vw;
  }
  
  .slide-link {
    display: inline-block;
    padding: 10px 20px;
    color: black;
    border-radius: 2vw;
    text-decoration: none;
    background-color: #99F3F9;
    margin-left: 35%;
    margin-top: 1%;
    font-weight: 800;
  }
  
  .slide-image{
    margin-right: 15%;
    margin-top: 4%;;
  }

  .slide-image img{
    border: 1vw solid rgb(255, 254, 254)
  }
  
  /* Slide animations */
  #btn-1:checked ~ .slides .slide:nth-child(1) {
    transform: translatex(0);
    opacity: 1;
  }
  
  #btn-2:checked ~ .slides .slide:nth-child(2) {
    transform: translatex(0);
    opacity: 1;
  }
  
  #btn-3:checked ~ .slides .slide:nth-child(3) {
    transform: translatex(0);
    opacity: 1;
  }
  
  #btn-1:not(:checked) ~ .slides .slide:nth-child(1) {
    animation-name: swap-out;
    animation-duration: 300ms;
    animation-timing-function: linear;
  }
  
  #btn-2:not(:checked) ~ .slides .slide:nth-child(2) {
    animation-name: swap-out;
    animation-duration: 300ms;
    animation-timing-function: linear;
  }
  
  #btn-3:not(:checked) ~ .slides .slide:nth-child(3) {
    animation-name: swap-out;
    animation-duration: 300ms;
    animation-timing-function: linear;
  }
  
  @keyframes swap-out {
    0% {
      transform: translatex(0);
      opacity: 1;
    }
  
    50% {
      transform: translatex(50%);
      opacity: 0;
    }
  
    100% {
      transform: translatex(100%);
    }
  }

  .reviews-height{
    width:100%;margin-bottom: 10%;
  }
  
   /* Slideshow-blog-post mobile */
  @media only screen and (max-device-width: 480px)  {
    .slide-image{
      display: none;
    }  
    .slides{
      height: 57vw;
    }
    .slider{
      margin-top: 3%;
      height: 57vw;
    }
    .slide-title{
      margin-top: 0%;
      font-size: 4vw;
      margin-left: -0.2%;
      text-align: center;
      
    }
    .slide-text{
      font-size: 3.3vw;
      line-height: 3.7vw;
      width: 100%;
      padding-top: 2%;
      margin-left: 2.5%;
    }
    .slide-link {
      display: inline-block;
      padding: 1.5vw 1.5vw;
      color: black;
      border-radius: 2vw;
      text-decoration: none;
      background-color: #99F3F9;
      font-size: 2.5vw;
      margin-left: 40%;
      margin-top: -3%;
      font-weight: 600;
    }
    .slide-content{
      margin-left: 10%;
      width: 80%;
    }
    .slider-controls label {
      display: inline-block;
      border: none;
      height: 5vw;
      width: 5vw;
      border-radius: 50%;
      margin-left: 2%;
      cursor: pointer;
      background-color: #212121;
      transition: background-color 0.2s linear;
      margin-right: 2%;
      
    }

    .dot {
      height: 3vw;
      width: 3vw;
    }

    .titlept{
      margin-top: 0%;
      font-size: 4vw;
    }


    .normText{
      font-size: 3.5vw;
    }
    .title{
      margin-top: 5vw;
      font-size: 4.5vw;
      margin-left: 0%;

    }
    .reviews{
      font-size: 3.5vw;
    }

    .author{
      font-size: 3.5vw;
    }

    .titlept{
      font-size: 4.5vw;
    }

    .slider-controls label{
      width: 4vw;
      height: 4vw;
    }

    
    .fivestar{
      font-size: 3vw;
    }

    .review-box1{
      width: 70%;
      margin-left: 5%;
    }

    .review-box2{
      width: 70%;
      margin-right: 5%;
    }

    .reviews-height{
      margin-bottom:30%;
    }

  }

 /* Parent Testimonials */
.review-box1{
  background-color: #EEEBEB;
  filter: drop-shadow(0.2vw 0.2vw 0.2vw #99f3f9);
  width: 35%;
  margin-left: 10%;
  margin-top: 2%;
  margin-bottom: 3%;
  border-radius: 2vw;
  float: left;
}

.reviews{
  font-family: 'Roboto';
  padding: 3%;
}

.fivestar{
  margin-top: 2%;
  margin-left: 4%;
}
.checked{
  color: orange;
}

.review-box2{
  background-color: #EEEBEB;
  filter: drop-shadow(0.2vw 0.2vw 0.2vw #E99A25);
  width: 35%;
  margin-right: 10%;
  margin-top: 2%;
  border-radius: 2vw;
  margin-left: 3%;
  margin-bottom: 2%;
  float: right;
}

.author{
  padding-bottom: 2%;
  text-align: center;
}



/* Rooms Page */
.imgTitle{
  color: white;
  font-size: 4vw;
  text-align: center;
  position: absolute;
  margin-top: 15%;
  margin-left: 43%;
}

.InfantRoom{
  width: 70%;
  margin-left: 15%;
  margin-top: 2%;
  background-color: #DEFBFD;
  border-radius: 2vw;
  height: 17vw;
}

.InfantRoom:hover{
  filter: drop-shadow(0.1vw 0.1vw 0.1vw rgb(54, 53, 53));
}
.STEMRoom:hover{
  filter: drop-shadow(0.1vw 0.1vw 0.1vw rgb(54, 53, 53));
}
.SpanishRoom:hover{
  filter: drop-shadow(0.1vw 0.1vw 0.1vw rgb(54, 53, 53));
}

.ToddlerRoom:hover{
  filter: drop-shadow(0.1vw 0.1vw 0.1vw rgb(54, 53, 53));
}

.ToddlerRoom{
  width: 70%;
  margin-left: 15%;
  margin-top: 2%;
  background-color: #FCF0DE;
  border-radius: 2vw;
  height: 17vw;
}

.STEMRoom{
  width: 70%;
  margin-left: 15%;
  margin-top: 2%;
  background-color: #E4FFE7;
  border-radius: 2vw;
  height: 17vw;
}

.SpanishRoom{
  width: 70%;
  margin-left: 15%;
  margin-top: 2%;
  background-color: #FBD6D6;
  border-radius: 2vw;
  height: 17vw;
}

.roomTitle{
  padding: 2%;
  font-size: 2.3vw;
  font-weight: 600;
  font-family: 'Roboto';
  color: #513A40;
  margin-left: 35%;
  margin-top: -30%;
}

.roomD{
  font-size: 1.3vw;
  font-family: 'Roboto';
  width: 60%;
  padding: 2%;
  margin-top: -3%;
  margin-left: 35%;
  margin-bottom: 10%;
  color: #212121;
}


 /* Rooms Page Mobile */
@media only screen and (max-device-width: 480px){
  .roomTitle{
    font-size: 4.0vw;
    margin-top: -55%;
    margin-left: 35%;
  }

  .roomD{
    font-size: 3.3vw;
    margin-top: 12%;
    width: 50%;
    margin-left: 45%;
  }

  .ToddlerRoom{
    height: 60vw;
    width: 95%;
    margin-left: 2.5%;
    margin-top: -8%;
  }

  .InfantRoom{
    height: 58vw;
    width: 95%;
    margin-left: 2.5%;
    margin-top: -10%;
  }

  .STEMRoom{
    height: 58vw;
    width: 95%;
    margin-left: 2.5%;
    margin-top: -7%;
  }

  .SpanishRoom{
    height: 60vw;
    width: 95%;
    margin-left: 2.5%;
    margin-top: -8%;
  }

  .roomImg{
    height: 70%; width: 120%; margin-left: 2%; margin-top: 25%; border-radius: 2vw; transform: translateY(15%);
  }

  .rooms-body{
    height:100vw;
  }
  }


/* Infant Room Page */

.roomBG1 {
  background-image: url(photos/infant1.jpg);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.roomBG1::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.15);
}

.roomTitlePg {
  position: absolute;
  margin-top: 17%;
  margin-left: 40%;
  color: white;
  font-weight: 470;
  font-size: 3.4vw;
  letter-spacing: 0.9px;
  text-align: center;
  font-family: 'Roboto';
}

.roompgD{
  width: 70%;
  margin-top: 4%;
  margin-left: 15%;
  border:0.4vw; 
  border-style:solid; 
  border-color:#99F3F9; 
  padding: 1vw;
  font-family: 'Roboto';
  font-size: 1.2vw;
}

.roomBG2 {
  background-image: url(photos/infant2.jpg);
  width: 100%;
  height: 10vw;
  margin-top: 4%;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.roompgD2{
  width: 70%;
  margin-top: 2%;
  margin-left: 15%;
  border:0.4vw; 
  border-style:solid; 
  border-color:#E99A25; 
  padding: 1vw;
  font-family: 'Roboto';
  font-size: 1.2vw;
}

.roompgD3{
  width: 70%;
  margin-top: 2%;
  margin-left: 15%;
  border:0.4vw; 
  border-style:solid; 
  border-color:#FF3D3D; 
  padding: 1vw;
  font-family: 'Roboto';
  font-size: 1.2vw;
}

.roompgD4{
  width: 70%;
  margin-top: 2%;
  margin-left: 15%;
  border:0.4vw; 
  border-style:solid; 
  border-color:#39DB49; 
  padding: 1vw;
  font-family: 'Roboto';
  font-size: 1.2vw;
}


/* Toddler Room Page -some styling come from infant*/

.roomBGT {
  background-image: url(photos/toddler1.jpg);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.roomBGT::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.15);
}

.roomBGT2 {
  background-image: url(photos/toddler2.jpg);
  width: 100%;
  height: 10vw;
  margin-top: 4%;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* STEM Room Page -some styling come from infant */

.roomBGST {
  background-image: url(photos/stem1.jpg);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.roomBGST::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.20);
}

.roomBGST2 {
  background-image: url(photos/stem3.jpg);
  width: 100%;
  height: 10vw;
  margin-top: 4%;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Spanish Room Page -some styling comes from infant */

.roomBGS {
  background-image: url(photos/spanish1.jpg);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.roomBGS::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.15);
}

.roomBGS2 {
  background-image: url(photos/spanish2.png);
  width: 100%;
  height: 10vw;
  margin-top: 4%;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.shortD{
  font-family: 'Roboto'; text-align: center; margin-top: 2%;width: 70%;margin-left: 15%; font-size: 1.2vw;
}


 /* used in mobile */

.room-img-mobile{
  display: none;
}

#toddler-bottom{
 margin-bottom: 10%;
}

.stem-height{
  width: 100%;height:125vw;
}

#spanish-bottom{
  height: 15vw;
}

 /* Mobile styling of rooms pages */
@media only screen and (max-device-width: 480px){
  .roomBG1,
  .roomBGS,
  .roomBGT,
  .roomBGST{
    background-image: none;
    height: 10vw;
    transform: translateY(-110%);
  }
  .roomBG1::before,
  .roomBGS::before,
  .roomBGT::before,
  .roomBGST::before{
    background-color: rgba(0, 0, 0, 0);
  }

  .room-img-mobile{
    display: contents;
  }

  .roomBG2,
  .roomBGS2,
  .roomBGT2,
  .roomBGST2 {
    display: none;
    
  }
  

  .roomTitlePg{
    color: #513A40;
    font-weight: 600;
    font-size: 4vw;
    transform: translateX(-8%);
  }

  .roompgD{
    font-size: 3.4vw;
    line-height: 5vw;
  }

  .roompgD2{
    font-size: 3.4vw;
    width: 90%;
    margin-left: 5%;
    line-height: 5vw;

  }

  .roompgD3{
    font-size: 3.4vw;
    width: 90%;
    margin-left: 5%;
    line-height: 5vw;
    
  }

  .roompgD4{
    font-size: 3.4vw;
    width: 90%;
    margin-left: 5%;
    line-height: 5vw;

  }

  .title2{
    font-size: 3.6vw;
  }

  .shortD{
    width: 80%;
    margin-top: 2%;
    margin-left: 10%;
    font-size: 3.4vw;
    text-align: center;
  }

  .hide{
    display: none !important;
  }

  #infant-bottom{
    margin-bottom: 15%;
  }

  #toddler-bottom{
    margin-bottom: 30%;
  }
  .mobile-space{
    height: 30vw;
  }

  #room-bottom{
    height: 35vw;
  }
}

/* Contact Us Page */


#hbspt-form-1660236737000-6694365456{
  margin-left: 33%; margin-top: 5%; margin-right: 15%;
}

.map{
  width: 100%;
  margin-top: 2%;
}
 /* Contact Us mobile styling */

@media only screen and (max-device-width: 480px){
  #hbspt-form-1660236737000-6694365456{
    margin-left: 23%;
  }

  .title2{
    font-size: 3.5vw;
  }

  .map{
    margin-top: 4%;
  }
}

/* FAQs Page */

.faqBG {
  background-image: url(photos/faq.jpg);
  width: 100%;
  height: 25vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 1%;
}

.faqBG::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.15);
}

.questionBox{
  width:60%;
  margin-left: 20%;
  border:0.1vw; 
  border-style:solid; 
  border-color:black; 
  padding: 1vw;
  border-radius: 2vw;
  margin-top: 2%;
  font-family: 'Roboto';
}

.question{
  margin-top: -3%;
  margin-left: 7%;
  font-weight: 700;
}

.tri{
  margin-right: 2%;
   font-size: 2vw; 
   padding-top: -2%;
   margin-left: 2%;
}

  .accordion1 {
    color: black;
    background-color: white;
    cursor: pointer;
    border:0.1vw; 
    border-style:solid; 
    border-color:black; 
    padding: 1vw;
    width: 70%;
    border-radius: 2vw;
    margin-top: 1%;
    margin-left: 15%;
    text-align: left;
    outline: none;
    font-size: 1.3vw;
    transition: 0.4s;
    height: 4vw;
  }
  
  .accordion1:hover {
    background-color: #dff5f7;
  }

  .panel {
    padding: 0 1.7vw;
    margin-top: 1%;
    background-color: white;
    max-height: 0;
    border-radius: 2vw;
    width: 70%;
    margin-left: 15%;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    font-family: 'Roboto';
  }

  .accordion2 {
    color: black;
    background-color: white;
    cursor: pointer;
    border:0.1vw; 
    border-style:solid; 
    border-color:black; 
    padding: 1vw;
    width: 70%;
    border-radius: 2vw;
    margin-top: 1%;
    margin-left: 15%;
    text-align: left;
    outline: none;
    font-size: 1.3vw;
    transition: 0.4s;
    height: 4vw;
  }
  
  .accordion2:hover {
    background-color: #ecdcc5;
  }
  
  
  .accordion3 {
    color: black;
    background-color: white;
    cursor: pointer;
    border:0.1vw; 
    border-style:solid; 
    border-color:black; 
    padding: 1vw;
    width: 70%;
    border-radius: 2vw;
    margin-top: 1%;
    margin-left: 15%;
    text-align: left;
    outline: none;
    font-size: 1.3vw;
    transition: 0.4s;
    height: 4vw;
  }
  
  .accordion3:hover {
    background-color: #cbebce;
  }
  

  .accordion4 {
    color: black;
    background-color: white;
    cursor: pointer;
    border:0.1vw; 
    border-style:solid; 
    border-color:black; 
    padding: 1vw;
    width: 70%;
    border-radius: 2vw;
    margin-top: 1%;
    margin-left: 15%;
    text-align: left;
    outline: none;
    font-size: 1.3vw;
    transition: 0.4s;
    height: 4vw;
  }
  
  .accordion4:hover {
    background-color: #ffd4d4;
  }

  .faq-box{
    height: 95vw;
  }

   /* FAQ mobile styling */

  @media only screen and (max-device-width: 480px) {
    .faqBG{
      background-image: none;
      height: 12vw;
      transform: translateY(-6vw);
    }

    .faqBG::before{
      background-color: rgba(0, 0, 0, 0);
    }
    .questionBox{
      width: 90%;
      font-size: 3.3vw;
    }

    .question{
      font-size: 3.3vw;
      margin-top: -5.0%;
    }

    .accordion1 {
      font-size: 3.3vw;
      width: 95%;
      height: 11.5vw;
      margin-left: 2.5%;
    }
    .accordion2 {
      font-size: 3.3vw;
      width: 95%;
      height: 11.5vw;
      margin-left: 2.5%;
    }
    .accordion3 {
      font-size: 3.3vw;
      width: 95%;
      height: 11.5vw;
      margin-left: 2.5%;
    }
    .accordion4 {
      font-size: 3.3vw;
      width: 95%;
      height: 11.5vw;
      margin-left: 2.5%;
    }

    .panel{
      font-size: 3.3vw;
      width: 90%;
      margin-left: 5%;
    }

    .tri{
      font-size: 4vw;
      margin-top: 0%;
    }

    .roomTitlePg{
      font-size: 4vw;

    }

    .faq-box{
      height: 110vw;
      margin-bottom: 20%;
    }

    #faq-bottom{
      height:30vw;
    }


  }
  
/* Parent Engagement Page */

.peBG {
  background-image: url(photos/pelaExterior.gif);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.peBG::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.15);
}

.text1{
  font-size: 2.5vw;
  font-family: 'Roboto';
  color: #E99A25;
  width: 40%;
  margin-left: 50%;
  margin-top: -20%;
}

.pe-photo1{
  width: 70%;height: 80%;
}
.peD{
  width: 40%;
  margin-top: -38%;
  margin-left: 10%;
  float: left;
  border:0.4vw; 
  border-style:solid; 
  border-color:#39DB49; 
  padding: 1vw;
  font-family: 'Roboto';
}

.pe-height{
  width: 100%;height:60vw
}

/* Parent Engagement Mobile Styling */
@media only screen and (max-device-width: 480px){

  .text1{
    font-size: 3.3vw;
    margin-top: 5%;
    margin-top: 0%;
    width: 80%;
    margin-left: 10%;
  }
  .wwa-text{
    font-size: 3.3vw;
  }

  .title2{
    font-size: 3.5vw;
  }

  .pe-photo2{
    height: 30%;
    width: 15%;
    margin-bottom: 10%;
    margin-left: -100%;
  }

  .peD{
    margin-top: 2%;
    font-size: 3.3vw;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 15%;
    float: none;
  }

  .peBG{
    background-image: none;
    height: 15vw;
    transform: translateY(-10vw);
  }

  .peBG::before{
    background-color: rgba(0, 0, 0, 0);
  }

}


/* Who We Are Page */

.wwa-text{
  font-family: 'Roboto'; text-align: center; margin-top: 4%;width: 70%;margin-left: 15%;
}

/* Blog Page */

.blog-container{
  background-color: #F4F4F4;
  width: 70%;
  height: 15vw;
  margin-left: 15%;
  margin-top: 2%;
  padding: 1vw;
}

.blog-container:hover{
  filter: drop-shadow(0.1vw 0.1vw 0.1vw rgb(54, 53, 53));
}

.blog-container img{
  width: 30%; height: auto; padding: 3%;
}

#doctor-and-child{
  
  width: 25%;
  height: 110%;
  padding:3%;
}

.blogTitle{
  font-size: 2vw;
  width: 64%;
  float: right;
  padding-top: 1%;
  margin-right : 5%;
  color: #E99A25;
  font-family: 'Roboto';
  text-align: left;
  position: relative;

}

.blogTitle p{
  font-size: 1.2vw;
  float: right;
  width: 65%;
  color: #000000;
  margin-right: 35%;
  font-family: 'Roboto';
  position: relative;
  margin-top: 1%;
}

.postedText{
  float: right;
  font-size: 0.9vw;
  font-family: 'Roboto';
  color: #179CA5;
  font-weight: 700;
  margin-right: 5%;
  width: 64%;
  margin-top: 1%;
  margin-right: 35%;
}

/* Blog Mobile Styling */

@media only screen and (max-device-width: 480px)  {

  .blog-container{
    width: 90%;
    margin-left: 5%;
    height: 74vw;
  }

  .blog-container img{
    width: 60%;
    height: auto;
    margin-left: 20%;
  }

  #doctor-and-child{
    width: 30%;
    height: 55%;
    margin-left: 35%;
  }

  .blogTitle{
    font-size: 3.8vw;
    width: 80%;
  }

  .blogTitle p{
    font-size: 3.3vw;
    width: 100%;
    margin-right: 0%;
  }

  .postedText{
    font-size: 3vw;
    margin-top: 2%;
  }
  
}


/*Blog individual pages styling */
.blogTitlepg{
  font-size: 4vw;
  text-align: center;
  color: white;
  width: 100%;
  margin-left: 0%;
  z-index: 999;
}

.blogInfopg{
    font-size: 1.7vw;
    width: 100%;
    text-align: center;
    font-family: 'Roboto';
    font-weight: 600;
    color: #513A40;
}

.blog3BG {
  background-image: url(photos/stem-microscope.jpeg);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blog3BG::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.20);
}

.blog4BG {
  background-image: url(photos/Easter-eggs-2.jpg);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blog4BG::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.20);
}

.blog6BG {
  background-image: url(photos/Hispanic-Heritage-Month.jpg);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blog6BG::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.20);
}

.blog7BG {
  background-image: url(photos/doctor_with_child.jpg);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blog7BG::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.20);
}

.blog7BG {
  background-image: url(photos/doctor_with_child.jpg);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blog7BG::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.20);
}

.blog10BG {
  background-image: url(photos/toddlers-with-teacher.jpeg);
  width: 100%;
  height: 40vw;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blog10BG::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.20);
}

.blog-post-text{
  font-family: 'Roboto'; text-align: center; margin-top: 2%;width: 70%;margin-left: 15%; font-size: 1.3vw;
}

.mobile-photo{
  display: none;
}

.stem1img{
  width: 40%;
  margin-left: 40%;
  margin-top: 4%;
}

.img-cap{
  font-family: 'Roboto'; text-align: left; margin-top: 0.5%;width: 70%;margin-left: 40%;
}

.egg1img img{
  width: 30%; height: auto; margin-left: 35%; margin-top:2%;
}

.remodelimg img{
  margin-left: 25%; margin-top:2%; width: 50%; height: auto;
}

.freetrialimg img{
  margin-left: 25%; margin-top:2%; width: 50%; height: auto;
}

/* Blog individual pages mobile styling */
@media only screen and (max-device-width: 480px)  {
  .blog4BG,
  .blog3BG,
  .blog6BG,
  .blog7BG,
  .blog10BG{
    background-image: none;
    height: 19vw;
    transform: translateY(-9vw);
  }
  .blog6BG::before,
  .blog4BG::before,
  .blog3BG::before,
  .blog7BG::before,
  .blog10BG::before{
    background-color: rgba(0, 0, 0, 0);
  }
  .mobile-photo{
    display: contents;
  }

  .blogInfopg{
    font-size: 3vw;
  }

  .img-cap{
    margin-left:15%;
    font-size: 3vw;
  }

  .stem1img{
    margin-left: 15%;
  }

  .egg1img{
    width:150%;
    margin-left: -30%;
    height:auto;
  }

  .remodelimg img{
    width: 90%;
    height:auto;
    margin-left:5%;
  }

  .blog-post-text{
    font-size: 3.3vw;
  }

  .desktop{
    display:none
  }

  .freetrialimg img{
    width: 90%;
    height: auto;
    margin-left: 5%;
  }

}


/*Staff styling */

.staff-container{
  width: 85%;
  margin-left: 7.5%;
  margin-top: 2%;
  height: 35vw;
  background-color: white;
  box-shadow: 0 0 3px #000000;
  margin-bottom: 0%;
}

.staffInfo{
  font-family: 'Roboto';
  font-size: 1.3vw;
  width: 70%;
  float: right;
  margin-top: -30%;
}

.staff-container img{
  width: 30%; height: 100%; padding: 3%;
}

.staff-title{
  font-size: 2vw;
  width: 64%;
  float: right;
  margin-top: 4%;
  margin-right : 5%;
  color: #E99A25;
  font-family: 'Roboto';
  text-align: left;
}

.staff-height{
  width: 100%; height:50vw;
}

/* Staff Mobile Styling */

@media only screen and (max-device-width: 480px){

.staffInfo{
  font-size: 3.3vw;
  width: 80%;
  margin-top: 2%;
  margin-left: 10%;
  float: none;
}

.staff-container{
  height: 170vw;
}

.staff-container img{
  width: 60%;
  height: auto;
  margin-left: 20%;
}

.staff-title{
  float: none;
  font-size: 3.6vw;
  width: 80%;
  margin-left: 10%;
  text-align: center;
  margin-top: 2%;
}

.lists{
  text-decoration: underline;
  font-size: 3.3vw;
  font-family: "Roboto";
}

}


/* Footer */
* {
  box-sizing: border-box;
  font-family: 'Roboto';
  margin: 0;
  padding: 0;
}


ul {
  list-style: none;
  padding-left: 0;
}
footer {
  background-color: #99F3F9;
  color: #513A40;
  line-height: 1.1;
  width: 100%;
  bottom: 0;
  position: fixed;
  height: 90px;
}
footer a {
  text-decoration: none;
  color: #513A40;
}

.ft-title {
  color: #513A40;
  font-family: "Merriweather", serif;
  font-size: 1vw;
  transform: translateY(-0.5vw);
}
/* Sticks footer to bottom */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.container {
  flex: 1;
}
/* Footer main */
.ft-main {
  display: flex;
  flex-wrap: wrap;
  transform: translateX(-10vw);
}
@media only screen and (min-width: 29.8125rem /* 477px */) {
  .ft-main {
    justify-content: space-evenly;
  }

}
@media only screen and (min-width: 77.5rem /* 1240px */) {
  .ft-main {
    justify-content: space-evenly;
  }
}
.ft-main-item {
  padding: 1.25rem;
  min-width: 5vw;
  transform: translateX(-15vw);
}

/* Footer main | Newsletter form */
form {
  display: flex;
  flex-wrap: wrap;
}

/* Footer social */
.ft-social {
  padding-right: 1vw;
}
.ft-social-list {
  display: flex;
  justify-content: center;
  border-top: 1px #777 solid;
  padding-top: 1.25rem;
}
.ft-social-list li {
  margin-left: 1vw;
  font-size: 3vw;
  transform: translateX(19vw);
}

.mobile-view{
  display: none;
}

/* Footer mobile changes */

@media only screen and (max-device-width: 480px){

    .ft-social-list{
      display: none;
    }

    .ft-main-item{
      display: none;
    }

    .ft-main img{
      display: none;
    }

    .mobile-view{
      display: contents;
      width: 100%;
    }

    .line{
      display: none;
    }
}