@font-face {
  font-family: "Roboto";
  src: url("/roboto/Roboto-Regular.ttf");
}
@font-face {
  font-family: "Poppins-Medium";
  src: url("/Paytone_One_Poppins/Poppins/Poppins-Medium.ttf");
}
@font-face {
  font-family: "Poppins-Regular";
  src: url("/Paytone_One_Poppins/Poppins/Poppins-Regular.ttf");
}
@font-face {
  font-family: "Poppins-SemiBold";
  src: url("/Paytone_One_Poppins/Poppins/Poppins-SemiBold.ttf");
}
@font-face {
  font-family: "Paytone_One";
  src: url("/Paytone_One/PaytoneOne-Regular.ttf");
}

body { 
    background-color: #F9F4F2; 
    font-family: 'Metropolis'; 
}

/* header menu */
.navbar-nav { flex-direction: row; }
.nav-item { 
    font-family: 'Poppins-Medium';
    color: #000000;
    font-size: 14px;
    padding: 0px 20px; 
    text-decoration: none;
}

.menu-holder {
    position: fixed;
    float: left;
    width: 100%;
    background-image:  url('/images/bgwcharac.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    margin-top: -75px;
    left: 0px;
    height: 110vh;
    z-index: 9;
}
.menu-holder a.nav-item {
    padding: 15px 25px;
    color: #ffffff;
    float: left;
    width: 100%;
    font-size: 16px;
}

/* override */
.accordion-item {
    background-color: transparent;
    border: 0px;
}

.errors {
    font-family: 'Poppins-regular';
    color: #dc3545;
    font-size: 13px;
}

.grd-bg {
    background-color: #F9F4F2;
    background-image:  url('/images/bg.png');
    background-repeat: repeat;
    background-position: top center;
    background-size: cover;
}
.grd-light-bg {
    background-color: #F9F4F2; 
    border-radius: 25px;
}
.beige-bg {
    background-color: #F8F4F3; 
    border-radius: 25px;
}
.white-bg {
    background-color: #ffffff; 
    border-radius: 25px;
}
.pink-bg {
    background-color: #edbabf; 
    border-radius: 25px;
}
.blue-bg {
    background-color: #2A77E1; 
    border-radius: 25px;
}
.grey-bg {
    background-color: #ede6e3; 
    border-radius: 25px;
}
.powder-blue-bg {
    background-color: #a5c5f1; 
    border-radius: 25px;
}
.mid-blue-bg {
    background-color: #ABC5ED; 
    border-radius: 25px;
}

/* button */
.btn-href-blue {
    font-family: 'Poppins-Regular';
    color: #ffffff;
    font-size: 19px;
    background-color: #2A77E1;
    padding: 6px 20px;
    border-radius: 20px;
}
.btn-href-blue:hover {
    background-color: #2A77E1!important;
    color: #000000!important;
}
.btn-href-white {
    font-family: 'Poppins-Regular';
    color: #000000;
    font-size: 20px;
    background-color: #ffffff;
    padding: 6px 20px;
    border-radius: 20px;
}
.btn-href-white:hover {
    background-color: #ffffff!important;
    color: #000000!important;
}
.btn-href-grey {
    font-family: 'Poppins-Regular';
    color: #000000;
    font-size: 19px;
    background-color: #EDE6E3;
    padding: 6px 20px;
    border-radius: 20px;
}
.btn-href-grey:hover {
    background-color: #EDE6E3!important;
    color: #000000!important;
}
.btn-a-blue {
    font-family: Poppins-Medium;
    color: #fff;
    border: 1px solid #000;
    font-size: 14px;
    background-color: #2A77E1;
    padding: 6px 20px;
    border-radius: 20px;
}
.btn-a-blue:hover {
    border: 1px solid #000;
    background-color: #2A77E1;
}
.btn-transparent {
    font-family: Poppins-Medium;
    color: #000;
    border: 1px solid #000;
    font-size: 14px;
    background-color: transparent;
    padding: 6px 20px;
    border-radius: 20px;
}
.btn-transparent:hover {
    border: 1px solid #000;
    background-color: transparent;
}
.btn-black {
    font-family: Poppins-Medium;
    color: #fff;
    font-size: 14px;
    background-color: #000000;
    padding: 6px 20px;
    border-radius: 20px;
}
.btn-black:hover {
    color: #fff;
    background-color: #000000;
}
.btn-orange {
    font-family: Poppins-Medium;
    color: #fff;
    font-size: 14px;
    background-color: #fe8956;
    padding: 6px 20px;
    border-radius: 20px;
}
.btn-orange:hover {
    background-color: #fe8956;
}
.btn-baige {
    font-family: 'Poppins-Medium';
    color: #000000;
    font-size: 14px;
    background-color: #EDE6E3;
    padding: 6px 20px;
    border-radius: 20px;
}
.btn-baige:hover {
    background-color: #EDE6E3!important;
    color: #000000!important;
}
/* badge */
.badge-holder-sm {
    font-family: 'Poppins-Medium';
    color: #ffffff;
    text-align: center;
    border-radius: 20px;
    font-size: 11px;
    padding: 10px 15px; 
}

/* panel */
.transparent-panel {
    position: relative;
    background-color: transparent;
    border-radius: 30px;
    padding: 25px 30px;
    margin: 0px;
    float: left;
    width: 100%;
}
.beige-panel {
    position: relative;
    background-color: #f9f4f2;
    border-radius: 30px;
    padding: 25px 30px;
    margin: 0px;
    float: left;
    width: 100%;
}
.white-panel-0pad {
    position: relative;
    background-color: #fff;
    border-radius: 30px;
    margin: 0px;
    float: left;
    width: 95%;
}
.white-panel {
    position: relative;
    background-color: #fff;
    border-radius: 30px;
    padding: 25px 30px;
    margin: 0px;
    float: left;
    width: 100%;
}
.white-panel .txtBlk15 {
    font-family: 'Poppins-Regular';
    color: #000000;
    font-size: 15px;
}
.white-panel .txtBlkBold40 {
    font-family: 'Poppins-SemiBold';
    color: #000000;
    font-size: 40px;
}
/* form element */
.input-black {
    padding: 13px 13px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    width: 100%;
    font-size: 14px;
    font-family: 'Poppins-Regular';
    color: #000000;
    background-color: #F9FAFB;
}

/* footer */
.footer {
    font-family: 'Poppins-Medium';
    color: #ffffff;
    background-color: #2A77E1; 
}
.footer label {
    color: #FFB85E;
}
.footer a {
    font-family: 'Poppins-Medium';
    color: #ffffff;
    background-color: #2A77E1;
    text-decoration: none;
}

@media only screen and (min-width : 320px) {

    /* primary text */
    h1.txtBlu75 {
        font-family: 'Paytone_One';
        color: #2A77E1;
        font-size: 35px;
    }
    h1.txtBlu50 {
        font-family: 'Paytone_One';
        color: #2A77E1;
        font-size: 30px;
    }
    h1.txtBlu38 {
        font-family: 'Paytone_One';
        color: #2A77E1;
        font-size: 38px;
    }
    .txtBlu25_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #2A77E1;
        font-size: 25px;
    }
    .txtBlu21_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #2A77E1;
        font-size: 21px;
    }
    h2.txtWht50 {
        font-family: 'Paytone_One';
        color: #fff;
        font-size: 30px;
    }
    .txtWht21_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #ffffff;
        font-size: 21px;
    }
    .txtWht21 {
        font-family: 'Poppins-Medium';
        color: #ffffff;
        font-size: 21px;
    }
    .txtWht18 {
        font-family: 'Poppins-Medium';
        color: #ffffff;
        font-size: 18px;
    }
    .txtWht15 {
        font-family: 'Poppins-regular';
        color: #ffffff;
        font-size: 15px;
    }
    h2.txtBlk50 {
        font-family: 'Paytone_One';
        color: #000000;
        font-size: 30px;
    }
    .txtBlk30_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #000000;
        font-size: 30px;
    }
    .txtBlk21_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #000000;
        font-size: 16px;
    }
    .txtBlk18_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #000000;
        font-size: 18px;
    }
    .txtBlk18 {
        font-family: 'Poppins-Medium';
        color: #000000;
        font-size: 18px;
    }
    .txtBlk15 {
        font-family: 'Poppins-regular';
        color: #000000;
        font-size: 15px;
    }
    .txtBlk14 {
        font-family: 'Poppins-regular';
        color: #000000;
        font-size: 14px;
    }
    .txtBlk13 {
        font-family: 'Poppins-regular';
        color: #000000;
        font-size: 13px;
    }
    .txtBlu14 {
        font-family: 'Poppins-regular';
        color: #2A77E1;
        font-size: 14px;
    }

    .floatIcons {
        position: absolute;
        top: -25px;
        right: 10px;
        width: 30%;
    }

    .classResult { display: grid; }
    .creditResult { display: grid; }
    .minHeight650 { min-height: 725px; }
    .minHeight500 { min-height: auto; }
    .minHeight415 { min-height: auto; }
    .minHeight125 { min-height: 70px; }
    .minPaddingTop30 { padding-top: 30px; }
    .bullet-li {
        float: left;
        padding: 5px;
    }

    .showDesktop { display: none; }
    .showMobile { display: block; }

    .homepage-hero-banner {
        background-color: #F9F4F2;
        background-image:  
            url('/images/characters/KidsPass_Sports.gif'),
            url('/images/characters/KidsPass_Music.gif'),
            url('/images/characters/KidsPass_Arts.gif'),
            url('/images/characters/KidsPass_Culinary.gif'),
            url('/images/characters/KidsPass_Nature.gif'),
            url('/images/icons/dog.gif'),
            url('/images/icons/paper_plane.gif'),
            url('/images/stars/star_1.gif'),
            url('/images/stars/star_2.gif'),
            url('/images/stars/star_3.gif'),
            url('/images/stars/star_4.gif'),
            url('/images/icons/plane.svg'),
            url('/images/icons/planet.gif'),
            url('/images/icons/hot_air_balloon.gif'),
            url('/images/clouds/left_cloud.gif'),
            url('/images/clouds/middle_cloud.gif'),
            url('/images/clouds/right_cloud.gif'),
            url('/images/vector-91865.png');
        background-repeat: no-repeat;
        background-position:
            5% 75%,
            22% 96%,
            53% bottom,
            81% 96%,
            96% 72%,
            94% 28%,
            88% 3%,
            12% 70%,
            25% 5%,
            76% 8%,
            77% 60%,
            75% 55%,
            8% 7%,
            15% 57%,
            3% 28%,
            95% 5%,
            103% 55%,
            top center;
        background-size: 23%, 21%, 21%, 21%, 26%, 7%, 45%, 1%, 2%, 1%, 1.5%, 8%, 20%, 8%, 25%, 25%, 20%, 100%;
        min-height: 650px;
    }

    /* signup - partners */
    .partner-signup-hero-banner {
        background-image:  url('/images/formbgwithoutbg1.png');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }

    .parent-main-hero-banner {
        background-image:  url('/images/coming-soon.png');
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 190%;
    }

    .parent-signup-hero-banner {
        background-image:  url('/images/formbgwithoutbg1-2.png');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100%;
    }
}

