:root {
    /*--slickContent-color: radial-gradient(circle at 0% 0%, #d8d6de, #d2d0d6);*/
    --slickContent-color: #d2d0d6;
    --color-lenear: 0 1px 0 0 #988fa8, 0 2px 0 0 #ffffff, 0 1px 0 0 #988fa8 inset, 0 2px 0 0 #fff inset;
    --hex-opacity: url(/images/svg/hex_opacity_light.svg);
    --slick-shadow: 0 -1px 0 #a29fa6, 0 -2px 0 #dedede, 0 10px 10px #98969c30 inset, 0 -1px 0 0 #ebe5f5 inset, 0 5px 15px 0 #dedce36b;
    --rewind-butt-bg: rgb(153 148 162);
    --rewind-butt-bg-hover: rgb(186 181 197);
    --rewind-butt-shadow: 1px 1px 2px #585461 inset, 1px 1px 0 #e4e3e8;
    --rewind-butt-shadow-active: 0px 0px 3px #7c57d6;
    --rewind-butt-active-bg: linear-gradient(-45deg, rgb(147 124 194), rgb(194 183 217));
    --rewind-butt-active-shadow: 1px 1px 3px 1px #544973;
    --indicate-bg: #c8b9d2;
}


:root[data-color-scheme="dark"] {
    --slickContent-color: #312d3b;
    --color-lenear: 0 1px 0 0 #322f37, 0 2px 0 0 #575761, 0 1px 0 0 #322f37 inset, 0 2px 0 0 #575761 inset;
    --hex-opacity: url(/images/svg/hex_opacity_dark.svg);
    --slick-shadow: 0 -1px 0 #26232b, 0 10px 10px #29262e96 inset, 0 -1px 0 0 #6b6772 inset, 0 5px 15px 0 #504a5f6b;

    --rewind-butt-bg: rgb(41 37 49);
    --rewind-butt-bg-hover: rgb(63, 58, 74);
    --rewind-butt-shadow: 1px 1px 2px #1d1928 inset, 1px 1px 0 #66626f;
    --rewind-butt-shadow-active: 0px 0px 3px #8679a5;
    --rewind-butt-active-bg: linear-gradient(-45deg, rgb(107 79 166), rgb(140 128 166));
    --rewind-butt-active-shadow :1px 1px 3px 1px #1e1c24;
    --indicate-bg:#45374f;

}
header.main-header ul {
    margin-left: calc(10% + 112px);
}
main{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 300px auto;
    /* position: relative; */
}
#slickContent{
    display: flex;
    background: var(--slickContent-color);
    box-shadow: var( --slick-shadow);
    width: 100%;
    position: absolute;
    left: 0;
    min-height: 300px;
}
main #email-service {
    grid-column: 2/-1;
    grid-row: 1;
    align-content: center;
    /* box-sizing: border-box; */
    padding: 0;
    background: radial-gradient(circle at 0 0, rgb(255 255 255 / 25%) calc(var(--wigth-logo-rad) + 1px), rgba(0, 0, 0, 0) calc(var(--wigth-logo-rad) + 1px)), linear-gradient(325deg, hsl(0deg 0% 100% / 5%), transparent);
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    z-index: 21;
    touch-action: pan-y;
}

.slide {
    /* background: url("/images/pr.jpg"); */
    text-align: right;
    display: inline-block;
    /* width: 100%; */
    flex: 0 0 100%;
    white-space: normal;
    box-sizing: border-box;
    /* height: 100%; */
    padding: 10px;
    /* border: 1px solid #000; */
    /* text-align: center; */
    margin: 0;
    box-sizing: border-box;
}

#slidenum {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column: 1/-1;
    background: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 1300px;
}

#slider{
    display: flex;
    align-items: center;
}
#descriptions {
    grid-row: 2;
    grid-column: 1/3;
    padding: 100px 70px 0 0;
    /* background-position: right; */
}

.liner {
    box-shadow: var(--color-lenear), 4px 0 0 0 hsl(267.03deg 47.64% 45.69%) inset;
    padding: 15px 0 12px 20px;
    background: linear-gradient(90deg, hsl(267.03deg 47.64% 45.69% / 14.12%) 0%, transparent 100%);
}

#tile {
    display: grid;
    grid-template-columns: 180px 180px;
    margin-top: -30px;
    /* grid-template-rows: repeat(3, 250px); */
    grid-auto-rows: 250px;
    line-height: 22px;
    grid-row: 2;
    grid-column: 3;
    justify-items: end;
    justify-self: end;
    /* align-self: baseline; */
    /* transform: scale(0.70); */
}

