@media screen and (max-width: 1024px) {
    .bp-1920 {
        display: none;	
    }

    .bp-1024 {
        display: block;
    }


    /*************************************
        Sections
     *************************************/


    section h1 {
        font-size: 4.8rem;
        line-height: 4.8rem;
        margin-bottom: 2.8rem;
    }

    /*section h2 {
        font-size: 2.8rem;
        line-height: 3.2rem;
        margin-bottom: 2.2rem;
    }*/

    /*section h3,*/
	section.privacy ul > li:before {
        font-size: 1.6rem;
        line-height: 1.8rem;
        margin-bottom: 2.4rem;
    }

    section p,
	section h4,
	section.privacy h2,
	section.privacy ol > li:before {
        font-size: 1.6rem;
        line-height: 2.0rem;
        margin-bottom: 2.0rem;
    }

    section h4 {
        margin: 0;
    }


    /*************************************
        Header
     *************************************/


    section.header p {
        font-size: 2.1rem;
        line-height: 2.4rem;
        margin-bottom: 2.4rem;
    }


    /*************************************
        Grid
     *************************************/


    section.text-2cols > div > div:nth-of-type(2) {
        grid-column-end: span 5;
    }

    section.poi {
        grid-template-columns: auto;
    }

    section.poi div.nav-bts {
        grid-column-end: auto;	
    }

    section.poi div.nav-bts > a {
        display: flex;
        align-items: center;
        height: 90px;
        background-position: calc((100 / 1920) * 100vw) center;
        padding-left: calc(((100 / 1920) * 100vw) + 90px);
    }

    section.poi div.nav-bts > a, section.poi div.nav-bts > a.active {
        -webkit-clip-path: none;
        clip-path: none;
    }

    section.poi div.nav-desc {
        grid-column: auto;
        grid-row: auto;
        padding: 0;
    }

    section.poi div.nav-desc > div {
        display: block;
        position: relative;
        height: 0;
        box-sizing: content-box;
        opacity: 1;
        overflow: hidden;
        pointer-events: auto;
        transition: height 0.3s cubic-bezier(0,0.5,0.5,1) 0.3s;
    }

    section.poi div.nav-desc > div.active {
        height: auto;
        transition-delay: 0.6s;
        transition-timing-function: cubic-bezier(0.5,0,1,0.5);
    }

    section.poi div.nav-desc > div > div {
        padding: calc((100 / 1920) * 100vw);
    }

    section.poi.culture div.nav-desc {
        grid-row-start: 2;
    }

    section.poi.culture div.map-container {
        grid-row-start: 3;
    }

    section.poi.gastronomy div.nav-desc {
        grid-row-start: 3;
    }

    section.poi.gastronomy div.map-container {
        grid-row-start: 4;
    }

    section.poi.education div.nav-desc {
        grid-row-start: 4;
    }

    section.poi.education div.map-container {
        grid-row-start: 5;
    }

    section.poi.lifestyle div.nav-desc {
        grid-row-start: 5;
    }

    section.poi.lifestyle div.map-container {
        grid-row-start: 6;
    }

    section.poi div.map-container {
        grid-column-end: auto;
        height: 0;
        overflow: hidden;
    }

    section.poi div.map-container.show {
        animation: kf-map-container-show-hide-show 1.2s var(--transition-timing-linear) both;
    }

    section.poi.init div.map-container.show {
        animation-name: kf-map-container-show;
    }

    /*#map-canvas {
        height: 50vh;
    }*/

    section.poi div.nav-padding {
        display: block;
        height: 0;
        background-color: rgb(var(--color-purple));
    }

    section.poi div.nav-padding.hide {
        height: 0 !important;
        transition: height 0.2s var(--transition-timing-linear) 1.0s;
    }


    /*************************************
        Gallery
     *************************************/


    div.gallery-grid > div {
        grid-column-end: span 4;
    }


    /*************************************
        Plans
     *************************************/


    section.plans .grid > div > div:nth-child(odd) {
        grid-column: 2 / span 5;
    }

    section.plans.unit .grid > div > div:nth-child(odd) {
        grid-column: 1 / span 5;
    }

    section.plans.unit .grid > div > div:nth-child(even) {
        grid-column: 6 / span 6;
    }


    /*************************************
        Building
     *************************************/


    div.building div.views a {
        width: 20px;
        height: 20px;
        overflow: hidden;
        white-space: normal;
    }

    div.building div.views a.view61 {
        top: calc((190 / 1024) * 100vw);
    }

    div.building div.views a.view45 {
        top: calc((385 / 1024) * 100vw);
    }

    div.building div.views a.view35 {
        top: calc((510 / 1024) * 100vw);
    }

    div.building div.views a.view25 {
        top: calc((630 / 1024) * 100vw);
    }


    /*************************************
        Form
     *************************************/


    form label, form input, form textarea, form button, form label.checkbox span {
        font-size: 1.6rem;
    }

    form label.no-action {
        line-height: 1.8rem;
        white-space: normal;
    }

    form label.checkbox span {
        line-height: 1.8rem !important;
    }
	
	footer div.form {
		grid-column-end: span 6;
	}
}

@media screen and (max-width: 1024px) and (max-aspect-ratio: 1/1) {
	section.header.small,
	section.header.small .slider,
	section.header.small .slider .slides,
	section.header.small .slider .slides ul,
	section.header.small .slider .slides li {
		height: 100vw;
	}
}

@keyframes kf-map-container-show {
	0%, 75% {height: 0;}
	100% {height: 50vh;}
}

@keyframes kf-map-container-show-hide-show {
	0% {height: 50vh;}
	25%, 75% {height: 0;}
	100% {height: 50vh;}
}