@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* @font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Thin.otf');
	font-weight: 300;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Regular.otf');
	font-weight: normal;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Medium.otf');
	font-weight: 500;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Bold.otf');
	font-weight: bold;
} */
* {
    outline: none !important;
}

a {
    text-decoration: none !important;
    transition: 0.3s;
}

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

.darkgray {
    color: #213830 !important;
}

body {
    font-family: 'Inter', sans-serif;
    color: #213830;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-weight: 300;
}

@media (max-width: 1199.98px) {
    body.menubar-in {
        overflow: hidden;
    }
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.row [class*='col'] {
    padding-left: 15px;
    padding-right: 15px;
}

.container-fluid {
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 1440px) {
    .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.single-projects header {
    display: none;
}

.brand {
    transition: 0.3s;
    display: block;
    line-height: 0.9;
    font-weight: 500;
    color: #c5d300;
    font-size: 40px;
    transform: translate(-3px, -1px);
    margin-right: auto;
}

@media (min-width: 1200px) {
    .brand {
        margin-bottom: 30px;
        transform: translate(0.202vw, -0.202vw);
    }
}

@media (min-width: 1950px) {
    .brand {
        font-size: 60px;
        margin-bottom: 80px;
    }
}

.brand:hover {
    opacity: 0.8;
}

.brand .f {
    color: #213830;
    transition: 0.3s;
}

.top-pop {
    position: fixed;
    top: 0px;
    right: 0;
    left: 0;
    z-index: 1100;
    display: none;
}

.modal-close {
    transition: opacity 0.5s ease; /* Add a transition for the opacity property */
}

.navbar {
    transition: 0.3s;
    padding: 16px 0;
}

.navbar.sticky .close-popup:before,
.navbar.sticky .close-popup:after {
    border-color: #000;
}

.navbar.active {
    background-color: #213830;
}

@media (max-width: 767.98px) {
    .navbar.active {
        bottom: 0;
        align-items: start;
    }
}

.navbar.active .brand .f {
    color: #fff;
}

.navbar.active .nav-block [class*='col'] {
    opacity: 1;
    transform: translateY(-10px);
    transition-duration: 0.3s;
    transition-delay: 250ms;
}

.navbar.active .nav-block [class*='col'] + [class*='col'] {
    transition-delay: 350ms;
}

.navbar.active .nav-block [class*='col'] + [class*='col'] {
    transition-delay: 350ms;
}

.navbar.active .nav-block [class*='col'] + [class*='col'] {
    transition-delay: 350ms;
}

.navbar .navbar-collapse {
    margin-top: 24px;
    margin-left: -15px;
    margin-right: -15px;
}

.links a {
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
    transform: translate(-2px, -5px);
}

@media (min-width: 1200px) {
    .links a {
        font-size: 0.97vw;
        transform: translate(-0.081vw, -0.283vw);
        margin-bottom: 22px;
    }
}

@media (min-width: 1950px) {
    .links a {
        margin-bottom: 42px;
    }
}

.links a:after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 0;
    z-index: -1;
    border-bottom: 5px solid #64746e;
    transition: 0.3s;
}

.links a:hover:after,
.links a.active:after {
    width: 100%;
}

.brand-box {
    text-align: right;
    width: 100%;
}

@media (max-width: 1199.98px) {
    .brand-box {
        display: flex;
    }
}

.nav-block {
    padding: 34px 15px;
    max-height: calc(100vh - 62px);
    overflow: auto;
}

@media (min-width: 1950px) {
    .nav-block {
        padding: 80px 15px 170px;
    }
}

.nav-block [class*='col'] {
    opacity: 0;
    transform: translateY(10px);
}

.sandwich {
    display: inline-block;
    cursor: pointer;
    transition: 0.3s;
    padding: 0;
    border: 0;
    background-color: transparent;
}

.sandwich:hover {
    opacity: 0.7;
}

.sandwich:before,
.sandwich span,
.sandwich:after {
    width: 30px;
}

@media (min-width: 1950px) {
    .sandwich:before,
    .sandwich span,
    .sandwich:after {
        width: 50px;
    }
}

.sandwich:before,
.sandwich:after {
    content: '';
}

.sandwich span,
.sandwich:after {
    margin-top: 6px;
}

@media (min-width: 1950px) {
    .sandwich span,
    .sandwich:after {
        margin-top: 10px;
    }
}

.sandwich span,
.sandwich:before,
.sandwich:after {
    display: block;
    transition: 0.3s;
    transform-origin: right center;
    margin-left: auto;
    border-top: 3px solid #c5d300;
}

@media (min-width: 1950px) {
    .sandwich span,
    .sandwich:before,
    .sandwich:after {
        border-top: 4px solid #c5d300;
    }
}

.sandwich:not(.collapsed):before {
    transform: translateY(-2px) rotate(-45deg);
    width: 31px;
}

@media (min-width: 1950px) {
    .sandwich:not(.collapsed):before {
        width: 49px;
        transform: translateY(-3px) rotate(-45deg);
    }
}

.sandwich:not(.collapsed) span {
    width: 0;
    opacity: 0;
}

.sandwich:not(.collapsed):after {
    transform: translateY(2px) rotate(45deg);
    width: 31px;
}

@media (min-width: 1950px) {
    .sandwich:not(.collapsed):after {
        width: 49px;
        transform: translateY(3px) rotate(45deg);
    }
}

.h1 a:hover,
h1 a:hover,
.h2 a:hover,
h2 a:hover,
.h3 a:hover,
h3 a:hover,
.h4 a:hover,
h4 a:hover,
.h5 a:hover,
h5 a:hover,
.h6 a:hover,
h6 a:hover {
    opacity: 0.8;
}

.h1,
h1,
.h2,
h2 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
    transform: translate(-3px, -5px);
}

