:root {
    --white: 253, 253, 253;
    --teal: 133, 199, 169;
    --blue: 28, 164, 221;
    --pink: 244,149,190;
    --red: 240, 87, 106;
    --orange: 253,191,102;
    --navy: 26, 49, 86;
    --yellow: 255, 211, 0;
    --lime: 199, 211, 96;


    --black: 0,0,0;
    --beige: 193,134,89;
    --sand: 241,242,240;

    --test: 255,0,0;

    --accent-font: Funkydori;
    --main-font: Alwyn;
 }

 :root {
    --body-bg: rgb(var(--white));
    --loader-color: rgb(var(--red));

    --body-font: normal normal 17px/1.2 var(--main-font), Verdana,sans-serif;
    --menu-font: bold normal 17px/1.8 var(--main-font);
    --menu-slogan: normal normal 17px/1.1 var(--main-font);
    --menu-transform: uppercase;
    --header-font: normal normal 65px/0.8 var(--accent-font);
    --subheader-font: bold normal 35px/0.8 var(--main-font);
    --accented-font: normal normal 50px/0.8 var(--accent-font);
    --button-font: bold normal 17px/1.2 var(--main-font);
    --button-transform: uppercase;
    --button-padding: 12px 20px 10px;
    --input-font: var(--main-font);

    --menu-text: rgb(var(--white));
    --menu-bg: linear-gradient(to top, rgb(var(--white)) 30%, transparent 100%), url(../images/clouds.jpg) center center / cover no-repeat;
    --menu-stuck-bg: linear-gradient(to top, rgb(var(--white)) 10%, rgba(var(--white),0.3) 100%), url(../images/rainbow.jpg) center center / cover no-repeat;
    --menu-mobile-panel-bg: var(--menu-stuck-bg);
    --menu-mobile-bg: linear-gradient(100deg,rgba(var(--white),0.8) 0%, rgba(var(--blue),0.8) 100%);
    --menu-mobile-text: rgb(var(--pink));
    --menu-mobile-active: rgb(var(--red));
    --menu-mobile-padding: 0 20px 0 40px;
    --menu-padding: 90px 10px 0px;
    --menu-active: inherit;
    --menu-toggle: rgb(var(--red));
    --menu-icon: var(--white);
    --menu-icon-bg: transparent;

    --mark-bg: rgba(var(--beige),0.75);
    --mark-text: rgb(var(--white));

    --menu-dropdown-bg: rgba(var(--pink));
    --menu-dropdown-radius: 20px;
    --menu-dropdown-width: 280px;

    --submenu-font: normal normal 16px/1.1 var(--main-font);
    --submenu-mobile-font: var(--submenu-font);
    --submenu-mobile-text: rgb(var(--pink));
    --submenu-text: rgb(var(--white));
    --submenu-active: rgb(var(--red));
    --submenu-offset: 20px;
    --submenu-mobile-padding: 0px 0px 5px 40px;

    --menu-toggle-height: 2px;

    --first-text: rgb(var(--white));
    --first-font: normal normal 50px/1.1 var(--accent-font);
    --first-shadow: 0 0 30px rgba(var(--blue),0.5), 0 0 10px rgba(var(--black),0.3);

    --first-plain-bg: transparent;/*linear-gradient(100deg,rgba(var(--sand),1) 75%, rgba(var(--beige),1) 75.05%);*/

    --inside-first-text: rgb(var(--white));
    --inside-first-font: bold normal 82px/0.8 var(--main-font);

    --first-button-bg:  url(../images/big-button.svg) center center / contain no-repeat;
    --first-button-text: var(--first-text);

    --dropdown-text: rgb(var(--navy));
    --dropdown-bg: rgb(var(--lime));
    --dropdown-active: rgb(var(--white));
    --dropdown-hover: rgb(var(--white));

    --primary-bg: rgb(var(--white));
    --primary-text: rgb(var(--black));
    --primary-header: rgb(var(--teal));
    --primary-subheader: rgb(var(--teal));
    --primary-button-border: 3px dotted rgb(var(--teal));
    --primary-button-text:rgb(var(--teal));
    --link-hover: rgb(var(--red));
    --primary-input-bg:rgba(var(--orange),0.2);
    --primary-input-text:rgb(var(--red));
    --primary-label-text: rgba(var(--red),1);

    --accent-bg: rgb(var(--sand));
    --accent-before-bg: transparent;
    --accent-subheader: rgb(var(--black));
    --accent-header: rgb(var(--black));
    --accent-text: rgb(var(--black));
    --accent-input-bg:rgb(var(--white));

    --invert-bg: rgb(var(--red));
    --invert-subheader: rgb(var(--white));
    --invert-header: rgb(var(--white));
    --invert-text: rgb(var(--sand));
    --invert-button-bg: transparent;
    --invert-button-text: rgb(var(--white));
    --invert-button-border: 3px dotted rgb(var(--white));

    --invert-accent-bg: rgba(var(--black),0.25);
    --invert-accent-subheader: rgb(var(--orange));
    --invert-accent-header: rgb(var(--white));
    --invert-accent-text: rgb(var(--navy));

    --button-bg: rgb(var(--pink));
    --button-text: rgb(var(--white));

    --input-radius: 25px;
    --button-radius: 25px;
    --block-radius: 0;
    --accent-radius: 50%;
    --icon-radius: 50%;
    --loader-radius: 50%;

    --first-before-bg: transparent;
    --image-before-bg: linear-gradient(135deg, transparent, rgba(255,255,255,0.9) 35%, rgba(255,255,255,0.7) 60%, transparent);

    --footer-text: rgb(var(--blue));
    --footer-bg: linear-gradient(to bottom,rgba(var(--white),1) 30%, transparent 100%), url(../images/clouds.jpg) center center / cover no-repeat, rgb(var(--white));
    --footer-font: normal normal 14px/1.1 var(--main-font);
    --footer-icon: var(--invert-text);
    --footer-icon-bg: var(--invert-bg);
    --footer-hover: var(--menu-active);

    --totop-text: rgba(var(--white));
    --totop-bg: rgba(var(--red));
    --totop-active: var(--totop-text);;
    --totop-hover: rgba(var(--orange),1);

    --logo-fixed: 120px;
    --logo-stuck: 60px;
    --logo-mobile: 55px;

    --slick-border: 0px;
    --slick-caption-border: 0;
    --slick-caption-border-padding: 0;
    --slick-caption-bg: linear-gradient(to top,rgba(var(--teal),1) 0%, rgba(var(--white),0) 100%);
    --slick-mobile-caption-bg: linear-gradient(-80deg,rgba(var(--beige),1) 80px, transparent 81px), linear-gradient(to top, rgba(var(--black),0.75), transparent 50%);
    --slick-caption-size: normal normal 25px/1.1 var(--main-font);
    --slick-height: 350px;
    --slick-arrow-bg: rgb(var(--red));
    --slick-arrow-height: 60px;
    --slick-arrow-offset: 10px;
    --slick-arrow-border: 7px;

    --quote-bg: url(../images/bubble-bg.png) center center / 95% 95% no-repeat;
    --quote-text: rgb(var(--white));
    --quote-padding: 40px 50px 140px 60px;

 }

 @media (max-width:768px) {
   :root {
      --image-before-bg: linear-gradient(to right, transparent, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.7) 75%, transparent);
      --accented-font: normal normal 35px/0.8 var(--accent-font);
      --footer-bg: linear-gradient(to bottom,rgba(var(--white),1) 50%, transparent 100%), url(../images/clouds.jpg) center center / cover no-repeat, rgb(var(--white));
   }
 }

 @media (max-width:496px) {
   :root {
      --inside-first-font: normal normal 52px/0.8 var(--main-font);
      --first-font: normal normal 40px/0.9 var(--accent-font);
      --menu-mobile-bg: linear-gradient(100deg,rgba(var(--white),0.8) 50%, rgba(var(--blue),0.8) 100%);
      --quote-bg: url(../images/bubble-bg-xs.png) center center / 95% 95% no-repeat;
      --quote-padding: 30px 40px 90px 40px;
   }
 }

