:root {
    --white: 253, 253, 253;
    --black: 0,0,0;

    --blue: 1,65,165;
    --navy: 5,29,63;
    --beige: 206,144,82;

    --accent-font: OfficinaSans;
    --main-font: OfficinaSans;

    --error-color: rgba(255,40,0,1);
    --error-text: rgba(255,40,0,1);
    --error-bg: rgba(200,40,0,0.25);
    --error-outline: 1px solid var(--error-color);
 }

 :root {
    --body-bg: rgb(var(--white));
    --loader-color: rgb(var(--blue));
    --body-text: rgb(var(--navy));

    --body-font: normal normal 17px/1.2 var(--main-font), Verdana, sans-serif;
    --menu-font: normal normal 19px/1.8 var(--main-font);
    --menu-slogan: normal normal 25px/1.1 var(--main-font);
    --first-slogan: normal normal 30px/1.1 var(--main-font);
    --menu-slogan-padding: 0 0 0 10px;
    --menu-slogan-text: rgb(var(--white));
    --slogan-text: rgb(var(--navy));
    --menu-transform: lowercase;
    --header-font: normal normal 40px/0.9 var(--main-font);
    --subheader-font: normal normal 30px/0.8 var(--main-font);
    --info-font: normal normal 50px/0.8 var(--main-font);
    --button-font: normal normal 19px/1.2 var(--main-font);
    --button-transform: lowercase;
    --button-padding: 13px 10px 13px;
    --button-text: rgb(var(--white));
    --button-bg: rgb(var(--blue));
    --button-hover-bg: rgb(var(--beige));
    --button-hover-filter: none;
    --input-font: var(--main-font);

    --menu-text: rgb(var(--white));
    --menu-active: rgb(var(--blue));
    --menu-bg: transparent;
    --menu-stuck-bg: rgb(var(--navy));
    --menu-mobile-panel-bg: var(--menu-stuck-bg);
    --menu-mobile-bg: linear-gradient(to right, rgba(var(--blue),0.5),rgba(var(--blue),0.5)),linear-gradient(to right, rgba(var(--white),0.5),rgba(var(--white),0.5));
    --menu-mobile-text: var(--menu-text);
    --menu-mobile-active: var(--menu-active);
    --menu-mobile-padding: 112px calc(100% - 200px) 81px 0px;
    --menu-mobile-inner-padding: 0 20px 0 40px;
    --menu-padding: 0px 10px 0px;
    --menu-stuck-padding: var(--menu-padding);
    --menu-toggle: rgb(var(--blue));
    --menu-toggle-height: 2px;
    --menu-icon: rgb(var(--blue));
    --menu-icon-bg: transparent;

    --mark-bg: rgba(var(--navy),0.25);
    --mark-text: inherit;

    --menu-dropdown-bg: rgba(var(--navy),1);
    --menu-dropdown-radius: 5px;
    --menu-dropdown-width: 170px;
    --menu-dropdown-padding: 20px;

    --submenu-font: normal normal 17px/1.1 var(--main-font);
    --submenu-mobile-font: var(--submenu-font);
    --submenu-mobile-text: rgb(var(--white));
    --submenu-text: rgb(var(--white));
    --submenu-active: rgb(var(--blue));
    --submenu-offset: 10px;
    --submenu-mobile-padding: 10px 0px 0px 40px;

    --first-height: 100vh;
    --first-text: rgb(var(--blue));
    --first-font: normal normal 90px/0.8 var(--main-font);
    --first-transform: lowercase;
    
    --first-shadow: 0 0 60px rgba(var(--white),0.3), 0 0 30px rgba(var(--white),0.3);
    --slogan-shadow: var(--first-shadow);

    --first-plain-bg: rgba(var(--blue),0.5);

    --inside-first-text: rgb(var(--blue));
    --inside-first-font: var(--first-font);
    --inside-first-height: 50vh;
    --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(--navy));
    --primary-header: rgb(var(--blue));
    --primary-subheader: rgb(var(--blue));
    --link-hover: rgb(var(--beige));

    --primary-button-bg: rgb(var(--beige));
    --primary-button-hover-bg:  rgb(var(--blue));
    --invert-accent-button-bg: var(--primary-button-bg);
    --invert-accent-button-hover-bg:  var(--primary-button-hover-bg);
    --invert-accent-header-font: normal normal 90px/0.8 var(--main-font);

    --input-bg:rgba(var(--white),1);
    --input-text:rgb(var(--navy));
    --label-text: rgba(var(--blue),1);

    --primary-input-border: 2px dashed rgba(var(--navy),0.2);

    --accent-bg: rgba(var(--beige),0.3);
    --accent-subheader: rgb(var(--navy));
    --accent-header: rgb(var(--beige));
    --accent-text: rgb(var(--navy));

    --invert-bg: rgb(var(--navy));
    --invert-subheader: rgb(var(--white));
    --invert-header: rgb(var(--white));
    --invert-text: rgb(var(--white));

    --invert-accent-bg: rgba(var(--blue),1);
    --invert-accent-subheader: rgb(var(--white));
    --invert-accent-header: rgb(var(--white));
    --invert-accent-text: rgb(var(--white));

    --input-radius: 0;
    --button-radius: 25px;
    --block-radius: 10px;
    --accented-radius: 0;
    --icon-radius: 50%;
    --icon-hover: rgb(var(--white));
    --icon-hover-bg:  transparent;
    --icon-hover-transform: none;
    --loader-radius: 50%;

    --snackbars-bg: rgb(var(--blue));

    --first-before-bg: linear-gradient(to bottom, transparent 40%, rgba(var(--white),0.6) 52%, transparent 64%);
    --inside-first-before-bg: linear-gradient(170deg, rgba(var(--white),0.7) 0%, transparent 40%), linear-gradient(to bottom, transparent 30%, rgba(var(--white),0.4) 50%, transparent 70%);
    --image-before-bg: transparent;
    --invert-accent-before-bg: rgba(var(--blue),0.3);

    --footer-text: rgba(var(--white),0.2);
    --footer-bg: transparent;
    --footer-font: normal normal 14px/1.1 var(--main-font);
    --footer-hover: rgb(var(--blue));

    --logo-fixed: 50px;
    --logo-stuck: 30px;
    --logo-mobile: 30px;

    --map-margin: 50px 0 70px 0;
    --map-height: 200px;

    --boxline-padding: 0 30px 0 30px;

    --slick-arrow-height: 80px;
    --slick-arrow-offset: -10px;
    
    --info-padding: 0 20px 0 20px;

 }

 @media(max-width:992px) {
   :root {

   }
 }

 @media (max-width:768px) {
   :root {
      --boxline-padding: 0 5px 0 5px;

   }
 }

 @media (max-width:467px) {
   :root {
      --first-font: normal normal 70px/0.7 var(--main-font);
   }
 }

 @media (max-width:376px) {
   :root {
      --first-font: normal normal 55px/0.7 var(--main-font);
   }
 }

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

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

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

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

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

