:root{
    --primary-color: #F2D5BE;
    --secondary-color: #5c3b20;
    --c-color-menu-background: #F5F1EA;
    --c-color-hero-title: var(--primary-color);/*#F2D5BE;*/
    --c-color-hero-sutitle: white;
    --c-color-feature-bg: #F8F5F0;
    --c-color-feature-title: #876345;
    --c-color-footer: #2D2D2D;
    --c-color-portfolio-bg: var(--c-color-feature-bg);
    --c-color-teastimonial-bg: var(--c-color-feature-bg);
}

.mean-container .mean-bar::before {
    content: url('images/logo.svg');
    width: 6rem;
}

.header-area{
    background: var(--c-color-menu-background)!important;
}

.hero-area {
    background-image: url(images/img.png);
}

.hero-content :is(h1,.h1) {
    color: var(--c-color-hero-title);
}

.hero-content :is(h2,.h2) {
    color: var(--c-color-hero-sutitle);
}

.hero-content {
    --body-color: var(--c-color-hero-sutitle);
}

.hero-thumb-2 {
    bottom: auto;
    top: 210px;
}

.section-title :is(h1,.h1){
    font-size: 42px;
    line-height: 42px;
    color: var(--secondary-color);
    font-weight: 500;

    font-family: var(--title-fonts);
    font-style: normal;
}

.single-feature-box {
    background: var(--c-color-feature-bg);
    --secondary-color: var(--c-color-feature-title);
}

.portfolio-area {
    background: var(--c-color-portfolio-bg);
}
.portfolio-area.c-portfolio-area {
    margin-top: 0;
    padding-top: 120px;
}
.single-portfolio-box .portfolio-thumb :is(img,svg){
    border-radius: 10px 10px 0 0;
}

.portfolio-area.style-two .single-port-box .single-port-thumb img{
    aspect-ratio: 581 / 450;
    object-fit: cover;
}

.single-teastimonial-area {
    background: var(--c-color-teastimonial-bg);
}
.single-teastimonial-area.c-single-teastimonial-area-novideo {
    margin-top: 0;
    padding-top: 0;
}

.single-teastimonial-area:not(.c-single-teastimonial-area-novideo) :is(.teasti-shape,.teasti-shape-2) {
    bottom: 16%;
}

.footar-area {
    margin-top: 0;
    background: var(--c-color-footer);
    padding-top: 64px;
    --body-color:white;
    color: var(--body-color);
}

/* COLOR THEME */
.single-feature-box:before {
    background: var(--primary-color);/*#0a132e;*/
}
.portfolio-area.style-two .port-icon {
    background: var(--secondary-color);/*#0a132e;*/
}
.footar-area .row.add-bg {
    background: var(--c-color-footer);/*#172140;*/
}

a,
.portfolio-content a {
    color: var(--secondary-color);/*#012549;*/
}

p.footer-desc,
.footar-area a,
.footer-bottom-content ul li a {
    color: var(--body-color);
}


/* POP UP CATALOG */

.popup_catalog {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    z-index: 1000
}

.popup_catalog .popup_catalog2 {
    width: 90%;
    background: #24262E;
    margin: 0 auto;
    position: absolute;
    left: 5%;
    top: 5%;
    height: 90%;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 0 21px 4px #212121
}

.popup_catalog .thumbnavigator {
    width: 248px;
    height: calc(100% - 24px);
    float: left;
    overflow-y: scroll;
    margin-top: 12px
}

.popup_catalog .thumbnavigator::-webkit-scrollbar {
    display: none
}

.popup_catalog .thumbnavigator .img {
    margin-left: 14px;
    float: left;
    margin-top: 12px;
    cursor: pointer;
    width: 99px;
    height: 99px;
    position: relative;
    text-align: center;
    border: #000 2px solid
}

.popup_catalog .thumbnavigator .img:nth-child(1),.popup_catalog .thumbnavigator .img:nth-child(2) {
    margin-top: 0
}

.popup_catalog .thumbnavigator .img.active .bg {
    background: url('../img/t01.png') no-repeat;
    background-size: 100% 100%;
    top: 0;
    left: 0;
    width: 97px;
    height: 97px;
    border: #fff 1px solid;
    background-position: 50% 50%;
    position: absolute
}

.popup_catalog .thumbnavigator .img:hover .bg {
    background: url('../img/t01.png') no-repeat;
    background-size: 100% 100%;
    top: 0;
    left: 0;
    width: 97px;
    height: 97px;
    border: #fff 1px solid;
    background-position: 50% 50%;
    position: absolute
}

.popup_catalog .thumbnavigator .img img {
    max-height: 100%;
    max-width: 100%
}

.popup_catalog .thumbnavigator2 {
    width: 254px;
    float: left
}

.popup_catalog .thumbnavigator2 .colors {
    margin-top: 12px;
    overflow-y: scroll;
    height: calc(100% - 24px)
}

.popup_catalog .thumbnavigator2 .colors::-webkit-scrollbar {
    display: none
}

.popup_catalog .thumbnavigator2 .block {
    margin-left: 14px;
    float: left;
    margin-top: 12px;
    position: relative;
    text-align: center;
    width: 102px
}

.popup_catalog .thumbnavigator2 .block:nth-child(1),.popup_catalog .thumbnavigator2 .block:nth-child(2) {
    margin-top: 0
}

.popup_catalog .thumbnavigator2 .block:nth-child(2n+1) {
    clear: both
}

.popup_catalog .thumbnavigator2 .img {
    width: 99px;
    height: 80px;
    text-align: center
}

.popup_catalog .thumbnavigator2 .img img {
    max-height: 100%;
    max-width: 100%
}

.popup_catalog .thumbnavigator2 .nazov {
    color: #eeeeee;
    margin-top: 2px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto
}

.popup_catalog .main-image {
    width: calc(100% - 502px);
    float: left;
    text-align: center;
    position: relative;
    height: calc(100% - 24px);
    margin-top: 12px
}

.popup_catalog .main-image .img {
    height: 100%;
    text-align: center;
    width: 100%;
    display: block
}

.popup_catalog .main-image .img-block {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.popup_catalog .main-image .img-block:first-child {
    display: block
}

.popup_catalog .colors {
    display: none;
    position: absolute;
    top: 0
}

.popup_catalog .colors:first-child {
    display: block
}

.popup_catalog .main-image img {
    max-width: 100%;
    max-height: 96%
}

/* HERO
www/components/front/mas/animations/mas-animation-scale.css
CUSTOM
*/
@keyframes animationScale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
.mas-animation-scale{
    transform: scale(0);
}
.mas-animate .mas-animation-scale{
    animation: 1s ease-in 0s 1 animationScale forwards;
}
.row.mas-animate:not(.mas-animate-done) > :nth-of-type(2) .mas-animation-scale{
    animation-delay: 0.25s;
}
.row.mas-animate:not(.mas-animate-done) > :nth-of-type(3) .mas-animation-scale{
    animation-delay: 0.50s;
}
.row.mas-animate:not(.mas-animate-done) > :nth-of-type(4) .mas-animation-scale{
    animation-delay: 0.75s;
}
.row.mas-animate:not(.mas-animate-done) > :nth-of-type(5) .mas-animation-scale{
    animation-delay: 1.00s;
}

.row.mas-animate > :nth-of-type(n+6){
    display: none;
}