@media (max-width: 1400px) {
    .container {
        width: 1200px
    }

    header .logo {
        margin-left: 10px
    }
}

@media (max-width: 1200px) {
    .container {
        width: 1024px
    }

    section {
        padding: 50px 0 25px
    }

    #pergole .left .text-wrapper {
        position: static;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        padding: 40px 20px
    }

    #pergole .right img {
        object-fit: cover;
        height: 100%;
        width: 100%;
        max-height: 100%;
        position: absolute
    }

    #pergole .left .text-wrapper .subtitle {
        margin-top: 0
    }

    #contact .infolist .item {
        width: 100%
    }
}

@media (max-width: 1025px) {
    .container {
        width: 100%
    }

    #cssmenu > ul > li > a {
        padding: 20px 12px
    }

    #about-us {
        padding: 50px 20px 25px
    }

    #reference .item {
        width: 50%
    }

    #reference .item:nth-child(1n+7) {
        display: none
    }

    #products .select {
        display: none
    }

    #products .product {
        width: 100%;
        padding: 0 10px
    }

    #all-reference .reference-item {
        width: calc(100% / 3)
    }

    #gallery .container {
        padding: 0 10px
    }
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 768px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 768px), only screen and (min-device-pixel-ratio: 2) and (max-width: 768px), only screen and (min-resolution: 192dpi) and (max-width: 768px), only screen and (min-resolution: 2dppx) and (max-width: 768px) {
    .btn {
        padding: 0 20px
    }

    #cssmenu {
        width: 100%
    }

    #cssmenu ul {
        width: 100%;
        display: none;
        background: #fff
    }

    #cssmenu .chose-lang {
        display: inline-block;
        margin-left: 10px
    }

    #cssmenu.align-center > ul, #cssmenu.align-right ul ul {
        text-align: left
    }

    #cssmenu ul li, #cssmenu ul ul li, #cssmenu ul li:hover > ul > li {
        width: 100%;
        height: auto;
        border-top: 1px solid rgba(120, 120, 120, 0.15)
    }

    #cssmenu ul li a, #cssmenu ul ul li a {
        width: 100%
    }

    #cssmenu > ul > li, #cssmenu.align-center > ul > li, #cssmenu.align-right > ul > li {
        float: none;
        display: block
    }

    #cssmenu ul ul li a {
        padding: 13px 10px;
        text-align: left;
        font-size: 12px;
        color: #000;
        background: 0
    }

    #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover {
        color: #000
    }

    #cssmenu ul ul ul li a {
        padding-left: 40px
    }

    #cssmenu ul ul, #cssmenu ul ul ul {
        position: relative;
        left: 0;
        right: auto;
        width: 100%;
        margin: 0
    }

    #cssmenu > ul > li.has-sub > a::after, #cssmenu ul ul li.has-sub > a::after {
        display: none
    }

    #menu-line {
        display: none
    }

    #cssmenu #menu-button {
        display: block;
        padding: 20px;
        color: #000;
        cursor: pointer;
        font-size: 12px;
        text-transform: uppercase
    }

    #cssmenu #menu-button::after {
        content: '';
        position: absolute;
        top: 25px;
        right: 20px;
        display: block;
        width: 15px;
        height: 2px;
        background: #000
    }

    #cssmenu #menu-button::before {
        content: '';
        position: absolute;
        top: 30px;
        right: 20px;
        display: block;
        width: 15px;
        height: 3px;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000
    }

    #cssmenu .submenu-button {
        position: absolute;
        z-index: 10;
        right: 0;
        top: 0;
        display: block;
        border-left: 1px solid rgba(120, 120, 120, 0.15);
        height: 41px;
        width: 100%;
        cursor: pointer
    }

    #cssmenu .submenu-button::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 26px;
        display: block;
        width: 1px;
        height: 11px;
        background: #000;
        z-index: 99
    }

    #cssmenu .submenu-button::before {
        content: '';
        position: absolute;
        right: 21px;
        top: 21px;
        display: block;
        width: 11px;
        height: 1px;
        background: #000;
        z-index: 99
    }

    #cssmenu .submenu-button.submenu-opened:after {
        display: none
    }

    #cssmenu > ul > li:last-child:after {
        content: none
    }

    header {
        height: 60px
    }

    header .sn {
        display: none;
        position: absolute;
        bottom: -42px;
        left: 0;
        z-index: 1;
        background: #fff;
        line-height: 42px;
        width: 100%;
        border: 1px solid #ececec;
        border-width: 1px 0;
        margin: 0;
        text-align: right;
        padding: 0 10px
    }

    header .sn.active {
        display: block
    }

    .menu .sn.active a {
        color: #000;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s
    }

    .menu .sn.active a:hover {
        color: #d06100
    }

    header .logo {
        position: absolute;
        top: 5px;
        left: 5px;
        margin: 0;
        height: 50px;
        z-index: 101
    }

    header .logo img {
        height: 100%
    }

    header .menu {
        width: 100%
    }

    #other-services .about-us-wrapper {
        display: block
    }

    #other-services .about-us-item {
        width: 100%;
        margin: 0
    }

    .menu {
        margin: 0
    }

    #cssmenu #menu-button {
        padding: 30px
    }

    #cssmenu #menu-button.menu-opened {
        background: #fff
    }

    #cssmenu > ul > li > a {
        color: #000;
        padding: 15px
    }

    #main-slider .item .title,
    #main-slider .item .subtitle {
        font-size: 30px;
        line-height: 30px
    }

    h1.title, h2.title {
        font-size: 25px;
        line-height: 25px
    }

    #pergole {
        display: block
    }

    #pergole > div {
        width: 100%
    }

    #pergole .right img {
        position: static;
        height: auto
    }

    #gallery .title, #gallery .subtitle, #all-reference .title, #all-reference .subtitle, #contact .title, #inquiry .title, #inquiry .subtitle, #inquiry, #other-services, #about-us, #reference {
        text-align: left
    }

    #gallery .container, #all-reference .container, #contact .container, #inquiry .container, #other-services .container, #reference .container {
        padding: 0 20px
    }

    #main-slider .item .title:after, h1.title:after, h2.title:after {
        left: 0
    }

    #reference .overlayer {
        opacity: 1;
        text-align: center
    }

    #reference .item:nth-child(1n+5) {
        display: none
    }

    #reference .wrap {
        text-align: center
    }

    #reference .wrap p {
        margin: 20px 0;
        width: 100%
    }

    #reference .wrap .btn {
        margin: 0 0 25px
    }

    #other-services img {
        display: none
    }

    #other-services .description {
        padding: 0 0 40px
    }

    #other-services h1.title {
        margin-bottom: 0
    }

    #inquiry textarea, #inquiry input {
        width: 100%;
        margin: 8px 0
    }

    footer {
        padding: 50px 0 25px
    }

    footer .info, footer .quicknavi, footer .instafeed {
        width: 100%;
        padding-top: 15px
    }

    footer .info p {
        line-height: 23px;
        margin-bottom: 0
    }

    #all-reference .reference-item {
        width: 50%;
        position: relative
    }

    #all-reference .reference-item .description {
        margin-bottom: 60px
    }

    #all-reference .reference-item .description a.btn {
        position: absolute;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        width: calc(100% - 10px);
        max-width: 180px
    }

    #gallery .wrap .gallery-wrapper a {
        width: calc(100% / 3);
        padding: 5px;
    }

    #contact h1.title, #contact h2.title {
        text-align: left
    }

    #contact .left, #contact .right {
        display: block;
        width: 100%
    }
}

@media (max-width: 600px) {
    #stats .counter-wrapper .item-wrapper, #stats .counter-wrapper .item-wrapper .arc {
        width: 140px;
        height: 140px
    }

    #stats .counter-wrapper .item {
        font-size: .8rem;
        line-height: 1rem;
        padding-top: 3.2rem
    }

    #contact input {
        width: calc(100% - 16px)
    }

    #contact .infolist .item {
        width: 100%
    }

    #gallery .wrap .gallery-wrapper a {
        width: 100%
    }

    #products .download-wrapper .item {
        width: 50%
    }
}

@media (max-width: 480px) {
    #reference .item {
        width: 100%
    }

    #pegoleForm #antispamRes, #contact #antispamRes {
        width: calc(100% - 120px)
    }
}