html,
body {
    background: url('../img/background.png');
    margin: 0px;
    overflow: hidden;
    font-family: Barlow;
    color: #494949;
    padding: 0;
    font-size: 1.75vh;
    width: 100vw;
    text-align: center;
    /* scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory; */
}

#loader {
/*    display: none;*/
}

input,
select {
    font-size: 1rem;
}

span#alert, span#alert2  {
    width: 100%;
    display: block;
    margin-top: 1rem;
    text-align: center;
}

@keyframes crescendo {
    0% {
        transform: scale(.8);
    }

    100% {
        transform: scale(1.5);
    }
}

.scroller {

    overflow-y: scroll;
    height: 100vh;
    /* scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory; */
}

.scroller section {
    /* scroll-snap-align: start;
    scroll-snap-stop: always;*/
}

#c {
    z-index: 70;
    pointer-events: none;
}

.fixed100 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

main {
    width: 100vw;
    z-index: 5;
    text-align: center;
}

section {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
    align-items: center;
    justify-content: center;
    border: thin dashed lightgrey;
}

#scrollProgress {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 99;
    font-size: 2vh;
}

.texture {
    background: url('../img/texture-white.jpg');
    mix-blend-mode: multiply;
    z-index: 90;
    pointer-events: none;
    background-size: cover;
}

#nav {
    z-index: 70;
    position: fixed;
    width: 100vw;
    height: 100vh;
}

#info {
    margin: 2.5rem;
    width: fit-content;
    position: fixed;
    z-index: 120;
    scale: 0;
}

#logo {
    position: fixed;
    top: 42vh;
    scale: 1;
    text-align: center;
    z-index: 110;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 7vh;
    pointer-events: none;
    transform-origin: 0 0;
    scale: 1.5;
}

.but, .formBut {
    cursor: pointer;
    transition: all 0.25s ease;
    font-weight: bold;
    z-index: 1000;
    position: relative;
    pointer-events: auto;
}

.but:hover,.formBut:hover {
    transform: scale(1.1);
}


#socmed {
    position: fixed;
    bottom: 3rem;
    left: 3rem;
    z-index: 120;
    scale: 0;
    height: 5vh;
    max-height: 1.5rem;
}

#navbar {
    width: 100%;
    position: fixed;
    bottom: 15%;
    z-index: 120;
    scale: 1;
    clip-path: circle(110% at 50% 100%);
    transform-origin: 50% 95%;
    /* transition: clip-path 0.5s; */
    pointer-events: none;
    transform: translateX(50%);
    left: 45vw;
}

#socmed img {
    margin-right: 1.5rem;
    height: 100%;
    width: auto;
}

section h2 {
    font-size: 1rem;
    bottom: 0.5rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

#wa, #iq {
    width: 100%;
    position: fixed;
    left: 41vw;
    bottom: 2.5rem;
    z-index: 120;
    transform: translateX(50%);
    transform-origin: 50% 95%;
    pointer-events: none;
    scale: 0;    
}
#iq{left: 45.3vw;}

#navbar .root {
    /*clip-path: inset(92% 0px 0px 0px);*/
}

.flora {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
}

.flora6 {
    z-index: 60;
    top: 130%;
}

.flora5 {
    z-index: 50;
    top: 145%;
}

.flora4 {
    z-index: 40;
    top: 150%;
}

.flora3 {
    z-index: 30;
    top: 113%;

}

.flora2 {
    z-index: 20;
    top: 122%;

}

.flora1 {
    z-index: 10;
    top: 50%;
    height: 100vh !important;
    opacity: 0;

}

.flora0 {
    z-index: 5;
    top: 50%;
    width: 100%;
    height: 100% !important;
    background: #cedbd1;
    left: 50%;
}

section .flora {
    width: 100%;
    height: auto;
}

#preloader {
    transform-origin: 50% 50%;
    position: fixed;
    z-index: 21;
    height: 80vh;
    top: 45vh;
    left: 50%;
    scale: 1;
    translate: -50% -50%;
}

#bg-container {
    position: absolute;
    z-index: 100;
    width: 80vw;
    max-width: 50rem;
    text-align: center;
    transform: translate(-50%, -50%);
    top: 65%;
    left: 50%;
    transform-origin: 0 0;
    scale: 1;
}

#bg-container div,
#bg-container p {
    color: #46646e;
}

.text-green {
    color: #638f35;
}



.child-svg {
    position: absolute;
    transform: translate(-50%);
    z-index: 50;
    top: 40vh;
    left: 40vw;
    height: 25vh;
}

#home .container {
    z-index: 100;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 85vh;
    opacity: 0;
    left: 50%;

}
#home .pad {
    padding: 0 .5rem;
}

#philosophy .container {
    position: absolute;
    transform: translate(-50%);
    top: 16vh;
    left: 50%;
    text-align: left;
}

#philosophy .container .below p {
    top: 64vh;
    position: absolute;
    font-size: 0.9rem;
    padding-left: 1rem;
    border-left: 0.5rem solid #679538;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    width: 85%;
}

.absolute {
    position: absolute;
    transform: translate(-50%);
}

#child h1 {
    top: 40vh;
    font-size: 2.5rem;
    position: absolute;
}

#child .l1 {
    top: 29vh;
    position: absolute;
}

#child .l2 {
    top: 55vh;
    position: absolute;
}

#child .l3 {
    top: 65vh;
    position: absolute;
}

#child .r1 {
    top: 28vh;
    position: absolute;
}

#child .r2 {
    top: 40vh;
    position: absolute;
}

#child .r3 {
    top: 48vh;
    position: absolute;
}

#child .r4 {
    top: 56vh;
    position: absolute;
}

#child .r5 {
    top: 65vh;
    position: absolute;
}

#child .left {
    left: 13vw;
    width: 23vw;
    text-align: left;
    position: absolute;
}