@font-face {
   font-family: "Alwyn";
   src:url(../fonts/user/alwyn.ttf);
   src:url(../fonts/user/alwyn.ttf)format("truetype");
   font-weight:400;
   font-style:normal
}


@font-face {
   font-family: "Alwyn";
   src:url(../fonts/user/alwyn-light.ttf);
   src:url(../fonts/user/alwyn-light.ttf)format("truetype");
   font-weight:100;
   font-style:normal
}

@font-face {
   font-family: "Alwyn";
   src:url(../fonts/user/alwyn-light-italic.ttf);
   src:url(../fonts/user/alwyn-light-italic.ttf)format("truetype");
   font-weight:100;
   font-style:italic
}

@font-face {
   font-family: "Alwyn";
   src:url(../fonts/user/alwyn-black.ttf);
   src:url(../fonts/user/alwyn-black.ttf)format("truetype");
   font-weight:bold;
   font-style:normal
}

@font-face {
   font-family: "Alwyn";
   src:url(../fonts/user/alwyn-italic.ttf);
   src:url(../fonts/user/alwyn-italic.ttf)format("truetype");
   font-weight:400;
   font-style:italic
}

@font-face {
   font-family: "Alwyn";
   src:url(../fonts/user/alwyn-black-italic.ttf);
   src:url(../fonts/user/alwyn-black-italic.ttf)format("truetype");
   font-weight:bold;
   font-style:italic
}