@media only screen and (min-width : 480px) {
    .showDesktop { display: block; }
    .showMobile { display: none; }
}

@media only screen and (min-width: 576px) {
    .showDesktop { display: block; }
    .showMobile { display: none; }
}

@media only screen and (min-width : 768px) {

    /* primary text */
    h1.txtBlu75 {
        font-family: 'Paytone_One';
        color: #2A77E1;
        font-size: 35px;
    }
    h1.txtBlu50 {
        font-family: 'Paytone_One';
        color: #2A77E1;
        font-size: 30px;
    }
    h1.txtBlu38 {
        font-family: 'Paytone_One';
        color: #2A77E1;
        font-size: 38px;
    }
    .txtBlu25_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #2A77E1;
        font-size: 25px;
    }
    .txtBlu21_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #2A77E1;
        font-size: 21px;
    }
    h2.txtWht50 {
        font-family: 'Paytone_One';
        color: #fff;
        font-size: 30px;
    }
    .txtWht21_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #ffffff;
        font-size: 21px;
    }
    .txtWht21 {
        font-family: 'Poppins-Medium';
        color: #ffffff;
        font-size: 21px;
    }
    .txtWht18 {
        font-family: 'Poppins-Medium';
        color: #ffffff;
        font-size: 18px;
    }
    .txtWht15 {
        font-family: 'Poppins-regular';
        color: #ffffff;
        font-size: 12px;
    }
    h2.txtBlk50 {
        font-family: 'Paytone_One';
        color: #000000;
        font-size: 30px;
    }
    .txtBlk30_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #000000;
        font-size: 30px;
    }
    .txtBlk21_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #000000;
        font-size: 16px;
    }
    .txtBlk18_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #000000;
        font-size: 18px;
    }
    .txtBlk18 {
        font-family: 'Poppins-Medium';
        color: #000000;
        font-size: 18px;
    }
    .txtBlk15 {
        font-family: 'Poppins-regular';
        color: #000000;
        font-size: 12px;
    }
    .txtBlk14 {
        font-family: 'Poppins-regular';
        color: #000000;
        font-size: 14px;
    }
    .txtBlk13 {
        font-family: 'Poppins-regular';
        color: #000000;
        font-size: 13px;
    }
    .txtBlu14 {
        font-family: 'Poppins-regular';
        color: #2A77E1;
        font-size: 14px;
    }

    .floatIcons {
        position: absolute;
        top: -25px;
        right: 10px;
        width: 30%;
    }

    .classResult { display: contents; }
    .creditResult { display: contents; }
    .minHeight500 { min-height: auto; }
    .bullet-li {
        float: left;
        padding: 5px;
    }

    .showDesktop { display: none; }
    .showMobile { display: block; }
}