#child .right {
    width: 25vw;
    text-align: left;
    left: 65vw;
    position: absolute;
}


#educators h1 {
    top: 24vh;
    font-size: 2.5rem;
    position: absolute;
}

#educators .l1 {
    top: 18vh;
    position: absolute;
}

#educators .l2 {
    top: 37vh;
    position: absolute;
}

#educators .l3 {
    top: 51vh;
    width: 270px;
    position: absolute;
}


#educators .r1 {
    top: 17vh;
    position: absolute;
}

#educators .r2 {
    top: 32vh;
    position: absolute;
}
#educators .r3 {
    top: 52vh;
    left: 12vh;
    position: absolute;
}



#educators .container .left {
    left: 11vw;
    width: 23vw;
    text-align: left;
    opacity: 1;
    position: absolute;
}

#educators .container .right {
    width: 22vw;
    text-align: left;
    left: 67vw;
    opacity: 1;
    position: absolute;
}

#educators #gardening .left {
    left: 50%;
    position: absolute;
    width: 100px;
    height: 100px;
}

#educators #gardening .right {
    width: 22vw;
    text-align: left;
    left: 67vw;
    opacity: 1;
    position: absolute;
}

#educators .m1 {
    left: 50%;
    height: 23vh;
    top: 51vh;
    z-index: 105;
    position: absolute;
    transform: translate(-152%);
}

#educators .m5 {
    height: 13vh;
    bottom: -30%;
    z-index: 105;
    position: absolute;
    transform: translate(-140%);
    transform-origin: 0% 0%;
    scale: 1;
    right: 21%;
}

#educators .m2 {
    left: 50%;
    height: 13vh;
    top: 65vh;
    z-index: 106;
    position: absolute;
    transform: translate(-162%);
}

#educators .m3 {
    left: 50%;
    height: 12vh;
    top: 70vh;
    z-index: 107;
    position: absolute;
    transform: translate(-233%);
}

#educators .m4 {
    left: 50%;
    height: 57vh;
    top: 19vh;
    transform: translate(-64%);
}

#educators .n1 {
    left: 50%;
    height: 23vh;
    top: 51vh;
    z-index: 100;
    position: absolute;
    transform: translate(60%);
}

#educators .n2 {
    left: 50%;
    height: 27vh;
    top: 49vh;
    z-index: 101;
    position: absolute;
    transform: translate(48%);
}

#educators .n3 {
    left: 50%;
    height: 42vh;
    top: 39vh;
    z-index: 1002;
    position: absolute;
    transform: translate(72%);
}

#educators .n4 {
    left: 50%;
    height: 26vh;
    top: 58vh;
    position: absolute;
    transform: translate(-2%);
    z-index: 1004;
}



#program h1 {
    top: 30vh;
    font-size: 2.5rem;
    position: absolute;
}

#program .l1 {
    top: 41vh;
    font-weight: bold;
    font-size: 1.5rem;
    position: absolute;
}

#program .l2 {
    top: 45vh;
    position: absolute;
}


#program .r1 {
    top: 25vh;
    position: absolute;
}

#program .r2 {
    top: 27vh;
}

#program .r3 {
    top: 37vh;
    left: 81vw !important;
    width: 11vw !important;
}



#program .left {
    left: 11vw;
    width: 23vw;
    text-align: left;
    position: absolute;
}

#program .right {
    width: 25vw;
    text-align: left;
    left: 70vw;
    position: absolute;
}

#program .m1 {
    left: 50%;
    height: 23vh;
    top: 9vh;
    z-index: 105;
    position: absolute;
    transform: translate(-116%);
}

#program .m2 {
    left: 50%;
    height: 13vh;
    top: 65vh;
    z-index: 106;
    position: absolute;
    transform: translate(-140%);
}

#program .m3 {
    left: 50%;
    height: 12vh;
    top: 70vh;
    z-index: 107;
    position: absolute;
    transform: translate(-214%);
}

#program .m4 {
    left: 50vw;
    height: 52vh;
    top: 18vh;
}

#program .n1 {
    left: 50%;
    height: 23vh;
    top: 51vh;
    z-index: 100;
    position: absolute;
    transform: translate(55%);
}

#program .n2 {
    left: 50%;
    height: 27vh;
    top: 49vh;
    z-index: 101;
    position: absolute;
    transform: translate(26%);
}

#program .n3 {
    left: 50%;
    height: 42vh;
    top: 39vh;
    z-index: 1002;
    position: absolute;
    transform: translate(54%);
}

#program .n4 {
    left: 50vw;
    height: 19vh;
    top: 63vh;
    position: absolute;
    transform: translate(14%);
    z-index: 1004;
}

li {
    content: "";
    padding: 1rem 1rem 1rem 2.5rem;
    list-style: none;
    background: url('../img/radio-off.png') no-repeat left center;
    vertical-align: middle;
    background-size: 2rem;
    cursor: pointer;
}

li:hover,
li.active {
    font-weight: bold;
    background: url('../img/radio-on.png') no-repeat left center;
}

ul {
    margin: 0;
    padding: 0;
}


#environment h1 {
    top: 28vh;
    font-size: 2.25rem;
    position: absolute;
}

#environment .l1 {
    top: 39vh;
    position: absolute;
}

#environment .l2 {
    top: 54vh;
    position: absolute;
}


#environment .r1 {
    top: 39vh;
    position: absolute;
}

#environment .r2 {
    top: 54vh;
    position: absolute;
}

#environment .r3 {
    top: 67vh;
    position: absolute;
}



#environment .left {
    left: 8vw;
    width: 23vw;
    text-align: left;
    z-index: 81;
    position: absolute;
}

#environment .right {
    width: 17vw;
    text-align: left;
    left: 73vw;
    position: absolute;
}