@media (min-width: 576px) {
    .h1,
    h1,
    .h2,
    h2 {
        font-size: 55px;
        transform: translate(-4px, -7px);
    }
}

@media (min-width: 1200px) {
    .h1,
    h1,
    .h2,
    h2 {
        font-size: 4.44vw;
        transform: translate(-0.324vw, -0.567vw);
    }
}

.h1,
h1 {
    color: #213830;
}

.h1 a,
h1 a {
    color: #213830;
}

.h2,
h2 {
    color: #005e6d;
}

.h2 a,
h2 a {
    color: #005e6d;
}

.h1-white {
    font-weight: normal;
    color: #fff;
    font-size: 40px;
    transform: translate(-3px, -5px);
}

@media (min-width: 576px) {
    .h1-white {
        font-size: 60px;
        transform: translate(-5px, -9px);
    }
}

@media (min-width: 1200px) {
    .h1-white {
        font-size: 7.773vw;
        line-height: 0.8;
        transform: translate(-0.607vw, -0.202vw);
    }
}

.h3,
h3 {
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 4px;
    transform: translate(-0.8px, 0px);
}

@media (min-width: 576px) {
    .h3,
    h3 {
        font-size: 40px;
    }
}

@media (min-width: 768px) {
    .h3,
    h3 {
        transform: translate(-1px, -0.8px);
    }
}

@media (min-width: 1200px) {
    .h3,
    h3 {
        font-size: 3.23vw;
        transform: translate(-0.243vw, -0.405vw);
    }
}

h3 {
    color: #97b2b0;
}

h3 a {
    color: #97b2b0;
}

.h3 {
    color: #213830;
}

.h3 a {
    color: #213830;
}

.h4,
h4 {
    font-size: 22px;
    color: #213830;
    transform: translate(-3px, -5px);
}

@media (min-width: 1200px) {
    .h4,
    h4 {
        font-size: 1.943vw;
        transform: translate(-0.202vw, -0.405vw);
    }
}

.h4 a,
h4 a {
    color: #213830;
}

.h5,
h5 {
    color: #fff;
    font-weight: 300;
    font-size: 24px;
    margin-bottom: 16px;
    transform: translate(-3px, -5px);
}

@media (min-width: 1200px) {
    .h5,
    h5 {
        font-size: 1.943vw;
        transform: translate(-0.202vw, -0.405vw);
        margin-bottom: 22px;
    }
}

