:root {
    --black: #1a2733;
    --text: #2d65ac;
    --visual-accents: #ffcb01;
}

* { box-sizing: border-box; scroll-behavior: smooth; user-select: none; }
*:focus  { outline: none; }

a { text-decoration: none; color: inherit; }
a:hover { color: var(--visual-accents); }

ul { list-style: none; }
ul:not(.menu) li { margin-bottom: 10px; line-height: 27px; position: relative; }
ul:not(.menu) li:before { position: absolute; content: ''; left: -20px; top: 12px; border: 4px solid transparent; border-bottom: 4px solid var(--visual-accents); border-right: 4px solid var(--visual-accents); }

a,
button { transition: all .3s; }

body { padding: 0; margin: 0; font: 16px "Source Sans Pro", sans-serif; color: var(--black); }
body.not-scrolling { overflow: hidden; height: 100vh }

h1,
h2,
h3 { font-family: "Roboto Condensed", sans-serif; }
h1,
h2 { letter-spacing: 2px }

.h2,
.link,
h2,
input[type="submit"] { text-transform: uppercase; }

main { overflow: hidden }

textarea { resize: none; height: 79px; }

button,
input[type="submit"] { cursor: pointer; border: none; }

input:not([type="submit"]),
textarea { display: block; width: 100%; border: none; border-bottom: 3px solid #d2d2d2; padding: 15px 35px; margin-bottom: 30px; font: inherit; background: transparent; }
input[type="submit"] { float: right; transition: all .3s; }
input[type="submit"]:hover { background: var(--text); color: #fff; }
label { transition: all .3s; position: relative; top: 30px; font-size: larger; }
label.active {top: 0; font-size: inherit; }

img { max-width: 100%; height: auto; }

input[type="submit"],
.link { color: inherit; display: inline-block; padding: 15px 35px; font-size: 14px; font-weight: 700; position: relative; background: transparent; z-index: 1; overflow: hidden; background: var(--visual-accents); font-family: inherit; }
.link:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; width: 0; transition: all .3s; background: var(--text); overflow: hidden; }
button.link { cursor: pointer; }
.link:hover { color: #fff; }
.link:hover:before { width: 100%; }

.color,
#menu-main a:hover { color: var(--visual-accents); }

.triangle-after { position: relative }
.triangle-after:after { position: absolute; content: ''; border: 4px solid transparent; border-bottom: 4px solid var(--visual-accents); border-left: 4px solid var(--visual-accents); bottom: 8px; margin-left: 8px }

.container { margin: 0 20px }

.popup { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 100; background: rgba(255,255,255,.95); display: none; justify-content: center; align-items: center; }
.popup>div { margin: 30px; }
.popup .close { background: none; border: none; padding: 0; position: absolute; right: 17px; top: 34px; color: var(--visual-accents); font-size: 20px; }
.popup .close:before,
.popup .close:after { content: ''; width: 100%; background: #fff; height: 3px; display: block; background: var(--black); position: relative; width: 35px; }
.popup .close:before { transform: rotate(45deg); }
.popup .close:after { transform: rotate(-45deg); top: -3px; }
.popup h2 { font-size: 36px; margin-bottom: 35px; }

.site-header { padding: 5px 20px; display: flex; justify-content: space-between; align-items: center; position: fixed; left: 0; right: 0; top: 0; z-index: 100; } 
.site-header>div { display: flex; gap: 30px; align-items: center; }
.site-header.sticky,
body:not(.home) .site-header { background: url(../images/tp-pattern.png); }
.site-header.sticky .site-logo svg { width: 80px; }
.site-header.sticky .site-logo svg .st0 { display: none; }
.site-header.sticky .menu-trigger { font-size: 26px }
.site-header.sticky .order-call-trigger { padding: 10px 25px; }

.site-logo { font: 700 30px "Roboto Condensed", sans-serif; color: var(--visual-accents); text-transform: uppercase }
.site-logo svg { width: 120px; transition: all .3s; display: block; }
.site-logo svg .st1 { fill: #fff; }

.banner h2,
.site-logo span { font-weight: 300 }

#menu-main { list-style: none; display: none; margin: 0; }
#menu-main a { color: #fff; text-transform: uppercase; font-size: 18px; line-height: 40px; letter-spacing: 1px; font-weight: bold; }

.menu-trigger { width: 30px; position: relative; background: none; border: none; padding: 0; }
.menu-trigger span { overflow: hidden; color: #fff; margin: 8px 0; }
.menu-trigger span,
.menu-trigger:before,
.menu-trigger:after { width: 100%; background: #fff; height: 3px; display: block; transition: all .3s; }
.menu-trigger:before,
.menu-trigger:after { content: ''; }

.menu-trigger.active { z-index: 101; }
.menu-trigger.active span { opacity: 0; visibility: hidden; }
.menu-trigger.active:before,
.menu-trigger.active:after { background: var(--black); position: relative; width: 35px; }
.menu-trigger.active:before { transform: rotate(45deg); top: 10px; }
.menu-trigger.active:after { transform: rotate(-45deg); top: -11px; }

.order-call-trigger svg { width: 36px; height: auto; }
.order-call-trigger path { fill: #fff; }

footer { background: url(../images/tp-pattern.png); padding: 1px 0 20px; color: #99a9b5 }
footer h3 { color: #fff }

footer .wrap { margin: 0 20px; }

footer .contacts p { padding-left: 30px }
footer .contacts a { color: #99a9b5; text-decoration: none; display: block; }
footer .contacts a:hover { color: var(--visual-accents); }
footer .contacts a svg { vertical-align: middle; width: 24px; margin-right: 15px; }
footer .contacts a path { fill: #99a9b5; }
footer .contacts a:hover path { fill: var(--visual-accents); }

footer .copyright { position: absolute; bottom: -50px; left: 20px; margin: 0 }

.footer-bottom { margin: 50px 20px 0; display: flex; justify-content: space-between; align-items: baseline; }
.dev-link svg { vertical-align: middle; margin-left: 10px; }
.dev-link path { stroke: currentColor; }

.contact-form { margin: 0 }
.contact-form__input,
.contact-form__text { background-color: #181828; }
.contact-form__button,
.contact-form__input,
.contact-form__text { color: #99a9b5; }
.contact-form__button { padding: 11px; height: 40px; background: var(--visual-accents); text-transform: uppercase; font: 700 14px "Lato", sans-serif; margin: 0; width: 100%; border: none; color: #000; }
.contact-form__button:hover { background-color: #394050; color: #fff; }

.owl-nav { position: relative; }
.owl-nav button { position: absolute; bottom: 5px; }
.owl-nav button.owl-prev { left: 20px; }
.owl-nav button.owl-next { right: 20px; }
.owl-nav button svg { fill: #fff; width: 12px; }
.owl-dots { position: absolute; bottom: 20px; left: 65px; right: 65px; display: flex; gap: 5px; }
.owl-dots button { width: 100%; }
.owl-dots button span { width: 100%; height: 3px; background: #fff; display: block; transition: all .3s; }
.owl-dots button.active span { background: var(--visual-accents); }

.list,
.list__item { position: relative }

.list__link,
.other-articles .list__item a:hover { color: inherit; text-decoration: underline }

.wpcf7 { overflow: hidden; }
.wpcf7 form.sent .wpcf7-response-output { border: 0; padding: 0; margin: 0; max-width: 310px; font-weight: 700; }
.wpcf7 form.sent .wpcf7-response-output:before { content: ''; display: inline-block; width: 10px; height: 20px; border: 3px solid transparent; border-bottom-color: var(--visual-accents); border-right-color: var(--visual-accents); transform: rotate(45deg); margin-right: 1em; float: left; }
 
.home section:not(.banner) { padding: 50px 0; }
.home section h2 { margin-top: 0; position: relative; }
.home section:not(.banner) h2:after,
.blog h1:after,
.single-post h1:after,
.post-type-archive-projects h1:after { content: ''; width: 63px; height: 3px; background: var(--visual-accents); display: block; margin-top: .5em; }

.banner .owl-stage { display: flex; }
.banner .owl-item>div { height: 100%; position: relative; }
.banner .owl-item>div:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(36,81,138,.7); }
.banner img { height: 400px; object-fit: cover; max-height: 100vh; }
.banner h1 { position: absolute; bottom: 70px; right: 20px; z-index: 1; color: #fff; text-transform: uppercase; text-align: center; margin: 0; width: calc(100% - 40px); font-size: 28px; }
.banner h1 span { color: var(--visual-accents); display: block; }

#prom-alp { background: url(../images/Archivio-Fotografico.png) no-repeat top left; background-size: 80px; overflow: hidden }
#prom-alp .item { margin: 15px 0 45px }
#prom-alp .item .name { color: #1a2229; }
#prom-alp .item img,
.post img { max-width: 100% }

#insulation h2 { text-align: center }
#insulation h2:after { margin-left: calc(50% - 63px / 2); }

#insulation { background: url(../images/insulation-bg.png) no-repeat; background-size: cover; }
#insulation .link { display: block; margin: 30px auto 0; width: 135px }
#insulation form { margin: 30px auto 0; max-width: 500px; }

#special { display: flex; flex-direction: column; justify-content: center; box-shadow: 0 0 50px #c5c5c5; position: relative; z-index: 1; }
#special h2:after { left: 0 }
#special .link { margin-top: 30px }

.projects { background: url(../images/tp-pattern.png); padding-bottom: 0 !important; }
.projects h2 { color: #fff; }

.recent-articles .text-wrap { margin: -60px 20px 0; padding: 1px 20px 0; background: #fff; position: relative; z-index: 1; overflow: hidden; }
.recent-articles img { min-height: 196px; width: 100%; object-fit: cover; }
.recent-articles .read-more { text-transform: uppercase; letter-spacing: 1px; color: #aaa; font-size: 13px; font-weight: 700; border-bottom: 2px solid #aaa; }

body:not(.home) main { padding: 100px 0; }

.blog h1,
.post-type-archive-projects h1 { text-transform: uppercase; margin: 1em 0 1.5em; }
.single-post h1 { margin: 1em 0 1.5em; }

.single-post .text p { margin: 0 0 1.1em }
.single-post .text img { margin: 15px 30px 30px 0 }

@media (max-width:767px) {
    #menu-main a,
    .site-header.sticky .mobile-only { display: block }

    .order-call-trigger.link { padding: 0; background: none; }
    .order-call-trigger span { display: none; }

    .post .h2,
    aside,
    footer h3 { margin-top: 50px }

    .post__title h1 { text-align: center }

    #prom-alp h2 { text-align: right; max-width: 300px; }
    #prom-alp h2:after { margin-left: calc(100% - 63px); }

    #insulation { background-size: cover; }

    #special .link,
    .recent-articles .link { width: 100%; text-align: center; }

    .recent-articles article { margin-bottom: 50px; }

    .projects h2 { text-align: center; }
    .projects h2:after { margin-left: calc(50% - 63px / 2); }
}

@media (min-width:768px) {
    .h2 { font-size: 19px; line-height: 30px }

    .mobile-only { display: none }

    .order-call-trigger svg { display: none; }

    .popup>div { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 600px; }

    footer .copyright { bottom: 0; left: 0 }

    .banner img { height: 600px; }
    .banner h1 { font-size: 72px; bottom: 50%; text-align: right; transform: translateY(50%); }

    .home section:not(.banner) { padding: 70px 0; }

    #prom-alp { background-size: 200px; padding-left: 200px; background-attachment: fixed }

    #insulation .text { width: 600px; margin: auto; font-size: 18px }
    #insulation form { margin-top: 50px; }

    #special { background: url(../images/arrow-bg.png) no-repeat; background-size: contain }
    #special .list { font-size: 20px }

    aside { float: left; width: 25% }

    .recent-articles .container,
    .projects { position: relative; }
    .recent-articles .link { position: absolute; right: 0; top: 0; }
    .recent-wrap { display: flex; gap: 20px; }
    .recent-articles article { width: calc(50% - 10px); }
    .recent-articles img { height: 200px; }

    .projects .link { position: absolute; top: 70px; right: 20px; }

    .blog .recent-wrap { flex-wrap: wrap; }
    .blog .recent-articles article { margin-bottom: 50px; }

    .post-type-archive-projects .projects-wrap { display: flex; gap: 50px 30px; flex-wrap: wrap; }
    .post-type-archive-projects .projects-wrap article { width: calc(50% - 15px); }
}

@media (min-width:768px) and (max-width:1239px) {
    footer { padding: 30px 0 20px }

    .contact-form { margin-bottom: 50px }

    aside .search input { width: 135px } 

    .recent-articles article:last-of-type { display: none; }

    .home .projects-wrap { padding: 0 20px 100px; display: flex; flex-wrap: wrap; gap: 50px 30px; }
    .home .projects-wrap article { width: calc(50% - 15px); }
    .home .projects-wrap article img { height: 100%; object-fit: cover; }
    .home .projects-wrap .text-wrap { margin: -60px 20px 30px; background: #fff; position: relative; padding: 1px 15px; } 
}

@media (min-width: 808px) { .container { width: 768px; margin: auto; }}

@media (max-width:1239px) {
    #menu-main { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255, 255, 255, .95); padding: 70px 20px 20px; z-index: 100 }
    #menu-main a { color: var(--black); line-height: 3 }

    .post-type-archive-projects .text-wrap { margin: -60px 20px 30px; background: #fff; position: relative; padding: 1px 15px; } 
    .post-type-archive-projects article img { height: 100%; object-fit: cover; }
}

@media (min-width:1240px) {
    h2 { font-size: 40px }

    .container { width: 1240px }

    .site-logo svg { width: 180px; }

    #menu-main { display: flex; justify-content: space-between; gap: 20px; }
    .menu-trigger { display: none }

    footer { padding: 70px 0 45px }
    footer h3 { margin: 0 0 40px }
    footer .container { display: flex; justify-content: space-between }

    .banner img { height: 100vh; }
    .banner h1 { font-size: 92px; line-height: 1em; max-width: 70%; }

    .home section:not(.banner) { padding: 100px 0; }

    #insulation form { margin-top: 70px; }

    #prom-alp { padding-left: 350px; background-size: 300px }

    #special .list { width: 40%; float: left; margin-top: 0; }
    #special p { float: right; width: 60%; clear: right; margin-top: 0; }

    .projects-wrap { display: flex; }
    .projects-wrap article { position: relative; cursor: pointer; }
    .projects-wrap article img { height: 100%; object-fit: cover; min-height: 350px; }
    .projects-wrap .text-wrap,
    .recent-articles .img-wrap:after { position: absolute; background: #ffcb01f2; bottom: 0; left: 0; right: 0; top: 100%; padding: 0 50px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; transition: all .3s; }
    .projects-wrap .text-wrap:after { content: url(../images/search.svg); width: 30px; }
    .projects-wrap article:hover .text-wrap,
    .recent-articles article:hover .img-wrap:after { top: 0; }
    .projects-wrap h3:after { content: ''; width: 63px; height: 3px; background: currentColor; display: block; margin: 1em 0 0 calc(50% - 63px / 2); }
    
    .projects .link { top: 100px; right: calc((100% - 1240px) / 2); }

    .recent-wrap { gap: 30px; }
    .recent-articles img { height: 260px; }
    .recent-articles h3 a:hover { color: var(--black); }
    .recent-articles .img-wrap { position: relative; display: block; }
    .recent-articles .img-wrap:after { content: url(../images/arrow.svg); }
    .recent-articles .read-more:hover { color: var(--visual-accents); border-bottom-color: var(--visual-accents); }

    .blog .recent-articles article { width: calc(33% - 16px); }

    .post-type-archive-projects .projects-wrap { display: flex; gap: 30px; flex-wrap: wrap; }
    .post-type-archive-projects .projects-wrap article { width: calc(33% - 16px); }
}

@media (min-width:1240px) and (max-width:1260px) { .container { padding: 0 10px }}

@media (min-width: 1400px) {
    body { font-size: 18px; }
    .site-header.sticky #menu-main a { font-size: 18px; }
    .site-header>div,
    #menu-main { gap: 40px; }
    .banner h1 { font-size: 120px; }

}

@media (min-width: 1900px) {
    .home section:not(.banner) { padding: 150px 0; }
    .banner h1 { right: 200px; }
    .site-header>div,
    #menu-main { gap: 60px; }
}