/* custom css */

.brand__slogan {
   white-space: nowrap;
}

.brand__slogan {
   display: inline-block !important;
}

.first-block, .inside-first-block {
   margin-top: -100px;
}

@media(max-width:992px) {
   .first-block, .inside-first-block {
      margin-top: 0px;
   }
}

.rd-navbar li {
   position: relative;
}

.rd-navbar li.active a {
   font-weight: bold !important;
}

.rd-navbar-static:not(.rd-navbar--is-stuck) li.active a {
   text-shadow: 0 0 60px rgba(var(--white),0.6), 0 0 30px rgba(var(--white),0.6);
}

.rd-navbar .rd-navbar-nav>li:not(.active):hover>a {
   color: rgb(var(--white)) !important;
}

.rd-navbar-nav li:before {
   width: 1px;
   left: 50%;
   opacity: 0;
   content: "";
   height: 3px;
   position: absolute;
   bottom: 0;
   border-radius: 3px;
   background: rgb(var(--blue));
   transition: all 0.5s ease-in-out;
}

.rd-navbar li.active::before, .rd-navbar li:hover:before {
   width: 110%;
   left: -5%;
   opacity: 1;
}

li.menu-switcher::before, li.menu-switcher:hover::before, .rd-navbar-dropdown li::before {
   display: none !important;
   opacity: 0 !important;
}

.rd-navbar-fixed .rd-navbar-brand {
   left: 20px !important;
}

section {
   position: relative;
}

section .shell {
   z-index: 10;
   position: relative;
}

section + .bg-primary::after, .bg-primary + .bg-image::after, section + .bg-invert::after, section + .bg-invert-accent::after {
   content: "";
   width: 100%;
   height: 250px;
   position: absolute;
   top: -250px;
   background: linear-gradient(to top, var(--primary-bg), transparent);
   z-index: 1;
}

.inside-first-block + .bg-primary::after {
   height: 150px;
   top: -150px;
}

.inside-first-block + #about {
   padding-top: 0 !important;
}

.inside-first-block + .bg-primary {
   padding-top: 70px !important;
}

@media(min-width:1200px) {
   #services_fees { 
      background-size: contain;
   }
   #about, #my_approach {
      background-size: auto 80% !important;
   }
   
}

.bg-primary + .bg-image::after {
   top: 0;
   background: linear-gradient(to bottom, var(--primary-bg), transparent);
}

section + .bg-invert::after { 
   background: linear-gradient(to top, var(--invert-bg), transparent);
}
section + .bg-invert-accent::after { 
   background: linear-gradient(to top, var(--invert-accent-bg), transparent);
}

.bg-invert-accent.bg-image {
   padding: 150px 0 !important;
   margin-top: -20px;
}

.bg-primary+#teachers {
   margin-top: -70px;
}