@media (min-width: 1950px) {
    .h5,
    h5 {
        margin-bottom: 42px;
    }
}

.h6,
h6 {
    font-size: 18px;
    color: #213830;
    font-weight: bold;
    transform: translate(-1px, -4px);
}

@media (min-width: 1200px) {
    .h6,
    h6 {
        font-size: 1.417vw;
        transform: translate(-0.121vw, -0.324vw);
    }
}

.h6 a,
h6 a {
    color: #213830;
}

p {
    line-height: 1.35;
    margin-top: 0;
    transform: translate(-2px, -5px);
}

@media (min-width: 992px) {
    p {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    p {
        font-size: 0.97vw;
        transform: translate(-0.081vw, -0.283vw);
    }
}

.header-comment {
    font-size: 20px;
    color: #fff;
    transform: translate(-1px, -7px);
}

@media (min-width: 1200px) {
    .header-comment {
        font-size: 1.457vw;
        line-height: 1.2;
        transform: translate(-0.121vw, -0.283vw);
    }
}

.author {
    font-size: 17px;
}

@media (min-width: 576px) {
    .author {
        font-size: 27px;
    }
}

@media (min-width: 1200px) {
    .author {
        font-size: 2.02vw;
    }
}

.mehr {
    color: #213830;
    position: relative;
    z-index: 1;
}

.mehr:after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    z-index: -1;
    border-bottom: 5px solid #d3d7d6;
    transition: 0.3s;
}

.mehr:hover:after {
    opacity: 0;
}

.footer {
    margin-top: -1px;
    background: #213830;
    padding: 16px 0 50px;
    color: #fff;
    position: relative;
    z-index: 2;
}

@media (min-width: 1950px) {
    .footer {
        padding: 16px 0 80px;
    }
}

.footer .brand {
    margin-bottom: 0;
}

.footer .brand .f {
    color: #fff;
}

.footer .greenwood img {
    width: 120px;
}

@media (min-width: 1950px) {
    .footer .greenwood img {
        width: 172px;
    }
}

.footer-bottom {
    padding-top: 72px;
}

@media (min-width: 1950px) {
    .footer-bottom {
        padding: 128px 0 50px;
    }
}

.footer-bottom .links a {
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
}

@media (min-width: 1950px) {
    .footer-bottom .links a {
        margin-bottom: 28px;
    }
}

@media (min-width: 1200px) {
    .footer-bottom p {
        margin-bottom: 50px;
    }
}

@media (max-width: 1199.98px) {
    .footer-bottom p {
        font-size: 16px;
    }
}