@font-face {
   font-family: "Funkydori";
   src:url(../fonts/user/funkydori.ttf);
   src:url(../fonts/user/funkydori.ttf)format("truetype");
}

/* color cycle */

.bg-blue {  background-color: rgb(var(--blue)) !important; }
.bg-teal {  background-color: rgb(var(--teal)) !important; }
.bg-pink {  background-color: rgb(var(--pink)) !important; }
.bg-red {   background-color: rgb(var(--red)) !important; }
.bg-orange { background-color: rgb(var(--orange)) !important; }

.text-blue {  color: rgb(var(--blue)) !important; }
.text-teal {  color: rgb(var(--teal)) !important; }
.text-pink {  color: rgb(var(--pink)) !important; }
.text-red {   color: rgb(var(--red)) !important; }
.text-orange { color: rgb(var(--orange)) !important; }

#enrolling {
   background: linear-gradient(130deg, rgba(var(--blue),0.1) 0%, rgba(var(--blue),0.4) 100%);
   color: rgb(var(--blue));
}

#admissions {
   background: linear-gradient(130deg, rgba(var(--red),0.1) 0%, rgba(var(--red),0.4) 100%);
   color: rgb(var(--red));
}

#points_home {
   background-color: rgb(var(--teal)) !important;
   text-align: center;
}

#points {
   background: linear-gradient(to bottom, rgba(var(--teal),0.8) 0%, rgba(var(--blue),0.8) 25%, rgba(var(--orange),0.8) 45%, rgba(var(--red),0.8) 75%, rgba(var(--pink),0.6) 100%) !important;
}

#points .cell-xs-12:has(.button) {
   text-align: center;
}

@media(min-width:768px) {
   #points h3, #points p {
      margin: 10px 50px;
   }
}

#points_home h3 {
   color: rgb(var(--white));
}

#points h3 {
   font-size: 30px;
   font-weight: bold;
}


#points_home .button-hover:hover {
   color: rgb(var(--teal)) !important;
}

#points_home img, #points img  {
   position: relative;
   padding: min(12%, 45px);
   border-radius: 50%;
   display: block;
   background: url(../images/round-white.svg);
   background-size: 100% 100%;
   transition: all 0.5s ease-in-out;
}

@media(max-width:768px) {
   #points_home img, #points img  {
      
      max-width: 100%;
   }
}

#points_home img:hover, #points img:hover {
   background-image: url(../images/round-color.svg);
}

#admissions h2 {margin-bottom: 20px;}

#allgalleries {
   background: #fad9e7;
   padding-top: 40px;
   text-align: center;
}

#allgalleries h2.text-accent {
   color: rgb(var(--pink));
   float: unset !important;
   margin-bottom: 10px !important;
   margin-top: 40px;
}

#allgalleries #gallery1 {
   margin-top: 20px;
}

#allgalleries p {
   color: rgb(var(--pink));
}

#enrolling .button {
   border-color: rgb(var(--blue));
   color: rgb(var(--blue));
}

.thumb-ruby__title, .thumb-ruby__text {
   color: rgb(var(--white)) !important;
   margin-top: 0 !important;
}


.first-block .button, #points .button {
   padding: 90px 120px 85px 120px;
   font: normal normal 35px/0.8 var(--accent-font);
   text-transform: unset;
   margin: 0 -30px 0 0 !important;
   background: var(--first-button-bg);
   border: 0;
   color: white;
}

