/* colors */
:root{
  --font-color-1: #1F6918;
  --font-color-2: #6D6158;
  --background-color-1: #1F6918;
  --background-color-2: rgba(130,175,126,1); /* popup */
  --background-color-3: rgba(60,110,55,1);  /* banner */
  --background-color-4: #82AF7E; /* button */
  --background-color-5: #E9F0E8; /* poster */
  --background-color-6: rgb(246,246,246); /* offer */
}

/* main styles */
* {
  box-sizing: border-box;
}
a{
  text-decoration: none;
}
p{
  margin-top: 12px;
  margin-bottom: 12px;
}
html {  
  scroll-behavior: smooth;  
}
body {
  font-size: 14px;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0px 0px;
}
.main{
  position: relative;
  width: 1522px;
  margin: auto auto;
}

/* banner & menu styles */
.header {
  width: 1522px;
  height: 100px;
  background: var(--background-color-3);
  opacity: 1;
  box-shadow: 0px 4px 50px rgba(0.011119794100522995, 0.07500000298023224, 0.0053125000558793545, 0.10000000149011612);
  z-index: 1100;
  position:fixed;
  margin: auto auto;
  top:0;
}
.cl-logo-small{
  width: 192px;
  height: 44px;
  background: url("../images/logo-small.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: relative;
  top: 28px;
  left: 189px;
  overflow: hidden;
}
.menu {
  width: 330px;
  height: 32px;
  position: absolute;
  top: 35px;
  left: 794px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 72px 86px 78px;
  gap: 48px;
}
.submenu {
  display: grid;
  grid-template-columns: 72px 86px 78px;
  gap: 48px;
  visibility: hidden;
  overflow: visible;
  height: 0px;
  position: absolute;
  top: 67px;
  left: 794px;
  width: 330px;
}
.menu-button {
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  font-family: darker grotesque;
  cursor: pointer;
}
.menu-button:hover {
  text-decoration: underline;
}
#btn-about {
  width: 70px;
  height: 32px;
}
#btn-offer {
  width: 70px;
  height: 32px;
  display: grid;
  grid-template-columns: 60px 10px;
  gap: 0px; 
}
#btn-contact {
  width: 78px;
  height: 32px;
}
.hidden {
  display: none;
  visibility: hidden;
}
.menu-popup {
  width: 85px;
  height: 105px;
  background-color: var(--background-color-2);
  opacity: 1;
  overflow: hidden;
  visibility: visible;
  border-radius: 5px;
  padding-left: 5px;
}
.menu-arrow {
  width: 10px;
  height: 32px;
}
.submenu-item{
  height: 35px;
  text-align: left;
  color: #fff;
  text-decoration: none;
}
.submenu-item:hover{
  font-weight:bold;
  font-stretch:extra-expanded;
}
.icons {
  width: 145px;
  height: 35px;
  position: absolute;
  top: 35px;
  left: 1195px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 35px 35px 35px;
  gap: 20px;
}
.icon-fb {
  width: 35px;
  height: 35px;
  background: url("../images/icon-fb.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
}
.icon-insta {
  width: 34px;
  height: 34px;
  background: url("../images/icon-insta.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
}
.icon-tikt {
  width: 35px;
  height: 35px;
  background: url("../images/icon-tikt.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
}

/* image slideshow styles */
.image-slideshow {
  width: 1522px;
  height: 534px;
  opacity: 1;
  position: relative;
  top: -9px;
  margin: auto auto;
  margin-top: 100px;
  z-index: 90;
  margin-bottom: -9px;
}
.slides {
  display: none;
}
.active {
  background-color: #fff;
}
.fade {
  animation-name: fade;
  animation-duration: 2s;
}
@keyframes fade {
  from {opacity: .8} 
  to {opacity: 1}
}

/* sections & blocks */
.section{
    width: 1522px;
    opacity: 1;
    position: relative;
    top: 0px;
    margin: auto auto;
    z-index: 90;
    font-size: 32px;
    font-family: darker grotesque;
    color: var(--font-color-2);
}
#section-1{
  height: 1655px;
  display: grid;
  gap: 0px;
  grid-template-rows: 480px 495px 1160px;
  background-image: url("../images/background-gray.png");
  background-repeat: no-repeat;
  background-position: 0px -9px;
  background-size: 1522px 725px;
}
#section-2{
  height: 770px;
  overflow: hidden;
}
#section-3{
  height: 590px;
  overflow: hidden;
  text-align: left;
}
#section-4{
  height: 364px;
  width: 1522px;
}
.block{
  position: relative;
  width: 1522px;
  height: 100%;
  display: block;
}
#block-11{
  display: grid;
  gap: 0px;
  grid-template-columns: 960px 562px;
}
#block-21{
  height: 580px;
  width: 1162px;
  max-height: 580px;
  margin-top: 95px;
  margin-left: 180px;
}
#block-211{
  height: 90px;
  margin: 0 0;
  padding: 0 0;
}
#block-212{
  height: 490px;
  width: 1162px;
  display: grid;
  grid-template-columns: 366px 366px 366px;
  gap: 32px;
  position: relative;
  margin-left: 0px;
}
#block-31{
  margin-top: 165px;
  margin-left: 215px;
  text-align: left;
}
#block-32{
  margin-top: 0px;
  margin-left: 215px;
}
.poster{
  position: relative;
  display: block;
  width: 366px;
  height: 490px;
  border-radius: 22px;
  background-color: var(--background-color-5);
  color: var(--font-color-2);
  display: grid;
  gap: 0px;
  z-index: 90;
  grid-template-rows: 160px 70px 170px 90px;
  font-size: 32px;
  font-family: darker grotesque;
}
.poster-image{
  position: relative;
  height: 160px;
  background-size: 94px 94px;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 100%;
  z-index: 100;
  color: black;
}
.poster-title{
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 3px;
}
.poster-text{
  text-align: center;
  font-size: 25px;
  width: 286px;
  margin-left: 40px;
}
.poster-link{
  text-align: center;
  font-size: 24px;
  color: var(--font-color-2);
  text-decoration: underline;
  font-weight: bold;
}
.poster-link:hover{
  color: var(--background-color-1);
}
#p-img-1{
  background-image: url("../images/p-img-1.png");
}
#p-img-2{
  background-image: url("../images/p-img-2.png");
  background-size: 73px 73px;
  background-position: center 49px;
}
#p-img-3{
  background-image: url("../images/p-img-3.png");
  background-size: 69px 69px;
  background-position: center 53px;
}
#p-tit-2{
  width: 250px;
  margin-left: 58px;
}
#p-tit-3{
  width: 290px;
  margin-left: 38px;
}
#text-11{
  width: 630px;
  height: 100%;
  margin-left: 180px;
  margin-top: 110px;
  font-weight: 500;
}
#image-logo{
  position: relative;
  width: 562px;
  background-image: url("../images/logo-big.png");
  background-repeat: no-repeat;
  background-position: 40px 80px;
  background-size: 338px 338px;
}
.btn-callus{
  display: block;
  width: 374px;
  height: 75px;
  border-radius: 20px;
  background-color: var(--background-color-4);
  color: white;
  text-align: center; 
  text-decoration: none;
  margin-top: 35px;
  font-size: 22pt;
  font-family: yeseva one;
  cursor: pointer;
  padding: 20px;
}
.btn-callus:hover{
  background-color: var(--background-color-1);
}
.block-header{
  position: relative;
  width: 100%;
  margin-top: 80px;
  margin-bottom: 30px;
  color: var(--font-color-1);
  font-size: 32px;
  font-family: yeseva one;
  text-align: center;
}
.block-body{
  position: relative;
  width: 1162px;
  color: var(--font-color-2);
  font-size: 28px;
  font-family: darker grotesque;
  text-align:justify;
  margin-left: 180px;
}
.p-footer{
  text-align: center;
  margin-top: 50px;
  font-size: 30px;
}
#footer{
  position: relative;
  background-color: var(--background-color-4);
  height: 75px;
  font-size: 20px;
  color: #fff;
  padding: auto auto;
  font-weight: initial;
  font-family: darker grotesque;
}
.footer-text{
  position: relative;
  width: 1523px;
  height: 100%;
  display: grid;
  grid-template-columns: 210px 120px 155px 157px 205px 465px 210px;
  gap: 0;
}
.owner{
  margin: auto auto;
  margin-left: 5px;
}
.designer{
  position: relative;
  width: 465px;
  margin: auto auto;
  text-align: center;
}
/* photos */
.frame-photos{
  position: relative;
  width: 1054px;
  height: 410px;
  margin-left: 237px;
  margin-top: 50px;
}
.photo{
  position: relative;
  display: inline-table;
  box-shadow: 0px 0px 0px rgb(200, 200, 200);
  width: 353px;
  height: 354px;
}
.ph1{
  z-index: 80;
  transform: rotate(-1.19deg);
  left: -35px;
  top: 0px;
}
.ph2{
  z-index: 70;
  transform: rotate(9.43deg);
  top: 50px;
  left: -125px;
  width: 337px;
}
.ph3{
  z-index: 80;
  transform: rotate(-11.09deg);
  top: -355px;
  left: 475px;
}
.ph4{
  z-index: 90;
  transform: rotate(5.23deg);
  top: -330px;
  left: 365px;
}

