@charset "UTF-8";
/**
 * Swiper 12.1.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: March 24, 2026
 */

:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-LightItalic.eot');
    src: local('Lato Light Italic'), local('Lato-LightItalic'),
        url('fonts/Lato-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-LightItalic.woff2') format('woff2'),
        url('fonts/Lato-LightItalic.woff') format('woff'),
        url('fonts/Lato-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-Black.eot');
    src: local('Lato Black'), local('Lato-Black'),
        url('fonts/Lato-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Black.woff2') format('woff2'),
        url('fonts/Lato-Black.woff') format('woff'),
        url('fonts/Lato-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-HeavyItalic.eot');
    src: local('Lato Heavy Italic'), local('Lato-HeavyItalic'),
        url('fonts/Lato-HeavyItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-HeavyItalic.woff2') format('woff2'),
        url('fonts/Lato-HeavyItalic.woff') format('woff'),
        url('fonts/Lato-HeavyItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Lato Hairline';
     src: url('fonts/Lato-Hairline.eot');
    src: local('Lato Hairline'), local('Lato-Hairline'),
        url('fonts/Lato-Hairline.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Hairline.woff2') format('woff2'),
        url('fonts/Lato-Hairline.woff') format('woff'),
        url('fonts/Lato-Hairline.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-Semibold.eot');
    src: local('Lato Semibold'), local('Lato-Semibold'),
        url('fonts/Lato-Semibold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Semibold.woff2') format('woff2'),
        url('fonts/Lato-Semibold.woff') format('woff'),
        url('fonts/Lato-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-Heavy.eot');
    src: local('Lato Heavy'), local('Lato-Heavy'),
        url('fonts/Lato-Heavy.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Heavy.woff2') format('woff2'),
        url('fonts/Lato-Heavy.woff') format('woff'),
        url('fonts/Lato-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-MediumItalic.eot');
    src: local('Lato Medium Italic'), local('Lato-MediumItalic'),
        url('fonts/Lato-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-MediumItalic.woff2') format('woff2'),
        url('fonts/Lato-MediumItalic.woff') format('woff'),
        url('fonts/Lato-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-Light.eot');
    src: local('Lato Light'), local('Lato-Light'),
        url('fonts/Lato-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Light.woff2') format('woff2'),
        url('fonts/Lato-Light.woff') format('woff'),
        url('fonts/Lato-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-Bold.eot');
    src: local('Lato Bold'), local('Lato-Bold'),
        url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Bold.woff2') format('woff2'),
        url('fonts/Lato-Bold.woff') format('woff'),
        url('fonts/Lato-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-BoldItalic.eot');
    src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
        url('fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-BoldItalic.woff2') format('woff2'),
        url('fonts/Lato-BoldItalic.woff') format('woff'),
        url('fonts/Lato-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-Regular.eot');
    src: local('Lato Regular'), local('Lato-Regular'),
        url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Regular.woff2') format('woff2'),
        url('fonts/Lato-Regular.woff') format('woff'),
        url('fonts/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato Hairline';
     src: url('fonts/Lato-HairlineItalic.eot');
    src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
        url('fonts/Lato-HairlineItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-HairlineItalic.woff2') format('woff2'),
        url('fonts/Lato-HairlineItalic.woff') format('woff'),
        url('fonts/Lato-HairlineItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-SemiboldItalic.eot');
    src: local('Lato Semibold Italic'), local('Lato-SemiboldItalic'),
        url('fonts/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-SemiboldItalic.woff2') format('woff2'),
        url('fonts/Lato-SemiboldItalic.woff') format('woff'),
        url('fonts/Lato-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-BlackItalic.eot');
    src: local('Lato Black Italic'), local('Lato-BlackItalic'),
        url('fonts/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-BlackItalic.woff2') format('woff2'),
        url('fonts/Lato-BlackItalic.woff') format('woff'),
        url('fonts/Lato-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-Italic.eot');
    src: local('Lato Italic'), local('Lato-Italic'),
        url('fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Italic.woff2') format('woff2'),
        url('fonts/Lato-Italic.woff') format('woff'),
        url('fonts/Lato-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-ThinItalic.eot');
    src: local('Lato Thin Italic'), local('Lato-ThinItalic'),
        url('fonts/Lato-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-ThinItalic.woff2') format('woff2'),
        url('fonts/Lato-ThinItalic.woff') format('woff'),
        url('fonts/Lato-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-Thin.eot');
    src: local('Lato Thin'), local('Lato-Thin'),
        url('fonts/Lato-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Thin.woff2') format('woff2'),
        url('fonts/Lato-Thin.woff') format('woff'),
        url('fonts/Lato-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
     src: url('fonts/Lato-Medium.eot');
    src: local('Lato Medium'), local('Lato-Medium'),
        url('fonts/Lato-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato-Medium.woff2') format('woff2'),
        url('fonts/Lato-Medium.woff') format('woff'),
        url('fonts/Lato-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}


body {
	font-family:Lato, sans-serif;
	margin:0px;
}
.body-innerwrapper {   display: flex;   flex-direction: column;   min-height: 100vh;}
section#main-body {
    flex: 1;
    padding: 0px;
}
#main-body {
    padding: 30px 0;
}
body.home section#main-body {
    padding: 0px;
}
@media (min-width: 1280px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1280px;
		margin-left: auto !important;
    margin-right: auto !important;
    }
}

