@import url("symcss.css");


@keyframes zoomAndPan {
    0% {
      background-position: center;
    }
    50% {
      background-position: top right;
    }
    100% {
      background-position: center;
    }
  }


  @keyframes rotate{
    0% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(360deg);
      }
      100% {
        transform: rotate(360deg); 
      }
}


@keyframes flip {
    0% {
      -webkit-transform: rotateX(0);
              transform: rotateX(0);
    }
    50% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
      }    
    55% {
      -webkit-transform: rotateX(-180deg);
              transform: rotateX(-180deg);
    }
    60% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
      }          
    100% {
        -webkit-transform: rotateX(0);
                transform: rotateX(0);
      }    
  }

  @keyframes slideUpDown {
    0% {
      background-position: right top;
    }
    50% {
      background-position: right bottom;
    }
    100% {
      background-position: right top;
    }
  }

  @keyframes slideLeftRight {
    0% {
      background-position: right center;
    }
    50% {
      background-position: left center;
    }
    100% {
      background-position: right center;
    }
  }  
  
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


* { font-family: "Roboto Condensed", sans-serif; }

a:hover {opacity: 0.5; transition: 1s;}


#cpBox { font-size:0.7rem;  margin:auto 0px 0px 0px; width:100%; bottom:0px; position: fixed; text-align:center; color:#FFFFFF; background-color:#000000; padding:5px; z-index:999999;}
#cpBox a { color:#FFFFFF; font-size:0.7rem;}
.cpBoxClose { cursor:pointer; color:#FFFFFF; text-decoration:underline;}
.cpBoxClose:hover { color:#CCCCCC;}


.lang { position:absolute; bottom:6rem; right:4rem; z-index:99;}
.lang a img { width:2rem; height:auto; margin-left:1rem;}


header button { display: none; }
header {  padding: 1rem 4rem; width: calc(100% - 8rem); position: absolute; z-index: 2; background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%); display: grid; grid-template-columns: 25% 55% minmax(120px, 20%); grid-template-rows: minmax(100px, 15vh); margin: 0;}
header .phone {  display: flex; flex-direction: column;  justify-content: center; }
header .phone a {padding: 0.8rem 0; margin-left: -1.5rem; border-radius: 100rem; background-color: #C5BEAE; color: #282828; text-decoration: none; font-size: 1.5rem; text-align: center; }
header .phone a::before { vertical-align: middle; margin: auto 0.5rem 0.2rem auto;  display:inline-table;   content: ''; background-image: url(/images/phone.svg); background-repeat: no-repeat; background-size:100% auto; background-position: right center; width: 1.5rem; height: 1.5rem;}
header .phone a:hover { opacity: 1; background-color: #999;}

header .logo {  display: flex; justify-content:baseline; align-items:baseline;}
header .logo img {  height: 100%; width: auto; object-fit: contain;  min-width: 190px; }
header .menu {  display: flex; flex-direction: column;  justify-content: center; align-items: end;}
header .menu ul {  height: 50%; justify-content: end; padding-left: 4rem; padding-right: 1rem; align-items: center; background-color: #282828; border-radius: 100rem 0 0 100rem; }
header .menu ul ul { min-height: auto; height: auto; background-color: rgba(0, 79, 140, 0.95); padding: 1.5rem 1.5rem;}
header .menu ul ul a { color: #fff; font-size: 1rem; text-transform:lowercase;}
header .menu ul ul li { color: #aaa; font-size: 0.9rem; padding: 0.5rem 0;}
header .menu li { display: block;  margin-right: 3rem; }
header .menu li a { color: #fff; font-size: 1.5rem; font-weight: 300; text-transform:lowercase; text-decoration: none;}
.isSub::before { content: ""; width: 1rem; height: 1rem;  display: inline-table; background-repeat: no-repeat; background-position: right  0.18rem; background-size: 100% auto; background-image: url(/images/ad.svg);   }
.nonHome {  position: relative; background:#fff;}

.barup {
  background-image: url(/images/barup.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: absolute;
  bottom: 0;
  z-index: 2;
  height: 31vh;
  width: 100%;
}

.spin-wrap { bottom: 0; right: 0; overflow: hidden;  position: absolute; width: 40vh; height: 30vh; z-index: 9999;}
.spin { animation-direction: reverse; animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; position: absolute; width: 50vh; height: 50vh;  background-image: url(/images/ring.png); background-repeat: no-repeat; background-size:100% 100%; }

.swiper-pagination { bottom: 4rem !important;  text-align: center !important; position:absolute !important; width:calc(100% - 4rem) !important; margin:2rem;}

.swiper-pagination-bullet {  background: #000000 !important;  border-radius: 100rem !important; width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,16px)) !important;
  height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,16px)) !important; }
.swiper-pagination-bullet-active { background: #000000 !important;  }

.swiper-button-next,
.swiper-button-prev {

    right:4rem;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top:1rem;
    color: rgb(0, 0, 0) !important;
    fill: rgb(0, 0, 0) !important;
    stroke: rgb(0, 0, 0) !important;
font-size: 10px;
}
.swiper-button-prev { left:4rem; }

.btn { border-radius: 100rem; text-transform: uppercase; font-size: 1.5rem; color: #282828; padding: 1rem 4rem; background-color: #A58A4C;}

.gallery { margin: 4rem 4rem; display: grid; gap: 2rem; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto;}
.gallery img { width: 100%; height: 100%; object-fit: cover;}

.s56 { margin: 0; }
.s56 .swiper-slide { height: 100vh; min-height: 500px; }
.s56 .label { background-color: rgba(255, 255, 255, 0.25);  display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%;  padding: 5vh 0 0 0;}
//.s56  .label:first-child {  background-color: rgba(255, 255, 255, 0); }
.s56 .label .btn { margin: 2rem auto; background-color: #282828; color: #fff;}
.s56 .label h2 {  color: #282828; text-transform: uppercase; font-size: 3rem; text-align: center; text-shadow: 2px 2px 0px rgba(255, 255, 255, 1);}
.s56 .label h2 span { font-size: 2.8rem; text-shadow: 2px 2px 0px rgba(255, 255, 255, 1); }
.s56 .label p { color: #282828; text-transform: uppercase; font-size: 2rem; text-align: center; text-shadow: 2px 2px 0px rgba(255, 255, 255, 1); }

.s56 .swiper-slide { animation: zoomAndPan 20s infinite ease-in-out; background-size: 110%; background-position: center center;}


@keyframes pulse {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(0.8);
  }
}

.op {  animation: pulse 1.5s infinite ease-in-out; display: table;  position: absolute; z-index: 9; left: 4rem; bottom: 1rem;  background-color: #004869; color: #fff;  text-decoration: none; padding: 2.5rem 1.5rem; border-radius: 100rem; text-transform: uppercase;  font-size: 0.9rem;   text-align: center;}
.op span { font-size: 1.3rem; font-weight: 500; display: block !important;}



.choice {height: 35vh; min-height: 150px; margin-top: -1rem; margin-bottom: 0;}
.choice > div { position: relative;  background-size: cover; background-position: center center; }
.choice .osobowe { background-image: url(/images/osobowe.jpg);  }
.choice .osobowe::before { content: ''; background-color: rgb(0, 0, 0, 0.4); width: 100%; height: 100%; position: absolute; z-index: 1;}
.choice .dostawcze { background-image: url(/images/dostawcze.jpg);  }
.choice .dostawcze::before { content: ''; background-color: rgb(255, 0, 0, 0.4); width: 100%; height: 100%; position: absolute; z-index: 1;}
.choice .btn { animation: shakeCycle 11s infinite; position: absolute; z-index: 2; bottom:10%; margin-left: auto;  margin-right: auto; left: 0; right: 0;}
.choice .dostawcze .btn { background-color: #000;}


.s58 { margin: 0; height: 15vh; min-height: 100px; background-color: #282828;}
.s58 * { font-size: 0.85rem; color: #C7C7C7; text-decoration: none; text-transform: uppercase;}
.s58 ul { display: flex; flex-direction: column; justify-content: center;}
.s58 ul li { display: block;}
.s58 ul li a { font-size: 1rem; padding: 0.5rem auto; display: block; }
.s58 .adress p {  font-size: 0.75rem;  text-align: right;  padding: 0; margin: 0 1rem 0.5rem 0; } 
.s58 .adress p:nth-child(1) { font-size: 1.2rem;  padding-top: 0.5rem;}
.s58 .adress { position: relative;  display: flex; flex-direction: column; justify-content: center; align-items: end; }

.s60 { min-height: auto; padding: 0;  position: relative; background-image: url(/images/s4.jpg); background-attachment: fixed; background-position: center center; background-size: cover;   }
.s60 * { color: #282828; font-size: 1.5rem;}
.s60 h2 { text-transform: none; font-size: 2.5rem;}
.s60 h2::before { background-image: url(/images/wood.svg); background-repeat: no-repeat; background-position: center; background-size: auto 100%; content: ''; display: block; height: 5rem;  margin-bottom: 1rem;}
.s60 .wrap-section { padding: 2rem 4rem; min-height: 60vh;   background-color: rgba(255, 255, 255, 0.6); width: calc(100% - 8rem); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.s60 .btn { margin-top: 2rem; border: 1px solid #fff; background: none !important;}
.s60 .wrap-section::before {
  background-image: url(/images/bardown.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  top: 0;
  position: absolute;
  content: '';
  width: 100%;
  height: 30vh;
}

.s37 {
  background-color: #000;
  min-height: auto;
}
.s37 * { color: #fff; font-size: 1rem; text-decoration: none;}

.s59 { margin: 0;   background-color: #000; }
.s59 * { color: #0295D9; text-transform: uppercase; font-size: 1.5rem;}
.s59 strong { display: block; font-size: 2rem; font-weight: 500;}
.s59 strong::before { animation-direction: reverse; animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; background-image: url(/images/ring.png); background-repeat: no-repeat; background-position: center; background-size: auto 100%; content: ''; display: block; height: 2.5rem;  margin-bottom: 1rem;}
.s59 ul li { border: 1px solid #0295D9; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.s59 ul li:nth-child(2) { background-color: #0295D9; color: #fff;}
.s59 ul li:nth-child(2) strong { filter: brightness(1000); }
.s59 ul { min-height: 50vh; }

.margin { margin: 0; padding: 1rem 4rem 4rem 4rem;}
.margin h3 { color:#666; margin: 0 0 2rem 0; padding: 0; text-transform: none; font-weight: 400; font-size: 1.8rem;}
.margin h4 { color:#666; margin: 0 0 2rem 0; padding: 0; text-transform: none; font-weight: 400; font-size: 1.3rem;}
.artImg { width: 50%; height: auto; float: right; margin: 0 0 1rem 1rem; border-radius: 1rem;}
.margin ul { margin: 1rem 1rem 1rem 2rem;}

main {  display: table; width: 100%;}

.main-text * { color: #282828;}
.main-text h1 { color: #A58A4C; text-transform: none; font-size: 3rem; margin-bottom: 2rem;}
.main-text h1 span { color: #A58A4C; font-size: 2rem; display: block;}
.main-text p { font-size: 1.2rem;}
.main-text { background-color: #fff;}
.main-text img { border-radius: 100rem; height: 80% !important;}
.main-text img:nth-of-type(1) {
  margin-top: 10vh;
}

.main-text .btn { margin-top: 3rem;}

.wrap-h1 { animation: slideUpDown  infinite ease-in-out 30s;  overflow: hidden;  margin:0 0 2rem 0;   content:"";      background-image: url(/images/s1.jpg); background-attachment: fixed; background-size: 110%;   background-position: center top; }
.wrap-h1 h1 { text-shadow: 2px 2px 0px rgba(255, 255, 255, 1); color: #282828; background-color: rgba(255, 255, 255, 0.5);  height: 20vh; display: flex; font-weight: 300; text-transform: uppercase; font-size: 2.5rem; align-items: center; justify-content: center;  min-height: 100px; text-align: center; }

.wrap { margin: 0 4rem; display: table;}
.wrap .art-img { width: calc(50% - 1rem); height: 100%;  float: right; margin: 0 0 1rem 1rem;}
.wrap p { font-size: 1.2rem; line-height: 2rem; margin-bottom: 1.5rem; }
.wrap strong { font-size: 1.8rem; font-weight: 400; line-height: 2rem; margin-bottom: 1.5rem; }
.wrap .art-p { font-size: 2rem; line-height: 2.5rem; font-weight: 400;}
.wrap ul { margin: 1rem 1rem 1rem 3rem;}
.wrap ul li { margin: 0 0 1rem 0; padding: 0;}

.tiles { grid-auto-rows: minmax(auto, min-content); min-height: auto; }
.tiles a { text-transform: uppercase; padding: 1.5rem 2rem; display: flex; justify-content: center; align-items: center; font-size: 1rem;  border-radius: 100rem; text-align: center; color: #282828; background-color: #A58A4C;  text-decoration: none; }



.contact { min-height: 50vh; height: auto; margin: -1rem 4rem 1rem 4rem; padding: 0;  }
.contact .flex-center-middle { min-height: auto; margin: 0;}
.contact > div:nth-child(1) { background-color: #eee; }
.contact > div:nth-child(2) { background-color: #554727; border-radius: 1rem;}
.contact > div:nth-child(2) * { color: #fff; text-decoration: none; font-size: 1.2rem;}
.contact iframe { width: 100%; height: 100%; border-radius: 1rem;}

.productsSlide .swiper-button-next,
.productsSlide .swiper-button-prev
{
    top: var(--swiper-navigation-top-offset,45%) !important;
    right:0px;
    padding: 10px;
    color: rgb(255, 255, 255) !important;
    fill: rgb(255, 255, 255) !important;
    stroke: rgb(255, 255, 255) !important;

    font-size: 10px;
    background-color: #000000 !important; 
}


.s25 {   background-color: #A58A4C;  position: relative; height: auto;   width: calc(100% - 8rem);  padding: 2rem 4rem 2rem 4rem;  }
.s25 > div {  min-height: 20vh; }
.s25 a { padding: 0.5rem 2rem; height: auto; display: flex; justify-content: center; border-radius: 100rem; align-items: center; min-height: auto; text-transform: uppercase; background-color: #282828; color: #fff;  text-decoration: none;  }
.s25 a:nth-child(2), .s25 a:nth-child(4), .s25 a:nth-child(5), .s25 a:nth-child(7) { background-color: #554727; }
.s25 h2 {
  text-transform: none;
  font-size: 2.5rem;
  text-align: center;
  text-transform: uppercase;
  color: #282828;
}

.s25 h2::before {
  background-image: url(/images/saw.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  content: '';
  display: block;
  height: 4rem;
  margin-bottom: 1rem;
}


@media only screen and (max-width: 1366px) {
  * { font-size: 15px;  }
}

@media only screen and (max-width: 1280px) {
  * { font-size: 14px;  }
}

@media only screen and (max-width: 1152px) {
  * { font-size: 13px;  }   
}

@media only screen and (max-width: 1024px) {
  * { font-size: 12px;  }
  .op { display: none;}
  .phone, .s58 ul, .artImg { display: none !important;}
  .hamburger {  border: 0;  text-indent: -4000px; background-color: #282828; background-repeat: no-repeat; background-position: right center; background-size: 100% auto; background-image: url(/images/hamburger.svg);  width: 3rem; cursor: pointer; display: table;  position: absolute; height: 3rem; right: 1rem; top:0; }
  .hamburger:hover { opacity: 0.6;} 
  .spin-wrap { display: none;}
  .menu * { all: unset !important; }
 
 header .menu { display: none;  background-color: #282828; padding: 0; top:0 !important; left: 0 !important; width: 70vw; height: 100vh;  position: fixed !important; z-index: 9999 !important;}

.menu a { color: #fff!important;  text-transform: uppercase !important; display: block !important; padding: 0.5rem !important; font-size: 1.5rem !important; cursor: pointer !important;}
.menu ul, .menu ul li { display: block !important;}
.menu ul { margin: 0.5rem 1rem !important;}
.menu ul ul a { color: #eee !important; font-size: 0.85rem !important;}
.menu > ul {  margin: 2rem 1rem 6rem 1rem  !important;} 
.menu { display: none;} 


.barup { bottom: -1rem; }



.s56 .swiper-slide { animation: none; background-size:cover; background-position: center center;}

.main-text {   grid-template-columns: 1fr; grid-auto-rows: auto;  min-height: 50vh; height: auto; }

.main-text  img {
display: none !important;
} 

.s56 .swiper-button-next,
.s56 .swiper-button-prev {  display: none !important;}

.choice { padding: 0; margin-top: 1rem; margin-bottom: 2rem;}



.s25 a { padding: 1rem 2rem; text-align: center;  }



.s1, .s2, .s3 { animation:none;         background-size: cover; background-position: right center;}
//.s56 .label { background-color: rgb(0, 0, 0, 0.2); align-items: center;   width: calc(100% - 2rem); height: calc(100% - 2rem);  padding: 1rem;}
//.s56 .label h2, .s56 .label p { text-align: center; color: #fff; text-shadow: 4px 4px 6px rgba(0, 0, 0, 1);}



.main-text .field-1 h1 {  font-size: 1.8rem; }

.wrap strong { font-size: 1.5rem; font-weight: 400; line-height: 2rem; margin-bottom: 1.2rem; }
.wrap .art-p { font-size: 1.5rem; line-height: 2rem; font-weight: 400;}

.wrap-h1 { animation:none;     content:"";      background-image: url(/images/s1.jpg); background-attachment: fixed; background-size: auto 100%;   background-position: right top; }
.wrap-h1 h1 { text-shadow: 1px 1px 0px rgba(255, 255, 255, 1); font-size: 1.5rem; height: 10vh; min-height: 50px;}

.s58 * { font-size: 0.75rem; color: #fff; text-decoration: none; }


.margin h3 { font-size: 1.5rem; margin: 0; padding: 0;}
.margin p {  margin: 1rem 0; padding: 0;}

.gallery {
  margin: 1rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr ;
  grid-auto-rows: auto;
}

}

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

  .gallery { grid-template-columns: 1fr ; }

}