@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;700&display=swap');
*{position: relative; box-sizing: border-box;margin: 0; padding: 0;font-family: Montserrat;  scroll-behavior: smooth; font-weight: 300; line-height: 130%;}
body{display: block; width: 100%; min-height: 100vh; overflow-x: hidden;font-size: 24px; scroll-behavior: smooth}
h1, h2, h3, h4{font-size: 2.5rem; margin-top: 2rem;margin-bottom: 1rem;  padding: .5rem; font-weight: bold;}
h2{font-size: 2rem;}
h3{font-size: 1.5rem;}
p{padding: .5rem;  font-size: 1.2rem}
strong{font-weight: 700}
iframe{max-width: calc(100% - 1rem) !important;margin: .5rem;height: auto;}
section{margin-top: -.5rem;}
.text_center{text-align: center !important;}
.height_auto{height: auto !important;}
.separator{display: block; height: 2rem; width: 100%; margin: 0;opacity: 0;}
#logo{display: block; position: fixed; z-index: 250; top: 0; left: 0; width: 100%; height: 5rem}
#logo, #logo *{list-style-type: none; margin: 0; padding: 0; color: #fff; text-decoration: none; font-size: 2.5rem; margin: .25rem}
#logo::after{content: '';display: block; position: absolute; top: -280%; left: -100%; transform: rotate(-2deg);z-index: -1;width: 200%; height: 22rem;background-color: #000;}
#logo img{filter: invert(1); width: 50%;top: 0; left: 1rem;max-width: 14rem}
#logo{}


/*
 * NAWIGACJA
 */
.top_nav_bkg{
  display: block; position: fixed; top: -7rem; left: 0; width: 100%; height: 7rem; background-color: rgba(255, 255, 255, .55);
  z-index: 2;
  backdrop-filter: blur(3px) ;
  transition: 1s;
}
#nav_open{display: none;} 
#top_nav_container{
  transition: .5s;
  display: block; 
  position: fixed;
  width: 0%; height: 100vh; overflow-x: hidden; overflow-y: auto;
  top: 0; left: 0; 
  background-color: rgba(0,0,0,.9); z-index: 300; 
  padding: 0rem;
}
#top_nav_container img{
  filter: invert(1); width: 100%; margin-bottom: 1rem; max-width: 14rem; top: -1rem
}

#top_nav_container li{list-style-type: none;}
#top_nav_container *{color: #eee; text-decoration: none;}
#top_nav_container ul:last-of-type{display: flex; flex-direction: column;}
#top_nav_container ul:last-of-type li{width: 100%; display: flex;}
#top_nav_container ul:last-of-type a{width: 100%; background-color: rgba(0,0,0,.25); padding: .5rem 0; font-size: 1rem; margin: .25rem 0; border-bottom: dotted 1px #ccc}


#lbl_nav_open,
#lbl_nav_close{
  position: fixed;
  top: 0; right:.5rem;
  font-size: 3rem; z-index: 300;
}
#lbl_nav_open .bi,
#lbl_nav_close .bi{
  mix-blend-mode: difference;
  color: #CCC;
}

#nav_open ~ #lbl_nav_open{display: block;}
#nav_open ~ #lbl_nav_close{display: none;}
#nav_open:checked ~ #lbl_nav_open{display: none ;}
#nav_open:checked ~ #lbl_nav_close{display: block;}
#nav_open:checked ~ #top_nav_container{width: 18%; padding: 1rem;}


#top_nav_container .contact{padding: 0; margin: .5rem 0}
#top_nav_container .contact *{margin: 0; padding: 0; font-size: .9rem}
#top_nav_container .contact h4{font-size: 1rem; }

/**
 * STOPKA
 */