#environment .m1 {
    left: 50%;
    height: 75vh;
    top: 25vh;
    z-index: 105;
    position: absolute;
    transform: translate(-45%);
}

#environment .m2 {
    left: 50%;
    height: 11vh;
    top: 65vh;
    z-index: 106;
    position: absolute;
    transform: translate(-190%);
    Margin-left: 10px;
}

#environment .m3 {
    left: 50%;
    height: 12vh;
    top: 24vh;
    z-index: 107;
    position: absolute;
    transform: translate(-169%);
}


#environment .n1 {
    left: 50%;
    height: 18vh;
    top: 29vh;
    z-index: 110;
    position: absolute;
    transform: translate(-6%);
}

#environment .n2 {
    left: 50%;
    height: 9vh;
    top: 59vh;
    z-index: 110;
    position: absolute;
    transform: translate(156%);
}

#contact h1 {
    top: 41vh;
    font-size: 2.5rem;
    position: absolute;
}

#contact .l1 {
    top: 21vh;
    position: absolute;
}

#contact .l2 {
    top: 53vh;
    position: absolute;
}


#contact .r1 {
    top: 34vh;
}

#contact .r2 {
    top: 66vh;
}



#contact .left {
    left: 13vw;
    width: 17vw;
    text-align: left;
    position: absolute;
}

#contact .right {
    width: 17vw;
    text-align: left;
    left: 80vw;
    position: absolute;
}

#contact .m1 {
    left: 50%;
    height: 75vh;
    top: 25vh;
    z-index: 105;
    position: absolute;
    transform: translate(-45%);
}

#contact .m2 {
    left: 50%;
    height: 13vh;
    top: 65vh;
    z-index: 106;
    position: absolute;
    transform: translate(-282%);
}

#contact .m3 {
    left: 50%;
    height: 12vh;
    top: 24vh;
    z-index: 107;
    position: absolute;
    transform: translate(-169%);
}


#contact .n1 {
    left: 50%;
    height: 18vh;
    top: 29vh;
    z-index: 110;
    position: absolute;
    transform: translate(-6%);
}

#contact .n2 {
    left: 50%;
    height: 9vh;
    top: 59vh;
    z-index: 110;
    position: absolute;
    transform: translate(156%);
}

#contact .but a{color: inherit; text-decoration: none;}


.gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: #bfd7c8b3;
    backdrop-filter: blur(5px);
}



.h-100 {
    height: 100vh;
}


#navbar .hot {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: fit-content;
    bottom: 0;
    height: 100%;
}

.child .b1 {
    bottom: 23%;
    transform: translate(23%);
}

.child .b2 {
    transform: translate(21%);
    bottom: 38%;
}

.child .b3 {
    transform: translate(24%);
    bottom: 51%;
}

.educators .b1 {
    bottom: 30%;
    transform: translate(11%);
}

.educators .b2 {
    transform: translate(10%);
    bottom: 49%;
}

.educators .b3 {
    transform: translate(30%);
    bottom: 62%;
}

.hot .but {
    padding: 0.5rem 1rem 1rem 1rem;
    color: #ffffff00;
    font-weight: bold;
    z-index: 200;
    cursor: pointer;
    width: max-content;
}

.hot .round {
    width: 1.2rem;
    height: 1.2rem;
    background: white;
    z-index: 121;
    display: inline-block;
    margin-right: 0.5rem;
    border-radius: 10rem;
    border: 4px solid #b6cd97;
    margin-bottom: -0.6rem;
    scale: 1;
    transform: none;
}

.hot .but:hover,
.hot .but.active {
    background: #69963b;
    color: white;
}

button.owl-close {
    background: none !important;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
}

#program .owl-item img {
    margin-bottom: 3rem;
}

#program .paragraph {
    padding: 2rem 3rem 0rem;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: #bfd7c8;
}
.popup-promo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .5);
}
.popup-promo a, .popup-promo iframe{z-index: 2;}
.popup-promo img{max-width: 100%;}
#close-promo{position: absolute; top: 5%; right: 5%; pointer-events: none; z-index: 99;}
.promo-home{position: fixed; bottom: 100px; left: 50px; z-index: 1; scale: 0; text-align: left;}
.promo-home img{max-width: 100%; transition: all .4s;}
.promo-home img:hover{transform: scale(1.05);}
#promo{flex-wrap: wrap; flex-direction: row;}
#promo img{transition: all .4s;}
#promo img:hover{transform: scale(1.02);}
#promo ._btn, .welcome ._btn{cursor: pointer; margin-top: 30px; background: #69963b; color: white; font-size: 16px; line-height: 22px; font-size: bold; padding: 10px 30px; text-decoration: none; transition: all .4s;}
#promo ._btn:hover, .welcome ._btn:hover{transform: scale(1.02);}
#promo .d-flex{display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; align-content: center; gap: 30px; z-index: 2; height: 100%; overflow: auto; padding: 20px; padding-bottom: 0;}

#inpo img {
    height: 100vh;
    left: 50%;
}

#inpo .paragraph {
    left: 50%;
    top: 50vh;
    text-align: center;
    width: 90vw;
    transform: translate(-50%, -50%);
    position: absolute;
    max-width: 36rem;
}

#inpo .paragraph div,
#inpo .paragraph p {
    color: #46646e;
}

.overlay {
    background-color: transparent;
    inset: 0;
    position: fixed;
    z-index: 0;
    pointer-events: auto;
}

p {
    line-height: 1.75rem;
    padding: 0;
    margin: 0;
    margin-bottom: 1.25rem;
}

.d-none {
    z-index: -1;
    opacity: 0;
}

.col {
    display: inline-block !important;
    /* width: 50%;*/
    vertical-align: text-top;
}

.w-50 {
    width: 50%;
}

.w-25 {
    width: 25%;
}

.w-33 {
    width: 33%;
}