.lines-box {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100vh;
    padding-top: 16px;
    overflow: hidden;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.lines-box .container-fluid {
    height: 100%;
}

.lines-box.scrolled {
    transition: opacity 0.5s ease;
}

.lines-box.scrolled .grids-vertical .row-vertical > [class*='col']:before,
.lines-box.scrolled .grids-vertical .row-vertical > [class*='col']:after {
    background: transparent;
}

.lines-box.scrolled .grids-horizontal {
    border-color: transparent;
}

.lines-box.scrolled .grids-horizontal .row-horizontal:before,
.lines-box.scrolled .grids-horizontal .row-horizontal:after {
    background: transparent;
}

.lines-box.lines-box-popup {
    height: calc(100% - 100vh);
}

.lines-box.hidden {
    opacity: 0;
}

.grids-vertical {
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    bottom: 0;
}

@media (max-width: 1439.98px) {
    .grids-vertical {
        left: 16px;
        right: 16px;
    }
}

.grids-vertical .row-vertical {
    height: 100%;
}

.grids-vertical .row-vertical > [class*='col'] {
    position: relative;
}

.grids-vertical .row-vertical > [class*='col']:before,
.grids-vertical .row-vertical > [class*='col']:after {
    content: '';
    top: 0;
    bottom: 0;
    background-color: rgba(217, 217, 217, 0.5);
    transition: 0.5s;
    position: absolute;
    width: 1px;
}

.grids-vertical .row-vertical > [class*='col']:before {
    left: 14px;
}

@media (max-width: 1439.98px) {
    .grids-vertical .row-vertical > [class*='col']:before {
        left: 7px;
    }
}

.grids-vertical .row-vertical > [class*='col']:after {
    right: 14px;
}

@media (max-width: 1439.98px) {
    .grids-vertical .row-vertical > [class*='col']:after {
        right: 7px;
    }
}

@media (max-width: 1439.98px) {
    .grids-vertical .row-vertical {
        margin-left: -8px;
        margin-right: -8px;
    }

    .grids-vertical .row-vertical > [class*='col'] {
        padding-left: 8px;
        padding-right: 8px;
    }
}

.grids-horizontal {
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    bottom: 0;
    transition: 0.3s;
    border-top: 1px solid rgba(217, 217, 217, 0.5);
}

@media (max-width: 1439.98px) {
    .grids-horizontal {
        left: 16px;
        right: 16px;
    }
}

/*
.grids-horizontal .row-horizontal {
	height: 11.4345vw;
	position: relative;
	transition: 0.5s;
}
@media (max-width: 1199.98px) {
	.grids-horizontal .row-horizontal {
		height: 22vw;
	}
}
@media (max-width: 525.98px) {
	.grids-horizontal .row-horizontal {
		height: 30vw;
	}
}
*/
.grids-horizontal .row-horizontal {
    height: 13.9vw;
    position: relative;
    transition: 0.5s;
}

@media (max-width: 2009.98px) {
    .grids-horizontal .row-horizontal {
        height: 13.76vw;
    }
}

@media (max-width: 1439.98px) {
    .grids-horizontal .row-horizontal {
        height: 14.285vw;
    }
}

@media (max-width: 1199.98px) {
    .grids-horizontal .row-horizontal {
        height: 28vw;
    }
}

@media (max-width: 767.98px) {
    .grids-horizontal .row-horizontal {
        height: 28.2vw;
    }
}

@media (max-width: 525.98px) {
    .grids-horizontal .row-horizontal {
        height: 31.25vw;
    }
}


.grids-horizontal .row-horizontal:before,
.grids-horizontal .row-horizontal:after {
    content: '';
    position: absolute;
    height: 1px;
    left: 0;
    right: 0;
    background-color: rgba(217, 217, 217, 0.5);
    transition: 0.5s;
}

.grids-horizontal .row-horizontal:before {
    bottom: 1px;
}

.grids-horizontal .row-horizontal:after {
    bottom: 16px;
}

.main {
    margin-top: 16px;
    background: #fff;
}

.img-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.img-wrap img,
.img-wrap video,
.img-wrap iframe {
    transition: 0.3s;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 1200px) {
    a .img-wrap:hover img {
        transform: scale(1.05);
        cursor: pointer;
    }
}

.img-wrap.img-nowrap:hover img {
    transform: none;
}

.section-gray {
    padding-top: 15px;
    margin-top: -15px;
    position: relative;
}

.section-gray:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
    background: #e9ebea;
}

.section {
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 16px;
    /*grid-auto-rows: calc(11.4345vw - 16px);*/
    grid-auto-rows: calc(13.9vw - 16px);
    margin-bottom: 16px;
}

/*
@media (max-width: 1439.98px) {
	.section {
		grid-column-gap: 16px;
	}
}
@media (max-width: 1199.98px) {
	.section {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: calc(22vw - 16px);
	}
}
@media (max-width: 525.98px) {
	.section {
		grid-auto-rows: calc(30vw - 16px);
	}
}*/
@media (max-width: 2009.98px) {
    .section {
        grid-auto-rows: calc(13.76vw - 16px);
    }
}

@media (max-width: 1439.98px) {
    .section {
        grid-column-gap: 16px;
        grid-auto-rows: calc(14.285vw - 16px);
    }
}

@media (max-width: 1199.98px) {
    .section {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: calc(28vw - 16px);
    }
}

@media (max-width: 767.98px) {
    .section {
        grid-auto-rows: calc(28.2vw - 16px);
    }
}

@media (max-width: 525.98px) {
    .section {
        grid-auto-rows: calc(31.25vw - 16px);
    }
}


