@media only screen and (min-width:1251px) {
    .open_navigation .left_wrapper {
        position: absolute
    }
}

@media only screen and (min-width:950px) and (max-width:1250px) {
    .title_wrapper {
        width: 70%
    }

    .left_wrapper {
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 3
    }

    .cm-templates-icon__arrow-mobile {
        display: block
    }

    .cm_nav_arrow {
        display: none !important
    }

    .design_content {
        padding: 130px 0
    }

    .open_navigation .left_wrapper {
        position: absolute
    }

    #logo {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        width: 173.3px;
        height: 100px;
        margin: 0 auto;
        background-position: center !important;
        background-size: contain !important
    }

    .navigation_wrapper {
        display: none;
        width: 70%;
        margin-top: 0;
        height: auto;
        margin: 0 auto
    }

    .open_navigation .navigation_wrapper {
        display: block
    }

    .navigation_wrapper>ul>li>a {
        width: 85%
    }

    .navigation_wrapper>ul>li>ul {
        display: none;
        position: relative;
        width: 100%;
        opacity: 1;
        visibility: visible;
        padding: 0;
        top: 0;
        margin: 0
    }

    .navigation_wrapper>ul>li.open-layer>ul {
        display: block;
        margin: 0
    }

    .navigation_wrapper>ul>li>ul>li>a {
        width: auto;
        overflow: hidden
    }

    .navigation_wrapper>ul>li>ul>li>ul {
        position: relative;
        display: none;
        width: 100%;
        padding: 0;
        top: 0;
        left: 0;
        margin: 0
    }

    .navigation_wrapper>ul>li>ul>li {
        margin: 0
    }

    .navigation_wrapper>ul>li>ul>li>ul>li>a {
        width: auto;
        overflow: hidden
    }

    .navigation_wrapper>ul>li.open-layer>ul>li>ul {
        display: block;
        padding: 0 0 0 20px;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        opacity: 1;
        visibility: visible;
        z-index: 10
    }

    .right_wrapper {
        width: 100%;
        margin: 110px 0 0 0
    }

    .kv_wrapper {
        height: 75vh
    }

    .kv_wrapper.cm-templates-keyvisual--small-height {
        height: 50vh
    }

    .toggle_wrapper {
        display: block
    }

    .open_navigation .toggle_wrapper {
        position: absolute
    }
}

@media only screen and (min-width:651px) and (max-width:949px) {
    .title_wrapper {
        width: 70%
    }

    .open_navigation .toggle_wrapper {
        position: absolute
    }

    .cm_nav_arrow {
        display: none !important
    }

    .design_content {
        padding: 130px 0
    }

    .left_wrapper {
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 3
    }

    .open_navigation .left_wrapper {
        position: absolute
    }

    #logo {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        width: 173.3px;
        height: 100px;
        margin: 0 auto;
        background-position: center !important;
        background-size: contain !important
    }

    .title_wrapper {
        top: 15%
    }

    .navigation_wrapper {
        display: none;
        width: 87%;
        margin-top: 0;
        height: auto;
        margin: 0 auto
    }

    .open_navigation .navigation_wrapper {
        display: block
    }

    .navigation_wrapper>ul>li>a {
        width: 85%
    }

    .navigation_wrapper>ul>li>ul {
        display: none;
        position: relative;
        width: 100%;
        opacity: 1;
        visibility: visible;
        padding: 0;
        top: 0;
        margin: 0
    }

    .navigation_wrapper>ul>li.open-layer>ul {
        display: block;
        margin: 0
    }

    .navigation_wrapper>ul>li>ul>li {
        margin: 0
    }

    .navigation_wrapper>ul>li>ul>li>a {
        width: auto;
        overflow: hidden
    }

    .navigation_wrapper>ul>li>ul>li>ul {
        position: relative;
        display: none;
        width: 100%;
        padding: 0 0 0 20px;
        box-sizing: border-box;
        top: 0;
        margin: 0;
        left: 0
    }

    .navigation_wrapper>ul>li.open-layer>ul>li>ul {
        display: block;
        padding: 0 0 0 20px;
        box-sizing: border-box;
        margin: 0;
        opacity: 1;
        left: 0;
        visibility: visible;
        z-index: 10
    }

    .navigation_wrapper>ul>li>ul>li>ul>li>a {
        width: auto;
        overflow: hidden
    }

    .triangle_design:before {
        border-top-width: 41px;
        top: -40px
    }

    .triangle_design:after {
        border-top-width: 121px;
        top: -120px
    }

    .right_wrapper {
        width: 100%;
        margin: 110px 0 0 0
    }

    .kv_wrapper {
        height: 68vh
    }

    .kv_wrapper.cm-templates-keyvisual--small-height {
        height: 40vh
    }

    .toggle_wrapper {
        display: block
    }

}