.w-60 {
    width: 60%;
}

.w-40 {
    width: 39%;
}

.w-66 {
    width: 67%;
}

.push-right {
    padding: 0 0 0 5rem !important;
}

#environment .item .title {
    position: absolute;
    background: white;
    padding: 2rem 10%;
    font-weight: bold;
    left: 0px;
    top: 1.5rem;
    font-size: 1.5rem;
}

#environment .owl-item .item {
    padding: 4rem 0;
}

p.small {
    font-size: 0.8rem;
}

#contact .icon {
    height: 2.5rem;
    width: auto;
    display: inline-block;
    margin-bottom: -1rem;
    margin-left: 0.5rem;
}

#contact .item .formBut {
    text-align: center;
    width: fit-content;
    float: right;
    margin: 0 auto;
    background: none;
    border: none;
}


input {
    background: none;
    border: none;
    /* width: 100%; */
    color: #6e6e6e;
}
input[type=text], input[type=email]{width: 100%;}
input[type=checkbox]{margin-bottom: 10px;}
input[type=checkbox] + label{padding-left: 5px;}

#contact table h1 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 2.5rem;
}

#contact td.td-left {
    /* padding: 0.5rem 1rem; */
    width: 33%;
}


#contact td.td-right {
    padding: 0.75rem 1rem;
    border-bottom: thin solid lightgrey;
    width: 66%;
}

#contact .dm-2 td.td-left {
    width: 25%;
}


#contact .dm-2 td.td-right {
    width: 40%;
}

table.dm-2 {
    color: #7c7c7c;
    border-spacing: 3rem 0rem;
}

.w-100 {
    width: 100%;
}

*:focus {
    outline: none;
}

select {
    border: none;
    background: white;
    width: 100%;
    color: #7d7d7d;
}



#navbar .but {
    position: absolute;
    transform: translate(-50%);
}


#navbar .root {
    height: 80vh;
    max-height: 50rem;
    width: auto;
    pointer-events: none;
}

#navbar .but:nth-child(1) {
    bottom: 71%;
    transform: translate(-76%, -50%);
}


#navbar .but:nth-child(2) {
    bottom: 65%;
    transform: translate(-52%, -50%);
}


#navbar .but:nth-child(3) {
    bottom: 53%;
    transform: translate(-76%, -50%);
}

#navbar .but:nth-child(4) {
    bottom: 41%;
    transform: translate(-49%, -50%);
}


#navbar .but:nth-child(5) {
    bottom: 28%;
    transform: translate(-40%, -50%);
}

#navbar .but:nth-child(6) {
    bottom: 18%;
    transform: translate(-49%, -50%);
}

#navbar .but:nth-child(7) {
    bottom: 7%;
    transform: translate(-32%, -50%);
}

#logo .static,
#logo .anim {
    position: absolute;
    height: 100%;
    width: auto;
    transform: translate(-50%, -50%);
}

#walk {
    display: none;
    position: fixed;
    top: 22vh;
    scale: 1;
    text-align: center;
    z-index: 110;
    left: 49vw;
    transform: translate(-50%, -50%);
    height: 22vh;
    pointer-events: none;
    transform-origin: 0 0;
}

#walk img {
    position: absolute;
    height: 100%;
    width: auto;
    transform: translate(-50%, -50%);
}

#discover {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    /* top: 8rem; */
    scale: 0;
    transform-origin: 0 0;
}

img#blossom {
    position: absolute;
    left: 50%;
    top: 7%;
    scale: 1;
    height: 13%;
    transform: translateX(-42%);
}

.icon-wa img {
    width: 49px;
    height: 49px;
    cursor: pointer;
}

.icon-wa {
    position: fixed;
    bottom: 85px;
    right: 36px;
    transition: all .3s;
}

.icon-wa:hover {
    transform: scale(1.1);
}

.wa-list {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    display: flex;
    flex-direction: column;
    font-size: var(--f-16);
    color: var(--c-black);
    list-style: none;
    font-weight: 600;
    transition: all .4s;
    opacity: 0;
    z-index: 300;
    pointer-events: none;
    padding: 2rem;
    transform: translate(-100%, 0%);
}

.wa-list li {
    width: 140px;
    padding: 10px;
    background: var(--c-white);
    border-radius: 30px;
    margin-bottom: 10px;
    text-align: center;
    transition: all .4s;
    box-shadow: none;
    background: white;
}

.wa-list li:hover {

    box-shadow: 0px 10px 15px -3px rgb(74, 149, 3, .2);
}

.wa-list li a {
    color: var(--c-black);
    text-decoration: none;
}

.wa:hover .wa-list {
    opacity: 1;
}

.wa:hover>.wa-list {

    pointer-events: auto;
}

div#grow {
    position: fixed;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

#g1 {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    bottom: 25%;
    height: 68%;
    /* pointer-events: none; */
}

#g1 .trace {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: auto;
    opacity: 0;
}

#g1 .grass {
    position: absolute;
    bottom: -11%;
    height: 45%;
    scale: 1;
    transform: translateX(9%);
    transform-origin: bottom;

}

#g1 .p1 {
    position: absolute;
    bottom: 7%;
    height: 27%;
    scale: 1;
    transform-origin: bottom;
}

#g1 .p2 {
    position: absolute;
    bottom: 29%;
    height: 18%;
    scale: 1;
    transform-origin: bottom;
    transform: translateX(-8%);
}


#g1 .p3 {
    position: absolute;
    bottom: 39%;
    height: 26%;
    scale: 1;
    transform-origin: bottom;
    transform: translateX(-9%);
}

#g1 .p4 {
    position: absolute;
    bottom: 60%;
    height: 13%;
    scale: 1;
    transform-origin: bottom;
    transform: translateX(-1%);
}