.homepage-1 {
    grid-template-areas: 'picture1 picture1 title title' 'picture1 picture1 title title' 'picture1 picture1 comment .';
}

@media (max-width: 1199.98px) {
    .homepage-1 {
        grid-template-areas: 'title title' 'picture1 comment' 'picture1 comment';
    }
}

@media (max-width: 767.98px) {
    .homepage-1 {
        grid-template-areas: 'title title' 'title title' 'picture1 comment' 'picture1 comment';
    }
}

@media (max-width: 575.98px) {
    .homepage-1 {
        grid-template-areas: 'title title' 'title title' 'picture1 picture1' 'picture1 picture1' 'comment comment' 'comment comment';
    }
}

.homepage-2 {
    grid-template-areas: 'picture1 picture1 picture2 picture2' 'picture1 picture1 picture2 picture2' 'subheading1 subheading1 picture2 picture2' '. . subheading2 subheading2';
}

@media (max-width: 1199.98px) {
    .homepage-2 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1' 'picture2 subheading2' 'picture2 subheading2';
    }
}

@media (max-width: 767.98px) {
    .homepage-2 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1' 'subheading1 subheading1' 'picture2 subheading2' 'picture2 subheading2';
    }
}

@media (max-width: 575.98px) {
    .homepage-2 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1' 'subheading1 subheading1' 'picture2 picture2' 'picture2 picture2' 'picture2 picture2' 'subheading2 subheading2' 'subheading2 subheading2';
    }
}

.homepage-3 {
    grid-template-areas: 'picture1 picture1 picture2 picture2' 'picture1 picture1 picture2 picture2' 'picture1 picture1 subheading2 subheading2' 'subheading1 subheading1 . .';
}

@media (max-width: 1199.98px) {
    .homepage-3 {
        grid-template-areas: 'picture1 subheading1' 'picture1 subheading1' 'picture2 picture2' 'picture2 picture2' 'subheading2 subheading2';
    }
}

@media (max-width: 767.98px) {
    .homepage-3 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1' 'subheading1 subheading1' 'picture2 picture2' 'picture2 picture2' 'subheading2 subheading2' 'subheading2 subheading2';
    }
}

.homepage-4 {
    grid-template-areas: 'picture1 picture1 picture1 picture1' 'picture1 picture1 picture1 picture1' 'picture1 picture1 picture1 picture1';
}

@media (max-width: 1199.98px) {
    .homepage-4 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1';
    }
}

@media (max-width: 767.98px) {
    .homepage-4 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1';
    }
}

.homepage-5 {
    grid-template-areas: '. . picture1 picture1' '. . picture1 picture1' '. . subheading1 subheading1';
}

@media (max-width: 1199.98px) {
    .homepage-5 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1';
    }
}

@media (max-width: 767.98px) {
    .homepage-5 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1' 'subheading1 subheading1';
    }
}

.homepage-6 {
    grid-template-areas: 'title title . .';
}

@media (max-width: 1199.98px) {
    .homepage-6 {
        grid-template-areas: 'title title';
    }
}

.homepage-7 {
    grid-template-areas: 'picture1 picture1 . .' 'picture1 picture1 . .' 'picture1 picture1 . .' 'subheading1 subheading1 . .' 'picture2 picture2 picture3 picture3' 'picture2 picture2 picture3 picture3' 'subheading2 subheading2 picture3 picture3' '. . subheading3 subheading3';
}

@media (max-width: 1199.98px) {
    .homepage-7 {
        grid-template-areas: 'picture1 subheading1' 'picture1 subheading1' 'picture2 subheading2' 'picture2 subheading2' 'picture3 subheading3' 'picture3 subheading3';
    }
}

@media (max-width: 575.98px) {
    .homepage-7 {
        grid-template-areas: 'picture1 .' 'picture1 .' 'subheading1 subheading1' 'subheading1 subheading1' 'picture2 .' 'picture2 .' 'subheading2 subheading2' 'subheading2 subheading2' 'picture3 .' 'picture3 .' 'subheading3 subheading3' 'subheading3 subheading3';
    }
}