@media (max-width: 1279px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
         max-width: 100%;
		 margin-left: auto !important;
    margin-right: auto !important;
    }
}
body.home {
    background-image: url(/wp-content/themes/metalroof/assets/main-back.png);
    background-repeat: no-repeat;
    background-position: center top;
}
.header__top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}
div#top-links-area {
    display: flex;
    gap: 20px;
}
ul#top-menu {
    list-style: none;
    padding-inline-start: 0px;
    margin: 0px;
    display: flex;
    color: #445261;
    font-size: 14px;
    column-gap: 35px;
}

ul#top-menu li a {
    color: #445261;
    font-size: 14px;
    text-decoration: none;
}

ul#top-menu li a:hover, ul#top-menu li a:active {
    color: #000;
    text-decoration: none;
    font-weight: 500;
}

a.treed-link {font-style: normal;font-weight: 500;font-size: 14px;line-height: 17px;color: #C0DFF8;text-decoration: none;display: flex;}

a.top-phone {display: flex;
font-style: normal;
font-weight: 800;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;text-decoration: none;
}
.header__menu {
    display: flex;
    padding: 8px 20px 10px 16px;
    align-items: center;
	gap: 20px;
	justify-content: space-between;
}
.header__menu_block {
    display: flex;
    align-items: center;
    gap: 20px;
}
ul#main-menu {
    display: flex;
    list-style: none;
    padding-inline-start: 0px;
    margin: 0px;
    gap: 9px;
}
ul#main-menu li a {
    border-color: #9cc7fd;
    border-width: 1px;
    border-radius: 10px;
    color: #000000;
    background-color: #cce3ff;
    padding: 0px 15px;
    font-size:  16px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

ul#main-menu li a:hover {
    color: #fff !important;
    background-color: #1589F5 !important;
    border-color: #1589F5 !important;
}
input#wp-block-search__input-2 {
    padding: 9px;
    border-radius: 10px !important;
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 19px;
color: #000000;

}

.header_block-search {
    height: 36px;
    border-radius: 10px !important;
    padding: 1px;
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    border: 1px solid;
    border-color: #97c1f4;
}

input#header_block-search__input-2 {
    padding: 9px;
    border-radius: 10px !important;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    border: 1px solid #fff;
}

button.header_block-search__button.has-icon {
    margin: 0px;
    padding: 2px;
    background: #fff;
    border: 1px solid #fff;
}

.header_block-search svg.search-icon {
    fill: #97C1F4;
    transform: rotateY(180deg);
}
.header__soc .soc-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 8px;
}

