/*LIGHT STYLE SHEET*/

/* light.css: 👉 dark-on-light  */


:root {

    --main-background: white;
    --text-color: #242424;
    --subdued-text: #454545;
    --logo-color: #666;
    --top-header: #fff;
    --header-accent: rgb(133, 133, 133);
    --accordion-background: #f6f6f6;
    --accordion-highlight: #fff;
    --advanced-background: #bad0d8;

    --settings-background: rgb(213, 213, 213);
    --settings-border: rgb(220, 220, 222);
    --emblem-pink: #fc02fc;
    --emblem-pink-over: #bb02bb;
    --emblem-blue: #329bb8;
    --emblem-blue-over: #23748a;
    --emblem-green: #008000;
    --emblem-green-over: #0ca70c;
    --emblem-orange: #fc8302;
    --emblem-orange-over: #d46e00;
    --selector: rgb(149, 149, 149);
    --selector-highlight: rgb(203, 203, 203);
    --selector-highlight-over: rgb(224, 224, 224);
    --divider-line:  rgb(206, 205, 205);
    --sub-menu:  rgb(179, 179, 179);
    --modal-background: rgb(231, 231, 231);
    --search-row: rgba(255, 255, 255, 0.192);
    --slide-overlays: rgb(225, 225, 225);
    --side-overlays: rgb(225, 225, 225);
    --slide-highlight: rgb(212, 212, 213);
    --show-hide: rgba(225, 225, 225, 0.809);
    --darker:rgba(0, 0, 0, 0.049);
    --ecobrick-preview: rgba(255, 255, 255, 0.836);
    --x-button-over: rgb(146, 146, 146);
    --input-background: rgb(229, 213, 241);

    --form-background: rgb(223, 231, 233);


    --gallery:  rgb(222, 223, 236);
    --yellow-alert: #fbe9c8;

    --table-background-1: #f2f2f2;

    --table-background-2: #dad9d9;

    --table-background-hover: #bcbcbc;

    --table-background-heading: #2A91DA;

    .modal-content-box {
        background: #ffffff;
    }

    /*BOOK NOTES */

    --deeper-accent-color: rgb(225, 225, 225) ;
    --slider: rgb(228, 228, 228);
    --header-footer: #e7e7e7;
    --drop-cap: rgb(63, 63, 63);


    #booknotes-curtain {
        background: url(../svgs/tractatus-mandala-full-light-grey.svg) center no-repeat;
        background-size: contain;
        background-color: var(--slider);
    }

    #book-box a {

        background: url(../svgs/content-arrow.svg) left center no-repeat var(--background-color);
        background-size: 30px;
        background-position-x: 18px;
    }

    #book-box a:hover {

        background: url(../svgs/content-arrow-45.svg) left center no-repeat var(--deeper-accent-color);
        background-size: 30px;
        background-position-x: 18px;
    ;
    }








    --h1: black;
    --general-background: rgb(252, 252, 252);
    --general-background-highlight: rgb(234, 234, 234);
    --deeper-accent: rgb(148, 148, 148);
    --button-1-1: #4646cf;
    --button-1-1-over: #5b5bf6;
    --button-1-2: #3b3baf;
    --button-1-2-over: #5454ff;
    --button-2-1:#00a1f2;
    --button-2-1-over:#3cb0fd;
    --button-2-2:#008ad4;
    --button-2-2-over:#3498db;
    --shadow: rgba(57, 57, 57, 0.613);
    --login:rgb(244, 242, 242);

    --footer-background: #252b4d;
    --footer-text: #a2cbe3;
    --footer-header: #a8aab8;
    --splash: #2A91DA;
    --splash-over: #19659c;
    --notification: #a1ccfd;
    --fuscia-button: #a458a4;

    --facebook: #728398;

}

.dark-only {display:none;}

.light-only {display:block;}

.top-emblem-button {
    /*background: url(../svgs/settings-icon-dark.svg) no-repeat;*/
    background: url(../icons/main-menu.svg) no-repeat;
    background-size: contain;
}

.top-emblem-button:hover {
    background: url(../icons/main-menu-over.svg) no-repeat;
    background-size: contain;
}

.top-search-button {
    background: url(../icons/search-day.svg) no-repeat center;
    background-size: contain;
}

.top-search-button:hover {
    background: url(../icons/search-day-over.svg) no-repeat;
    background-size: contain;
}

#top-settings-button {
    background: url(../icons/settings-icon.svg) no-repeat;

    background-size: contain;
}

#top-settings-button:hover {
    background: url(../icons/settings-icon-over.svg) no-repeat;
    background-size: contain;
}

.top-lang-button {
    background: url(../icons/language-button.svg) no-repeat;
    background-size: contain;
}

.top-lang-button:hover {
    background: url(../icons/language-button-over-invert.svg) no-repeat;
    background-size: contain;
}

.top-login-button {
    background: url(../icons/login-icon.svg) no-repeat;
    background-size: contain;
}

.top-login-button:hover {
    background: url(../icons/login-icon-over.svg) no-repeat;
    background-size: contain;
}



