@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');


@font-face {
    font-family: 'ClashDisplay-Variable';
    src: url('ClashDisplay-Variable.woff2') format('woff2'),
         url('ClashDisplay-Variable.woff') format('woff'),
         url('ClashDisplay-Variable.ttf') format('truetype');
         font-weight: 200 700;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'ClashDisplay-Extralight';
    src: url('ClashDisplay-Extralight.woff2') format('woff2'),
         url('ClashDisplay-Extralight.woff') format('woff'),
         url('ClashDisplay-Extralight.ttf') format('truetype');
         font-weight: 200;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'ClashDisplay-Light';
    src: url('ClashDisplay-Light.woff2') format('woff2'),
         url('ClashDisplay-Light.woff') format('woff'),
         url('ClashDisplay-Light.ttf') format('truetype');
         font-weight: 300;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'ClashDisplay-Regular';
    src: url('ClashDisplay-Regular.woff2') format('woff2'),
         url('ClashDisplay-Regular.woff') format('woff'),
         url('ClashDisplay-Regular.ttf') format('truetype');
         font-weight: 400;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'ClashDisplay-Medium';
    src: url('ClashDisplay-Medium.woff2') format('woff2'),
         url('ClashDisplay-Medium.woff') format('woff'),
         url('ClashDisplay-Medium.ttf') format('truetype');
         font-weight: 500;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'ClashDisplay-Semibold';
    src: url('ClashDisplay-Semibold.woff2') format('woff2'),
         url('ClashDisplay-Semibold.woff') format('woff'),
         url('ClashDisplay-Semibold.ttf') format('truetype');
         font-weight: 600;
         font-display: swap;
         font-style: normal;
  }
  
  
  @font-face {
    font-family: 'ClashDisplay-Bold';
    src: url('ClashDisplay-Bold.woff2') format('woff2'),
         url('ClashDisplay-Bold.woff') format('woff'),
         url('ClashDisplay-Bold.ttf') format('truetype');
         font-weight: 700;
         font-display: swap;
         font-style: normal;
  }

html {
    font-size: 8px;
    overflow-x: hidden;
}

body {
    background-color: #F7F3F0;
    margin: 0;
    overflow-x: hidden;
}

#root .troche-bardziej-szare-tlo {
    background-color: #F0EDEA;
}

#root .bardziej-szare-tlo {
    background-color: #DDDDDD;
}

#root h1, #root h2, #root h3, #root h4, #root h5, #root h6 {
    font-family: "Bricolage Grotesque", sans-serif;
}

#root .rozmiar48 h1, #root .rozmiar48 h2, #root .rozmiar48 h3, #root .rozmiar48 h4, #root .rozmiar48 h5, #root .rozmiar48 h6  {
    font-size: 6rem;
}

#root .rozmiar36 h1, #root .rozmiar36 h2, #root .rozmiar36 h3, #root .rozmiar36 h4, #root .rozmiar36 h5, #root .rozmiar36 h6, #root .rozmiar36 p, #root .rozmiar36 a   {
    font-size: 4.5rem;
}

#root .rozmiar24 h1, #root .rozmiar24 h2, #root .rozmiar24 h3, #root .rozmiar24 h4, #root .rozmiar24 h5, #root .rozmiar24 h6, #root .rozmiar24 p, #root .rozmiar24 a, #root .rozmiar24 li  {
    font-size: 3rem;
}

#root .rozmiar16 p, #root .rozmiar16 span, #root .rozmiar16 a, #root .rozmiar16 ul li  {
    font-size: 2rem;
}

#root p, #root a, #root ul li {
    font-family: 'ClashDisplay-Variable';
}

#root .jasny-tlo {
    background-color: #F7F3F0;
}

#root .jasny-font, #root .jasny-font p, #root .jasny-font a, #root .jasny-font span {
    color: #F7F3F0
}

#root .ciemny-font {
    color: #2D2D2D;
}

#root .ciemne-tlo-button a.elementor-button {
    background-color: #2D2D2D;
}