/* .section.homepage-8 {
  grid-auto-rows: calc(13.9vw - 16px);
}

.section.homepage-8 .subheading1 {
  grid-area: subheading1;
  grid-row: span 10;
  overflow: visible;
} */

.homepage-8 {
    grid-template-areas: 'subheading1 subheading1 . .' 'subheading1 subheading1 . .';
}

@media (max-width: 1199.98px) {
    .homepage-8 {
        grid-template-areas: 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1';
    }
}

@media (max-width: 767.98px) {
    .homepage-8 {
        grid-template-areas: 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1';
    }
}

/* .grids-empty {
    grid-template-areas: '. . . .' '. . . .';
} */

.grids-empty {
    grid-template-areas: '. . . .';
}

@media (max-width: 1199.98px) {
    /*     .grids-empty {
            grid-template-areas: '. .' '. .';
        } */
    .grids-empty {
        grid-template-areas: '. .';
    }
}

.section .title {
    grid-area: title;
}

.section .picture1 {
    grid-area: picture1;
}

.section .picture2 {
    grid-area: picture2;
}

.section .picture3 {
    grid-area: picture3;
}

.section .comment {
    grid-area: comment;
}

.section .subheading1 {
    grid-area: subheading1;
}

.section .subheading2 {
    grid-area: subheading2;
}

.section .subheading3 {
    grid-area: subheading3;
}

.bg-header {
    padding-top: 16px;
    margin-top: -16px;
    background-size: cover;
    background-position: center center;
}

.stabeko,
.popup-logo {
    color: #fff;
    font-size: 36px;
    display: inline-block;
    line-height: 0.8;
    transform: translate(-3px, 0px);
    font-weight: 600;
}

.stabeko:hover,
.popup-logo:hover {
    opacity: 0.7;
}

@media (max-width: 767.98px) {
    .stabeko,
    .popup-logo {
        font-size: 28px;
    }
}

.close-popup {
    margin-left: auto;
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: relative;
}

@media (min-width: 1950px) {
    .close-popup {
        width: 48px;
        height: 48px;
    }
}

.close-popup:hover {
    opacity: 0.7;
}

.close-popup:before,
.close-popup:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    display: inline-block;
    transition: 0.3s;
    border-top: 4px solid #ececec;
}

@media (min-width: 1950px) {
    .close-popup:before,
    .close-popup:after {
        width: 48px;
    }
}

.close-popup:before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.close-popup:after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.popup-1 {
    grid-template-areas: 'title . . .' '. . . .' '. . . .' '. . . .';
}

@media (max-width: 1199.98px) {
    .popup-1 {
        grid-template-areas: 'title .' '. .';
    }
}

@media (max-width: 767.98px) {
    .popup-1 {
        grid-template-areas: 'title .' '. .' '. .';
    }
}

.popup-2 {
    grid-template-areas: 'title title title .' 'subheading1 subheading1 . .' 'picture1 picture1 picture1 picture1' 'picture1 picture1 picture1 picture1' 'picture1 picture1 picture1 picture1' 'picture1 picture1 picture1 picture1';
}

@media (max-width: 1199.98px) {
    .popup-2 {
        grid-template-areas: 'title title' 'subheading1 subheading1' 'picture1 picture1' 'picture1 picture1';
    }
}

@media (max-width: 767.98px) {
    .popup-2 {
        grid-template-areas: 'title title' 'title title' 'subheading1 subheading1' 'subheading1 subheading1' 'picture1 picture1' 'picture1 picture1';
    }
}

@media (max-width: 575.98px) {
    .popup-2 {
        grid-template-areas: 'title title' 'title title' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'picture1 picture1' 'picture1 picture1';
    }
}

.popup-3 {
    grid-template-areas: 'picture1 picture1 picture1 picture1' 'picture1 picture1 picture1 picture1' 'picture1 picture1 picture1 picture1' 'picture1 picture1 picture1 picture1';
}

@media (max-width: 1199.98px) {
    .popup-3 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1';
    }
}

