/*
Theme Name: Kindergarten Playschool Pro
Theme URI: https://www.themagnifico.net/products/playschool-wordpress-theme
Author: Themagnifico
Author URI: https://www.themagnifico.net/
Description: The Playschool WordPress Theme is a premium solution crafted to meet the needs of early childhood education centres, including preschools, daycare facilities, and nursery schools. Designed to enhance the online presence of institutions dedicated to young children, this premium theme offers a range of functionalities tailored for early learning environments. Its primary use is to create a professional and engaging website that showcases educational programs, promotes activities, and informs parents about the school’s offerings. Visually, the Playschool WordPress Theme is characterized by its bright, colourful design, which is both inviting and kid-friendly. The theme incorporates playful elements and cheerful colours that align with the joyful atmosphere of a preschool environment. High-quality images and illustrations of children engaged in various activities, such as arts and crafts, science experiments, and outdoor play, create a lively and appealing visual experience. The layout is designed to be intuitive and easy to navigate, ensuring that information is accessible and engaging for both parents and staff.
templates, pagination option and multiple inner page templates. You also have enable-disable option on all sections.
Version: 0.0.2
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: kindergarten-playschool-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments
Kindergarten Playschool Pro WordPress Theme has been created by Themagnifico(themagnifico.net), 2023.
Kindergarten Playschool Pro WordPress Theme is released under the terms of GNU GPL

/* Basic Style */



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&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&family=Protest+Riot&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&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&family=Protest+Riot&display=swap');
.bypostauthor {
  font-weight: 600;
}
/*--------- 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: #973FEA !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: #973FEA !important;
        }
        .main-navigation ul ul a {
        text-transform: none;
        font-weight: 500;
        color: #000;
        font-size: 18px;
        line-height: 1.5;
        cursor: pointer;
    }.main-navigation a {
        color: #000 !important;
        letter-spacing: 0.1em;
        font-family: Poppins;
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        text-align: left;
    }
    .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: #973FEA;
        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::before {
        content: 'New';
        position: absolute;
        top: -15px;
        left: -25px;
        background-color: #ff0000;
        color: white;
        padding: 8px 5px; 
        font-size: 12px;
        font-weight: bold;
        border-radius: 50%;
        z-index: 10;
        animation: flash 2s linear infinite; /* Continuous rotation */
        transition: background-color 0.5s ease, color 0.5s ease;
    }
    
    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;
}