footer{display: grid; grid-gap: 2rem; padding: 1rem 10%; background-color: #111; grid-template-columns: 1fr 1fr 1fr 1fr; padding-top: 2rem}
footer *{color: #eee; margin: 0; padding: 0;font-size: 1rem; text-decoration: none; text-align: center;}
footer nav ul{display: flex; flex-direction: row; flex-wrap: wrap;gap: 1rem}
footer nav ul li{list-style-type: none; width: calc(33% - .65rem); border: solid 1px;}
footer nav ul li{display: flex;  word-wrap: break-word; text-align: center; }
footer nav ul li>a{ text-decoration: none; width: 100%; padding: .5rem; }
footer form * {color: #000;}


/*
 * PRZYCISKI
 */

.foot_control{
  display: grid;
  position: fixed;
  right: 0rem; bottom: 0; width: auto; height: auto; z-index: 450;background: none;
  grid-template-columns: 2fr 2fr 2fr;
  padding: 1rem;
}
.foot_control *{font-size: 2rem; text-shadow: 0px 0px 1px #000; mix-blend-mode: difference; backdrop-filter: invert(80%); color: red}
.foot_control a{width: 1rem; height: 1rem;margin: 1rem 1rem; }



/*
 * STRONA STARTOWA
 */

.front_page{display: block; position: relative;width: 100%; height: auto;overflow-x: hidden; scroll-behavior: smooth}
.front_page h1{direction: block; position: fixed; z-index: 250; top: 50vh; transform: translateY(-50%); left: .5rem; color: #fff; mix-blend-mode: hard-light  ; text-shadow: 0px 0px 5px #000, 1px 1px 40px #000 ;width: calc(100% - 1rem); ;transition: .75s; text-align: center; font-weight: bold}
.front_page h1.scrolled{font-size: 1.25rem; max-width: calc( 100% - 24rem);top: 1.5rem; left: 18rem; text-align: left; position: fixed; margin-top: 0;text-align: left;font-weight: bold;}
.front_page img{position: relative; width: 100%; filter: brightness(1); top: 0rem}
.front_page h1.scrolled::after, .hero h1.scrolled::after{
  content: '';
  display: block; 
  position: absolute; width: 50%; height: 2px; border: solid 1px yellow; background-color: yellow;border-radius: .5rem; bottom: -1rem
}



.slogan{display: block; position: relative; width: 100%; overflow: hidden; text-align: center;}
.slogan>img{position: relative; height: 15rem; margin: 0 50%; transform: translateX(-50%); max-width: calc(100% - .5rem)}
.slogan>img.icon{width: 50%; margin-left: 25%;transform: initial}
.slogan h2{font-weight: bold}

/*
 * PODSTRONA - np. O NAS
 */

.hero{display: flex; flex-direction: column; justify-content: center;justify-items: center; width: 100%; height: 90vh; position: relative;overflow: hidden; }
.hero>div{background-color: rgba(255, 255, 255, .5); display: block; width: 40%; margin-left: 30%; z-index: 1}
.hero h1, .hero p{position: relative; font-size: 2rem; line-height: 120%; padding: .5rem; text-align: center; margin: .5rem; transition: 1s; z-index: 1; text-shadow: 0px 0px 5px #fff, 1px 1px 40px #fff; font-weight: bold}
.hero h1.scrolled{font-size: 1.25rem; max-width: calc( 100% - 24rem);top: .5rem; left: 18rem; text-align: left; position: fixed; margin-top: 0;text-align: left;font-weight: bold; color: #CCC; text-shadow: initial;}
.hero p{font-size: 1.5rem; font-weight: 400;}
.hero>.bkg{position: absolute; z-index: 0; background-color: red;top: 0; height: 100%; width: auto; min-width: 100%}
.hero h1.scrolled::after{
  bottom: -.5rem 
}

/*
 * PRZYCISKI
 */
.more{display: inline-block; width: auto; padding: 0; margin: 2rem auto; text-decoration: none; transition: 1s}
.more>span:first-of-type{padding: .5rem; background-color: yellow; color: black; transition: 1s}
.more>span:last-of-type{padding: .5rem; background-color: black; color: yellow; transition: 1s}
.more:hover>span:first-of-type{padding: .5rem; background-color: black; color: yellow;}
.more:hover>span:last-of-type{padding: .5rem; background-color: yellow; color: black;}

.scroll_down{
  display: block; position: absolute; bottom: auto; left: 50%; transform: translateX(-50%); top: 85vh; text-decoration: none; /*! mix-blend-mode: color-burn; */ color: #444
}
.scroll_down>span{mix-blend-mode: color-burn; color: #eee; font-size: 3rem}

/*
 * SLAJDER
 */
.swiper-button-next, .swiper-button-prev{color: #444 !important}
.swiper-pagination-bullet{ background-color: #000 !important }
.swiper-pagination-bullet-active{ background-color: yellow !important }
.swiper-scrollbar{display: none !important;}
.swiper {
  width: 100%;
  height: auto;
}
.swiper-slide{position: relative;}
.swiper-slide>img{
  width: auto; height: auto; width: 100%;
}
.swiper-slide>h3{position: absolute; bottom: -1rem; left: 0; z-index: 1; width: 100%;padding: .5rem; background-color: rgba(255, 255, 255, .5); font-weight: normal; font-size: 1.5rem}

.parallax-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 130%;
    height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
}

.swiper_left .swiper{width: 35%; float: left;margin-right: 1rem}

.swiperParallax{
  height: auto;
  background-color: rgba(0,0,0,.5)
}
.swiperParallax h2, .swiperParallax h3, .swiperParallax p{margin: 0; padding: .5rem;text-align: center}
.swiperParallax .swiper-wrapper{
}
.swiperParallax .swiper-slide-active{
background-color: rgba(0,0,0,.5);
padding: 5rem 2rem;
}
.swiperParallax .swiper-slide{
  height: 60vh;
  display: flex !important;flex-direction: column;justify-content: center; padding: 0 30% !important;
}
.swiperParallax .swiper-slide *{
  color: #eee;
  
}
.swiperParallax .swiper-slide>h3{position: relative; top: initial; left: initial; background-color: initial;}
.swiperParallax .swiper-button-next, .swiperParallax .swiper-button-prev{color: red !important;  font-weight: bold;}
.swiperParallax .swiper-pagination-bullet{ background-color: red !important; opacity: 1 }
.swiperParallax .swiper-pagination-bullet-active{ background-color: yellow !important }

.grid_swp_left{display: grid; grid-template-columns: 2fr 3fr ;margin-top: -2rem; grid-gap: 1rem; text-align: left;}
.grid_swp_left h2{text-align: left;}
.grid_swp_left .swiper-button-next, .grid_swp_left .swiper-button-prev{color: red !important;  font-weight: bold;}
.grid_swp_left .icon{width: 50%}

form{
  display: flex;
  flex-direction: column;
}
form label{transition: .5s;}
form div{display: flex;width: 100%;}
form div{position: relative}
form div>div{display: flex; flex-direction: column; padding: .25rem; }
form>div>div>span.bi{background-color: #ccc; padding:  .4rem; border-radius: .15rem 0 0 .15rem; border: solid 1px #aaa; border-right: none; width: 2rem}
form>div>div>span.bi + input{padding: 1rem;  border-radius:  0 .15rem .15rem 0rem; border: solid 1px #aaa; border-left: none; width: calc(100% - 0rem)}
form>div>div>span.bi + input + label,
form>div>div>textarea + label,
form>div>div>input + label{position: absolute;left: 2.2rem;top: 50%;transform: translateY(-50%);width: calc(100% - 2rem);padding: .2rem;}
form>div>div>textarea + label{top: .9rem}
form>div>div>input, form>div>div>textarea, form>div>div>select{width: 100%;padding: .5rem; margin: 0; right: 0; position: relative;}
form>div>div>input:focus + label,
form>div>div>span.bi + input:focus + label,
form>div>div>input:not(:placeholder-shown):valid + label,
form>div input:not([value=""]) + label
{font-size: .7rem; top: .6rem; left: .5rem}
form>div>div>input + label,
form>div>div>textarea + label{
  left: initial;
}
.buttons{display: flex; gap: .2rem; padding: .25rem; justify-content: center;}
.buttons.right{justify-content: right;}
.buttons.left{justify-content: left;}
form .buttons a:not([class="button"]){margin-top: 1rem}

button, [type="submit"], .button {  
  display: flex; 
  justify-content: center;
  justify-items: end;
  border: solid 1px #ff0; 
  border-radius: .15rem;
  text-decoration: none;
  color: #fff;
  background-color: #ff0; 
  cursor: pointer;
  box-shadow: 0px 0px 1px #444;
  width: auto;padding: .25rem 1rem;margin: 0 auto;
}
[type="submit"],
button *, .button *{padding: .25rem}
button>.bi, .button>.bi{width:1.5rem;padding: .25rem; background-color: #008800;}