@media screen and (max-height:480px),
screen and (max-width:650px) {
    .title_wrapper {
        width: 80%
    }

    .cm-templates-icon__arrow-mobile {
        display: block
    }

    .open_navigation .toggle_wrapper {
        position: absolute
    }

    .cm_nav_arrow {
        display: none !important
    }

    .left_wrapper {
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 3
    }

    .design_content {
        padding: 130px 0
    }

    .open_navigation .left_wrapper {
        position: absolute
    }

    #logo {
        border-top: 2.5px solid transparent;
        border-bottom: 2.5px solid transparent;
        height: 80px;
        width: 138.4px;
        margin: 0 auto;
        background-position: center !important;
        background-size: contain !important
    }

    .title_wrapper {
        top: 10%
    }

    .navigation_wrapper {
        display: none;
        width: 87%;
        margin-top: 0;
        height: auto;
        margin: 0 auto
    }

    .open_navigation .navigation_wrapper {
        display: block
    }

    .navigation_wrapper>ul>li>a {
        width: 80%
    }

    .navigation_wrapper>ul>li>ul {
        display: none;
        position: relative;
        width: 100%;
        opacity: 1;
        visibility: visible;
        padding: 0;
        top: 0;
        margin: 0
    }

    .navigation_wrapper>ul>li.open-layer>ul {
        display: block;
        margin: 0
    }

    .navigation_wrapper>ul>li>ul>li>a {
        width: auto;
        overflow: hidden
    }

    .navigation_wrapper>ul>li>ul>li>ul {
        position: relative;
        display: none;
        width: 86%;
        padding: 0;
        top: 0;
        margin: 0
    }

    .navigation_wrapper>ul>li.open-layer>ul>li>ul {
        display: block;
        padding: 0;
        margin: 0;
        width: 100%;
        padding: 0 0 0 20px;
        box-sizing: border-box;
        left: 0;
        opacity: 1;
        visibility: visible;
        z-index: 10
    }

    .navigation_wrapper>ul>li>ul>li {
        margin: 0
    }

    .navigation_wrapper>ul>li>ul>li>ul>li>a {
        width: auto;
        overflow: hidden
    }

    .triangle_design:before {
        border-top-width: 31px;
        top: -30px
    }

    .triangle_design:after {
        border-top-width: 81px;
        top: -80px
    }

    .right_wrapper {
        width: 100%;
        margin: 80px 0 0 0
    }

    .kv_wrapper {
        height: 80vh
    }

    .kv_wrapper.cm-templates-keyvisual--small-height {
        height: 60vh
    }

    .toggle_wrapper {
        display: block;
        top: 23px
    }
}

@media only screen and (max-width:479px) {
    .title_wrapper {
        width: 90%
    }

    .cm-templates-icon__arrow-mobile {
        display: block
    }

    .open_navigation .toggle_wrapper {
        position: absolute
    }

    .cm_nav_arrow {
        display: none !important
    }

    .design_content {
        padding: 130px 0
    }

    .left_wrapper {
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 3
    }

    .open_navigation .left_wrapper {
        position: absolute
    }

    .navigation_wrapper {
        display: none
    }

    .open_navigation .navigation_wrapper {
        display: block;
        width: 100%;
        margin-top: 0;
        height: auto
    }

    .cm_nav_arrow {
        top: 10px
    }

    .navigation_wrapper>ul>li>a {
        width: 80%
    }

    .navigation_wrapper>ul>li>ul {
        display: none;
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        padding: 0;
        top: 0;
        margin: 0
    }

    .navigation_wrapper>ul>li.open-layer>ul {
        display: block;
        margin: 0;
        padding: 0
    }

    .navigation_wrapper>ul>li>ul>li>a {
        width: auto;
        overflow: hidden
    }

    .navigation_wrapper>ul>li>ul>li>ul {
        position: static;
        display: none;
        width: 100%;
        padding: 0;
        top: 0;
        margin: 0
    }

    .navigation_wrapper>ul>li.open-layer>ul>li>ul {
        display: block;
        padding: 0 0 0 20px;
        box-sizing: border-box;
        height: 100%;
        margin: 0;
        opacity: 1;
        visibility: visible;
        z-index: 10
    }

    .navigation_wrapper>ul>li>ul>li>ul>li>a {
        width: auto;
        overflow: hidden
    }

    .toggle_wrapper {
        display: block;
        top: 23px
    }

    .right_wrapper {
        margin: 80px 0 0 0;
        width: 100%
    }

    .kv_wrapper {
        height: 50vh
    }

    .kv_wrapper.cm-templates-keyvisual--small-height {
        height: 40vh
    }

    .title_wrapper {
        top: 10%
    }

    #logo {
        height: 80px;
        width: 138.4px;
        margin: 0 auto;
        border-top: 2.5px solid transparent;
        border-bottom: 2.5px solid transparent;
        background-position: center !important;
        background-size: contain !important
    }

    .design_content {
        padding: 40px 15px
    }

    .triangle_design:before {
        border-top-width: 16px;
        top: -15px
    }

    .triangle_design:after {
        border-top-width: 41px;
        top: -40px
    }
}

@media only screen and (max-width:767px) {
    .navigation_wrapper>ul>li {
        margin: 0
    }
}

@media only screen and (max-width:1250px) {
    .toggle_wrapper:active {
        background-color: red;
    }

    .navigation_wrapper>ul>li>a>.cm_nav_arrow {
        right: 18px
    }
}