.scroll-arrow {
position: fixed;
right: 5rem;
bottom: 5rem;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
z-index: 80;
}
@media screen and (max-width: 1400px) {
.scroll-arrow {
right: 2.5rem;
bottom: 2.5rem;
}
}
@media screen and (max-width: 1310px) {
.scroll-arrow {
display: none;
}
}
.section--page-intro {
padding: 12rem 0 7.5rem 0;
}
@media screen and (max-width: 1000px) {
.section--page-intro {
padding: 10rem 0 6rem 0;
}
}
.section--page-intro .inner {
max-width: 56rem;
}
.section--page-intro h1 {
max-width: 31rem;
}
.section--page-section {
position: relative;
padding: 4.5rem 0;
}
@media screen and (max-width: 1000px) {
.section--page-section {
padding-top: 0;
}
}
.section--page-section .anchor {
position: absolute;
top: -9rem;
}
.section--page-section .section__header {
margin-bottom: 3rem;
}
.section--page-section .section__header h2.h1 {
position: relative;
display: inline-block;
margin-bottom: 0;
}
.section--page-section .section__header h2.h1 span:not(.underline) {
display: inline-block;
position: relative;
z-index: 2;
}
.section--page-section .section__header h2.h1 span.underline {
position: absolute;
z-index: 1;
width: 100%;
height: 1rem;
bottom: -0.3rem;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.what-yes-what-no {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.6rem;
}
@media screen and (max-width: 1000px) {
.what-yes-what-no {
gap: 0.8rem;
}
}
@media screen and (max-width: 800px) {
.what-yes-what-no {
grid-template-columns: 1fr;
}
}
.what-yes-what-no .header {
padding: 2.5rem 4rem;
}
@media screen and (max-width: 500px) {
.what-yes-what-no .header {
padding: 1.5rem 2rem;
}
}
.what-yes-what-no .header p {
font-family: "Inter", sans-serif;
margin: 0;
}
.what-yes-what-no .content {
padding: 2rem 5rem 2rem 2rem;
}
.what-yes-what-no .content ul {
list-style-type: none;
margin: 0;
}
.what-yes-what-no .content ul li {
position: relative;
padding-left: 2rem;
font-size: 1.6rem;
line-height: 2.25;
}
.what-yes-what-no .content ul li:before {
position: absolute;
content: "";
width: 1rem;
height: 1rem;
left: 0;
top: 1.3rem;
background-image: url(//odpady.mestovsetin.cz/wp-content/themes/ekokom-vsetin/assets/images/li-before.svg);
background-size: contain;
background-position: top;
background-repeat: no-repeat;
}
.what-yes .header {
background: #E9F5E6;
border-top: 2px solid #315343;
}
.what-no .header {
background: #F5E6E6;
border-top: 2px solid #DE2431;
}
.more-info {
border: 1px solid #000000;
-webkit-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.04);
box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.04);
background: rgba(16, 25, 19, 0.02);
margin-top: 4rem;
}
.more-info__header {
position: relative;
padding: 2rem 8rem 2rem 4rem;
}
@media screen and (max-width: 500px) {
.more-info__header {
padding: 2rem 4rem 2rem 2rem;
}
}
.more-info__header:hover {
cursor: pointer;
}
.more-info__header.active svg {
-webkit-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
.more-info__header p {
margin: 0;
font-weight: 700;
color: black;
line-height: 1;
}
.more-info__header svg {
position: absolute;
right: 4rem;
top: 50%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media screen and (max-width: 500px) {
.more-info__header svg {
right: 2rem;
}
}
.more-info__content {
padding: 5rem 4rem 4rem 4rem;
display: none;
}
@media screen and (max-width: 500px) {
.more-info__content {
padding: 2rem;
}
}
.more-info__content .h2 {
max-width: 30rem;
margin-top: 0;
}
.more-info__text {
max-width: 99rem;
}
.more-info__text p:nth-of-type(1) {
margin-top: 0;
}
.more-info__text p:last-of-type {
margin-bottom: 0;
}
.more-info__images {
margin-top: 6rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.2rem;
}
@media screen and (max-width: 1000px) {
.more-info__images {
gap: 1.1rem;
grid-template-columns: repeat(3, 1fr);
margin-top: 3rem;
}
}
@media screen and (max-width: 750px) {
.more-info__images {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 500px) {
.more-info__images {
grid-template-columns: 1fr;
}
}
.more-info__image {
position: relative;
}
.more-info__image:hover .more-info__image-desc {
max-width: calc(100% - 2rem);
}
.more-info__image-desc {
position: absolute;
bottom: 1rem;
right: 1rem;
background: white;
padding: 0.5rem;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
max-width: 2.7rem;
overflow: hidden;
white-space: nowrap;
}
.more-info__image-desc .icon {
display: inline-block;
vertical-align: middle;
}
.more-info__image-desc .icon svg {
max-width: 100%;
height: auto;
}
.more-info__image-desc .text {
padding-left: 1.3rem;
display: inline-block;
vertical-align: middle;
}
.more-info__image-desc .text p {
display: inline-block;
vertical-align: middle;
font-size: 12px;
font-weight: 700;
margin: 0;
white-space: nowrap;
}
.subheader {
position: fixed;
z-index: 500;
left: 0;
top: var(--headerHeight);
width: 100%;
background: #315343;
padding: 0.7rem 0;
text-align: center; }
@media screen and (max-width: 400px) {
.subheader {
padding: 1.4rem;
}
}
.subheader .container {
max-width: 152rem;
}
@media screen and (max-width: 800px) {
.subheader .container {
overflow-x: auto;
overflow-y: hidden;
}
}
.subheader:before {
position: absolute;
content: "";
right: 0;
top: 0;
height: 100%;   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgb(49, 83, 67)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(49, 83, 67) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff", endColorstr="#315343",GradientType=1 ); width: 8rem;
display: none;
pointer-events: none;
}
@media screen and (max-width: 400px) {
.subheader:before {
display: block;
}
}
.subheader ul {
list-style-type: none;
}
@media screen and (max-width: 800px) {
.subheader ul {
white-space: nowrap;
}
}
@media screen and (max-width: 400px) {
.subheader ul {
padding-right: 3rem;
}
}
.subheader ul li {
display: inline-block;
vertical-align: middle;
margin: 1rem 0;
}
.subheader ul li a {
display: block;
padding: 0 1.5rem;
color: white;
text-decoration: none;
line-height: 1;
font-size: 14px;
font-weight: 500;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.subheader ul li a:hover {
color: #94C2A5;
}
@media screen and (max-width: 1600px) {
.subheader ul li a {
padding: 0 0.8rem;
}
}
body.admin-bar .subheader {
top: calc(32px + var(--headerHeight));
}
@media screen and (max-width: 782px) {
body.admin-bar .subheader {
top: calc(46px + var(--headerHeight));
}
body.admin-bar .subheader.scrolled {
top: var(--headerHeight);
}
}