:root {
    --border-radius-vg: 4px;
    --gray-color-vg: #ccc;
    --gray2-color-vg: #e3e3e3;
    --blue-color-vg: #219cd7;
    --black-color-vg: #000;
    --black-light-color-vg: #2C2C2C;
    --white-color-vg: #fff;
    --yellow-color-vg: #f0c040;
    --yellow-light-color-vg: #FFF2E2;
}
.block01 {
    /* background-image: radial-gradient(circle farthest-corner at 3.2% 49.6%, rgb(228 8 126) 0%, rgb(33 157 215) 80%); */
    border: 1px solid var(--gray-color-vg);
    border-radius: var(--border-radius-vg);
}

.block01 h2 {
    color: var(--black-color-vg);
    font-weight: 400;
}

.block01 select {
    border-radius: var(--border-radius-vg);    
}

.block02-fluid {
    /* background-color: var(--black-color-vg);s */
    padding-top: 60px;
    padding-bottom: 60px;
}

.block02-fluid h2.card-title {
    margin-bottom: 30px;
    font-weight: 400;
}

.block02-fluid p.card-text {
    margin-bottom: 30px;
}

.stack-cards {
  --stack-cards-gap: 1rem; 
}


.ideas-container .card {
    border: none;
    max-width: 420px;
}

.ideas-container .card-img-top {
    border-radius: 0;
    max-width: 400px;
    object-fit: cover;
}

.videos-container .card {
    border: none;
}
.videos-container iframe{
    width: 100%;
    min-height: 300px;
    height: 500px;
}

.videos-container h5.card-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #282828;
}

.videos-container h2 {
    font-weight: 700 !important;
    font-size: 65px !important;
    line-height: 76px !important;
    color: var(--black-color-vg) !important;
}



/* SELECTOR */

/* Slide In */
.animate { animation-name: animate-slide; }
  
  @keyframes animate-slide {
    0% {
      opacity: 0;
      transform: translate(0, 20px);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }

.animate {
    animation-name: animate-slide;
}

.qblock {
    display: none;
    opacity: 0;
    margin-bottom: 2rem;
    /* scroll-margin: 140px; */
}

.visblock {
    display: block !important;
    opacity: 1 !important;
}

.mb-8rem {
    margin-bottom: 4rem;
}

.core-block h1 {

    font-style: normal;
    font-weight: 700;
    font-size: 65px;
    line-height: 76px;

    color: var(--black-color-vg)

}

.core-block h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 47px;

    color: var(--black-color-vg);

}

.core-block h5 {

    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: 0.03em;

    color: var(--black-light-color-vg);
}

.core-block h3 {

font-weight: 600;
font-size: 24px;
line-height: 150%;
letter-spacing: 0.03em;

color: var(--black-light-color-vg);


}


