@import url("symcss.css");

body { overflow-x: hidden;}

 #cpBox { display:block; font-size:10px; font-family:Arial, Helvetica, sans-serif; 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;}
.cpBoxClose { cursor:pointer; color:#FFFFFF; text-decoration:underline;}
.cpBoxClose:hover { color:#CCCCCC;}

 a:hover {opacity: 0.5; }
 * { transition: 0.5s; font-family: "Inter", serif;  }

 .products {  justify-items: center !important; padding: 1rem 4rem 3rem 4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;  }

.products a { display: flex; flex-direction: column; position: relative; text-decoration: none; -webkit-box-shadow: 2px 2px 15px -6px rgba(0, 0, 0, 1);
    -moz-box-shadow: 2px 2px 15px -6px rgba(0, 0, 0, 1);
    box-shadow: 2px 2px 15px -6px rgba(0, 0, 0, 1); max-width:calc(600px - 0.5rem) !important;  padding:0.5rem;  background: #fff !important; }

.products a strong { font-size: 1.2rem; color: #333;   font-weight: 400; display: table; padding: 1rem; text-align: center;} 
.products a span { color: #001A5C; font-size: 1.5rem; display: block; text-align: center;} 
.products img   {  width: 100% !important; min-height:300px; object-fit: contain;  overflow: hidden;   height: auto !important;} 

.systemMenu {  display: flex; align-items: center; justify-content: center;}

.user-icon  { width:2.3rem; height: auto; margin-left: 0.5rem;}
.basket-icon  {  width:2rem; height: auto; margin-left: 0.5rem; }
.logout-icon  {  width:1.5rem; height: auto; margin-left: 1rem;}

 header {transition: none !important; padding: 0 4rem; display: grid; height: 20vh; min-height: 150px; max-height: 200px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; position: relative;    }

 .logo { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: center;     }
 .logo img { width: auto; height: calc(95% - 1rem); padding: 0.5rem;  }
 .logo:hover { opacity: 1; }
 .logo:hover img { height: calc(92% - 1rem);  }

 h4 { color: #134E6B; text-align: center; text-transform: none; font-weight: 300; margin-bottom: 1rem; font-size: 2rem;}

 header nav {   grid-column: 3 / 6; grid-row: 1 / 3; }
 header nav li { list-style: none; }
 header nav a { color: #134E6B; text-decoration: none;  font-size: 1.1rem; font-weight: 400;}
 header nav > ul  { display: flex; height: 100%;  align-items: center;}
 header nav >  ul  ul { z-index: 2;  padding: 0.5rem 0; background-color: #0f230e; -webkit-border-radius: 0.2rem;  -moz-border-radius: 0.2rem;  border-radius: 0.2rem; }
 header nav >  ul  ul li { padding: 0.5rem 1.5rem;}
 header nav >  ul  ul a { font-size: 0.95rem; text-transform: capitalize; color: #ccc;}

 .search-wrap { grid-column: 2 / 6; grid-row: 1 / 2; display: flex; justify-content: space-between;align-items:center;  }
 #search { all: unset;   padding: 0.5rem 0.5rem 0.5rem 0;  max-width: 400px;  border-bottom: 1px solid #000; display: flex;}
 #search input { all: unset; margin: 0; border: 0; padding-left: 0; min-width: 250px; font-size: 0.9rem; font-weight: 300; }
 #search input[type=submit] { cursor: pointer;  padding: 0; margin: 0; background-image: url(/images/search.svg); background-repeat: no-repeat; background-size: auto 100%; background-color: #FFFFFF; background-position: center center;  width: 1.2rem; min-width: auto; text-indent: -100rem; display: block; overflow: hidden;}
 #search input[type=submit]:hover { opacity: 0.3; }

 textarea:focus, input:focus{
    outline: none;
}

.sm { display: flex; justify-content: end; align-items: center;} 
.sm a { margin: 0 0.25rem 0 0.25rem;}
.sm a:last-child {  margin: 0 0 0 0.25rem;}
.fb { width: 2rem; height: 2rem; background-image: url(/images/fb.svg);}
.insta { width: 2rem; height: 2rem; background-image: url(/images/insta.svg);}
.yt { width: 2rem; height: 2rem; background-image: url(/images/yt.svg);}
.gmina { width: 6rem; height: 3rem; background-image: url(/images/gmina.svg); background-size: 100% auto; margin: 0 1rem 0 0.25rem !important; }

.ss { height: 80vh; min-height: 400px;}
.ss .swiper-slide img { width: 100%; height: 100%; object-fit: cover;}
.ss .swiper-slide .title { width: 40%; display: flex; flex-direction: column; position: absolute;  right: 4rem; bottom: 4rem;}
.ss .title span { z-index: 2; width: fit-content; margin: auto 1rem -0.5rem auto; padding: 0.5rem 4rem 0.5rem 2rem; background: #255B23; color: #ccc; font-size: 1rem; font-weight: 300; clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 100%, 0% 100%); }
.ss .title strong { z-index: 1; text-transform: capitalize; padding: 1.5rem 8.5rem 1.5rem 2.5rem; background: #248221; color: #ccc; font-size: 1.8rem; font-weight: 300; clip-path: polygon(0 0, 100% 0, calc(100% - 4rem) 100%, 0% 100%); }
.ss .title a { z-index: 2; margin: -0.5rem   auto auto 1rem;  width: fit-content; text-transform: uppercase; padding: 1em 8rem 1rem 4rem; background: #FDEE00; color: #000; text-decoration: none; font-size: 1.2rem; font-weight: 300; clip-path: polygon(0 0, 100% 0, calc(100% - 4rem) 100%, 0% 100%); }
.ss .title a::after {content: ''; margin-left:0.5rem; display: inline-table;  width: 0.9rem; height: 0.9rem; background-image: url(/images/btn.svg); background-repeat: no-repeat; background-size: auto 100%; background-position: center center;}

.ss .swiper-pagination {  height: 100%; width:fit-content; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0; bottom: auto; left: 4rem;}
.ss .swiper-pagination-bullet { background-color: #fff; margin: 0.25rem auto !important;}

.ss .swiper-button-prev, .ss .swiper-button-next { margin-top: auto; bottom:1rem; right: 4rem; border: 1px solid #fff; padding: 1rem; -webkit-border-radius: 100rem;  -moz-border-radius: 100rem; border-radius: 100rem;  color: #fff; width: 1rem; height: 1rem;}
.ss .swiper-button-prev { left: auto;  right: 8rem;}
.ss .swiper-button-prev::after { margin-left:-0.25rem;}
.ss .swiper-button-prev:hover, .ss .swiper-button-next:hover { opacity: 0.5;}


@keyframes bg {
    0% {
        background-position: right top;
    }
    50% {
        background-position: left top;
    }
    100% {
        background-position: right top;
    }    
}


@keyframes pills {
	0% {
		animation-timing-function: ease-in;
		opacity: 1;
		transform: translateY(45px);
	}

	24% {
		opacity: 1;
	}

	40% {
		animation-timing-function: ease-in;
		transform: translateY(24px);
	}

	65% {
		animation-timing-function: ease-in;
		transform: translateY(12px);
	}

	82% {
		animation-timing-function: ease-in;
		transform: translateY(6px);
	}

	93% {
		animation-timing-function: ease-in;
		transform: translateY(4px);
	}

	25%,
	55%,
	75%,
	87% {
		animation-timing-function: ease-out;
		transform: translateY(0px);
	}

	100% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0px);
	}
}


.s42 * { color: #fff;}
.s42 {  animation-name: bg; animation-duration: 25000ms; overflow: hidden; animation-iteration-count: infinite; animation-timing-function: linear;    overflow: hidden;  background-image: url(/images/s1a.jpg);
    background-size: cover;  padding: 0 !important; margin:1rem 4rem;  }
    .s42 > div { background-color: #149BDD90;}

    .s42 > div > div:nth-child(1) p:nth-child(1) { font-size: 6rem;} 
    .s42 > div > div:nth-child(1) p:nth-child(2) { font-size: 3rem;} 
.s42 .btn { padding: 1rem 4rem !important; font-size: 1.5rem; margin: 2rem 0;}
.s42 .btn::after { content: '';
    margin-left: 0.5rem;
    display: inline-table;
    width: 0.9rem;
    height: 0.9rem;
    background-image: url(/images/go.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center center;} 
    .s42 > div > div:nth-child(2) { position: relative; }
    .s42 .header-pills-canva {  display: table; clip-path: circle(50% at 50% 50%); position: absolute;  background-color: #fff; width: 110vh; height: 110vh; margin-top: 60%;  }   
    .s42 .header-pills { padding-left: 10%;   position: absolute;  width: 100%; bottom: 0; display: flex; align-items: center; justify-content: center;   }    
    .s42 //.header-pills img:nth-child(1) {  scale: 0.6; transform: rotate(-10deg);  border:1px solid red;  }
    .s42 .header-pills img:nth-child(1) { margin-top:100px;  width:35rem; height:auto;     }
    .s42 .header-pills img:nth-child(2) { scale: 0.8; transform: rotate(10deg);  }
    .s42 .header-phone {position: absolute; width: 100%; top: 0; right: 0; text-align: right; }
    .s42 .header-phone img { position: absolute; top: 1.2rem; height: 3rem; width: auto;}
    .s42 .header-phone p:nth-child(3) { font-size: 1.8rem;}


.s35 { min-height: 70vh; background-color: #149BDD; margin:1rem 4rem; padding: 0 !important; }
.s35 * { color: #fff;}
.s35 > div:nth-child(2) { 
    background-image: url(/images/s4.jpg);
    background-size: cover; min-height: 50vh;   }
    .s35 > div { padding: 0 !important;}
    .s35 > div:nth-child(1) { padding: 2rem !important;}
    .s35 > div:nth-child(1) p { font-size: 1.2rem;}
    .s35 h3 { text-transform: capitalize; font-size: 2.2rem;}

.s36 { min-height: auto; background-color: #149BDD; margin:1rem 4rem; }
.s36 * { color: #ffffff; text-decoration: none;}
.s36 ul li { list-style: none;}
.s36 ul li a {  font-size: 0.9rem; font-weight: 300;}

.footer-contact {  flex-direction: row !important; align-items: center; justify-content:end !important; }
.footer-contact * { text-transform: uppercase; }
.footer-contact p { margin: 0 0 0.25rem 0; padding: 0;}
.footer-contact p:nth-child(1) {  font-size: 1rem;}
.footer-contact p:nth-child(2) {  font-size: 1.5rem;}
.footer-contact img { display:none; width:12rem; height: auto; margin-right: 1rem; filter: saturate(0); filter: brightness(100); opacity: 1; }

.s37 { background-color: rgb(18, 55, 17); min-height: auto; }
.s37 * { color: #fff; text-decoration: none; text-transform: uppercase; }

.s40 { padding: 0; min-height:50vh !important;     background-position: center;
    background-attachment: fixed;
    background-image: url(/images/s2.jpg);
    background-size: cover; margin: auto 4rem; }
.s40 > div { min-height:auto; }
.s40 * { color: #134E6B; }
.s40 p:nth-child(2) { font-size: 2.5rem;}
.s40 p:nth-child(2) { font-size: 2rem;}
.s40 > div p:last-child { font-size: 0.65rem; opacity: 0.6; }
.s40 form { display: flex; position: relative;}
.s40 label.error { color: red; position: absolute; bottom:-1.2rem; font-size: 0.75rem;}
input[type=submit] { background-color: #08374f; text-transform: uppercase;}

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

.wrap-h1 { animation-name: bg; animation-duration: 35000ms; overflow: hidden; animation-iteration-count: infinite; animation-timing-function: linear; margin:0 4rem 2rem 4rem;   content:"";      background-image: url(/images/s1.jpg); background-attachment: fixed; background-size: 110%;   background-position: center bottom; }
h1 { color: #fff; background-color: rgba(0, 107, 137, 0.7);  height: 15vh; display: flex; font-weight: 300; text-transform: uppercase; font-size: 2rem; align-items: center; justify-content: center;  min-height: 100px; text-align: center; }
h2 { text-transform: uppercase; color: #0b2c5c; display: table; margin: 1rem auto auto auto; font-weight: 300; background-image: url(/images/h2.svg); background-repeat: no-repeat; background-position: left center; background-size: 0.8rem auto; padding-left: 1.5rem; }
.sponsors { margin: 2rem 4rem;}
.s38 .btn {  margin: auto 4rem 2rem auto;  width: fit-content; text-transform: uppercase; padding: 1em 8rem 1rem 4rem; background: #FDEE00; color: #000; text-decoration: none; font-size: 1.2rem; font-weight: 300; clip-path: polygon(0 0, 100% 0, calc(100% - 4rem) 100%, 0% 100%); }
.s38 .btn::after {content: ''; margin-left:0.5rem; display: inline-table;  width: 0.9rem; height: 0.9rem; background-image: url(/images/btn.svg); background-repeat: no-repeat; background-size: auto 100%; background-position: center center;}

.poznaj-druzyny { position: relative; padding: 2rem 0 0 0; background: linear-gradient(0deg, #ffffff 50%, #3FAB3C 50%);}
.poznaj-druzyny img {width: 50%; height: 50vh; object-fit: cover; clip-path: polygon(0 0, 100% 0%, calc(100% - 6rem) 100%, 0% 100%);}
.poznaj-druzyny a { position: absolute; top:calc(50% - 2.5rem); right: 4rem; z-index: 2; margin: -0.5rem   auto auto 1rem;  width: fit-content; text-transform: uppercase; padding: 1em 8rem 1rem 4rem; background: #FDEE00; color: #000; text-decoration: none; font-size: 1.2rem; font-weight: 300; clip-path: polygon(0 0, 100% 0, calc(100% - 4rem) 100%, 0% 100%); }
.poznaj-druzyny a::after {content: ''; margin-left:0.5rem; display: inline-table;  width: 0.9rem; height: 0.9rem; background-image: url(/images/btn.svg); background-repeat: no-repeat; background-size: auto 100%; background-position: center center;}
.poznaj-druzyny strong { font-size: 1.5rem; display: flex; flex-direction: column; justify-content: space-between;  text-align: right;  text-transform: uppercase; font-weight: 500; color: #255B23;  position: absolute; top: 0; right: 4rem; width: calc(50% - 5rem); height: calc(35% - 2rem); }
.poznaj-druzyny span {    color: #fff; font-size: 2.5rem; text-align: center;}

.poznaj-druzyny .swiper-pagination {  height: auto; width:fit-content; display: flex;  justify-content: center; align-items: center; bottom: 6rem; left: auto;  right: 14rem;}
.poznaj-druzyny .swiper-pagination-bullet { background-color: #255B23; margin: auto 0.25rem  !important;}

.poznaj-druzyny .swiper-button-prev, .poznaj-druzyny .swiper-button-next { margin-top: auto; bottom:5rem; right: 4rem; border: 1px solid #255B23; padding: 1rem; -webkit-border-radius: 100rem;  -moz-border-radius: 100rem; border-radius: 100rem;  color: #255B23; width: 1rem; height: 1rem;}
.poznaj-druzyny .swiper-button-prev { left: auto;  right: 8rem;}
.poznaj-druzyny .swiper-button-prev::after { margin-left:-0.25rem;}
.poznaj-druzyny .swiper-button-prev:hover, .poznaj-druzyny .swiper-button-next:hover { opacity: 0.5;}

.pagination { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem;}
.pagination li { display: block; margin: 0 1rem;}
.pagination li a { text-decoration: none; color:#00365f;}
.pagination .active { background: #00365f; padding: 1rem; }
.pagination .active a {color:#fff;}

.articles {  margin: 0 4rem; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(250px, 1fr)); grid-auto-rows: minmax(250px, 50vh);}
.articles a { position: relative;}
.articles a img { width: 100%; height: 100%; object-fit: cover;}
.articles a strong { text-shadow: 1px 1px #000;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    width: calc(100% - 2rem);
    background: rgb(4,16,64);
    background: linear-gradient(0deg, rgb(0, 72, 96) 0%, rgba(0, 72, 96, 0) 100%);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 300;
    font-size: 1.4rem;
    padding: 1rem; text-align: center;}

.article *  { font-size: 1.2rem; }
.article h3 {padding: 0; font-size: 2rem; margin: 0 0 1rem 0; color: #002f76; text-transform: uppercase;}
.headImg { margin: 1.8rem 0; display: table; width: 100%; height: 80vh; object-fit: cover; overflow: hidden;}

.article { position: relative; padding: 2rem  4rem 4rem 4rem; }
.rightPanel { position: relative; gap:1rem;  padding: 2rem  4rem 4rem 4rem; display: grid; grid-template-columns: 70% 30%;}
.article .others {  gap:1rem; display: grid; grid-template-columns: 1fr; grid-template-rows: 49% 49%; height: calc(100vh - 2rem); position: absolute; width: calc(30% - 3rem);}

.article .others a { position: relative; }
.article .others a strong { text-shadow: 1px 1px #000; position:absolute; bottom: 0; right: 0; color: #fff; width: calc(100% - 2rem); background: rgb(4,16,64);
    background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 100%); text-transform: uppercase; font-weight: 300; font-size: 1.4rem; padding: 1rem; }
.article .others a img { width: 100%; height: 100%; object-fit:cover;     overflow: hidden;   }


.article ul, .article ol { margin-left: 2rem; }
.article ul li, .article ol li { margin-bottom: 1rem; }
.article a { color: var(--body-color);}
.article strong { font-weight: 600;}

.no-results {  font-size:1.3rem;  text-align: center; height: 50vh; min-height: 300px;}

.productsSlide .swiper-button-next,
.productsSlide .swiper-button-prev,
.productsSlide2 .swiper-button-next,
.productsSlide2 .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;
    background-color:#0078b5 !important;
font-size: 10px;
}

.productsSlide2 .swiper-button-prev, .productsSlide .swiper-button-prev { left:0px; }

.s25 {    position: relative; height: auto; min-height: 30vh;  width: calc(100% - 8rem);  padding: 0 4rem 1rem 4rem;  }
.s25 img {  width: 100%; height: 100%; object-fit: cover;}
.s25 a { position:relative; }
.s25 strong { justify-content: center; align-items: center; display:flex; background-color: rgba(0, 136, 189, 0.8); color:#fff; min-height:20vh; font-weight:400; font-size:2rem; width:calc(100% - 4rem); padding:2rem; position:absolute; bottom:4px; left:0;}
.s25 h2 {
  display: table;
  margin: 0rem auto 2rem auto;
  background-repeat: no-repeat;
  background-size: 4rem auto;
  padding-top: 5rem;
  background-position: center top;
  font-family: "Playfair Display", serif !important; 
  color: #006394;
  background-image: url(/images/logo.png);
  font-weight: 400;
  font-size: 2.5rem;
}

.share {
    background: url(/images/fb2.svg) no-repeat 1rem center;
      background-size: auto;
    background-size: auto;
    background-size: 1.3rem auto;
    border: 1px solid #1b431a;
    color: #1b431a;
    text-decoration: none;
    margin: 0.5rem 0.5rem 0.5rem 0;
    display: table;
    text-transform: uppercase;
    text-align: center;
    font-size: 1rem;
    padding: 0.5rem 2rem 0.5rem 3rem;
    border-radius: 3rem; }

.gallery { margin-top: 4rem;  display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(150px, 1fr)); grid-auto-rows: minmax(150px, 50vh);}
.gallery  img { width: 100%; height: 100%; object-fit: cover;}

.margin { padding: 2rem 4rem;}
.margin ul { margin-left: 2rem;}
.margin ul li, .margin p { margin-bottom: 0.5rem;}
.margin strong { font-weight: 600;}
iframe { width: 100% !important; height:auto; max-width: 900px; min-height: 450px; margin:auto; display:table;}

.wychowankowie > div {  margin: 0 0 2rem 0; padding: 1rem; gap: 1rem; display: grid; grid-template-columns: 30% 1fr; background-color: #255B23; color: #fff;}
.wychowankowie > div > div:nth-child(1) { padding: 0; display: flex; }
.wychowankowie > div > div:nth-child(1) p { margin: 0; padding: 0;}
.wychowankowie > div > div:nth-child(1) img { width: 100%; height: 100%; object-fit: cover; min-height:60vh;}
.wychowankowie > div > div:nth-child(2) p { color: #ccc; font-size: 0.9rem; margin-bottom: 0.5rem; padding: 0.25rem; }
.wychowankowie > div > div:nth-child(2) strong { color: #fff; display: table; text-transform: uppercase; font-size: 1.5rem; margin-bottom: 1rem;}

.tiles { margin: 0 4rem 2rem 4rem; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(100px, 20vh);}
.tiles a { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background-color: #248221;  color: #fff; text-decoration: none; text-transform: uppercase;}   
.tiles a:nth-of-type(2n+1) { background-color: #3FAB3C;} 

.btn { background-color: #0A3042; text-transform: uppercase;}

.contact { text-align: center; margin: 0 4rem; padding: 0 0 1rem 0; width: calc(100% -4rem);}
.contact h3 { color: #555; text-transform: uppercase; font-size: 1.2rem; font-weight: 400; margin-bottom: 2rem; }
.contact iframe {  width: 100%; margin-top: 1rem; height: auto; min-height: 200px;}
.contact img { width: 190px; height:auto; margin-bottom: 1rem; }

.contact-head { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; height: auto; min-height: 30vh;}
.contact-head div { display: flex; flex-direction: column; padding: 2rem;}
.contact-head div:nth-child(1) { background-color: #eee; justify-content: center; }
.contact-head div:nth-child(1) img { width:30%; max-width:350px; height:auto; display:table; margin:1rem auto;}
.contact-head div:nth-child(2) { background: #0095ff;   justify-content:center; align-items:baseline;}
.contact-head h2 { text-align: left; color:#666; background-image: none; text-transform: lowercase; font-size: 2rem; border-bottom: 1px solid #c5c5c5; padding-left: 0; padding-bottom: 2rem;}
.contact-head h2 span { text-align: left; display: block; color:#666; text-transform: lowercase; padding: 1rem 1rem 1rem 0; font-size: 1.5rem;}
.contact-head .nip { text-align: center; color:#444; margin-top:1rem; font-size: 0.9rem;}
.contact-head div:nth-child(2) img { width:1.5rem; height:auto; vertical-align:middle;  padding:0; margin:0 0 5px;}
.contact-head div:nth-child(2) p { font-size: 1.5rem; margin: 1rem 0;}
.contact-head div:nth-child(2) p a {  font-size: 1.3rem; text-decoration: none; }
.contact-head div:nth-child(2)  * { color: #fff;}

.contact-items { gap:1rem; display: grid; grid-template-columns: 1fr 1fr 1fr; height: auto; min-height: 30vh; margin:3rem 0;}
.contact-items div {justify-content:center; align-items:center; background:#000; display: flex; flex-direction: column; padding: 2rem;}
.contact-items div * { color:#fff; text-align:center:}
.contact-items h3 { text-transform: uppercase; }
.contact-items div a { text-transform: uppercase; margin-top:1rem; font-size:0.9rem; border:1px solid #fff; padding:1rem 2rem;}
.maps { max-width: calc(100% - 9rem) !important; margin:0 auto 2rem auto !important;  }


#reg { padding: 1rem 4rem; }
#reg h4 { color: #000a25; font-size: 2rem; font-weight: 400; margin: 0  auto 2rem auto; }
#reg p { display: grid; grid-template-columns: 1fr;   }
#reg .score-wrap { max-width: calc(600px + 2rem); width: 100%;  display: table !important;}
#reg p label { padding: 0;  display: block;}
#reg p label strong {color: red;}
#reg p {  margin: 0; padding: 0;}
#reg > div { padding: 1rem;}
#reg .user, #reg .firm { background-color: #eee;}
#reg #strength_score { display:table; border:1px solid #333; width:150px; padding:0.5rem 1rem; font-size:0.6rem; color:#333333; margin:auto 0 auto auto; }
 .error { color:red;  }
 #reg .isFirm { display: flex;}
#reg .isFirm input { margin: auto 1rem; }
#reg .tiny { margin-left: 250px; margin-bottom: 1rem; font-size: 0.8rem;}
#reg input[type=checkbox] { margin-right: 1rem;  }
#reg .tiny .error { margin-right: 2rem;}
#reg input[type=submit] { margin:1rem auto; }
#reg .userEmail {  display: flex; color: #777; justify-content:baseline; align-items: center;}
#reg input[type=text] { width:calc(100% - 2rem); max-width:auto !important;}
#reload { display:table; margin:1rem auto; cursor:pointer; }
#reload:hover { opacity: 0.5; }
#captchaImg { display:table; margin:1rem auto; }
#reg .error { margin-bottom:1rem;}

#userMenu { display: flex; padding: 2rem 1rem 0 0; margin: 1rem; border-bottom: 2px solid #002584;}
#userMenu li { display: block; margin-right: 1rem;}
#userMenu a { font-size: 1.2rem; display: table; padding: 0.5rem 1rem; background-color: #888; color: #fff; text-transform: lowercase; text-decoration: none;}
#userMenu .this { background-color: #002584;}

.uOList { margin: 1rem 4rem; overflow-x: auto; height: auto; min-height: 100vh;}
.uOList table {width: 100%; min-width: 250px; }
.uOList table td, .uOList table th { border-bottom: 1px solid #333; text-align: center; padding: 1rem 0.5rem;}
.uOList table tr:last-child td { border:none;}
.uOList table th { text-transform: lowercase; font-weight: 400; color: #666;}
.uOList table td { text-transform: lowercase; }
.uOList a { color: #000;}

.uO h4 {  padding: 0.5rem 0.5rem 0.5rem 1rem; font-size: 1.2rem; color: #666; font-weight: 400; background-color:#dddddd; text-transform: lowercase; }
.uO .summary { text-align: right; color: #002584; font-size: 1.2rem; padding: 1rem;}
.uO p { padding: 1rem;}

.product { padding: 0 4rem 1rem 4rem;}
.product-top { position: relative; display: grid; grid-template-columns: 70% 1fr; grid-auto-rows:calc(100vh - 2rem); gap: 1rem;  }
.product-gallery { background-color: #fff; border: 1px solid #149BDD; position: relative;    }
.product-gallery .close { display: none; z-index: 9; cursor: pointer; position: absolute; right: 0; }
.product-gallery .close:hover { opacity: 0.5;}
.full { position:fixed; top:0; left: 0; width:100%; height: 100vh; }
.mySwiper4 .swiper-slide {  height: 100%;   display: flex; justify-content: center;}
.mySwiper4 .swiper-slide img { object-fit: contain;}
.full .mySwiper4 .swiper-slide img:hover { cursor: zoom-in; } 
.mySwiper3 .swiper-slide {  height: auto; display: flex; justify-content: center;}
.mySwiper3 .swiper-slide img { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.mySwiper3  {  margin-top: 1rem; padding: 0 1rem 1rem 1rem; width: calc(100% - 2rem); max-height: calc(20vh - 2rem);  }
.mySwiper3 .swiper-slide img:hover { opacity: 0.5;}

.product-right * { color: #fff;  }
.product-right * { color: #fff;  }
.product-right { padding: 1rem;  background-color: #149BDD;  }

.product-right h3 { color:#fff ; text-transform: uppercase; font-weight: 400; font-size: 1.8rem; margin-bottom: 1rem;}
.product-right h4 { text-transform: uppercase; font-weight: 400; color: #fff; font-size: 1.2rem; margin-bottom: 1rem;}
.price * {color:#fff ; font-size: 1.8rem;}
.price {font-size: 1.8rem;}

.condition { margin-bottom:1rem; text-transform:uppercase; color:#fff;}

.shipments { padding: 0 1rem 1rem 1rem;}
.shipments li { display: block; padding:0.2rem 0rem 0.2rem 0rem;}
.shipments li input { display: inline; margin-right: 0.5rem;}
#basket li input { display: inline; margin-right: 0.5rem; } 

.quantity { display: flex; justify-content: center;}
.quantity button {  border: 0; color: #fff; cursor: pointer; background-color: #08405d  ; padding: 1rem; display: flex; justify-content: center; align-items: center;}
.quantity button:hover { opacity: 0.5;}

.product input[name=quantity] {all: unset; margin-left: 1.5rem; border: 1px solid rgb(255, 255, 255); padding: 0.9rem; margin:0 1rem;  max-width:30px !important;   }
.product input[type=submit] { display: table; margin:1rem auto;  }

.product .pData { margin-top: 1rem; padding: 1rem; border: 1px solid #149BDD; }
.product .pData h3 { text-transform: uppercase; font-weight: 400; font-size: 1.8rem; color: #149BDD; margin: 0 0 1rem 0;}

.currency { display:flex; margin:1rem;}
.currency input { margin:0 1rem;}

.alert {color:red; text-align:center; margin:0rem 2rem 1rem 2rem; font-size:1rem;}

  .price-table {
    border: 1px solid #fff;        
    border-collapse: collapse;      
    width: 100%;
    margin:1rem auto;
  }
  .price-table th,
  .price-table td {
    border: 1px solid #fff;         
    padding: 0.5rem;
    text-align: center;
    font-size:0.8rem;
  }


 .product .pData   table { border-collapse: collapse; width: 90%; margin:2rem auto;  }
 .product .pData   caption { font-size: 1.25rem; margin-bottom: 2rem; font-weight: 600; text-align: center; }
  .product .pData  th, td { border: 1px solid #ddd; padding: 8px; text-align: left; vertical-align: top; }
  .product .pData  th { background: #f7f7f7; width: 240px; }
  .product .pData  tbody tr:nth-child(even) { background: #fbfbfb; }

.swiper-slide-thumb-active { border-top: 5px solid #002584;}

.discount button, input[type=text], input[type=password], input[type=submit], select, textarea { background-color: #fff; margin: 1rem 0; min-width: 250px; width: 100%; border: 1px solid #333; padding: 0.5rem 1rem;}
input[type=submit], .discount button { background-color:rgb(0, 72, 96); color: #fff; border: 0; cursor: pointer; font-size: 1.2rem; padding: 1rem 2rem;}
input[type=checkbox] { width: 1rem; height: 1rem; -moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;	}

    input[type=checkbox]:before {
        content: " ✔";
        color: transparent !important;
        background: #fef2e0;
        display: block;
        width: 1rem;
        height: 1rem;
        border: 1px solid black;
        line-height: 0.9rem;
        text-indent: 0.1rem;
        cursor: pointer;
    } 
    
    input[type=checkbox]:checked:before {

        color: black !important;
    } 

#basket { padding:1rem 4rem;}
#basket .steps { text-align: center; font-size: 1.2rem; padding: 1rem; color: #999;}
#basket table { border-spacing:0; border-collapse: collapse; width: calc(100% - 2rem); margin: 0rem auto 3rem auto; }
#basket table td { border: 1px solid #ccc; padding: 1rem; text-align: center;}
#basket table td img { width: 100px; height: auto;}
#basket table td:nth-child(5) { background: #e8e8e8;}
#basket table td input { display: table; margin:auto; }
#basket .pl input {  width:3rem; min-width:5px;}
#basket .pl button {background: #08405d; color:#fff; padding:0.5rem 1rem; border:0; cursor:pointer;}
#basket .sum, #basket .sum * { color: #08405d; font-size: 1.2rem;}
#basket .discount { background: #e8e8e8; text-align: center; padding: 2rem; display: flex; flex-direction: column; align-items: center;}
#basket .discount h4 { font-weight: 400; color: #333333; text-transform: lowercase;}
#basket .discount button { width: 150px; min-width: auto; background: #000; color: #fff;  }
#basket .discount input { width: 100px; }
#basket .discount .error { color: red; display: none;}
#basket .discount .ok { color: #50ab00; }
#basket .empty { font-size: 1.8rem; padding:5rem 2rem; text-align: center;}
.basketNavi { display: flex; padding: 2rem; align-items: center; justify-content: center;}
.basketNavi a { margin: 0.5rem; background: #ccc; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 1.5rem; padding: 1rem 2rem;}
.basketNavi .goNext { background: #08405d;  }
#basket #bm2 { display: none;}
#basket #basketMenu { display: flex; padding: 2rem; align-items: center; justify-content: center;}
#basket #basketMenu li { margin: 0.5rem; cursor: pointer; display: table; background: #888; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 1.5rem; padding: 1rem 2rem;}
#basket #basketMenu .this { background: #08405d;}
#basket #reg { margin: auto; display: table; background-color: #fff; width: 100%; max-width: 800px;}
#basket #reg label b { color: red; }
#basket .delete { display: table; margin:auto;}

.shipment { padding: 2rem;}
.shipment h4 { color: #08405d; margin-bottom: 0.5rem;  text-transform: lowercase; border-bottom: 1px solid #000; padding: 1rem 1rem 1rem 0; margin-bottom: 1rem; font-weight: 400; font-size: 1.4rem;}
.shipment ul li { display: block; margin: 0.5rem;}
.shipment ul { padding: 1rem;}
.shipment textarea { resize: none; border: 1px solid #333; padding: 1rem; height: 20vh; min-height: 150px; width: calc(100% - 2rem) !important; max-width:none; margin: 1rem auto;}
.shipment table td:nth-child(5) { background: none !important;}
.shipment table td:nth-child(4) { background: #e8e8e8;}

#userMenu { display: flex; padding: 0 1rem 0 0; margin: 0 4rem 0 4rem; border-bottom: 2px solid #08405d;}
#userMenu li { display: block; margin-right: 0.5rem;}
#userMenu a { font-size: 1rem; display: table; padding: 0.5rem 1rem; background-color: #ccc; color: #fff; text-transform: lowercase; text-decoration: none;}
#userMenu .this { background-color: #08405d;}

.or, .nad { text-align: center; font-size: 1rem; position: relative;  }
.or h3 {  clip-path: polygon(0 0, 100% 0%, 100% 100%, calc(0% + 4rem) 100%); margin: 3.4rem 0 1rem 0; color: #fff; font-size: 1.2rem; background-color: #1b431a; font-weight: 200; text-transform: uppercase; text-align: center;}
.nad h3 {   clip-path: polygon(0 0, calc(100% - 4rem) 0, 100% 100%, 0 100%);  margin: 0 0 1rem 0; color: #fff; font-size: 1.2rem; background-color:#3FAB3C; font-weight: 200; text-transform: uppercase; text-align: center;}
.or strong, .nad strong { font-weight: 400; text-transform: uppercase; color: #08405d;}
.or img, .nad img { width: 2rem; height: auto; border: 0;}
.nad strong { display: block; padding-top: 3rem; }

.or .swiper-button-prev, .or .swiper-button-next, .nad .swiper-button-prev, .nad .swiper-button-next { margin-top: auto;     color: #aaa; width: 1rem; height: 1rem;}
.or .swiper-button-prev:hover, .or .swiper-button-next:hover, .nad .swiper-button-prev:hover, .nad .swiper-button-next:hover { opacity: 0.5;}

.s41 h3 { text-align: center; color: #134E6B; text-transform: none; font-size: 3rem; margin-bottom: 0; padding-bottom: 0; padding: auto 4rem 0 4rem; }
.s41 h4 { text-align: center; color: #134E6B; text-transform: none; font-size: 1.5rem; padding: auto 4rem; }
//.s41 { display: flex; margin-bottom: 2rem;   }
//.s41 > div { width: auto; min-width: 50%; width: 100%; }

.banner {   display: flex; align-items: center; justify-content: center;  padding: 0 4rem 1rem 4rem;}
.banner img { width: 100%; max-width: 900px; height: auto;}
.b4 {padding: 0.5rem 4rem 0.5rem 4rem;}
.b1 {padding: 0.5rem 4rem 0.5rem 4rem;}
.b2 {padding: 0.5rem 4rem 0.5rem 4rem;}
.b3 {padding: 0.5rem 4rem 0.5rem 4rem;}

.hamburger { display: none;}



    
    .pl {display:none;}
    #pl { display:inline-table; margin:auto; border:0px; padding:8px 12px; color:#fff; background:#005fab; font-size:1em; cursor:pointer;}
    .pl input {font-size:1em; padding:5px 10px; border:1px solid #666; width:30px;}
    .plList { margin:20px 0px; font-size:0.9em; text-transform:uppercase;}
    .plList li { margin:0.5rem;} 
    .wrap-zp { display: flex; align-items: center;}
    .wrap-zp input {margin: auto 0.5rem;} 


#loginUser *, #pr * { font-size: 1.2rem;}
#loginUser, #pr {  min-height: 70vh; height:auto;  padding: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#loginUser p, #pr p { display: flex; flex-direction: column; justify-content: center; align-items: center; }
#rC:hover { opacity: 0.5; cursor: pointer;  }
#loginUser a { color: #000;}

#pr textarea { width:600px; height:50vh;}

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

    .product-top { position: relative; display: grid; grid-template-columns: 1fr; grid-auto-rows:auto; gap: 1rem;  }

    .s42  div:nth-child(2) { display: none !important;}
    .s42 > div > div:nth-child(1) p:nth-child(1) { font-size: 3rem;} 
    .s42 > div > div:nth-child(1) p:nth-child(2) { font-size: 2rem;} 

    .hamburger {  border: 0;  text-indent: -4000px; background-color: #005fab; background-repeat: no-repeat; background-position: right center; background-size: 100% auto; background-image: url(/images/hamburger.svg);  width: 3rem; cursor: pointer; display: table; grid-column: 5 / 6; grid-row: 1 / 1;  position: absolute; height: 100%; right: 0; }
    .hamburger:hover { opacity: 0.6;}


   .oimg { width: 100%; height: auto;}
   h1 { font-size: 1.5rem;}

    #userMenu { display: flex; padding: 0 1rem 0 0; margin: 0 1rem 0 1rem; border-bottom: 2px solid #1b431a;}
    #userMenu li { display: block; margin-right: 0.5rem;}
    #userMenu a { font-size: 0.9rem; }    


    .contact { text-align: center; margin: 0 4rem; padding: 0; width: calc(100% -4rem);}    
    .contact-head { gap: 1rem; grid-template-columns: 1fr ; }    
    .article { position: relative; padding: 1rem; }
    .rightPanel {  padding: 1rem; display: grid; grid-template-columns: 1fr;}
    .article .others { display: none !important;}
    
    .gallery { margin-top: 2rem;  display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(150px, 1fr)); grid-auto-rows: minmax(150px, 50vh);}
    .tiles { margin: 0 4rem 2rem 4rem; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr ; grid-auto-rows: minmax(100px, 20vh);}
    .nad strong {  padding-top: 0rem; }
    .s41 { flex-direction: column;}
    .or .swiper-button-prev, .or .swiper-button-next, .nad .swiper-button-prev, .nad .swiper-button-next { display: none;} 
    .ss .swiper-slide .title { width: calc(100% - 4rem); display: flex; flex-direction: column; position: absolute;  left:2rem; right: 2rem; bottom: 4rem;}

    .ss { height: 75vh;}
    .ss .swiper-pagination { padding-top: 1rem;  height: 100%; width:fit-content; display: flex; flex-direction: column; justify-content:start; align-items:center; top: 0; bottom: auto; left: auto; right: 1rem;}


    .s40 img { height: 25vh; min-height: 150px;}
    .s36 ul { display: none;}
    #search { display: none;}
    header { padding: 0 1rem; display: grid; height: 18vh; min-height: 100px; max-height: 200px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; position: relative;    }
    .search-wrap {  justify-content: end; align-items:center;  }
    header nav { grid-column:auto; grid-row: auto;  }
    .menu { -webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
        -moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
        box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1); background-color: #00365f; padding: 0; top:0 !important; left: 0 !important; width: 70vw; height: 100vh;  position: fixed !important; z-index: 9999 !important;}
    .menu * { all: unset !important; }
    .menu a { color: #fff!important;  text-transform: uppercase !important; display: block !important; padding: 1rem !important; font-size: 1rem !important; cursor: pointer !important;}
    .systemMenu a  img { width: 35px !important; height: auto !important; filter: brightness(100) !important; }
    .menu ul, .menu ul li { display: block !important;}
    .menu ul { margin: 0.5rem 1rem !important;}
    .menu ul ul a { color: #bbb !important; font-size: 0.8rem;}
    .isSub::after { 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);   }
    .menu > ul {  margin: 2rem 1rem 6rem 1rem  !important;} 
    .menu { display: none;}


    .articles {  margin: 0 4rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(250px, 1fr)); grid-auto-rows: minmax(250px, 50vh);}
    .margin { padding: 1rem 4rem;}
    .margin > p > img { width: 100%; height: auto;}

    .products {  justify-items: center !important; padding: 1rem 2rem 3rem 2rem; display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem;  }

    .s41 h3 { text-align: center; color: #134E6B; text-transform: none; font-size: 2rem; margin-bottom: 0;  padding: auto 4rem; margin: auto 2rem; }
.s41 h4 { text-align: center; color: #134E6B; text-transform: none; font-size: 1.2rem; padding: auto 4rem; margin: auto 2rem;}
.footer-contact *{  font-size: 0.75rem !important;}
.article {   margin: 0 3rem; }

#reg p { grid-template-columns: 1fr;   }
#reg p label { padding: 1rem;  display: block; }
#reg #strength_score {  margin:auto auto auto 0; }
#reg .tiny { margin-left: 0px; font-size: 0.8rem;}
#reg input[type=submit] { margin-left: 0; }
#reg input[type=text], #reg input[type=password], #reg select {  min-width: 120px; width: 80%;}

#basket table { border-spacing:0; border-collapse: collapse; width: calc(100% - 6rem); margin: 0rem auto 3rem auto; }
#basket table td { font-size: 0.75rem;}
#basket table td img { width: 50px; height: auto;}
#basket #basketMenu li { font-size: 0.9rem; text-align: center; }
#basket #reg { margin: auto; display: table; background-color: #fff; width: 200px; overflow: hidden; max-width: 800px;}

#basket .shipment {  padding: 0 !important;}

.basketNavi a {  font-size: 0.9rem; }

.s42 {  animation-name: bg; animation-duration: 45000ms; overflow: hidden; animation-iteration-count: infinite; animation-timing-function: linear;  }
.s42, .s35, .s40, .s36, .wrap-h1 { margin:1rem;}
.articles, .article { margin: 0 1rem; }
.article { margin: 0; }
.margin { padding: 1rem; margin: 0;}

.product, #basket, #reg { margin: 1rem; padding: 0;}
.s42  { position: relative;  height: 60vh; min-height: 300px; }
.s42 .grid-two { grid-auto-rows: 60vh; min-height: 300px; }

#basket { padding-bottom: 100px;}
.productsSlide, .swiper-wrapper, .swiper-slide, .s25 {  width: calc(100% - 1rem); margin: 0; padding: 0;}
.s25 { margin: 1rem;}

.contact { text-align: center; margin: 0 1rem; }

}

@media only screen and (max-width: 850px) {
    
    .tiles { margin: 0 1rem 2rem 1rem; display: grid; gap: 1rem; grid-template-columns: 1fr  ; grid-auto-rows: minmax(100px, 20vh);}
    .articles {   display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(250px, 1fr)); grid-auto-rows: minmax(250px, 50vh);}
    .gallery { margin-top: 2rem;  display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(150px, 1fr)); grid-auto-rows: minmax(150px, 30vh);}
    

}