/* --- modules / footer --- */

.stopka {
	padding: 0 0 40px 0;
	text-align: center;
}

.stopka p {
    font-size: 14px;
    line-height: 18px;
	color: #111;
}

.privacy-policy-link {
    float: right;
}









/* solial links */

.obserwuj-shapes {
    position: fixed;
    bottom: 8%;
    left: 3%;
    z-index: 2;
    transform: rotate(180deg);
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

.obserwuj-shapes a:hover {
    opacity: 0.8;
}








/* for 1000px or less */
@media screen and (max-width: 1000px) {
    
    .obserwuj-shapes {
        left: 2.5%;
    }

}

/* for 800px or less */
@media screen and (max-width: 800px) {

    .obserwuj-shapes {
        left: 2%;
    }

}

/* for 600px or less */
@media screen and (max-width: 600px) {

    .shps-opening ul li:nth-child(2) {
        display: none;
    }

    .obserwuj-shapes {
        left: 1%;
    }

}








/* HP FAQ */

.shps-faq {
    margin-bottom: 0;
    padding-bottom: 100px;
    padding-top: 120px;
}

.shps-faq .contents h2 { /* faq links */
    font-size: var(--header-xl);
    line-height: 140%;
    color: #fff;   
    width: fit-content;
}









/* CONTACT */


.shps-faq .contact {
    margin-top: 100px;
    margin-bottom: 40px;

}

.shps-faq .contact a {
    font-family: "Rethink Sans", sans-serif;
    font-weight: 700;
    font-size: 210px;
    color: #fff;
}

.shps-faq .links a {
    margin-right: 20px;
    color: #fff;
}

.shps-faq .contact a:hover {
    border-bottom: 10px solid #fff;
}

.shps-faq .links a:hover {
    border-bottom: 2px solid #fff;
}


/* for 1680px or less */
@media screen and (max-width: 1680px) {
    .shps-faq .contact a {
        font-size: 168px;
    }
}

/* for 1470px or less */
@media screen and (max-width: 1470px) {
    .shps-faq .contact a {
        font-size: 135px;
    }
}

/* for 1200px or less */
@media screen and (max-width: 1200px) {
    .shps-faq .contact a {
        /*font-size: 108px;*/
    }
}

/* for 800px or less */
@media screen and (max-width: 800px) {
    .shps-faq .contact a {
        /*font-size: 86px;*/
        font-size: 108px;
    }
}

/* for 600px or less */
@media screen and (max-width: 600px) {
    .shps-faq .links a {
        display: block;
        margin-bottom: 24px;
    }
    .shps-faq .contact a {
        font-size: 86px;
    }
}

/* for 375px or less */
@media screen and (max-width: 375px) {
    .shps-faq .contact a {
        font-size: 68px;
    }
}

/* for 320px or less */
@media screen and (max-width: 320px) {
    .shps-faq .contact a {
        font-size: 54px;
    }
}















/* Faq Accordion */

.accordion {
    margin: -28px 0 0 auto;
}

.accordion { /* ul */
    list-style-type: none;
    
    padding: 0;
    max-width: 65%;
    
    color: #fff;
}

.accordion .accordion-item { /* li */
    border-bottom: 3px solid #223;
}

.accordion .accordion-item button[aria-expanded='true'] {
    /* border-bottom: 3px solid #334; */
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 2em 0;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
}

.accordion button .accordion-title {
    display: block;
    width: calc( 100% - 60px );
  padding: 0;
    
    font-family: "Rethink Sans", sans-serif;
    font-size: 44px;
    line-height: 52px;
    letter-spacing: -0.5px;
    
    color: #fff;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: calc( 50% - 24px );
  right: 0;
  width: 42px;
  height: 42px;
  border: 3px solid;
  border-radius: 30px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
    top: 20px;
    left: 12px;
    width: 18px;
    height: 3px;
  background: #fff;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
    top: 12px;
    left: 20px;
    width: 3px;
    height: 18px;
  background: #fff;
}




.accordion button[aria-expanded='true'] {
  /*color: #03b5d2;*/
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 30em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
    
display: block;
    width: calc(100% - 60px);
    padding: 0 0 2.5em 0;

}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
	font-family: "Rethink Sans", sans-serif;
    font-size: 18px;
    line-height: 32px;
	color: #fff;
    font-weight: 400;
}





/* for 1680px or less */
@media screen and (max-width: 1680px) {

    .accordion button .accordion-title {
        font-size: 35px;
        line-height: 44px;
    }
    
    .accordion button .icon {
        top: calc( 50% - 22px );
        width: 38px;
        height: 38px;
    }
    
    .accordion button .icon::before {
        top: 18px;
        left: 10px;
    }
    
    .accordion button .icon::after {
        top: 10px;
        left: 18px;
    }
    
}

/* for 1280px or less */
@media screen and (max-width: 1280px) {
    
    .accordion {
        margin: 0 auto;
    }
    
    .accordion { /* h3 */
        padding: 72px 0 0 0;
    }

    .accordion { /* ul */
        max-width: 100%;
    }

}

/* for 800px or less */
@media screen and (max-width: 800px) {
    
    .accordion button .accordion-title {
        font-size: 28px;
        line-height: 32px;
    }

    .accordion button .icon {
        top: calc( 50% - 20px );
        width: 34px;
        height: 34px;
    }
    
    .accordion button .icon::before {
        top: 16px;
        left: 8px;
    }
    
    .accordion button .icon::after {
        top: 8px;
        left: 16px;
    }

   /* .accordion-title:first-of-type {
        padding-top: 120px;
    } */
}

/* for 600px or less */
@media screen and (max-width: 600px) {
    
    .accordion button[aria-expanded='true'] + .accordion-content {
        width: 100%;
    }

}

/* for 375px or less */
@media screen and (max-width: 375px) {
    
    .accordion button .accordion-title {
        font-size: 22px;
        line-height: 26px;
    }
    
    .accordion button .icon {
        top: calc( 50% - 18px );
        width: 30px;
        height: 30px;
    }
    
    .accordion button .icon::before {
        top: 14px;
        left: 7px;
        width: 16px;
    }
    
    .accordion button .icon::after {
        top: 7px;
        left: 14px;
        height: 16px;
    }
    
}

/* for 320px or less */
@media screen and (max-width: 320px) {
    
    .accordion .accordion-content p {
        font-size: 16px;
        line-height: 30px;
    }
    
    .accordion button .accordion-title {
        font-size: 18px;
        line-height: 22px;
    }
    
    .accordion button .icon {
        top: calc( 50% - 16px );
        width: 26px;
        height: 26px;
    }
    
    .accordion button .icon::before {
        top: 12px;
        left: 6px;
        width: 14px;
    }
    
    .accordion button .icon::after {
        top: 6px;
        left: 12px;
        height: 14px;
    }
    
}