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

    .bp-768 {
        display: block;
    }


    /*************************************
        Nav
     *************************************/


    header nav ul {
        display: block;
        position: fixed;
        width: 100%;
        height: 0;
        left: 0;
        top: 0;
        background: rgb(var(--color-purple));
        overflow: hidden;
        padding-left: calc((((105 + 115) / 1920) * 100vw) + 10px);
        transition: height 0.6s;
        z-index: 100;
    }

    header nav ul li {
        display: block;
        margin-bottom: 2.8rem;
        padding: 0;
    }

    header nav ul li:nth-of-type(2) {
        margin-top: 280px;
    }

    header nav li:nth-last-child(2) {
        background: transparent;
    }

    header nav li:nth-last-child(2) a {
        color: rgb(var(--color-white));
    }

    header nav li a {
        font-weight: 400;
        font-size: 2.8rem;
        line-height: 3.5rem;
    }

    header nav li a:before,
	header nav li a:after {
        content: none;
    }

    header nav li.lang {
        flex-flow: row;
        column-gap: 20px;
        padding-left: 0;
    }

    header nav li.lang a + a {
        border-left: solid 2px rgb(var(--color-white));
        padding-left: 20px;
    }
    
    body.show-nav header {
        position: fixed;
    }

    body.show-nav header nav ul {
        height: 100vh;
    }

    header nav a.logo {
        grid-column: 3 / span 8;
        justify-self: center;
        z-index: 110;
    }

    header nav a.logo img {
        width: 190px;
        height: 180px;
        margin-left: 0;
    }

    header nav a.bt {
        grid-column: 10 / span 2;
        bottom: 108px;
        right: 0;
    }

    header a.nav-expand {
        grid-column: 11 / span 1;
        align-self: start;
        display: block;
        position: relative;
        width: 24px;
        height: 18px;
        z-index: 110;
    }

    header a.nav-expand > span {
        position: absolute;
        height: 0;
        top: 8px;
    }

    header a.nav-expand > span > span {
        display: block;
        position: absolute;
        width: 24px;
        height: 2px;
        top: 0;
        background-color: rgb(var(--color-white));
        transform: rotate(0);
        transition: opacity 0.2s 0.4s, top 0.4s 1.2s, transform 0.4s;
    }

    header a.nav-expand > span > span:nth-of-type(1) {
        top: -8px;
    }

    header a.nav-expand > span > span:nth-of-type(2) {
        opacity: 1;
    }

    header a.nav-expand > span > span:nth-of-type(3) {
        top: 8px;
    }

    body.show-nav header a.nav-expand > span > span {
        transition: opacity 0.4s, top 0.4s, transform 0.4s 0.4s;
    }

    body.show-nav header a.nav-expand > span > span:nth-of-type(1) {
        top: 0;
        transform: rotate(-45deg);
    }

    body.show-nav header a.nav-expand > span > span:nth-of-type(2) {
        opacity: 0;
    }

    body.show-nav header a.nav-expand > span > span:nth-of-type(3) {
        top: 0;
        transform: rotate(45deg);
    }

    section.header .slider.text-bckg .text:before {
        background-image: linear-gradient(90deg, rgba(var(--color-deep-purple), 0.6) 25%, rgba(var(--color-deep-purple), 0.1) 100%);
    }

    section.header.nav-bar {
        height: 280px;
    }
    
    section.header.header-ph-collection h1 img {
        width: min(509px, (509 / 1024) * 100vw);
    }


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


    header nav, 
    section.header .text, 
    section.text-img > div, 
    section.text-2cols > div,
    section.plans .grid > div,
    section.news-home,
    section.news-page,
    section.news,
    section.privacy,
    footer > div {
        grid-column-gap: 10px;
        grid-row-gap: 30px;
    }

    section.text-img > div > div:nth-of-type(1) {
        grid-column: 2 / span 5;
    }
    
    section.text-img.bckg-charcoal picture:after {
        background: rgba(var(--color-black),0.6);
    }

    section.text-2cols > div > div:nth-child(odd),
	section.text-2cols > div > div:nth-child(even){
        grid-column: 2 / span 10;
    }
	
	#map-canvas {
        height: 50vh;
    }

	section.text-2cols.contact > div > div:nth-child(odd) {
		display: block;
	}


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


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


    /*************************************
        News
     *************************************/


    section.news-home > div:nth-child(1),
	section.news-home > div:nth-child(2) {
        grid-column: 2 / span 10;
    }

    .bulletin-board {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 60px;
        grid-row-gap: 60px;
        padding-top: 60px;
    }

    .bulletin-board > div {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .bulletin-board > div:nth-child(1) {
        grid-column-end: span 2;
    }

    .bulletin-board .holidays-2019 {
        grid-template-columns: 1fr 1fr;
    }

    .bulletin-board .holidays-2019 > *:nth-child(2) img {
        width: 100%;
    }


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


    div.building {
        padding: 0;
    }

    div.building svg {
        width: 100%;
        left: 0;
    }

    div.building div.views {
        left: calc(50% + (100% / 2) + ((20 / 1920) * 100vw));
    }


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


    section.plans {
        padding: 60px 0;
    }

    section.plans .grid > div {
        padding: 0 60px;
    }

    section.plans .grid > div > div:nth-child(odd),
    section.plans .grid > div > div.building.phase2 {
        grid-column: 1 / span 5;
    }
    
    section.plans .grid > div > div:nth-child(even) {
        grid-column: 7 / span 6;
    }

    div.floor svg {
        width: 75%;
    }

    div.legend:after {
        right: 25%;
    }


    /*************************************
        Unit
     *************************************/


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

    section.plans.unit .grid > div > div.unit-details {
        padding: 0;
    }

    div.unit-details ol {
        column-count: 3;
    }

    div.unit-details div.collection {
        margin-top: 0;
    }

    section.plans.unit .grid > div > div.unit-plan {
        padding: 60px 0 0 0;
    }

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

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

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

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


    /*************************************
        Footer
     *************************************/


    footer > div {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-column-gap: 10px;
    }

    footer a.logo img {
        width: 122px;
        height: 168px;
    }

    footer nav {
        display: block;
        border-bottom: solid 1px rgba(var(--color-white), 0.125);
        padding: 30px 0;
    }

    footer nav:before, footer nav:after {
        content: none;
    }

    footer nav ul {
        display: block;
        column-count: 3;
        column-gap: 0;
        column-fill: auto;
        -moz-column-fill: balance;
        text-align: left;
        padding: 0;
    }

    footer nav ul li {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid-column;
    }

    footer nav li a {
        font-size: 1.6rem;
        line-height: 3.6rem;
    }

    footer nav a[href="#top"] {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
	
    footer div.copyright {
        font-size: 1.6rem;
    }
}