.popup-4 {
    grid-template-areas: 'picture1 picture1 picture2 picture3' 'picture1 picture1 picture2 picture3' 'picture1 picture1 subheading1 subheading2';
}

@media (max-width: 1199.98px) {
    .popup-4 {
        grid-template-areas: 'picture1 .' 'picture1 .' 'picture2 picture3' 'picture2 picture3' 'subheading1 subheading2';
    }
}

@media (max-width: 767.98px) {
    .popup-4 {
        grid-template-areas: 'picture1 .' 'picture1 .' 'picture2 picture3' 'picture2 picture3' 'subheading1 subheading2' 'subheading1 subheading2';
    }
}

@media (max-width: 575.98px) {
    .popup-4 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1' 'picture2 picture3' 'picture2 picture3' 'subheading1 subheading2' 'subheading1 subheading2';
    }
}

.popup-5 {
    grid-template-areas: '. picture1 picture1 picture1' '. picture1 picture1 picture1' '. picture1 picture1 picture1';
}

@media (max-width: 1199.98px) {
    .popup-5 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1';
    }
}

.popup-6 {
    grid-template-areas: 'picture1 picture1 picture2 picture2' 'picture1 picture1 picture2 picture2' 'picture1 picture1 picture2 picture2';
}

@media (max-width: 1199.98px) {
    .popup-6 {
        grid-template-areas: 'picture1 picture2' 'picture1 picture2';
    }
}

@media (max-width: 575.98px) {
    .popup-6 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1' 'picture2 picture2' 'picture2 picture2';
    }
}

.popup-7 {
    grid-template-areas: 'title title subheading1 subheading1' 'title title subheading1 subheading1';
}

@media (max-width: 1199.98px) {
    .popup-7 {
        grid-template-areas: 'title title' 'subheading1 subheading1' 'subheading1 subheading1';
    }

    .popup-7.no-right-col {
        grid-template-areas: 'title title';
    }
}

@media (max-width: 767.98px) {
    .popup-7 {
        grid-template-areas: 'title title' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1';
    }

    .popup-7.no-right-col {
        grid-template-areas: 'title title' 'title title';
    }
}

@media (max-width: 575.98px) {
    .popup-7 {
        grid-template-areas: 'title title' 'title title' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1';
    }

    .popup-7.no-right-col {
        grid-template-areas: 'title title' 'title title' 'title title';
    }
}

.content-1 {
    grid-template-areas: '. . . .' 'title title title .' 'comment . . .' '. . . .' '. . . .';
}

@media (max-width: 1199.98px) {
    .content-1 {
        grid-template-areas: '. .' 'title title' 'comment comment' 'comment comment' '. .';
    }
}

@media (max-width: 575.98px) {
    .content-1 {
        grid-template-areas: '. .' 'title title' 'title title' 'comment comment' 'comment comment' '. .';
    }
}

.content-2 {
    grid-template-areas: '. . . .' 'title title picture1 picture1' 'subheading1 subheading1 picture1 picture1' 'subheading1 subheading1 picture1 picture1';
}

@media (max-width: 1199.98px) {
    .content-2 {
        grid-template-areas: '. .' 'title title' 'subheading1 picture1' 'subheading1 picture1' 'subheading1 .';
    }
}

@media (max-width: 991.98px) {
    .content-2 {
        grid-template-areas: '. .' 'title title' 'subheading1 picture1' 'subheading1 picture1' 'subheading1 .' 'subheading1 .' 'subheading1 .';
    }
}

@media (max-width: 767.98px) {
    .content-2 {
        grid-template-areas: '. .' 'title title' 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1';
    }
}

@media (max-width: 575.98px) {
    .content-2 {
        grid-template-areas: '. .' 'title title' 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1';
    }
}

.content-3 {
    grid-template-areas: '. . . .' '. picture1 picture1 picture1' '. picture1 picture1 picture1' '. picture1 picture1 picture1' '. picture1 picture1 picture1' '. subheading1 subheading1 .' '. subheading1 subheading1 .' '. subheading1 subheading1 .';
}

