:root {
    --size_header_height: 52px;
}


/* header */

header.default {
    display: none;
}

header.mobile {
    display: flex;
    height: var(--size_header_height);
    padding: 0 9px;
}

header.mobile >h1 {
    font-size: 20px;
    line-height: 20px;
    margin: 0 10px;
    padding-top: 5px; /* Lalezar font, we love you */
}

header.mobile >div#mobile_menu,
div#mobile_header >div#mobile_menu {
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}

header.mobile >div#mobile_menu >a#dropdown,
div#mobile_header >div#mobile_menu >a#dropdown {
    display: block;
    width: 30px;
    height: 20px;
    background-image: url('../img/hamburger.svg');
    background-position: center;
    background-repeat: no-repeat;
}

div#mobile_menu_dropdown {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-bg-light);
    z-index: 1000;
}

div#mobile_menu_dropdown.hidden {
    visibility: hidden;
}

div#mobile_header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    max-width: 1352px;
    height: 60px;
    padding: 0 12px 0 48px;
    margin: 0 auto;
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
}

div#mobile_header >div#mobile_menu >a#dropdown {
    height: 60px;
    background-image: url('../img/hamburger_close.svg');
    background-position: center 28px;
}

div#mobile_header >h1 {
    font-family: "Lalezar", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 100%;
    margin: 0;
}

div#mobile_menu_dropdown >ul#mobile_languages {
    height: 50px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin: 50px 0 0 47px;
}

div#mobile_menu_dropdown >ul#mobile_languages >li {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    margin: 10px;
}

div#mobile_menu_dropdown >ul#mobile_languages >li.active a,
div#mobile_menu_dropdown >ul#mobile_languages >li.active a:visited {
    color: var(--color-text-selected);
}

div#mobile_menu_dropdown >ul#mobile_languages >li.active a:hover {
    color: var(--color-text-hover);
}

div#mobile_menu_dropdown >ul#mobile_menuitems {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    gap: 18px;
    margin: 37px 0 0 43px;
}

div#mobile_menu_dropdown >ul#mobile_menuitems >li {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    margin: 10px;
}

div#mobile_menu_dropdown a.selected, div#mobile_menu_dropdown a.selected:visited {
    color: var(--color-text-selected);
}

div#mobile_menu_dropdown a.selected:hover {
    color: var(--color-text-hover);
}

div#mobile_menu_dropdown >ul#mobile_menuitems >li.submenu {
    font-weight: 500;
    line-height: 18px;
    margin: 10px 40px;
}


/* global */

div#content {
    padding: 0px 16px 50px 16px;
}

div#content a.button {
    padding: 10px 13px;
}

div#content >h1 {
    margin: 23px 0 23px 0;
    font-size: 38px;
    line-height: 46px;
}

div#content >div.description {
    font-size: 14px;
    line-height: 20px;
}


/* footer */

footer >h1 {
    margin: 0 39px;
    font-size: 24px;
    line-height: 30px;    
}

footer >div#footer_content {
    margin: 36px 39px 0 39px;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 14px;
    font-size: 14px;
    line-height: 28px;
}

footer >div#footer_content >div#footer_address {
    background-position: 4px center;
}

footer >div#footer_content >div#footer_phone {
    background-position: 2px center;
}


/* main */

div#content >#headline {
    height: 670px;
}

div#content >#headline >h1 {
    margin: 0;
    font-size: 48px;
    line-height: 56px;
    top: 150px;
}

div#content >#headline >h2 {
    font-size: 24px;
    line-height: 30px;
    top: 208px;
}

div#content >#headline >a#main_more_events {
    top: 290px;
}

div#content >#headline >a#main_more_events:hover {
    text-decoration: none;
}



div#content >#apps {
    padding-bottom: 20px;
    margin: 0 20px;
    flex-flow: column nowrap;
    justify-content: flex-start;
    gap: 10px;
}

div#content >#apps >div {
    text-align: center;
}

div#content >#apps img {
    margin: 9px 0 20px 0;
    max-width: 226px;
    max-height: 60px;
    width: 100%;
    object-fit: contain;
}

div#content >#apps div.description {
    line-height: 18px;
}



div#content h1.main {
    margin: 65px 0 30px 0;
    font-size: 38px;
    line-height: 46px;
}


div#content >div#main_events >div.event,
div#content >div#main_promoted_event >div.event {
    flex-flow: column nowrap;
    justify-content: flex-start;
    gap: 20px;
    align-items: flex-start;
}

div#content >div#main_events >div.event.reverse {
    flex-direction: column;
}

div#content >div#main_events >div.event >div,
div#content >div#main_promoted_event >div.event >div {
    min-width: 250px;
    flex: 1 1 48%;
}


div#content >div#main_events >div.event >div >h1 {
    font-size: 24px;
    line-height: 30px;
}

div#content >div#main_events >div.event >div >div.intro {
    font-size: 14px;
    line-height: 20px;
}

div#content >div#main_events >div.event >div >div.date,
div#content >div#main_promoted_event >div.event >div >div.date {
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
}

div#content >div#main_events >div.event >div >a,
div#content >div#main_promoted_event >div.event >div >a {
    line-height: 26px;
}