#g1 .p5 {
    position: absolute;
    bottom: 68%;
    height: 17%;
    scale: 1;
    transform-origin: bottom;
    transform: translateX(0%);
}

#g1 .p6 {
    position: absolute;
    bottom: 82%;
    height: 10%;
    scale: 1;
    transform-origin: bottom;
    transform: translateX(-9%);
}

#g1 .p7 {
    position: absolute;
    bottom: 89%;
    height: 9%;
    scale: 1;
    transform-origin: bottom;
    transform: translateX(-23%);
}

#g1 .p8 {
    position: absolute;
    bottom: 7%;
    height: 100%;
    scale: 1;
    transform-origin: bottom;
    transform: translateX(6%);
    opacity: 0;
}

#g1 .p9 {
    position: absolute;
    bottom: 81%;
    height: 24%;
    scale: 1;
    transform: translateX(34%);
}



#g1 .p10 {
    position: absolute;
    bottom: 0;
    height: 54%;
    scale: 1;
    transform-origin: bottom;
    transform: translateX(-8%);
    display: none;
}

#g1 .p11 {
    position: absolute;
    bottom: 10%;
    height: 19%;
    scale: 1;
    transform-origin: bottom;
    transform: translateX(-8%);
    display: none;
}

.scene3d {
    z-index: 50;
    opacity: 0;
}


.scene3d.flora {
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
}


.child.hot,
.educators.hot {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.child .but,
.educators .but {
    position: absolute;
    pointer-events: auto;
}

div#plants {
    z-index: 51;
}

img.sun {
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

.row {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    overflow: hidden;
}




.col.col-60:nth-child(1) {
    width: 60%;
}

.col.col-40 {
    width: 39%;
}

.owl-carousel h3 {
    font-size: 1.5rem;
}





.owl-carousel button {
    pointer-events: auto;
}

.owl-close.outer {
    margin-top: 2rem;
}

.owl-carousel .owl-nav.disabled {
    display: block !important;
}



/*-------------------------------------------------------------*/

@keyframes grassanim1 {
    0% {
        transform: skew(0deg, 0deg);
    }

    50% {
        transform: skew(5deg, 0deg);
    }

    100% {
        transform: skew(0deg, 0deg);
    }
}

@keyframes grassanim2 {
    0% {
        transform: skew(0deg, 0deg);
    }

    50% {
        transform: skew(-5deg, 0deg);
    }

    100% {
        transform: skew(0deg, 0deg);
    }
}

@keyframes grassanim3 {
    0% {
        transform: skew(5deg, 0deg);
    }

    50% {
        transform: skew(0deg, 0deg);
    }

    100% {
        transform: skew(5deg, 0deg);
    }
}

@keyframes grassanim4 {
    0% {
        transform: skew(-5deg, 0deg);
    }

    50% {
        transform: skew(5deg, 0deg);
    }

    100% {
        transform: skew(-5deg, 0deg);
    }
}

#g2 {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    bottom: 30%;
    height: 72%;
    width: 100%;
    transform-origin: 50% 100%;
    scale: 1;
    pointer-events: none;
}

#g2 .trace {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: auto;
    opacity: 0.5;
    display: none;
}

#g2 .grass {
    transform-origin: bottom;
    position: absolute;
    bottom: 0;
    scale: 1;

}

#g2 .grass1 {
    opacity: 1;
    height: 9%;
    bottom: 2%;
    transform-origin: 64% 82%;
    transform: skew(0deg, 0deg);
    translate: 23%;
    animation: grassanim1 6s linear infinite;
}

#g2 .grass2 {
    opacity: 1;
    height: 15%;
    bottom: 0%;
    transform-origin: 28% 88%;
    animation: grassanim2 10s linear infinite;
    translate: -29%;
}

#g2 .grass3 {
    opacity: 1;
    height: 9%;
    bottom: 1%;
    transform-origin: 70% 73%;
    animation: grassanim3 4s linear infinite;
    translate: 23%;
}

#g2 .grass4 {
    opacity: 1;
    height: 11%;
    bottom: 1%;
    transform-origin: 30% 75%;
    animation: grassanim4 8s linear infinite;
    translate: -31%;
}

#g2 .rumput {
    z-index: 1;
}

#g2 .up {
    z-index: 0;
    transform-origin: 40% 100%;
    rotate: 0deg;
    bottom: 0.5%;
}

#g2 .rumput,
#g2 .up {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    width: 20%;
    position: absolute;
}

#g2 .branch,
#g2 .leaf,
#g2 .floret,
#g2 .petal {
    position: absolute;
    rotate: 0deg;
    scale: 1;
}



#g2 .branch1 {
    transform-origin: 0% 100%;
    height: 88%;
    translate: 20%;
    bottom: 1%;
    clip-path: circle(100% at -6% 20%);
}

#g2 .branch2 {
    transform-origin: 96% 36%;
    height: 11%;
    translate: -44%;
    bottom: 62%;
    clip-path: circle(120% at 100% 0%);
}

#g2 .branch3 {
    transform-origin: 95% 100%;
    height: 19%;
    translate: -44%;
    bottom: 69%;
    clip-path: circle(120% at 100% 100%);
}

#g2 .branch4 {
    transform-origin: 0% 100%;
    height: 15%;
    translate: 52%;
    bottom: 68%;
    clip-path: circle(140% at 0% 100%);
}

#g2 .branch5 {
    transform-origin: 0% 7%;
    height: 20%;
    translate: 53%;
    bottom: 50%;
    clip-path: circle(130% at 0% 0%);
}

.streak {
    height: 100%;
}

#g2 .branch6 {
    transform-origin: 87% 6%;
    height: 98%;
    translate: 67%;
    bottom: -21%;
    clip-path: circle(140% at 100% 0%);
}