#tile article {
    background: var(--hex-opacity);
    height: 300px;
    width: 300px;
    box-sizing: border-box;
    align-content: center;
    padding: 0 30px;
    text-align: center;
    color: #7c7684;
    backdrop-filter: blur(2px);
}

#tile article p {
    font-weight: 300;
    font-size: 16px;
    grid-column: 2;
    line-height: 20px;
}

article h3 {
    font-weight: normal;
    /* box-shadow: 0 1px 0 0 #67626b, 0 2.5px 0 0 #3b3841; */
    text-align: center;
    padding-bottom: 20px;
    margin: 0 10px;
    font-size: 20px;
}

article img {
    width: 100px;
    height: auto;
}

#hex1 {
    grid-column: 2;
    grid-row: 1;
}

#hex2 {
    grid-column: 1;
    grid-row: 2;
}

#hex3 {
    grid-row: 3;
    grid-column: 2;
}

#rewind {
    align-self: center;
    margin-left: 235px;
    /* margin-top: 100px; */
    grid-row: 1;
    grid-column: 1;
    z-index: 1;
}

#rewind button {
    margin-top: 1.5em;
    display: block;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    background: var(--rewind-butt-bg);
    box-shadow: var(--rewind-butt-shadow);
    transition: background .3s, box-shadow .3s;
}

#rewind button:hover{
    background: var(--rewind-butt-bg-hover);
}

#rewind button:active {
    box-shadow: var(--rewind-butt-shadow-active);
}
#rewind button.active {
    background: var( --rewind-butt-active-bg);
    box-shadow: var(--rewind-butt-active-shadow);
}

/* Хексы */
#hex-gradient {
    --color-stop: #8a879530;
    --color-bot: transparent;
}

#hex-stroke {
    --color-stop: #ffffff3b;
    --color-bot: #2e2c3387;
}
.indicate{
    background-color: var(--indicate-bg);
    padding: 2px 5px 2px 5px;
}


@media screen and (max-width: 1300px) {
    #slidenum {
        /* display: grid; */
        background: var(--body-color);
        box-shadow: 0 -1px var(--body-color-top-line), 0 1px var(--body-color-bottom-line), 0 5px 3px var(--body-color-bottom-shadow);
    }

    #descriptions {
        padding: 100px 70px 0 10px;
    }
}

@media screen and (max-width: 1220px) {
    #rewind {
        margin-left: 126.5px;
        margin-top: 0px;
    }

    main {
        grid-template-columns: 1fr repeat(2, 2fr);
        /* grid-template-rows: 250px auto; */
    }

}

@media screen and (max-width: 1000px) {
    #tile {
        transform: scale(0.70);
        align-self: start;
        justify-self: center;
        /* margin-top: -140px; */
        justify-items: center;
    }

    #descriptions {
        padding: 50px 0 0 10px;
    }
}

@media screen and (max-width: 850px) {
    main #email-service {
        grid-column: 1/-1;
    }
    #rewind {
        grid-row: 1;
        grid-column: 1/-1;
        justify-self: center;
        margin-left: 0;
        align-self: end;
        margin-bottom: -5px;
        display: grid;
        grid-auto-flow: column;
        column-gap: 30px;
        margin-bottom: -50px;
    }

    #rewind button {
        display: inline-block;
    }

    main {
        grid-template-rows: 300px auto auto;
    }

    .slide p {
        text-align: justify;
    }

    #descriptions {
        grid-row: 3;
        padding: 0 10px 20px 10px;
        grid-column: 1/-1;
    }

    #tile {
        grid-column: 1/-1;
        transform: scale(0.70);
        display: flex;
        margin-top: 45px;
    }
    a.cent{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: max-content;
    }
}

@media screen and (max-width: 600px) {
    #tile {
        transform: scale(0.60);
        display: grid;
        grid-template-columns: repeat(3, 200px);
        grid-template-rows: repeat(2, 200px);
        place-items: center;
    }

    #hex1 {
        grid-column: 2;
        grid-row: 1;
    }

    #hex2 {
        grid-column: 1;
        grid-row: 2;
    }

    #hex3 {
        grid-row: 2;
        grid-column: 3;
    }
}

@media screen and (max-width: 450px) {
    main {
        grid-template-rows: 340px 420px max-content;
    }

    #tile {
        justify-self: center;
        margin-top: 0px;
        transform: scale(0.60);
        display: grid;
        grid-template-columns: repeat(3, 140px);
        grid-template-rows: repeat(2, 240px);
    }

    #hex1 {
        grid-column: 1;
        grid-row: 2;
    }

    #hex2 {
        grid-column: 2;
        grid-row: 1;
    }

    #hex3 {
        grid-column: 3;
        grid-row: 2;
    }
}



/*фцкп кп цкпцук кп цккпфцупцу*/