/*
Theme Name: Legacy Preschool Kindergarten Pro
Theme URI: https://www.legacytheme.net/products/preschool-wordpress-theme
Author: Legacytheme
Author URI: https://www.legacytheme.net/
Description: 
Version: 0.0.1
Requires at least: 5.0
Tested up to: 6.1
Requires PHP: 5.2.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: legacy-preschool-kindergarten-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments
Legacy Preschool Kindergarten Pro WordPress Theme has been created by Legacytheme(legacytheme.net), 2025.
Legacy Preschool Kindergarten Pro WordPress Theme is released under the terms of GNU GPL

/* Basic Style */



@import url('https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.bypostauthor {
  font-weight: 600;
}
body {
  font-family: "Poppins", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Protest Riot", sans-serif;
}
a {
  color: #CB49A6;
}
/*--------- Site Loader --------------*/
.preloader {
  background: #fff;
  display: flex;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  position: fixed;
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

.pencil {
  display: block;
  width: 60px;
  height: 10em;
}

.pencil__body1,
.pencil__body2,
.pencil__body3,
.pencil__eraser,
.pencil__eraser-skew,
.pencil__point,
.pencil__rotate,
.pencil__stroke {
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pencil__body1,
.pencil__body2,
.pencil__body3 {
  transform: rotate(-90deg);
}

.pencil__body1 {
  animation-name: pencilBody1;
}

.pencil__body2 {
  animation-name: pencilBody2;
}

.pencil__body3 {
  animation-name: pencilBody3;
}

.pencil__eraser {
  animation-name: pencilEraser;
  transform: rotate(-90deg) translate(49px,0);
}

.pencil__eraser-skew {
  animation-name: pencilEraserSkew;
  animation-timing-function: ease-in-out;
}

.pencil__point {
  animation-name: pencilPoint;
  transform: rotate(-90deg) translate(49px,-30px);
}

.pencil__rotate {
  animation-name: pencilRotate;
}

.pencil__stroke {
  animation-name: pencilStroke;
  transform: translate(100px,100px) rotate(-113deg);
}

/* Animations */
@keyframes pencilBody1 {
  from,
	to {
    stroke-dashoffset: 351.86;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 150.8;
 /* 3/8 of diameter */
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody2 {
  from,
	to {
    stroke-dashoffset: 406.84;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 174.36;
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody3 {
  from,
	to {
    stroke-dashoffset: 296.88;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 127.23;
    transform: rotate(-225deg);
  }
}

@keyframes pencilEraser {
  from,
	to {
    transform: rotate(-45deg) translate(49px,0);
  }

  50% {
    transform: rotate(0deg) translate(49px,0);
  }
}

@keyframes pencilEraserSkew {
  from,
	32.5%,
	67.5%,
	to {
    transform: skewX(0);
  }

  35%,
	65% {
    transform: skewX(-4deg);
  }

  37.5%, 
	62.5% {
    transform: skewX(8deg);
  }

  40%,
	45%,
	50%,
	55%,
	60% {
    transform: skewX(-15deg);
  }

  42.5%,
	47.5%,
	52.5%,
	57.5% {
    transform: skewX(15deg);
  }
}

@keyframes pencilPoint {
  from,
	to {
    transform: rotate(-90deg) translate(49px,-30px);
  }

  50% {
    transform: rotate(-225deg) translate(49px,-30px);
  }
}

@keyframes pencilRotate {
  from {
    transform: translate(100px,100px) rotate(0);
  }

  to {
    transform: translate(100px,100px) rotate(720deg);
  }
}

@keyframes pencilStroke {
  from {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(-113deg);
  }

  50% {
    stroke-dashoffset: 164.93;
    transform: translate(100px,100px) rotate(-113deg);
  }

  75%,
	to {
    stroke-dashoffset: 439.82;
    transform: translate(100px,100px) rotate(112deg);
  }
}





@media only screen and (max-width: 1050px) {
    .mega-menu-wrap-primary #mega-menu-primary {
        text-align: left;
        display: flex !important;
        padding: 0px 0px 0px 0px;
        flex-direction: column;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
        margin: 0 auto 0 0 !important;
        display: inline-block;
        height: auto;
        vertical-align: middle;
        float: left;
    }
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
        background: #dddddd;
        font-weight: bold;
        text-decoration: none;
        color: #F69E77 !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        font-family: 'Poppins' !important;
    }
    
    @media only screen and (max-width: 1050px) {
        #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
            margin: 0 auto !important;
            display: inline-block !important;
            height: auto !important;
            vertical-align: middle !important;
            float: left !important;
            width: 100% !important;
        }
        .main-navigation a:hover {
            color: #F69E77 !important;
        }
    .main-navigation ul ul a {
      text-transform: none;
      font-weight: 500;
      color: #000;
      font-size: 14px;
      line-height: 1.5;
      cursor: pointer;
    }
    .main-navigation ul ul p a {
      text-transform: none;
      color: #000 !important;
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{
      color:#000 !important;
    }
        #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
            color:#fff !important;
        }
    }
    
    @media only screen and (max-width: 500px) {
        .main-navigation ul ul a {
        text-transform: none;
        font-weight: 500;
        color: #000;
        font-size: 14px;
        line-height: 1.5;
        cursor: pointer;
    }
    }
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
        background: #F69E77;
        color: #ffffff !important;
        font-weight: normal;
        text-decoration: none;
        border-color: #fff;
    }
    @media only screen and (min-width: 1025px) {
      #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus {
        color: #ffffff !important;
      }
    }
    
    div#mySidenav {
        position: relative;
        top: 0;
    }
    
    div#mySidenav:hover::before {
        background-color: #ff0000; /* Changes color on hover */
        color: yellow; /* Changes text color on hover */
    }
    
    
    @keyframes flash {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0.5;
        }
    }
    .mega-menu-row:first-child .mega-sub-menu:first-child > li#mega-menu-item-media_image-9{
        position:relative;
    }
  .mega-menu-row:first-child .mega-sub-menu:first-child > li#mega-menu-item-media_image-4 > a::after {
    content: "New";
    position: absolute;
    top: 3px;
    height: 20px;
    left: -10px;
    background-color: #ff0000;
    transform: unset;
    color: #fff;
    font-size: 12px;
    padding: 2px 5px;
    width: 50px;
    border-radius: 3px;
    text-transform: uppercase;
    display: block;
    text-align: center;
}