#g2 .branch7 {
    transform-origin: 92% 96%;
    height: 45%;
    translate: 96%;
    bottom: 41%;
    clip-path: circle(150% at 100% 100%);
}

#g2 .branch8 {
    transform-origin: 0% 73%;
    height: 53%;
    translate: 75%;
    bottom: 15%;
    clip-path: circle(110% at 0% 80%);
}

#g2 .branch9 {
    transform-origin: 38% 78%;
    height: 107%;
    translate: -7%;
    bottom: 44%;
    clip-path: circle(110% at 35% 66%);
}

#g2 .branch10 {
    transform-origin: 45% 50%;
    height: 33%;
    translate: 147%;
    bottom: 36%;
    clip-path: circle(100% at 44% 50%);
}

#g2 .branch11 {
    transform-origin: 0% 99%;
    height: 29%;
    translate: 31%;
    bottom: 34%;
    clip-path: circle(150% at 0% 100%);
}

#g2 .branch12 {
    transform-origin: 0% 100%;
    height: 28%;
    translate: 41%;
    bottom: 27%;
    clip-path: circle(130% at 0% 100%);
}

#g2 .leaf1 {
    transform-origin: 87% 7%;
    height: 26%;
    /* translate: -403%; */
    bottom: 47%;
    translate: -403%;
    rotate: 0deg;
    scale: 1;
}

#g2 .leaf2 {
    height: 28%;
    bottom: 21%;
    transform-origin: 16% 40%;
    translate: -80%;
}

#g2 .leaf3 {
    height: 22%;
    bottom: 34%;
    transform-origin: 99% 78%;
    translate: -177%;
}


#g2 .leaf4 {
    height: 32%;
    bottom: -3%;
    transform-origin: 37% 13%;
    translate: -388%;
}


#g2 .leaf5 {
    height: 39%;
    bottom: 25%;
    transform-origin: 58% 99%;
    translate: -523%;
}

#g2 .leaf6 {
    height: 41%;
    bottom: 20%;
    transform-origin: 20% 83%;
    translate: -129%;
}

#g2 .leaf7 {
    height: 40%;
    bottom: 3%;
    transform-origin: 98% 41%;
    translate: -191%;
}

#g2 .leaf8 {
    height: 31%;
    bottom: -14%;
    transform-origin: 27% 28%;
    translate: -79%;
}

#g2 .leaf9 {
    height: 27%;
    bottom: 28%;
    transform-origin: 96% 92%;
    translate: -256%;
}

#g2 .leaf10 {
    height: 58%;
    bottom: 1%;
    transform-origin: 4% 79%;
    translate: -106%;
}

#g2 .leaf11 {
    height: 11%;
    bottom: 52%;
    transform-origin: 80% 96%;
    translate: -409%;
}

#g2 .leaf12 {
    height: 38%;
    bottom: -28%;
    transform-origin: 56% 4%;
    translate: -369%;
}

#g2 .leaf13 {
    height: 34%;
    bottom: 4%;
    transform-origin: 88% 82%;
    translate: -404%;
}

#g2 .leaf14 {
    height: 122%;
    bottom: -60%;
    transform-origin: 11% 21%;
    translate: -41%;
}

#g2 .leaf15 {
    height: 150%;
    bottom: 57%;
    transform-origin: 19% 74%;
    translate: -44%;
    z-index: 0;
}

#g2 .leaf16 {
    height: 150%;
    bottom: 48%;
    transform-origin: 76% 87%;
    translate: -144%;
}

#g2 .leaf17 {
    height: 72%;
    bottom: 15%;
    transform-origin: 64% -17%;
    translate: -85%;
}

#g2 .leaf18 {
    height: 54%;
    bottom: 29%;
    transform-origin: 70% 54%;
    translate: -167%;
}

#g2 .leaf19 {
    height: 56%;
    bottom: 74%;
    transform-origin: 26% 97%;
    translate: -129%;
}



#g2 .floret1 {
    transform-origin: 41% 6%;
    height: 68%;
    translate: -452%;
    bottom: -32%;
}

#g2 .floret2 {
    transform-origin: 24% 10%;
    height: 42%;
    translate: -391%;
    bottom: 23%;
}

#g2 .floret3 {
    transform-origin: 74% 91%;
    height: 9%;
    translate: 150%;
    bottom: 87%;
}

#g2 .floret4 {
    transform-origin: 16% 12%;
    height: 46%;
    translate: -46%;
    bottom: 45%;
    z-index: 1000;
}

#g2 .floret5 {
    transform-origin: 10% 4%;
    height: 18%;
    translate: -409%;
    bottom: 43%;
}

#g2 .floret6 {
    transform-origin: 27% 12%;
    height: 25%;
    translate: -24%;
    bottom: 78%;
}

#g2 .floret7 {
    transform-origin: 45% 5%;
    height: 99%;
    translate: -85%;
    bottom: -18%;
}

#g2 .floret8 {
    transform-origin: 30% 5%;
    height: 62%;
    translate: -220%;
    bottom: -55%;
}

#g2 .floret9 {
    transform-origin: 53% 10%;
    height: 60%;
    translate: -360%;
    bottom: 13%;
}

#g2 .floret10 {
    transform-origin: 77% 30%;
    height: 75%;
    translate: -163%;
    bottom: 40%;
}


#g2 .petal1 {
    transform-origin: 40% 28%;
    height: 113%;
    translate: -81%;
    bottom: -77%;
}

#g2 .petal2 {
    transform-origin: 49% 49%;
    height: 84%;
    translate: -178%;
    bottom: 16%;
}

#g2 .petal3 {
    transform-origin: 48% 58%;
    height: 15%;
    translate: 65%;
    bottom: 82%;
}


#g2 .petal4 {
    transform-origin: 48% 58%;
    height: 15%;
    translate: 65%;
    bottom: 82%;
}