#root .czerwone-tlo-button a.elementor-button {
    background-color: #F42434;
    color: white;
}

#root .ciemne-tlo {
    background-color: #2D2D2D;
}

#root .czerwony-font {
    color: #F42434;
}

#root .czerwone-tlo {
    background-color: #F42434;
    overflow: hidden;
}

#root .zolty-font {
    color: #EDAF4A;
}

#root .zolte-tlo {
    background-color: #EDAF4A;
}

#root .granat-font {
    color:#26327A;
}

#root .granat-tlo {
    background-color: #26327A;
}

#root .kontener {
    max-width: 1600px;
    padding-left: 3rem;
    padding-right: 3rem;
}

#root a.elementor-button {
    border-radius: 3rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 4rem;
    padding-right: 4rem;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 900;
}

#root .mid h1, #root .mid h2, #root .mid h3, #root .mid h4, #root .mid h5, #root .mid h6, #root .mid p, #root .mid a, #root .mid span {
    font-weight: 400;
}

#root .bold h1, #root .bold h2, #root .bold h3, #root .bold h4, #root .bold h5, #root .bold h6, #root .bold p, #root .bold a, #root span.bold {
    font-weight: 700;
}

#logo-biale path {
    fill: #f7f3f0;
}

#root .czerwony-hover .elementor-button:hover {
    background-color: #F42434;
}

#root .czarny-hover .elementor-button:hover {
    background-color: #2D2D2D;
}

#foot a:hover, #menu-box a:hover {
    text-decoration: underline;
    transition: .3s;
}

div#brief-form button:hover {
    background-color: #F42434;
    cursor: pointer;
    color: white;
}

#elementor-popup-modal-326 .eicon-close:before {
    font-size: 3rem;
}

#elementor-popup-modal-326 .dialog-close-button {
    text-decoration: none;
}

footer.elementor-slideshow__footer.elementor-lightbox-prevent-close {
    display: none;
}



@media screen and (max-width: 600px) {

    #root .rozmiar48 h1, #root .rozmiar48 h2, #root .rozmiar48 h3, #root .rozmiar48 h4, #root .rozmiar48 h5, #root .rozmiar48 h6  {
        font-size: 3rem;
    }
    
    #root .rozmiar36 h1, #root .rozmiar36 h2, #root .rozmiar36 h3, #root .rozmiar36 h4, #root .rozmiar36 h5, #root .rozmiar36 h6   {
        font-size: 3rem;
    }
    
    #root .rozmiar24 h1, #root .rozmiar24 h2, #root .rozmiar24 h3, #root .rozmiar24 h4, #root .rozmiar24 h5, #root .rozmiar24 h6, #root .rozmiar24 p, #root .rozmiar24 a  {
        font-size: 1.75rem;
    }
    
    #root .rozmiar16 p, #root .rozmiar16 span, #root .rozmiar16 a  {
        font-size: 1.75rem;
    }

    #root .kontener {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    #root .kontener.bez-paddingu {
        margin-left: -8rem;
        margin-right: -8rem;
        width: calc(100% + 16rem);
        max-width: none;
    }

    #root .bez-paddingu-film, #root .bez-paddingu {
        margin-left: -8rem;
        margin-right: -8rem;
        width: calc(100% + 16rem);
        max-width: none;
    }

    #root .bez-paddingu-mniej {
        margin-left: -4rem;
        margin-right: -4rem;
        width: calc(100% + 8rem);
        max-width: none;
    }

    #menu-box .rozmiar36 a, #menu-box .rozmiar36 p {
        font-size: 3rem;
    }

    #menu-box .rozmiar24 a {
        font-size: 2rem;
    }

    #elementor-popup-modal-326 .dialog-close-button {
        position: absolute;
        top: 15rem;
        left: 47%;
    }

    #elementor-popup-modal-326 .dialog-close-button {
        justify-content: center;
        width: fit-content;
    }

    #animacja img {
        height: 12rem;
    }

    #root #animacja {
        display: flex;
        justify-content: flex-start;
    }
}