/* content list category filtering */

div#category_filtering {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

div#category_filtering >div.category {
    min-width: 500px;
}

div#category_filtering >div.category >h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 133%;
}

div#category_filtering >div.category ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap: 30px;
    margin-bottom: 50px;
}


/* content list */

ul.list {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 30px;
}

ul.list >li {
    display: block;
    margin: 0px;
    width: 250px;
    height: 208px;
    overflow: hidden;
    background-color: var(--color-bg-dark);
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

ul.list >li.hidden {
    display: none;
}

ul.list >li div.image_wrapper {
    width: 250px;
    height: 142px;
    overflow: hidden;
    background-color: var(--color-bg-image);
}

ul.list >li div.image {
    width: 250px;
    height: 142px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: all .5s;
}

ul.list >li div.title {
    margin: 0;
    padding: 0px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 66px;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

ul.list >li div.title span {
    width: fit-content;
    padding-right: 40px;
    background-image: url('../img/arrow_right.svg');
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: 24px;
}

ul.list >li a, ul.list >li a:visited {
    text-decoration: none;
    color: var(--color-text-light);
}

ul.list >li a:hover {
    text-decoration: none;
    color: var(--color-text-hover);
}

ul.list >li a:hover div.image {
    transform: scale(1.2);
}

ul.list >li a:hover div.title span {
    background-image: url('../img/arrow_right_hover.svg');
}


/* beaches */

ul.list.beaches >li {
    width: 340px;
    height: 397px;
    gap: 35px;
}

ul.list.beaches >li div.image_wrapper {
    width: 340px;
    height: 331px;
}

ul.list.beaches >li div.image {
    width: 340px;
    height: 331px;
}


/* sports */

ul#sports {
    margin-top: 50px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 40px 30px;
}

ul#sports >li {
    display: block;
    margin: 0px;
    width: 183px;
    height: 243px;
    overflow: hidden;
    background-color: var(--color-bg-dark);
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

ul#sports >li div.image_wrapper {
    width: 183px;
    height: 151px;
    overflow: hidden;
}

ul#sports >li div.image {
    width: 183px;
    height: 121px;
    margin-top: 30px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .5s;
}

ul#sports >li div.title {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 92px;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

ul#sports >li a, ul#sports >li a:visited {
    text-decoration: none;
    color: var(--color-text-light);
}

ul#sports >li a:hover {
    text-decoration: none;
    color: var(--color-text-hover);
}

ul#sports >li a:hover div.image {
    transform: scale(1.2);
}

ul#sports >li a div.image.beaches {
    background-image: url('../img/sports_beaches.svg');
}

ul#sports >li a div.image.visitorcenter {
    background-image: url('../img/sports_visitorcenter.svg');
}

ul#sports >li a div.image.rosegarden {
    background-image: url('../img/sports_rosegarden.svg');
}

ul#sports >li a div.image.cycletrack {
    background-image: url('../img/sports_cycletrack.svg');
}

ul#sports >li a div.image.nordicwalking {
    background-image: url('../img/sports_nordicwalking.svg');
}

ul#sports >li a:hover div.image.beaches {
    background-image: url('../img/sports_beaches_hover.svg');
}

ul#sports >li a:hover div.image.visitorcenter {
    background-image: url('../img/sports_visitorcenter_hover.svg');
}

ul#sports >li a:hover div.image.rosegarden {
    background-image: url('../img/sports_rosegarden_hover.svg');
}

ul#sports >li a:hover div.image.cycletrack {
    background-image: url('../img/sports_cycletrack_hover.svg');
}

ul#sports >li a:hover div.image.nordicwalking {
    background-image: url('../img/sports_nordicwalking_hover.svg');
}





div#notfound {
    padding: 40px 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}

div.hidden {
    display: none;
}