#g2 .petal5 {
    transform-origin: 48% 58%;
    height: 15%;
    translate: 65%;
    bottom: 82%;
}
#g2 .petal6 {
    transform-origin: 48% 58%;
    height: 44%;
    translate: -48%;
    bottom: 74%;
}


#g2 .branch1-1 {
    transform-origin: 0% 100%;
    height: 88%;
    translate: 20%;
    bottom: 1%;
    clip-path: circle(100% at -6% 20%);
}

#g2 .branch1-2 {
    transform-origin: 0% 100%;
    height: 88%;
    translate: 20%;
    bottom: 1%;
    clip-path: circle(100% at -6% 20%);
}

#g2 .branch1-3 {
    transform-origin: 0% 100%;
    height: 88%;
    translate: 20%;
    bottom: 1%;
    clip-path: circle(100% at -6% 20%);
}

#g2 .branch1-4 {
    transform-origin: 0% 100%;
    height: 88%;
    translate: 20%;
    bottom: 1%;
    clip-path: circle(100% at -6% 20%);
}

#g2 .branch1-5 {
    transform-origin: 0% 100%;
    height: 88%;
    translate: 20%;
    bottom: 1%;
    clip-path: circle(100% at -6% 20%);
}


.d-none {
    display: none;
}

section#home {
    z-index: 0;
    height: 100vh;
    overflow: hidden;
}

section#philosophy {
    z-index: 1;
}

section#contact {
    z-index: 120;
    pointer-events: none;
}

section#environment {
    z-index: 120;
    pointer-events: none;
}

#flyby {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 111;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes imgRotatorP1 {
    49% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes imgRotatorP2 {
    49% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.bee {
    position: absolute;
}

.bee.bee1 {
    height: 10%;
    left: -20%;
    top: 120%;
}

.bee.bee2 {
    height: 6%;
    left: 50%;
    top: 150%;

}

.bee.bee1 .p1,
.bee.bee2 .p1,
.bee.bee3 .p1,
.bee.bee4 .p1 {
    animation: imgRotatorP1 0.1s infinite;
}

.bee.bee1 .p2,
.bee.bee2 .p2,
.bee.bee3 .p2,
.bee.bee4 .p2 {
    animation: imgRotatorP2 0.1s infinite;
}

.bee.bee3 {
    height: 13%;
    left: 120%;
    top: 50%;
}

.bee.bee4 {
    top: 120%;
    left: -20%;
    height: 9%;
}

.bee .streak {
    position: absolute;
}

#blossom-floret {
    position: absolute;
    left: 50%;
    top: 7%;
    scale: 1;
    height: 8%;
    transform: translateX(-50%) !important;
}

#philosophy h1 {
    font-size: 2rem;
}

#philosophy .upper p {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.parallax img {
    width: 110%;
    height: auto;
    left: -5%;
    top: -5%;
    position: relative;
}

canvas#particle,
canvas#particle2 {
    position: absolute;
    z-index: 300;
    top: 19%;
    pointer-events: none;
    filter: blur(4px);
}

#environment .item .outer:not(:last-child) {
    padding-right: 0.5rem;
}

#program .outer {
    height: 28vh;
    overflow: hidden;
    margin-bottom: 3rem;
}

.spot {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 10%, rgb(255 235 59 / 26%) 40%, rgba(255, 255, 255, 0) 60%);
    border-radius: 100rem;
}

#gardening .m5 .i {
    position: absolute;
    height: 100%;
    transform-origin: 0% 0%;
    transform: translate(0%, 0%) rotate(-30deg);
    scale: 0;
}

#gardening .m1 img {
    height: 100%;
}

.butterflies {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100vw;
    height: 100vh;
}

#navbarBG {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 111;
    background: #bfd7c8b3;
    backdrop-filter: blur(5px);
}



#nav-mobile-but {
    width: 15vw;
    height: 15vw;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-44%);
    border-radius: 10rem;
    /* border: thin solid red; */
    display: none;
    pointer-events: auto;
    cursor: pointer;
    /* background: red; */
}


#menu-mobile {
    display: none;
    position: absolute;
    bottom: 5rem;
    transform: translateX(-50%);
    width: 80vw;
    left: 50%;
    z-index: -1;
}

.sv-bar {
    display: flex;
    position: relative;
    background: #69963b;
    color: white;
    margin-bottom: 2.5rem;
    height: 2rem;
    align-items: center;
    font-size: 0.9rem;
}


.sv-left {
    left: 4%;
}

.sv-right {
    right: 4%;
}

.sv-but {
    position: absolute;
    text-align: center;
    width: 40%;
    cursor: pointer;
    pointer-events: auto;
}

.sv-but:hover {
    font-weight: bold;
}

.sv-socmed a {
    display: inline-block;
    margin: 0 0.5rem;
    scale: 1;
}

.sv-socmed img {
    height: 1rem;
}

#gardening {
    position: absolute;
    width: 100vw;
    top: 0;
    pointer-events: none;
    transform: none;
}

.sv-socmed a:hover {
    scale: 1.2;
}

.title-mobile {
    display: none;
}

.title-desktop {
    display: block;
}

.g2Mobile,
.gardeningMobile {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.owl-item:not(.center) {
    opacity: 0.3;
}

.owl-carousel {
    top: 50%;
    transform: translate(0, -50%);
    pointer-events: none;
}

.owl-item .item {
    text-align: left;
    pointer-events: auto;
}

#program .owl-item,
#environment .owl-item,
#contact .owl-item {
    border: thin solid grey;
    padding: 1.5rem;
    background: white;
    box-sizing: border-box;
}

.owl-dots {
    display: none;
}

.owl-item {
    transition: all 0.5s ease;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: none;
    transform: scale(1.2);
}

.owl-theme .owl-nav [class*=owl-] {
    transition: all 0.25s ease;
    margin: 1rem 1rem;
}