.wp-block-buttons.catalog-btn-link a.wp-block-button__link:hover, .wp-block-buttons.catalog-btn-link a.wp-block-button__link:active {
    color: #fff !important;
    background-color: #1589F5 !important;
    border-color: #1589F5 !important;
}
.soc-btns-span {font-weight: 400;font-size: 11px;line-height: 13px;display: flex;align-items: flex-start;text-align: center;color: #63BEFF;width: 154px;justify-content: center;margin-top: 5px;}

.soc-btn a {
    display: flex;
}
.top-q-block {
    width: 264px;
    font-style: italic;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #FFFFFF;
}
img.q-t {
    position: absolute;
    margin-top: -9px;
    margin-left: -16px;
}

.top-q-txt {
    position: relative;
}

img.q-b {
    margin-left: 3px;
    margin-bottom: -13px;
}
/*SLIDE*/
h1.wp-block-heading.has-text-align-center.main-h1 {font-style: normal;font-weight: 800;font-size: 68px;line-height: 82px;text-align: center;text-transform: uppercase;color: #000000;}

p.has-text-align-center.main-subp {
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 26px;
text-align: center;
color: #000000;
}

p.main-ptxt {
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 19px;
text-align: justify;
text-indent: 41px;
color: #000000;
margin: 0px;
}
.slide-block-media-text a {
    display: flex;
}
.el-feat figure.wp-block-media-text__media {
    width: 13px;
    height: 13px;
}
.el-feat .wp-block-media-text__content {
    padding: 0px;
}
figure.wp-block-image.alignright.size-full.dmitr-main {
    position: relative;
    float: none;
    margin-top: -810px;
    margin-left: auto;
    margin-right: 83px;
    z-index: -1;
}
.dmitr-abs {
    position: relative;
}
.el-feat {
    grid-template-columns: 20px auto !important;
}

.slide-block-columns {
    display: flex;
	margin-bottom: 224px;
}

h1.slide-heading.main-h1 {
    font-style: normal;
    font-weight: 700;
    font-size: 68px;
    line-height: 82px;
    text-align: center;
    text-transform: uppercase;
    color: #000000;
    padding-top: 45px;
    margin: 0px;
}

p.main-subp {
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
    text-align: center;
    color: #000000;
	margin-top: 0px;
}
.slide-block-column.r {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
}

.slide-block-columns {
    background-image: url(/wp-content/themes/metalroof/assets/dmitry-home-1.png);
    background-repeat: no-repeat;
    background-position-x: 585px;
}
.slide-block-media-text {
    display: flex;
    align-items: center;
    gap: 18px;
}

.slide-block-viber {
    display: flex;
    justify-content: center;
}

.slide-block-media-text__content p {
    margin: 0px;
}

.slide-block-media-text__content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.slide--block-media-text {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.slide-block-group.exp {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 56px;
    padding-right: 80px;
    padding-left: 80px;
    display: flex;
    justify-content: center;
    gap: 60px;
}

.slide-block-group.exp p {
    margin: 0px;
}

.slide-block-group.exp img {
    margin-top: 7px;
}
.slide-block-column.r {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
}
/*CASES*/
.cases-subtitle {
    position: relative;
    display: flex;
    justify-content: flex-end;
    z-index: 2;
    margin-top: -228px;
}
.tab-subtitle>div {    padding: 24px 39px;
    width: 543px;
    height: 96px;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
    color: #FFFFFF;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;}

.tab-subtitle {position: relative;
    max-width: 620px;
    margin-top: -3px;
    margin-right: 20px !important;
    display: flex;
    z-index: 1;
	background: url(/wp-content/themes/metalroof/assets/back-title-tabs.svg);
    background-position: center top;
    background-repeat: no-repeat;}
.cases-block {
    background-color: #ffffff;
    padding: 38px;
    border-radius: 20px;
    margin-top: -74px !important;
}
div#tabs {
    position: relative;
    z-index: 9;
}
.tab {
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000000;
    display: inline-flex;
    padding-bottom: 38px;
    flex-direction: column;
    align-items: center;
    margin-right: 38px;
    cursor: pointer;
}

.tabContent {
    width: 100%;
    display: block;
}

.tab.blueborder:after {
    content: '';
    margin-top: 3px;
    width: 52px;
    height: 2px;
    display: flex;
    background: #0A86E6;
    align-items: center;
    justify-content: center;
}

.tab:after {
    content: '';
    margin-top: 3px;
    width: 52px;
    height: 2px;
    display: flex;
    background: #fff;
    align-items: center;
    justify-content: center;
}

.case-title a {
	display: block;
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 18px;
color: #000000;
text-decoration: none;
    min-height: 36px;
    margin: 15px 0px;
}

.case-content {font-style: italic;font-weight: 400;font-size: 15px;line-height: 18px;color: #606060;text-align: left;}
section#cases {
    background: #0b85e2;
}
.cases-carousel span.swiper-pagination-bullet.swiper-pagination-bullet-active {width: 120px;height: 20px;background: #0B85E2;}
.cases-carousel span.swiper-pagination-bullet {display: flex;width: 120px;height: 20px;background: #EFEFEF;}

.cases-carousel .swiper-pagination {
    display: flex;
    gap: 10px;
    margin: 30px 0px 0px;
    justify-content: center;
}

.case-carousel-content {
    padding: 6px 6px 12px;
    border: 1px solid #fff;
    border-radius: 14px;
}

.case-carousel-content:hover {
    border-color: #1589F5;
}
.tab-link-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 24px;
}

.tab-link-more a {font-style: normal;font-weight: 600;font-size: 24px;line-height: 29px;text-align: center;letter-spacing: 0.1em;text-transform: uppercase;color: #000000;text-decoration: none;}

#tabs .hide {
    display: none;
}
#tabs .show {
    display: block;
}
.tab-bottom-num {
font-style: normal;
font-weight: 800;
font-size: 50.6654px;
line-height: 61px;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
}

.tab-bottom-num-txt {
font-style: normal;
font-weight: 500;
font-size: 15.203px;
line-height: 18px;
text-align: center;
color: #FFFFFF;
}
.tab-bottom-block {
    display: flex;
    justify-content: space-around;
	padding-top: 50px;
    padding-bottom: 50px;
}
/*FEATURES*/
.features-back img {
    margin: auto;
}
.feats {
    margin-top: 30px;
}
.features-back {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: -88px;
    z-index: -1;
}
.garant-block {
    position: relative;
    display: flex;
    background: url(/wp-content/themes/metalroof/assets/feat-back.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 15px 39px 34px;
    align-items: center;
    justify-content: center;
    margin-top: -90px;
    z-index: 2;
}

.garant-title {
font-weight: 700;
font-size: 40px;
line-height: 100px;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
}

.garant-title span {display: block;font-weight: 700;font-size: 100px;line-height: 100px;text-align: center;text-transform: uppercase;color: #FFFFFF;}
.features-block-columns {
    display: flex;
    margin-top: 50px;
}
.top-subtitle {
font-style: normal;
font-weight: 500;
font-size: 64px;
line-height: 77px;
text-transform: uppercase;
color: #000000;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
margin: -4px 0px;
}

.top-title {
font-style: normal;
font-weight: 800;
font-size: 68.1558px;
line-height: 82px;
text-transform: uppercase;
color: #000000;
flex: none;
order: 1;
flex-grow: 0;
margin: -4px 0px;
}

.top-title span {
font-style: normal;
font-weight: 800;
font-size: 38.3377px;
line-height: 46px;
text-transform: uppercase;
color: #000000;
flex: none;
order: 1;
flex-grow: 0;
margin: -4px 0px;
}

.top-bttitle {
font-style: normal;
font-weight: 500;
font-size: 35.5683px;
line-height: 43px;
text-transform: uppercase;
color: #000000;
}
.brands-gallery {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px 0px;
}
.feat-title {font-style: normal;font-weight: 700;font-size: 21px;line-height: 25px;text-transform: uppercase;color: #0A86E6;padding: 0px 12px;margin-bottom: 2px;}

.feat-txt {font-style: normal;font-weight: 400;font-size: 15px;line-height: 18px;color: #000000;padding: 0px 12px;}

.feat-title:after {
    content:'';
    display:block;
    width: 303px;
    height: 4px;
    background: linear-gradient(93.59deg, #1592F3 -0.51%, #0B85E2 9.48%, #31A6FB 49.88%, #2DA9FC 108.24%);
    border-radius: 8px;
    margin-left: -12px;
}

.feat-item {
    margin-bottom: 22px;
    max-width: 303px;
}

.main-link-desk .wp-block-media-text__content {
    padding: 0px;
}
/*ADDRESS*/
.addr-title {font-weight: 800;font-size: 68.1558px;line-height: 100px;text-transform: uppercase;color: #000000;display: flex;align-items: center;justify-content: space-between;}

.office-address_columns {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}
.addr-city {
font-weight: 500;
font-size: 46.7328px;
line-height: 69px;
text-align: right;
color: #000000;
}

.addr-txt {
font-style: normal;
font-weight: 500;
font-size: 16.1261px;
line-height: 24px;
text-align: right;
color: #000000;
}
.addr-title:before {
    content: '';
    width: 842px;
    height: 6px;
    background: #EFEFEF;
    flex: none;
    order: 1;
    flex-grow: 0;
}
.office-block-gallery {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
}
/*MAIN CATS*/
.hr-shadow {display: flex;
    width: 576px;
    height: 5px;
    border-bottom: 5px solid;
    border-color: #F2F2F2;margin: auto;}
.assort-block-group {
    padding: 80px 0px 40px;
    display: flex;
    justify-content: space-between;
}
.assort-num {
font-style: normal;
font-weight: 400;
font-size: 36.1165px;
line-height: 53px;
text-transform: uppercase;
color: #1592F3;
}

.assort-num span {
font-style: normal;
font-weight: 800;
font-size: 110.153px;
line-height: 53px;
text-transform: uppercase;
color: #1592F3;
}

.assort-txt {
font-style: normal;
font-weight: 700;
font-size: 35px;
line-height: 53px;
text-transform: uppercase;
color: #1592F3;
}
.main-cat-link a {
    font-size: 67px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.main-cat-link a:hover {
    color: #1592F3;
}

.cat-link a {
font-style: normal;
font-weight: 275;
font-size: 32px;
line-height: 42px;
text-align: center;
color: #000000;
      text-decoration: none;
}

.maincat_subtitle {font-weight: 400;font-size: 53.8806px;line-height: 65px;text-align: center;letter-spacing: 0.16em;text-transform: uppercase;color: #DEDEDE;padding-top: 66px;}

.maincat_bigtitle img {
    margin: auto;padding-top: 66px;
}

.maincat_bigtitle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.maincat_block {
    margin: 40px 0px;
}

.maincat_title-link a {
    display: block;
    font-size: 67px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
}

.maincat_title-link a:hover {
    color: #1592F3;
}

.cat-link a {
font-style: normal;
font-weight: 275;
font-size: 32px;
line-height: 42px;
text-align: center;
color: #000000;
      text-decoration: none;
}

.maincat_media {
    display: grid;
    grid-template-columns: 1fr 50%;
    margin-top: 20px;
    gap: 20px;
}

p.maincat_text {
    color: #595959;
    font-size: 22px;
}

.maincat_links {
    border-top: 2px solid;
    border-top-color: #1592f3;
    margin-top: 5px;
    margin-bottom: 0px;
    padding-top: 2px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 33px;
    row-gap: 3px;
    justify-content: flex-start;
    align-items: flex-start;
}

.cat-link a:hover {
    font-weight: 400;
    font-size: 32px;
    line-height: 42px;
    color: #000000;
}
/*PROMOTIONS*/
section#promotions:before {
    content: '';
    background: url(/wp-content/themes/metalroof/assets/Dom_niz_1_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 1228px;
    height: 1016.56px;
    margin-top: -445px;
    left: calc(50% - 1228px/2 - 795px);
    z-index: -1;
}
section#promotions:after {
    content: '';
    background: url(/wp-content/themes/metalroof/assets/Dom_niz_2_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 993px;
    height: 791px;
    right: 0px;
    margin-right: 0px;
    z-index: -1;
    margin-top: -457px;
}
section#promotions, section#news {
    padding: 40px 0px;
}
section#promotions {
    padding-top: 120px;
}
.promotions_block {
    display: block;
    align-items: flex-end;
    padding: 25px 40px 40px;
    background: rgba(255, 255, 255, 0.59);
    backdrop-filter: blur(4.95px);
    border-radius: 40px;
}
.promotions_block .swiper-buttons {
    display: flex;
    gap: 30px;
    justify-content: flex-end;
    margin-top: -30px;
    margin-bottom: 50px;
}
.swiper.promotions-carousel {
    padding-top: 40px;
}
.promotion-title a {
    display: block;
    font-weight: 600;
    font-size: 21px;
    line-height: 25px;
    color: #000000;
    text-decoration: none;
}
.promotions_block .block-title {
    color: #ff0000;
    font-size: 100px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
	margin-top: -60px;
    padding-bottom: 0px;
}

.promotion-carousel-content {
    display: flex;
    gap: 40px;
}

.promotion-img-bg img {
    max-width: 180px;
}
.promotion-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.promotions-carousel span.swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 98px;
height: 8px;
background: #FF0000;
}
.promotions-carousel span.swiper-pagination-bullet {display: flex;width: 98px;height: 8px;background: #EFEFEF;}
.promotions_block .swiper-pagination {
    display: flex;
    gap: 5px;
}
/*NEWS*/
section#news .block-title {
    margin-bottom: -83px;
	padding-bottom: 0px;
}
.new-title {
    min-height: 93px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.new-img-bg {
    display: flex;
    justify-content: flex-end;
}
.new-title:after {
    content:'';
    display: block;
    width: 100%;
    height: 6px;
    background: linear-gradient(93.59deg, #1592F3 -0.51%, #0B85E2 9.48%, #31A6FB 49.88%, #2DA9FC 108.24%);
    border-radius: 9px;
 }
.swiper.news-carousel {
    padding-top: 50px;
}

/*REWS*/
section#rews {
    padding: 40px 0px 80px;
}
svg.swiper-navigation-icon>* {
    fill: #0783E1;
}
.swiper-buttons {
    display: flex;
    gap: 30px;
    justify-content: flex-end;
    margin-top: 0px;
    margin-bottom: 30px;
}

.swiper.rews-carousel {
    padding-top: 50px;
}

section#rews .block-title {
    margin-bottom: -83px;
	padding-bottom: 0px;
}
.swiper-button-prev svg {
    transform: rotate(
180deg);
}
.block-title {font-weight: 600;font-size: 42.3312px;line-height: 51px;text-align: center;text-transform: uppercase;color: #A8A8A8;padding-bottom: 20px;}

.rew-img-bg {
    display: flex;
    justify-content: space-between;
}

span.rew-meta-data.rew-date, span.new-meta-data.new-date, span.promotion-meta-data.promotion-date {
font-style: italic;
font-weight: 500;
font-size: 16px;
line-height: 19px;
text-align: right;
color: #000000;
}

.rew-title a, .new-title a {
             display: block;
             font-weight: 600;
             font-size: 21px;
             line-height: 25px;
             color: #000000;
             text-decoration: none;
             padding: 22px 15px 15px;
             }
.rew-title:after {
    content:'';
    display: block;
    width: 100%;
    height: 6px;
    background: linear-gradient(93.59deg, #D0D0D0 -0.51%, #CECECE 21.07%, #E3E3E3 60.94%, #D7D7D7 108.24%), #D9D9D9;
    border-radius: 9px;
    transform: matrix(1, 0, 0, -1, 0, 0);
 }

.rew-content, .new-content {
    padding: 15px;
}
/*FOOTER*/
.footer a.call-block-button__link {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #1592F3;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14.5834px;
    gap: 13.85px;
    width: 205px;
    height: 50.31px;
    background: #DBEEFF;
    border: 2px solid #CEEAFF;
    border-radius: 25px;
    cursor: pointer;
}
.footer {
    display: flex;
    gap: 80px;
}

.footer_block.logo {
    padding-left: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-block-group {
    display: flex;
    gap: 55px;
}

h3.footer-block-heading {
font-weight: 700;
font-size: 22px;
line-height: 26px;
text-transform: uppercase;
color: #000000;
margin: 0px;
    margin-bottom: 23px;
}
ul.footer-block-navigation {
    list-style: none;
    padding-inline-start: 0px;
}
.footer a {display: block;font-weight: 500;font-size: 16px;line-height: 19px;color: #000000;text-decoration: none;}
ul.footer-block-navigation li a {display: block;font-weight: 500;font-size: 16px;line-height: 19px;color: #000000;text-decoration: none;margin-bottom: 7px;}
.footer-block-group_item p {
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #000000;
}
.footer-block-group_item {
    min-width: 244px;
}
.footer .soc-btns {    display: flex;    align-items: center;    justify-content: flex-start;    gap: 15px;}
.footer_bottom {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: #0597fa;
    padding: 20px 40px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    color: #cde9ff;
    font-size: 12px;
    gap: 20px;
	margin-top: 20px;
}

.footer_bottom_block {
    min-height: 156px;
    min-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

p.footer-copy.gap-100 {
    gap: 100px;
}

.footer_google__fig {
    display: flex;
    align-items: center;
	gap: 13px;
}

p.footer-goo {
    color: #fff;
}