.tour-slide1 {
    background: url(../svgs/richard-and-team-day.svg) no-repeat bottom;
    background-size: contain;
}

.tour-slide2 {
    background: url(../svgs/ecobricking-materials-day.svg) no-repeat bottom;
    background-size: contain;
}

.tour-slide4 {
    background: url(../svgs/dolphin-top-optimized.svg) no-repeat bottom;
    background-size: contain;
}

.tour-slide5 {
    background: url(../svgs/earth-home-animated-day.svg) no-repeat bottom;
    background-size: contain;
}

.tour-slide6 {
    background: url(../svgs/dolphin-top-optimized-light.svg) no-repeat bottom;
    background-size: contain;
}


.featured-content-2 {
    background: url(../svgs/blue-circles-banner-light.svg?v=2) no-repeat center;
    background-size: cover;
}

.dolphin-pic {
    background: url(../svgs/dolphin-top-optimized-light.svg) no-repeat bottom;
    background-size: cover;
    z-index: 34;
}

.featured-content-3 {
    background: url(../svgs/ecobrick-village-vision-2024-day.svg) no-repeat bottom;
    background-size: cover;
}

.ecovillage-pic {
    background: url(../webp/spiral-building.webp) no-repeat center;
    background-size: cover;
}

.earthservice-pic {
    background: url(../svgs/earth-service-animation.svg) no-repeat center;
    background-size: contain;
    margin-top:25px;
    margin-bottom:-10px;

}

#main {
    background: url(../svgs/ocean-footer-background-day.svg) repeat-x bottom;
    background-size: contain;
}

.vision-landscape {
    background: url(../svgs/ocean-footer-day.svg?v=4) no-repeat bottom;
    background-size: cover;
    /* background-color: #10ffff; */

}

@media screen and (min-width: 700px) {
    .side {
        background: rgb(212,212,212);
        background: linear-gradient(126deg, rgba(212,212,212,1) 10%, rgba(251,251,251,1) 71%);

    }
}

#header-content-block {
    background-color: #59c1fdb2;

}

.grey {
    background: rgb(235,235,235);
    background: linear-gradient(132deg, rgba(235,235,235,1) 0%, rgba(199,199,199,1) 100%);
}

.reddish {
    background: rgb(255,238,238);
    background: linear-gradient(132deg, rgba(255,238,238,1) 0%, rgba(254,195,195,1) 100%);
}

.greenish {
    background: rgb(239,255,238);
    background: linear-gradient(132deg, rgba(239,255,238,1) 0%, rgba(198,254,195,1) 100%);
}

.blueish {
    background: rgb(235,253,255);
    background: linear-gradient(132deg, rgba(235,253,255,1) 0%, rgba(195,250,254,1) 100%);
}

.orangeish {
    background: rgb(255,248,235);
    background: linear-gradient(132deg, rgba(255,248,235,1) 0%, rgba(254,234,195,1) 100%);
}

.pinkish {
    background: rgb(254,235,255);
    background: linear-gradient(132deg, rgba(254,235,255,1) 0%, rgba(248,195,254,1) 100%);
}

.greyish {
    background: #F6F6F6;
    /*background: linear-gradient(126deg, rgba(212,212,212,1) 10%, rgba(251,251,251,1) 71%);*/

}

#clouds {
    background: url(../svgs/top-clouds-animated-desktop.svg) center top;
    background-repeat: no-repeat;
    background-size: cover;
}



.x-button {
    background: url('../svgs/x-button-day.svg?v=4') no-repeat center;
    background-size: contain;

}


.x-button:hover {
    background: url('../svgs/x-button-day-over.svg?v=4') no-repeat center;
    background-size: contain;

}

/* #logo-ecobricks-org, #logo-global-ecobrick-alliance {
  fill: #666;
  transition: 0.5s;
} */

/*
#gea-logo {
  background: url(logos/gea-logo-full-light.svg) no-repeat;
  background-size: contain;
} */


/*
.top-down-button {
  background: url(../up-arrow.svg) no-repeat;
  background-size: contain;
}

#top-down-button:hover {
  background: url(../svgs/down-arrow.svg) no-repeat;
  background-size: contain;
}
*/

.main-menu-button {
    background: url(../svgs/login-icon.svg) no-repeat;
    background-size: contain;
}

.main-menu-button:hover  {
    background: url(../svgs/login-icon-over.svg) no-repeat;
    background-size: contain;
}

@media screen and (min-width: 0px) and (max-width: 700px) {
    .clouds-new2  {
        background-image: linear-gradient(#30ffff, var(--general-background),var(--general-background),var(--general-background));
    }
}

@media screen and (min-width: 701px) {
    .clouds-new2  {
        background-image: linear-gradient(#30ffff, var(--general-background),)
    }
}


[part="permanentLabel"] {
    font-size: smaller !important;
}

#reg-up-button {
    background: url(../svgs/up-reg-arrow-light.svg?v=3) center no-repeat;
    background-size: contain;
}

.form-container .splash-heading {
    color: var(--text-color)!important;
    text-shadow: none !important;
}