#workshop_2 .infoblock p:last-child {
   margin-top: 40px;;
}

#services_fees {
   padding-bottom: 120px 0 !important;
}

#teach {
   margin-top: 0px;
}

#teach .infoblock, #negotiate .infoblock {
   max-width: 600px;
   padding-left: 20px;
}

.teach:first-child, .negotiate:first-child, .about:first-child {
   text-align: right;
   padding-left: 30px;
}

@media(max-width:767px) {
   .teach:first-child, .negotiate:first-child, .about:first-child {
      text-align: left;
   }
}

.bg-invert-accent.bg-image img {
   min-width: 200px;
   margin-left: -50px;
}

#about img {
   border-radius: 50%;
   display: inline-block;
   max-height: 300px;
}

#about, #my_approach, #workshop_1, #teachers {
   background-image: url(../images/flower.png);
   background-size: 70% auto;
   background-repeat: no-repeat;
   background-position: 30% 0;
}

section + #workshop_2 .shell {
   border-top: 3px solid rgb(var(--blue));
   padding-top: 50px;
}

@media(max-width:576px) {
   #about, #my_approach {
      background-size: 600px auto;
      background-position: calc(100% + 250px) 0;
   }

}

#about_dummy, #fees_dummy {
   min-height: 250px;
   margin-top: -50px;
}

#approach_dummy {
   margin-bottom: -100px;
}


@media(max-width:476px) {
   .bg-invert-accent.bg-image {
      padding: 40px 0 !important;
   }
   .bg-invert-accent.bg-image img {
      min-width: unset;
      margin-left: 0;
      max-width: 100px;
   }

   .bg-primary + .bg-image::after {
      height: 150px;
   }
   
}

@media(max-width:376px) {
   .bg-invert-accent.bg-image img {
      margin-left: 20px;
   }}


.my_methods {
   text-align: center !important;
}

.avatar {
   max-width: 200px;
   margin-bottom: 20px;
   margin-top: 10px;
   border-radius: 50%;
   margin-left: auto;
   margin-right: auto;
   display: block;
   position: relative;
   left: -20px;
}

.avatar + .infoblock .content {
   max-width: 300px;
   margin-bottom: 20px;
}

.avatar + .infoblock {
   margin-left: auto;
   margin-right: auto;
   max-width: 300px;
}

.my_methods, .border-right {
   border-right: 3px solid rgb(var(--navy));
}

.border-right {
   min-height: 250px;
}

.border-right:nth-child(4n) {
   border-right: 0;
}

@media(max-width:1200px) {
   .border-right:nth-child(2n) {
      border-right: 0;
   }
   .border-right {
      min-height: 200px;
   }
}

@media(max-width:767px) {
   .border-right {
      border-right: 0;
      border-bottom: 3px solid rgb(var(--navy));
      padding-bottom: 20px;
   }
}

.border-right:last-child {
   border-right: 0;
   border-bottom: 0;
}

.infoblock {
   padding: 0 40px;
}

#contacts {
   background-size: contain;
   background-repeat: no-repeat;
   padding: 50px 0;
}

@media(max-width:992px) {

   #contacts {
      background-size: cover;
   }

}

@media(max-width:768px) {
   .my_methods {
      border-right: 0;
      border-bottom: 3px solid rgb(var(--navy));
      padding-bottom: 40px;
   }
   
   .infoblock {
      padding: 0 20px;
   }

   #contacts {
      background-size: auto 60%;
   }

}



#contacts + footer {
   margin-top: -90px;
   z-index: 12;
   position: relative;
}

#contacts .range, #about .range, #services_fees .range, #negotiate .range {
   align-items: flex-start;
}

.contact_form .box-line__main::before, .order_form .box-line__main::before {
   content: "Get in touch";
   text-transform: lowercase;
   font: var(--subheader-font);
   margin-bottom: 25px;
   display: block;
   margin-right: -20px;
}

.contact_details .infoblock { 
   padding: 0;
}

.contact_details {
   padding: 0 45px !important;
}

.contact_details h2 {
   font: var(--subheader-font) !important;
}

.order_form .box-line__main::before { 
   content: "Apply for a workshop";
}

.link-email::before, .link-phone::before, .location-pin p::before, .footer-address2::before {
   font-family: FontAwesome;
   display: inline-block;
   padding-right: 5px;
   width: 33px;
   position: relative;
   top: 1px;
   color: rgb(var(--blue));
   transform: scale(1.2) translate(-3px,1px);
   text-align: center;
   font-weight: bold;
}

.link-email::before{
   content: "";
}

.link-phone::before {
   content: "";
}

.location-pin p, .footer-address2 {
   display: flex;
}

.location-pin p::before, .footer-address2::before {
   content: "\f041";
}

.link-phone, .location-pin {
   padding-top: 15px;
   display: inline-block;
}

.rd-navbar-fixed .rd-navbar-nav li {
   min-width: 220px;
}