@media only screen and (min-width : 992px) {
    .showDesktop { display: block; }
    .showMobile { display: none; }
}

@media only screen and (min-width : 1200px) {

    /* primary text */
    h1.txtBlu75 {
        font-family: 'Paytone_One';
        color: #2A77E1;
        font-size: 75px;
    }
    h1.txtBlu50 {
        font-family: 'Paytone_One';
        color: #2A77E1;
        font-size: 50px;
    }
    h1.txtBlu38 {
        font-family: 'Paytone_One';
        color: #2A77E1;
        font-size: 38px;
    }
    .txtBlu25_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #2A77E1;
        font-size: 25px;
    }
    .txtBlu21_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #2A77E1;
        font-size: 21px;
    }
    h2.txtWht50 {
        font-family: 'Paytone_One';
        color: #fff;
        font-size: 50px;
    }
    .txtWht21_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #ffffff;
        font-size: 21px;
    }
    .txtWht21 {
        font-family: 'Poppins-Medium';
        color: #ffffff;
        font-size: 21px;
    }
    .txtWht18 {
        font-family: 'Poppins-Medium';
        color: #ffffff;
        font-size: 18px;
    }
    .txtWht15 {
        font-family: 'Poppins-regular';
        color: #ffffff;
        font-size: 15px;
    }
    h2.txtBlk50 {
        font-family: 'Paytone_One';
        color: #000000;
        font-size: 50px;
    }
    .txtBlk30_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #000000;
        font-size: 30px;
    }
    .txtBlk21_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #000000;
        font-size: 21px;
    }
    .txtBlk18_SemiBold {
        font-family: 'Poppins-SemiBold';
        color: #000000;
        font-size: 18px;
    }
    .txtBlk18 {
        font-family: 'Poppins-Medium';
        color: #000000;
        font-size: 18px;
    }
    .txtBlk15 {
        font-family: 'Poppins-regular';
        color: #000000;
        font-size: 15px;
    }
    .txtBlk14 {
        font-family: 'Poppins-regular';
        color: #000000;
        font-size: 14px;
    }
    .txtBlk13 {
        font-family: 'Poppins-regular';
        color: #000000;
        font-size: 13px;
    }
    .txtBlu14 {
        font-family: 'Poppins-regular';
        color: #2A77E1;
        font-size: 14px;
    }

    .bullet-li {
        float: none;
        padding: 5px;
    }

    .classResult { display: -webkit-inline-box; }
    .creditResult { display: -webkit-inline-box; }

    .minHeight650 { min-height: 650px; }
    .minHeight500 { min-height: 500px; }
    .minHeight415 { min-height: 415px; }
    .minHeight125 { min-height: 125px; }
    .minPaddingTop30 { padding-top: 0px; }
    .showDesktop { display: block; }
    .showMobile { display: none; }

    .p-3 { padding: 30px; }

    .pt-5 { padding-top: 50px; }
    .pt-4 { padding-top: 40px; }
    .pb-4 { padding-bottom: 40px; }
    .pt-3 { padding-top: 30px; }
    .pb-3 { padding-bottom: 30px; }
    .pt-2 { padding-top: 20px; }
    .pb-2 { padding-bottom: 20px; }

    .s_icons {
        width: 65%;
        text-align: center;
        margin: 0 auto;
    }

    .floatIcons {
        position: absolute;
        top: -25px;
        right: 10px;
        width: 30%;
    }

    .homepage-hero-banner {
        background-color: #F9F4F2;
        background-image:  
            url('/images/characters/KidsPass_Sports.gif'),
            url('/images/characters/KidsPass_Music.gif'),
            url('/images/characters/KidsPass_Arts.gif'),
            url('/images/characters/KidsPass_Culinary.gif'),
            url('/images/characters/KidsPass_Nature.gif'),
            url('/images/icons/dog.gif'),
            url('/images/icons/paper_plane.gif'),
            url('/images/stars/star_1.gif'),
            url('/images/stars/star_2.gif'),
            url('/images/stars/star_3.gif'),
            url('/images/stars/star_4.gif'),
            url('/images/icons/plane.svg'),
            url('/images/icons/planet.gif'),
            url('/images/icons/hot_air_balloon.gif'),
            url('/images/clouds/left_cloud.svg'),
            url('/images/clouds/middle_cloud.svg'),
            url('/images/clouds/right_cloud.svg'),
            url('/images/vector-91865.png');
        background-repeat: no-repeat;
        background-position:
            27% bottom,
            39.5% bottom,
            51% bottom,
            62% bottom,
            73% bottom,
            94% 43%,
            88% 3%,
            12% 70%,
            25% 5%,
            76% 8%,
            77% 60%,
            75% 55%,
            16% 7%,
            15% 57%,
            3% 28%,
            85% 15%,
            103% 55%,
            top center;
        background-size: 12%, 10%, 10%, 10%, 12%, 7%, 25%, 1%, 2%, 1%, 1.5%, 8%, 8%, 8%, 25%, 10%, 20%,100%;
        min-height: 100vh;
    }

    .partner-hero-banner { min-height: 625px; }
    .partners .activitiesSection {
        background-image: url('/images/icons/paper_plane.gif');
        background-position: 92% top;
        background-repeat: no-repeat;   
        background-color: #FFFFFF; 
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }

    .partner-hero-banner .hero-banner {
        background-color: #FFFFFF;
        background-image:  
            url('/images/characters/KidsPass_Sports.gif'),
            url('/images/characters/KidsPass_Music.gif'),
            url('/images/characters/KidsPass_Arts.gif'),
            url('/images/characters/KidsPass_Culinary.gif'),
            url('/images/characters/KidsPass_Nature.gif'),
            url('/images/stars/star_1.gif'),
            url('/images/stars/star_2.gif'),
            url('/images/stars/star_3.gif'),
            url('/images/stars/star_4.gif');
        background-repeat: no-repeat;
        background-position:
            20% bottom,
            35.5% bottom,
            49% bottom,
            62% bottom,
            76% bottom,
            9% 70%,
            9% 28%,
            76% 24%,
            64% 46%;
        background-size: 14%, 12%, 12%, 12%, 14%, 1%, 2%, 1%, 1.5%;
        min-height: 625px;
    }

    /* slider */
    .partner-hero-banner .slider {
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: relative;
    }
     
    .partner-hero-banner .slider .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        animation: slider 12.5s infinite;
    }
     
    .partner-hero-banner .slider .slide:nth-child(1) {
       background-image: url('/images/hero/s1.png');
       animation-delay: 0s;
    }

    .partner-hero-banner .slider .slide:nth-child(2) {
       background-image: url('/images/hero/s2.png');
       animation-delay: -2.5s;
    }

    .partner-hero-banner .slider .slide:nth-child(3) {
       background-image: url('/images/hero/s3.png');
       animation-delay: -5s;
    }

    .partner-hero-banner .slider .slide:nth-child(4) {
       background-image: url('/images/hero/s4.png');
       animation-delay: -7.5s;
    }

    .partner-hero-banner .slider .slide:nth-child(5) {
       background-image: url('/images/hero/s5.png');
       animation-delay: -10s;
    }

    @keyframes slider {
      0%, 16%, 100% {
        opacity: 1;
        animation-timing-function: ease;
        z-index: 0;
      }
      20% {
        opacity: 0;
        animation-timing-function: step-end;
        z-index: 0;
      }
      96% {
        opacity: 1;
        animation-timing-function: step-end;
        z-index: -1;
      }
    }

    /* signup - partners */
    .partner-signup-hero-banner {
        background-image:  url('/images/formbgwithoutbg1.png');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
    }

    .parent-main-hero-banner {
        background-image:  url('/images/coming-soon.png');
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 100%;
    }

    .parent-signup-hero-banner {
        background-image:  url('/images/formbgwithoutbg1.png');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100%;
    }
}