.where-col figure {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.where-col figure, .where-col figure svg, .where-col figure svg rect{
    width:100px;
    height:60px;
}

.where-col figure:hover {
    transform: scale(1.05);
}

.where-col figure svg text{
  text-anchor: middle;
  dominant-baseline: middle;
}

.where-col figure svg rect {
    fill: var(--blue-color-vg);
    transition: all 0.3s ease-in-out;
}

.where-col figure svg text {
    fill: var(--white-color-vg);
}

.where-col.active figure rect {
    fill: var(--yellow-color-vg);
}
.where-col.active figure svg text {
    fill: var(--black-color-vg);
}

.blue-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 36px;
    gap: 10px;
    border: 1px solid #121212;
    border-radius: 90px;
    background: transparent;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.blue-button:hover {
    background-color: #040404;
    color: #fff;
}

.where-col.active .blue-button, .what-col.active .blue-button, .shine-col.active .blue-button {
    background-color: #040404;
    color: #fff;
}


.what-col figure {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.what-col figure, .what-col figure svg, .what-col figure svg rect{
    width:100px;
    height:60px;
}

.what-col figure:hover {
    transform: scale(1.05);
}

.what-col figure svg text{
  text-anchor: middle;
  dominant-baseline: middle;
}

.what-col figure svg rect {
    fill: var(--blue-color-vg);
    transition: all 0.3s ease-in-out;
}

.what-col figure svg text {
    fill: var(--white-color-vg);
}

.what-col.active figure rect {
    fill: var(--yellow-color-vg);
}
.what-col.active figure svg text {
    fill: var(--black-color-vg);
}


.shine-col figure {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.shine-col figure, .shine-col figure svg, .shine-col figure svg rect{
    width:100px;
    height:60px;
}

.shine-col figure:hover {
    transform: scale(1.05);
}

.shine-col figure svg text{
  text-anchor: middle;
  dominant-baseline: middle;
}

.shine-col figure svg rect {
    fill: var(--blue-color-vg);
    transition: all 0.3s ease-in-out;
}

.shine-col figure svg text {
    fill: var(--white-color-vg);
}

.shine-col.active figure rect {
    fill: var(--yellow-color-vg);
}
.shine-col.active figure svg text {
    fill: var(--black-color-vg);
}

.sresult {
    display: flex;
}
.sresult-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: #898989;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}
.sresult__item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 22px;
    gap: 10px;

    background: #F2F2F2;

}

.docs__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 50px;
}
.docs__card {
    text-decoration: none;
}

.docs-container .docs-card__content h3 {
 
font-weight: 800;
font-size: 24px;
line-height: 150%;
letter-spacing: 0.03em;
text-transform: uppercase;

color: var(--black-light-color-vg);

margin: 0.8rem 0 0.8rem 0;

}

.docs-card__content p {

font-weight: 400;
font-size: 14px;
line-height: 140%;
letter-spacing: 0.05em;
text-transform: uppercase;

color: #282828;


}


.guide__cards {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 10px; 
    scroll-snap-type: x mandatory; 
    user-select: none;
}

.guide-card__img, .guide-card__img img {
    width: 210px;
    object-fit: cover;
    height: auto;
}
.guide-card__content {
    padding: 20px;
}

.catalogs-container .guide-card__content h3 {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: #282828;
}

.docs-container h2 {

font-weight: 700;
font-size: 65px;
line-height: 76px;


color: var(--black-color-vg);


}

.docs-container h3, .catalogs-container h3 {

    font-weight: 700;
    font-size: 40px;
    line-height: 47px;

    color: var(--black-color-vg);

}

.home-product__content h3 {

    font-weight: 600;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0.03em;

    /* Черный/d4u asphalt */
    color: var(--black-light-color-vg);
}


.catalogs-container {
    /* background-image: url('../i/catalogs_back.webp');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover; */
}



.guide__cards {
    display: flex;
    overflow-x: scroll;
    gap: 20px;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    padding-top:20px;
    padding-bottom:20px;
}

.guide__cards-wrapper {
  display: flex;
  gap: 16px;
  margin: 0 auto; 
  min-width: fit-content;
}

.guide-card__img img, .guide-card__img img {
    transition: all 0.3s ease;
    transform: scale(0.9);
    cursor: pointer;
}

.guide-card__img:hover img {
    transition: all 0.3s ease !important;
    transform: scale(1.0) !important;
}

.guide-card__img.active {
    transition: all 0.3s ease;
    transform: scale(1.0) !important;
    border-radius: 4px;
    background-color: #e6e6e6;
}


.guide-card__img, .guide-card__img img {
    width: 180px;
    min-width: 180px;
    object-fit: cover;
    height: auto;
}

.catalog-caption {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #282828;
}


.colorsquare {
    min-width: 100px;
    min-height: 100px;
    width: 100px;
    height: 100px;
    transition: transform .3s ease;

    display: flex;
    justify-content: center;
    flex-direction: column;

    border-radius: 4px;
}

.colorsquare:hover {
    transform: scale(1.1);
}


#gridarea {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0;
    margin-bottom: 5rem;
}

#gridarea a {
    padding: 0; 
}


@media (min-width: 768px) {
    .stack-cards__item {
        position: relative;
        position: -webkit-sticky;
        position: sticky;
        top: calc(1.25 * 1.25em);
        height: 0;
        min-height: 330px;
        padding-bottom: 50%;
        -webkit-transform-origin: center top;
                transform-origin: center top;
        overflow: hidden; 
    }
    .stack-cards__item > * {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
    }

    .stack-cards__item img {
        max-width: 300px;
        object-fit: cover; 
        height: 100%;
    }

    .submit-col {
        align-self: end;
        position: relative;
        top: -16px;
    }

    .where-col figure, .where-col figure svg, .where-col figure svg rect{
        width:200px;
        height:60px;
    }

    .what-col figure, .what-col figure svg, .what-col figure svg rect{
        width:200px;
        height:60px;
    }

    .shine-col figure, .shine-col figure svg, .shine-col figure svg rect{
        width:200px;
        height:60px;
    }

    .container {
        max-width: 945px !important;
    }

    .docs__cards {
        grid-template-rows: repeat(auto, 1fr);
    }       
    .docs-card__img {
        /* height: 232px; */
    }
    .docs-card__content {
        /* padding: 60px 99px 42px 37px; */
    }

    .guide__cards {
        /* display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        padding-top: 50px; */
    } 

    .colorsquare {
        min-width: 160px;
        min-height: 160px;
        width: 160px;
        height: 160px;
        border-radius: 8px;
    }

}