/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    body {
        padding: 0;
    }

    .action {
        background: none;
        border: 0;
        color: #222;
        cursor: pointer;
        padding: 5px;
        height: 45px;
        width: 45px;
        background: #f9cc41;
        display: inline-block;
    }
    .home-slider .carousel-inner{
        height: 100%;
    }

    .project-sorting-section--search {
        background: #f2f2f2;
        padding: 3rem 0rem;
    }

    .section--about {
        padding: 5rem 0;
        background-color: #262533;
    }

    .section--portfolio {
        padding: 5rem 0rem;
        background-color: #f2f2f2;
    }

    .section--service {
        padding: 5rem 0rem;

    }

    .section--project-info {
        background: #f9cc41;
        padding: 5rem 0rem;
    }

    .service-img-item--single:before {
        content: "";
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #f9cc41;
        clip-path: polygon(58% 0, 65% 6%, 94% 6%, 94% 38%, 100% 43%, 100% 0);
        left: 15px;
        bottom: -1px;
        transform: rotate(180deg);
        z-index: 1;
    }

    .section--project-details-block {
        padding: 5rem 0rem;
        background-color: #f2f2f2;
    }

    .section--project-details-block {
        padding: 5rem 0rem;
        background-color: #f2f2f2;
    }

    .section--project-details {
        padding: 5rem 0rem;
        background-color: #262533;
    }

    .project-details--banner h1 {
        text-align: left;
        padding: 18rem 2rem;
        font-size: 41px;
        font-weight: 600;
        letter-spacing: 0px;
        margin: 0px auto 25px;
        color: #fff;
    }

    .list-with--img img {
        height: 600px;
        width: 100%;
        right: 0;
    }

    .bolck-gallery img {
        max-height: 100%;
        max-width: 100%;
    }

    .section--known-more {
        padding: 5rem 0rem;
    }

    .section--feature-properties {
        padding: 5rem 0rem;
    }
    .section--feature-properties .tab-content{
        padding: 1rem 2rem;
    }

    .social-feed {
        padding: 5rem 0rem;
    }

    .section-project-filter-list{
        padding: 5rem 0rem;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .home-slider .carousel-caption h3 {
        display: none;
    }

    .header--logo {
        position: relative;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        justify-items: center;
        align-self: start;
        margin-top: -95px;
        /* background-color: #f9cc41; */
    }

    .bolck-gallery img {
        max-height: 150px;
        max-width: 300px;
        border-radius: 3px;
        border: 1px solid #ddd;
        padding: 10px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    .home-slider .carousel-caption h3 {
        display: block;
    }

    .header--logo {
        position: relative;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        justify-items: center;
        align-self: start;
        margin-top: 0px;
        /* background-color: #f9cc41; */
    }

    .bolck-gallery img {
        max-height: 400px;
        max-width: 400px;
        border-radius: 35px;
        border: 1px solid #ddd;
        padding: 10px;
    }

    body {
        padding: 0;
    }

    .frame {
        position: fixed;
        z-index: 199;
        top: 0;
        left: 0;
        padding: 1.5rem;
    }

    .header--logo {
        padding: 0;
        justify-content: start;
    }

    .logo-links {
        margin: 0;
    }

    .frame a {
        pointer-events: auto;
    }

    .menu {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;

        grid-template-columns: 1fr 280px 2fr;
        grid-template-rows: 60% 40%;
        grid-template-areas:
            "item3 item2 item1"
            "item4 item5 item1";
    }

    .menu::before {
        left: 0;
        right: 0;
        content: '';
        position: absolute;
        opacity: 0;
    }

    .menu__item {
        height: 100%;
    }

    .menu__item--1 {
        grid-area: item1;
    }

    .menu__item--2 {
        grid-area: item2;
    }

    .menu__item--3 {
        grid-area: item3;
    }

    .menu__item--4 {
        grid-area: item4;
    }

    .menu__item--5 {
        grid-area: item5;
    }

    .menu__item--4,
    .menu__item--5 {
        display: block;
    }

    .menu__item-inner {
        align-items: center;
    }

    .label {
        display: block;
        color: var(--color-item-alt);
        position: absolute;
        z-index: 1000;
        font-size: 0.85rem;
        font-weight: bold;
        margin: 0;
        white-space: nowrap;
    }

    .label--topleft {
        top: 2rem;
        left: 2rem;
    }

    .label--vert,
    .label--vert-mirror {
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

    .label--vert-mirror {
        transform: rotate(180deg);
    }

    .label--bottomright {
        bottom: 2rem;
        right: 2rem;
    }

    .label::before {
        content: '------------- ';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        letter-spacing: -1px;
        margin: 0 0.75rem 0 0;
    }

    .label--vert::before,
    .label--vert-mirror::before {
        margin: 0.75rem 0;
    }

    .mainmenu,
    .sidemenu {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .mainmenu {
        counter-reset: menuitem;
    }

    .mainmenu__item {
        font-size: 5vw;
        text-transform: lowercase;
        overflow: visible;
        margin: 0.5rem 0;
        padding: 0 0.5rem;
        position: relative;
        transition: color 0.3s;
    }

    .mainmenu__item:hover {
        color: var(--color-item-alt);
    }

    .mainmenu__item::before {
        counter-increment: menuitem;
        content: counters(menuitem, "", decimal-leading-zero);
        position: absolute;
        font-size: 0.85rem;
        top: 25%;
        left: -1.25rem;
        color: var(--color-item-alt);
    }

    .mainmenu__item::after {
        content: '';
        width: 100%;
        top: 58%;
        height: 6px;
        background: var(--color-link-hover);
        position: absolute;
        left: 0;
        opacity: 0;
        transform: scale3d(0, 1, 1);
        transition: transform 0.3s, opacity 0.3s;
        transform-origin: 100% 50%;
    }

    .mainmenu__item:hover::after {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }

    .sidemenu__item {
        text-transform: uppercase;
        letter-spacing: 0.15rem;
        font-size: 0.85rem;
    }

    .menu__item-hoverlink {
        font-size: 1.25rem;
        text-transform: lowercase;
        border-bottom: 2px solid #fff;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .menu__item-inner:hover .menu__item-hoverlink {
        opacity: 1;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1399px) {
    .home-slider .carousel-caption h3 {
        color: #262533;
        text-align: left;
        padding: 130px 460px 130px 370px;
        font-size: 95px;
        line-height: 125px;
        font-weight: 600;
        letter-spacing: 0px;
        margin: 0px auto 25px;
    }

    .project-details--banner h1 {
        text-align: left;
        padding: 180px 426px 180px 370px;
        font-size: 135px;
        font-weight: 600;
        letter-spacing: 0px;
        margin: 0px auto 25px;
        color: #fff;
    }
}