@media (max-width: 1199.98px) {
    .content-3 {
        grid-template-areas: '. .' 'picture1 picture1' 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1' 'subheading1 subheading1';
    }
}

@media (max-width: 767.98px) {
    .content-3 {
        grid-template-areas: '. .' 'picture1 picture1' 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1' 'subheading1 subheading1';
    }
}

@media (max-width: 575.98px) {
    .content-3 {
        grid-template-areas: '. .' 'picture1 picture1' 'picture1 picture1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1' 'subheading1 subheading1';
    }
}

.wrapper.hidden {
    transition: opacity 0.5s ease;
    opacity: 0;
}

.wrapper.visible {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.popup {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.popup.active {
    opacity: 1;
    z-index: 1050;
    pointer-events: initial;
    overflow: unset;
}

.popup .popup-top {
    background: #fff;
}

.modal-close {
    height: 100vh;
    margin-top: -16px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
}

.modal-close .to-review {
    font-size: 20px;
    font-weight: bold;
    display: block;
    color: #fff;
    transition: top 0.3s ease;
}

@media (min-width: 1950px) {
    .modal-close .to-review {
        font-size: 1.053vw;
    }
}

#popup .modal-dialog {
    max-width: 100%;
    margin: 0;
}

#popup .modal-dialog .modal-content {
    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 100vh;
    position: relative;
}

#popup .modal-dialog .modal-content .close-popup {
    position: fixed;
    top: 16px;
    right: 46px;
    z-index: 3;
}

#popup .modal-dialog .modal-content .close-popup:before,
#popup .modal-dialog .modal-content .close-popup:after {
    border-color: #000;
}

/*# sourceMappingURL=style.css.map */


.image-4-2 {
    grid-template-areas: 'picture1 picture1 picture1 picture1' 'picture1 picture1 picture1 picture1';
}

@media (max-width: 1199.98px) {
    .image-4-2 {
        grid-template-areas: 'picture1 picture1';
    }
}

.lt-2-2-t-rb-2-2 {
    grid-template-areas: 'title title picture1 picture1' 'title title filler filler';
}

@media (max-width: 1199.98px) {
    .lt-2-2-t-rb-2-2 {
        grid-template-areas: 'title title title title' 'picture1 picture1 picture1 picture1';
    }
}

@media (max-width: 767.98px) {
    .lt-2-2-t-rb-2-2 {
        grid-template-areas: 'title title' 'title title' 'picture1 picture1 ';
    }
}

@media (max-width: 500px) {
    .lt-2-2-t-rb-2-2 {
        grid-template-areas: 'title title' 'title title' 'title title' 'title title' 'picture1 picture1 ';
    }
}


.lt-2-2-rb-2-2 {
    grid-template-areas: 'picture1 picture1 picture2 picture2' 'picture1 picture1 picture2 picture2';
}

@media (max-width: 1199.98px) {
    .lt-2-2-rb-2-2 {
        grid-template-areas: 'picture1 picture1' 'picture1 picture1' 'picture2 picture2' 'picture2 picture2';
    }
}

.m-2-2 {
    grid-template-areas:
        '. picture1 picture1 .'
        '. picture1 picture1 .'
}

@media (max-width: 1199.98px) {
    .m-2-2 {
        grid-template-areas:
        'picture1 picture1'
        'picture1 picture1'
    }
}

.image-4-5 {
    grid-template-areas:
        'picture1 picture1 picture1 picture1'
        'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
}

@media (max-width: 1199.98px) {
    .image-4-5 {
        grid-template-areas:
        'picture1 picture1 picture1 picture1'
        'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    }
}

@media (max-width: 767.98px) {
    .image-4-5 {
        grid-template-areas:
        'picture1 picture1 picture1 picture1'
        'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    }
}


.image-4-9 {
    grid-template-areas:
        'picture1 picture1 picture1 picture1'
        'picture1 picture1 picture1 picture1'
        'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
}

@media (max-width: 1199.98px) {
    .image-4-9 {
        grid-template-areas:
        'picture1 picture1 picture1 picture1'
        'picture1 picture1 picture1 picture1'
        'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    'picture1 picture1 picture1 picture1'
    }
}