div#content >div#main_events >div.event >div.image,
div#content >div#main_promoted_event >div.event >div.image {
    aspect-ratio: 1.44;
}


div#content >div#main_promoted_event >div.event >div >h1 {
    font-size: 38px;
    line-height: 46px;
}

div#content >div#main_promoted_event {
    margin: 50px 0;
}

div#content >div#main_promoted_event >div.event >div >h1 {
    font-size: 48px;
    line-height: 111%;
}




div#content >div#main_dailies {
    margin: 55px 0 70px 0;
}

div#content >div#main_dailies >h1 {
    margin: 0 0 50px 0;
    font-size: 24px;
    line-height: 30px;
}

div#content >div#main_dailies >ul {
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
}


div#content >div#main_sports {
    padding: 33px 0 50px 0;
}

div#content >div#main_sports >div#main_sports_background {
    left: -16px;
    width: calc(100% + 32px);
    height: 520px;
}

div#content >div#main_sports >div#main_sports_header {
    flex-flow: column nowrap;
    gap: 27px;
}

div#content >div#main_sports >div#main_sports_header >h1,
div#content >div#main_sports >div#main_sports_header >div.description {
    flex: 1 1 100%;
}

div#content >div#main_sports >div#main_sports_header >div.description {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

div#content >div#main_sports >ul#sports {
    margin-top: 40px;
}


div#content >div#main_promoted_gastronomy >div.gastronomy_place {
    flex-flow: column nowrap;
    justify-content: flex-start;
    gap: 20px;
    align-items: flex-start;
}

div#content >div#main_promoted_gastronomy >div.gastronomy_place >div {
    min-width: 250px;
    flex: 1 1 48%;
}


div#content >div#main_promoted_gastronomy >div.gastronomy_place >div >h1 {
    font-size: 24px;
    line-height: 30px;
}

div#content >div#main_promoted_gastronomy >div.gastronomy_place >div >div.intro {
    font-size: 14px;
    line-height: 20px;
}

div#content >div#main_promoted_gastronomy >div.gastronomy_place >div.image {
    aspect-ratio: 1.44;
}



/* lists */

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

div#category_filtering >div.category ul {
    flex-flow: row wrap;
}


ul.list >li {
    width: 184px;
    height: 147px;
}

ul.list >li div.image_wrapper {
    width: 184px;
    height: 98px;
}

ul.list >li div.image {
    width: 184px;
    height: 98px;
}

ul.list >li div.title {
    padding: 0px 10px;
    height: 49px;
    font-size: 14px;
    line-height: 18px;
}

ul.list >li div.title span {
    padding-right: 30px;
    background-size: 18px;
}


ul#sports {
    justify-content: center;
    gap: 25px 35px;
}

ul#sports >li {
    width: 126px;
    height: 146px;
}

ul#sports >li div.image_wrapper {
    width: 126px;
    height: 94px;
}

ul#sports >li div.image {
    width: 126px;
    height: 71px;
    margin-top: 23px;
}

ul#sports >li div.title {
    height: 52px;
    font-size: 14px;
    line-height: 18px;
}

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

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

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

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

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

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

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

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

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

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


ul.list.beaches >li {
    width: 184px;
    height: 147px;
    gap: 30px;
}

ul.list.beaches >li div.image_wrapper {
    width: 184px;
    height: 98px;
}

ul.list.beaches >li div.image {
    width: 184px;
    height: 98px;
}


ul#main_promoted_attractions.list.beaches >li {
    width: 184px;
    height: 205px;
    gap: 30px;
}

ul#main_promoted_attractions.list.beaches >li div.image_wrapper {
    width: 184px;
    height: 156px;
}

ul#main_promoted_attractions.list.beaches >li div.image {
    width: 184px;
    height: 156px;
}

ul#main_promoted_attractions.list.beaches >li#attraction_3 {
    display: none;
}


/* details */

div.detail >h1 {
    font-size: 38px;
    line-height: 46px;
}

div.detail >h1 >span {
    font-size: 100%;
}

div.detail >h1.sports {
    padding: 15px 0 10px 100px;
}

div.detail >h1.sports.beaches {
    background-image: url('../img/sports_beaches_dark_mobile.svg');
    background-position: 0 center;
}

div.detail >h1.sports.visitorcenter {
    background-image: url('../img/sports_visitorcenter_dark_mobile.svg');
    background-position: 20px center;
}

div.detail >h1.sports.rosegarden {
    background-image: url('../img/sports_rosegarden_dark_mobile.svg');
    background-position: 30px center;
}

div.detail >h1.sports.cycletrack {
    background-image: url('../img/sports_cycletrack_dark_mobile.svg');
    background-position: 10px center;
}

div.detail >h1.sports.nordicwalking {
    background-image: url('../img/sports_nordicwalking_dark_mobile.svg');
    background-position: 20px center;
}

div.detail >p#intro {
    font-size: 14px;
    line-height: 18px;
}

/* div.detail >h2 {
    margin: 70px 0 30px 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 111%;
} */

div.detail >h3 {
    margin: 50px 0 30px 0;
    font-size: 24px;
    line-height: 30px;
}