#child .owl-carousel .owl-item img,
#educators .owl-carousel .owl-item img {
    /*height: calc(100% - 2.5rem);
    width: auto;*/
    margin: 0 auto;
    /* border: thin solid grey; */
    padding: 1rem;
    padding-bottom: .5rem;
    /* background: white; */
    box-sizing: border-box;
}

#child .owl-item .item,
#educators .owl-item .item {
    background: white;
    border: thin solid grey;
    padding-bottom: .5rem;
}



#program .owl-item {
    padding: 0rem;
    padding-bottom: 1rem;
}

#contact .owl-carousel h1 {
    top: auto;
    position: relative;
}

#environment .owl-item .sub-1 img {
    border-left: 0.5rem solid white;
}

#environment .owl-item .sub-2 img {
    border-left: 0.5rem solid white;
}

#environment .owl-item .sub-2 {
    width: 49% !important;
}

#environment .owl-item .owl-left {
    padding: 2rem 0 0 4rem;
}

#environment .owl-item .owl-right {
    padding: 2rem 4rem 0 4rem;
}

#environment .owl-item .sub-0 {
    aspect-ratio: 1.6/1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

#environment .owl-item .sub-1 {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* border-left: 0.5rem solid white; */
    box-sizing: border-box;
    height: 25vh;
}

#environment .owl-item .sub-2 {
    aspect-ratio: 0.98/1;
    background-position: center;
    background-repeat: no-repeat;
    border-left: 0.5rem solid white;
    box-sizing: border-box;
    height: 25vh;
}

#program .owl-item .photos,
#environment .owl-item .photos {
    height: 40vh;
    max-height: 20rem;
}

#program .owl-item .sub-0 {
    /* aspect-ratio: 1/1; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    box-sizing: border-box;
}

#program .item .sub-1 {}

#program .item .sub-2 {
    /* aspect-ratio: 1/1; */
    border-left: 0.5rem solid white;
}

span.error {
    font-size: 0.8rem;
}

.text-green{
    color:green;
}

.text-red{
    color:red;
}

.border-left {
    border-left: 0.5rem solid white;
}

#contact .owl-item .item {
    padding: 5rem 3rem 2rem;
}

td.tr-left,
td.tr-right {
    vertical-align: top;
}

#isMobile,
.isMobile {
    display: none !important;
}

#program .owl-item .w-40 .photos {
    height: 20vh;
    justify-content: flex-start;
}

#environment .owl-item {
    padding: 0;
}
#info img.but, #wa img.but, #iq img.but, #discover img.but {
    height: 7vh;
    max-height: 3.5rem;
    width:auto
}

.grecaptcha-badge {
    display: none !important;
}

/*tab*/
.tabs {width: 100%;}
ul.tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    margin-bottom: 1rem;
}
ul.tabs-nav li {
    display: inline-block;
    cursor: pointer;
    background: none;
    padding: 8px 0;
    text-decoration: none;
    color: #494949;
}
ul.tabs-nav li:not(:last-child)::after{content: "/"; padding: 0 1rem;}
ul.tabs-nav li:hover,
ul.tabs-nav li.active {
    font-weight: bold;
}
.tabs-content .tab-content{display: none;}
.tabs-content .tab-content.active{display: block; transition: all .4s;}
ul.tab-content-list{margin-bottom: 20px;}
ul.tab-content-list li{list-style: none; margin: 0; padding: 0; background: none; margin-bottom: 1.5rem; cursor: none; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 2rem;}
ul.tab-content-list li:hover{font-weight: normal;}

section#singlePage{background: #bfd7c8 url(../img/bg-popup-info.png) no-repeat center;}
#singlePage .row{justify-content: space-between; flex-wrap: nowrap; align-items: center;}
#singlePage .row._head{justify-content: flex-start;}
#program ul li a, #environment ul li a, #singlePage ul li a, #educators ul li a{color: inherit; text-decoration: none;}
#singlePage ._head{position: relative; width: 75%; margin: auto; align-items: center; padding-top: 2.5rem;}
#singlePage ._head .center{}
#singlePage ._head .center ul{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
#singlePage .photos{justify-content: center; gap: .5rem; padding-top: 2.8rem;}
#singlePage .paragraph{width: 75%; margin: auto; text-align: left; flex-wrap: wrap; margin-top: 1rem;}
#singlePage .paragraph .w-33{width: 32%;}
#singlePage .paragraph .w-50{width: 45%;}
#singlePage .paragraph .w-66{width: 64%;}
#singlePage .photos img, #singlePage .video img{max-width: 100%;}
#singlePage .logo{width: 100%; text-align: left; margin-bottom: 1rem; flex-direction: row;}
#singlePage .title{min-width: 17%; text-align: left; font-size: 25px; font-weight: bold; color: #2b2b2b;}
#singlePage .center{width: 73%;}
#singlePage .close{width: 5%;}

#child .gallery .row, #educators .gallery .row{width: 80%; justify-content: space-between; align-items: center; margin: auto; padding: 1rem 0;}
#child .owl-theme .owl-nav, #educators .owl-theme .owl-nav{display: none;}

#singlePage .video{position: relative; padding-bottom: 2rem;}
.iframe{width: 1280px; height: 720px;}

.newsletter{text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch;}
.newsletter .w-25{width: 23%; margin-bottom: 30px;}
.newsletter a{color: inherit; line-height: 24px;}

#singlePage .testimonial .paragraph .row{justify-content: space-between; align-items: start;}
#singlePage .testimonial img{max-width: 100%;}
#singlePage .testimonial .col-1{width: 28%;}
#singlePage .testimonial .col-2{width: 70%;}

.video-promo{width: 800px; height: 450px;}

.welcome{max-width: 400px; margin: auto;}
.welcome ._btn{display: block; margin: 15px auto;}