.first-block .button:hover, #points .button:hover {
   background-image: url(../images/big-button-white.svg);
}

.first-block .button-hover::before, #points .button-hover::before {
   display: none;
}

@media(max-width:476px) {
   .first-block .button, #points .button {
      padding: 60px 60px 55px 60px;
      font: normal normal 25px/0.8 var(--accent-font);
   }

}

.text-blue:hover, .text-teal:hover, .text-pink:hover, .text-red:hover, .text-orange:hover {
   filter: brightness(0.8) saturate(1.5);
}

#reviews {
   background-color: rgb(var(--pink));
   padding-bottom: 90px !important;
}

#about_home {
   background-color: rgb(var(--blue));
}

.button-hover:hover::before {
   background-color: rgb(var(--teal));
}

#about_home .button-hover:hover {
   color: rgb(var(--blue));
}

#enrolling .button-hover:hover, .button-hover:hover  {
   color: rgb(var(--white));
}

#contacts {
   background-color: rgb(var(--orange));
   padding: 30px 0 !important;
}

@media(max-width:992px) {
   #contacts {
      padding-top: 70px !important;
   } 
}

.heading-1 {
   font-size: 70px;
}

.post-quote {
   background: transparent !important;
   padding: 0 10px 0 0 !important;
   margin-left: auto;
   margin-right: auto;
   font-weight: 100;
   max-height: 200px;
   overflow: auto;
}

.post-boxed:has(.post-quote) {
   background: var(--quote-bg);
   padding: var(--quote-padding);
}

.owl-arrow {
   top: calc(53% - 50px) !important;
}

#about_home h2, .bg-accent h2 {
   float: left;
   margin-bottom: 70px;
   margin-right: 20px;
   margin-top: 5px;
}

@media(max-width:992px) {
   #about_home h2, .bg-accent h2 {
      float: unset;
      margin-bottom: 0px !important;
   }
}

.button-hover {
   position: relative;
   transform: all 0.3s linear;
}

.button-hover:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: -1;
   left:0;
   top: 0;
   opacity: 0;
   transform: scale(0.1,0.5);
   transition: all 0.3s ease-in;
   border-radius: inherit;
}

.bg-invert .button-hover:before {
   background: rgb(var(--white));
}

#enrolling .button-hover:before {
   background-color: rgb(var(--blue));
}

.button-hover:hover:before {
   opacity: 1;
   transform: scale(0.98,0.95);
}

.lg-backdrop, .lg-toolbar {
   background-color: rgba(var(--pink),1) !important;
}

.lg-icon, #lg-counter {
   color:rgb(var(--white)) !important;
}

.lg-next, .lg-prev {
   background-color: white !important;
   border-radius: 50% !important;
   color:rgb(var(--pink)) !important;
}

.lg-outer .lg-thumb-outer, .lg-outer .lg-toogle-thumb {
   background-color: rgb(var(--red)) !important;
}

footer .rd-navbar-nav {
   display: flex;
   justify-content: space-evenly;
}

.range:has(.contacts)::before {
   content: "";
   width: 8.333%;
   max-width: 8.333%;
   min-width: 20px;
   display: table-cell;
}

.contacts p:first-child:before {
   content: "Contact us" !important;
   font: var(--first-font);
   font-size: 60px;
   white-space: nowrap;
   display: block;
   text-indent: 0px;
   color: white !important;
}

.contacts p, .contacts:before, .contacts .list-icons {
   margin-left: 0;
}

.range:has(.contacts) {
   align-items: center;
}

.contacts .icon {
   background-color: white !important;
   color: rgb(var(--orange)) !important;
   padding: 10px;
   width: 37px;
   text-align: center;
}

.contacts .icon:hover {
   background-color: rgb(var(--red)) !important;
}

#enroll .button {
   color: rgb(var(--red));
   border-color: rgb(var(--red));
}
#enroll .button-hover::before {
   background-color:  rgb(var(--red));
}

#enroll .button-hover:hover {
   color: white;
}

.form-wrap.has-error .form-input {
   color: white;
}

.bg-image.first-block::before {
   background: transparent;
}

@media(min-width:992px) {
   footer li:last-child {
      margin-right: 40px;
   }
}