:root {
    --main-font: 'Raleway', sans-serif;
    --white:  rgba(255, 255, 255, 1);
    --black:  rgba(0, 0, 0, 1);
    --beige:  rgba(242, 240, 236, 1);
    --very-light-gray:  rgba(250, 250, 250, 1);
}


 @media (max-width: 1200px) {
   

    .reserve iframe{
    height: 800px;
    }

    section .services .services-list-grid-item{
            margin: 15px auto;
    }

}


 @media (max-width: 992px) {
     .site-header .main-navigation ul{
         flex-direction: column;
         display: flex;
    }

     .site-header .main-navigation ul li{
         font-size: 2.5vh;
         margin: 8px 0px;

    }

     .main-navigation ul ul{
         box-shadow: none;
         float: left;
         position: static;
    }
    #hamburger {
  position: absolute;
  right: 0px;
top: 19px;
  z-index: 999;
  width: 42px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s ease-out;
  visibility: hidden;
  opacity: 0;
  background: var(--black);
}
    #hamburger .hamburger-container {
  width: 100%;
  height: 26px;
  z-index: 999;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translate(0,-50%);
  margin: 0 auto;
}
     #hamburger .line {
         height: 2px;
         background: var(--white);
         margin: 7px auto;
         backface-visibility: hidden;
         width: 25px;
         margin-top: 3px;
    }
     #hamburger.active #one {
         transform: rotate(45deg) translateX(7px) translateY(7px);
    }
     #hamburger.active #two {
         opacity: 0;
    }
     #hamburger.active #three {
         transform: rotate(-45deg) translateX(6px) translateY(-6px);
    }
     #hamburger {
         visibility: visible;
         opacity: 1;
    }
     .site-header.sticky #hamburger{
         top: 20px;
    }
     .menu-header-menu-container {
         display: flex;
         justify-content: center;
         align-items: baseline;
         padding-top: 100px;
         visibility: hidden;
         opacity: 0;
         transition: all 0.3s ease-out;
         position: fixed;
         z-index: 3;
         top: 0;
         left: 0;
         width: 100%;
         height: 100vh;
         background-color: var(--white);
    }
     .menu-header-menu-container.active {
         visibility: visible;
         opacity: 1;
    }
     body.open-nav {
         overflow-y: hidden;
    }
     .single h1, .page-template h1{
         font-size: 45px;
    }
     h2{
         font-size: 40px;
    }
     h3{
         font-size: 22px;
         letter-spacing: 25px;
    }
     footer .site-footer--grid{
         text-align: center;
    }
     .site-header .main-navigation ul li a{
         text-align: center;
         width: 100%;
         font-size: 20px;
    }
     .offer-menu-list::after{
         display: none;
    }
     .site-header .main-navigation .sub-menu{
         width: 100%;
         text-align: center;
    }
     .site-header .main-navigation ul li:hover, .site-header .main-navigation ul li:hover a, .site-header .main-navigation ul li:hover .sub-menu li a:hover{
         background: transparent;
         color: var(--black);
    }
     .site-header .main-navigation ul ul li a{
         font-weight: 300;
         padding: 0px;
         margin: 0px;
    }
     footer .first-footer-col p{
         max-width: 100%;
         width: 100%;
         text-align: center;
    }
     footer .site-footer--grid-socials{
         justify-content: center;
         margin: 20px 0px;
    }
     footer .site-footer--col{
         margin: 20px 0px;
    }
     .gallery img{
         height: 250px;
    }
     .ballon{
         left: 50px;
    }
     .site-header .site-header-row{
         padding: 40px 0 0 20px;
    }
     footer .copy{
         text-align: center;
    }
      section#about .about-text{
         padding: 0px;
         margin: 30px 0px 0px 0px;
    }

    section#quote p{
        font-size: 24px;
    }

    .single h1, .page-template h1{
        text-align: center;
    }

    .site-header .site-header-row .site-branding img{
        margin: 20px 0px;
    }

    .site-header .site-header-row .main-navigation{
        background: transparent;
    }

    .about-photo{
        text-align: center;
        max-width: 350px;
        margin: 0 auto;


    }

    section#about .about-photo img{
        object-fit: contain;
    border-radius: 60px;
    aspect-ratio: 1;
    height: auto;
    width: auto;
    margin: 30px 0px;
    }

    .portfolio-box--title{
        font-size: 16px;
    }

    .offer-template-default .hero-image, .page-template-template-blog .hero-image{
        margin: 100px 0 0 0;
    }


    .page-template-template-blog .portfolio-box--title{
        font-size: 20px;
    }

    #hero h4{
  letter-spacing: 0.17rem;
  font-size: 0.8rem;
  text-transform: uppercase;
    }

    .wpcf7-form .form-actions{
        text-align: center;
    }

    .contact .contact-left--info---inside{
        padding-right: 0;
    }

    .site-branding{
        position: absolute;
        left: 0px;
        top: 1px;
    }

    .site-header .site-header-row .site-branding img{
        width: 140px;
    }

    section#about .about strong{
        font-size: 1.1rem;
    }

    .workshops p{
        text-align: center;
    }




}
 @media (max-width: 768px) {
     section#hero{
         height: auto;
    }
     section#hero .hero-text{
         padding: 50px 0px;
    }
     section#hero .hero-img{
        padding: 0px;
     }

     section#hero .hero-img img{

        width: 100%;
        position: static;
        max-height: 650px;
    }

    section#hero h1{
        font-size: 35px;
    }

     .contact-form{
         padding: 30px 0px;
    }
     .hero-image-header p{
         font-size: 20px;
    }
     .hero-image-header {
         margin-left: 0px;
    }
   
     .services-list .col-md-4{
         margin: 20px 0px;
    }
     .contact .contact-left--info---inside p{
         font-size: 23px;
    }
     .contact .contact-left--info---inside p a{
         word-wrap: break-word;
    }
     .pencil{
         display: none;
    }
     .ballon {
         left: 0px;
         right: 0px;
         margin: 0 auto;
         top: -30px;
    }
 
     section#about .about{
         padding: 40px 25px;
    }
     .gallery img {
         height: 150px;
    }

    section#portfolio .portfolio-slider .portfolio-box{
        aspect-ratio: 2;
    }

    section#portfolio .portfolio-slider .slick-slide img{
        border-radius: 0;
    }

    .portfolio .col-md-8{
        margin: 40px 0;
        padding: 0;
    }

    section .extra-contact h2 span{
        background: transparent;
        padding: 0px 10px;
    }

    section .extra-contact h2:after{
        display: none;
    }

    section#about{
        padding: 0px;
    }

    section#about .about{
        margin-top: 0px;
    }

    section#services .services-contaner-row{
        padding: 2rem 1rem;
    }

    .services-contaner-row li{
        margin-left: 25px;
    }

    section#portfolio{
        padding: 0px;
    }

    
}


  @media (min-width: 576px) and (max-width: 768px){
    #hero .container, .container-sm{
        max-width: 100%;
    }
}