:root {
    
    --first-font: 'Sora', sans-serif;
    --second-font: 'Zilla Slab', serif;
    --blue: rgba(0, 113, 183, 1);
    --blue-transparent:  rgba(0, 113, 183, 0.9);
    --white:  rgba(255, 255, 255, 1);
    --black:  rgba(0, 0, 0, 1);
    --lighter-gray: rgba(242, 242, 242, 1);
    --logo-color: rgba(183, 209, 226, 1);
}


@media (max-width: 1200px) {

    h1{
        font-size: 3rem;
    }
    
     h2{
         font-size: 2.5rem;
    }
     h3{
         font-size: 2rem;
    
    }
    
 }

 @media (max-width: 992px) {

     .site-header .main-navigation ul{
         flex-direction: column;
         display: flex;
         align-items: flex-start;
    }
     .site-header .main-navigation ul li{
         font-size: 1.3rem; 
        margin: 0.6rem 0rem;
        width: 100%;
    }
     .main-navigation ul ul{
         box-shadow: none;
         float: left;
         position: static;
    }
     #hamburger {
         position: absolute;
         right: -1.2rem;
        top: 0rem;
         z-index: 999;
         width: 50px;
         height: 50px;
         cursor: pointer;
         transition: all 0.3s ease-out;
         visibility: hidden;
         opacity: 0;
         border-radius: 50%;
    }
     #hamburger .hamburger-container{
         width: 100%;
         height: 34px;
         z-index: 999;
         position: absolute;
         top: 1.5rem;
         right: 0;
         left: 0;
         transform: translate(0,-50%);
         margin: 0 auto;
    }
     #hamburger .line {
         height: 0.19rem;
         margin: 0.4rem  0;
         backface-visibility: hidden;
         width: 2rem;
         background: var(--white);
         text-align: right;
         transition: all 0.3s ease-out;
    }
    .sticky #hamburger .hamburger-container {
        top: 1.2rem;
    }   


    #hamburger #one, #hamburger #three{
        width: 1.7rem;
    }

     #hamburger.active #one {
         transform: rotate(45deg) translateX(7px) translateY(7px);
         transition: all 0.3s ease-out;

    }
     #hamburger.active #two {
         opacity: 0;
    }
     #hamburger.active #three {
         transform: rotate(-45deg) translateX(6px) translateY(-6px);
         transition: all 0.3s ease-out;
    }
     #hamburger {
         visibility: visible;
         opacity: 1;
    }
     .site-header.sticky #hamburger{
         top: 10px;
    }
     .menu-header-menu-container {
         display: flex;
         justify-content: left;
         visibility: hidden;
         opacity: 0;
         transition: all 0.3s ease-out;
         position: fixed;
         z-index: -1;
         top: 0;
         left: 0;
         width: 100%;
         background: var(--blue);
         padding: 8rem 0rem 3rem 0rem;
        justify-content: center;
        text-align: center;


    }
     .menu-header-menu-container.active {
        visibility: visible;
        opacity: 1;
    }

    .site-header .main-navigation ul li a{
            padding: 0.5rem 1.5rem;
    }

    section#hero{
            height: 30rem;
    }

    section#hero .custom-block-image{
        width: 90px;
    height: 90px;
    }

    section#hero .custom-block{
            right: -35px;
            width: 250px;
            padding: 0rem 1rem;
            height: 250px;
    }

    section#hero .custom-block-text{
        font-size: 1rem;
    }


    .btn-white, .btn{
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    .about-text{
        margin-bottom: 2rem;
    }

    h4{
        font-size: 1.1rem;
    }

    h2{
        font-size: 2.2rem;
    }

    section#about .about-image img{
            max-width: 90%;
    margin: 0 auto;
    }

    h2:after{
        margin: -0.6rem 0px 2rem -10px;
    }

    section#services .services{
        padding: 0;
    }

    section#about{
            padding: 5rem 0 3rem 0;
    }

    section#reviews h2, section#reviews p{
        text-align: center;
    }

    section#reviews h2:after{
        display: none;
    }

    section#reviews h2 span{
        font-size: 1.6rem;
    display: block;
    margin-left: -7rem;
    }

    footer .contact {
    padding: 2rem 0rem;
    }


    .contact h5 {
    margin-top: 2rem;
    }

    footer h2{
        margin: 0;
    }

    section#kids{
        padding: 9rem 1rem;
    }

    section#kids h4{
        font-size: 2rem;
    }

    .single-offer-sidebar{
        position: static;
    }

    .single-offer .site-main{
        overflow: hidden;
    }

    .single-offer-text{
        padding: 0px;
        margin-top: 2rem;
    }

    .google-map{
        height: 25rem;
    margin-top: 4rem;
    }

    section#kids{
        background-attachment: unset;
    }

    .single-offer-content{
        padding: 2rem 0 2rem 0;
    }

    .site-header .site-header-row .site-branding img{
            width: 3.5rem;
    }






}


 @media (max-width: 768px) {
   
    section#hero .custom-block{
        display: none;
    }

    .hero-image{
        padding: 0 0.5rem;
    }

    .contact .contact-box{
        font-size: 1.4rem;
    }

    .single-offer-text, .about-text{
        padding: 0 2rem;
    }
    .pricelist-row {
    padding: 0rem 2rem 4rem 2rem;
    }

    h1 {
    font-size: 2rem;
    }

     section#hero .hero-text p.under-header{
    font-size: 1.2rem;
    margin: 1rem 0rem;
    font-weight: 900;
    }

    section#about{
        padding: 0rem 0 3rem;
    }


       .metamorfozy {
        padding: 2rem 0;
    }
    
    .metamorfozy-item {
        margin-bottom: 2rem;
        padding: 1.5rem;
    }
    
    .metamorfozy-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    
    .before-after-slider {
        max-width: 100%;
        margin-bottom: 2rem;
    }
    
    .slider-container {
        height: 300px;
    }
    
    .metamorfozy-description {
        padding: 1.5rem;
        font-size: 1rem;
    }


 }