/* Image banners */
.banner-image{
  position: relative;
  left:0;
  width: 1522px;
  height: 316px;
  background-repeat: no-repeat;
  background-size: 1522px auto;
  overflow: hidden;
}
.bi-1{
  background-image: url("../images/banner-1.png");
  background-position: 0 -440px;
  margin-top: 30px; 
}
.bi-2{
  background-image: url("../images/banner-2.png");
  background-position: 0 -280px; 
  margin-top: 0px;
}

/* contact */
.contact{
  display: grid;
  height: 75px;
  grid-template-columns: 75px 300px;
  gap: 0;
}
.con-img{
  width: 60px;
  height: 75px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.con-txt{
  color: var(--font-color-2);
  font-family: darker grotesque;
  text-decoration: none;
}
#con-img-1{
  background-image: url("../images/icon-phone.png");
  background-size: 36px 36px;
  background-position:  4px 0;
}
#con-img-2{
  background-image: url("../images/icon-mail.png");
  background-size: 44px 44px;
}
#con-img-3{
  background-image: url("../images/icon-loc.png");
  background-size: 40px 40px;
  background-position:  2px 0;
}

/* map */
.map{
    height: 364px;
    width: 1522px;
    border: 0;
}

/* subpage offer */
.empty-block{
  width: 1522px;
  height: 10px;
  position: relative;
  margin-top: 100px;
  background-color: var(--background-color-6);
}
.of-section{
  width: 1522px;
  height: 1590px;
  position: relative;
  display: grid;
  grid-template-rows: 220px 1370px;
  color: var(--font-color-2);
  font-family: darker grotesque;
  gap: 0px;
  padding-left: 186px;
  font-size: 28px;
  font-weight: 500;
}
.os-1{
  background-color: var(--background-color-6);
  box-shadow: 0px 5px 5px rgb(235, 235, 235);
  z-index: 1000;
}
.os-2{
 z-index: 800;
 height: 880px;
}
.os-3{
  height: 1400px;
  background-color: var(--background-color-6);
  box-shadow: 0px -5px 5px rgb(235, 235, 235);
  z-index: 1000;
}
.of-section-title{
  width: 1160px;
  margin-top: 115px;
  text-align: center;
  display: grid;
  color: var(--font-color-1);
  grid-template-columns: 472px auto 472px;
  gap: 0px;
  font-family: yeseva one;
  font-size: 32px;
  height: 48px;
  margin-bottom: 0px;
}
.of-section-body{
  margin: 0 0;
  padding: 0 0;
  width: 1160px;
  height: 100%;
}
.hline{
  width: 472px;
  margin: auto auto;
  border: 1px solid var(--font-color-1);
}
.of-section-table{
  display: grid;
  width: 1160px;
  height: 570px;
  grid-template-columns: 517px 540px;
  gap: 103px;
  overflow: hidden;
  text-align:justify;
  padding: 0 0;
  margin-top: 0px;
}
.oft-2{
  grid-template-columns: 517px 517px;
  gap: 126px;
}
.of-caption{
  font-weight: 700;
  margin: 0 0;
  padding: 0 0;
  margin-bottom: 15px;
}
.checklist{
  list-style: inside url("../images/checkmark.png");
  padding: 0px;
  margin-top: 15px;
}
.dotlist{
  list-style: outside url("../images/dotmark.png");
  margin-top: 30px;
  margin-left: 0px;
  padding-left: 24px;
  margin-bottom: 40px;
}
.of-section-img{
  width: 540px;
  height: 540px;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: white;
  margin-top: 15px;
}
.osi-1{
  background-image: url("../images/camps-img.png");
  background-size: 520px 520px;
}
.osi-2{
  background-image: url("../images/rides-img.png");
  width: 517px;
  height: 517px;
}
.osi-3{
  background-image: url("../images/trophies-img.png");
  background-size: 517px 517px;
  width: 517px;
  height: 517px;
}
.of-section-row{
  margin-top: 30px;
  width: 1160px;
  text-align:justify;
}
.ost-2{
  width: 1160px;
  height: 570px;
  grid-template-columns: 410px 490px;
  gap: 260px;
}
.ost-3{
  width: 1160px;
  height: 517px;
  grid-template-columns: 533px 517px;
  gap: 110px;
}
.ofc-1{
  margin-bottom: 0px;
  padding: 0 0;
}
.ofc-2{
  height: 90px;
}
.ofc-3{
  height: 90px;
  margin-top: 40px;
}
.pdf-link{
  width: 60px;
  height: 60px;
  background-size: 60px 60px;
  background-repeat: no-repeat;
  background-image: url("../images/icon-pdf.png");
  float: right;
  margin-right: 15px;
  margin-top: 5px;
}
.ofc-22{
  float: left;
  margin-top: 15px;
}
.price-list{
  width: 517px;
  margin-top: 40px;
}
.price{
  display: grid;
  gap: 0px;
  grid-template-columns: 442px 75px;
  text-align: left;
  margin: 0 0;
  padding: 0 0;
}
.of-price{
  width: 75px;
  text-align: right;
  font-weight: 700;
}
.osr-1
{
  margin-top: 40px;
}


/* obsługa błędów */
#section-error{
  position: relative;
  height: 660px;
  overflow: hidden;
  margin-top: 100px;
  background-color: var(--background-color-6);
  text-align: center;
  font-weight: 700;
}
.error-row{
  width: 100%;
  height: 100%;
  padding-top: 30px;
  background-image: url("../images/logo-big.png");
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--background-color-1);
}