:root {
    --butik-primary: #757474;
    --butik-primary-rgb: 29, 41, 77;
    --butik-secondary: #a3a2a2;
    --butik-secondary-light: rgba(189, 188, 188, 0.82);
    --butik-blue-light: rgba(220, 218, 218, 0.68);
}


.header {
    /*backdrop-filter: blur(20px);*/
    /*background-color: transparent;*/
}


.home-buttons-shine {
    animation-name: anim-pivot-up;
    animation-duration: 500ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    backface-visibility: hidden;
    display: flex;
    --delay: 100ms;
    text-align: center;
}
@keyframes anim-pivot-up {
    from {transform: rotateX(-110deg);}
    to {transform: rotateX(0deg);}
}

ol, ul {
    padding-left: 1rem;
}

.rounded-45 {border-radius: 1.45rem !important;}
.border-blue-light {border-color: var(--butik-blue-light);}
.text-blue-light {color: rgb(117, 116, 116);}
.text-pink-light {color: rgb(213, 147, 166);}
.bg-blue-light {background-color: var(--butik-blue-light);}
.bg-blue-light2 {background-color: rgba(180, 215, 253, 0.3);}

.btn-white-blur {
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    font-size: 1.05rem;
    width: 250px;
    transition: all .1s ease-in;
    &:hover {
        font-size: 1.1rem;
        border-color: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(20px);
        width: 280px;
    }
}
.btn-primary-blur {
    backdrop-filter: blur(15px);
    background-color: rgba(var(--butik-primary-rgb), 1) !important;
    border: none;
    color: #ffffff;
    font-size: 1.05rem;
    width: 250px;
    transition: all .2s ease-in;
    &:hover {
        backdrop-filter: blur(20px);
        width: 300px;
    }
}

.btn-white-blur.border-light {
    border-color: rgba(255, 255, 255, 1) !important;
}
.btn-card-bottom-left {
    width: auto !important;
    position: absolute;
    bottom: 80px;
    left: 100px;
    z-index: 13;
    &:hover {
        font-size: 150% !important;
    }
}
.btn-card-bottom-center {
    width: auto !important;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 13;
    &:hover {
        font-size: 150% !important;
    }
}

.bg-white-25 {background-color: rgba(255, 255, 255, .1) !important;}

.blur {
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.4) !important;
}
.blur5 {backdrop-filter: blur(5px);}
.blur10 {backdrop-filter: blur(10px);}
.blur15 {backdrop-filter: blur(15px);}
.blur20 {backdrop-filter: blur(20px);}
.outline-white-15 {
    border-width: 1px;
    border-style: solid;
    /*outline-color: color-mix(in oklab, #ffffff 15%, transparent);*/
    border-color: rgba(255, 255, 255, 0.2);
    /*border: none;*/
    /*border-radius: 10px !important;*/
}

.border-white-15, .border-white-30, .border-white-75 {
    border-width: 1px;
    border-style: solid;
}
.border-white-15 {border-color: rgba(255, 255, 255, 0.15);}
.border-white-30 {border-color: rgba(255, 255, 255, 0.3);}
.border-white-75 {border-color: rgba(255, 255, 255, 0.75);}
.bg-1 {

    background-image: url("/files/media/1.jpg");
    background-size: cover;
    width: 100%;
    height: auto;
}
.bg-2 {
    /*background-image: url(/img/bg2.jpg);*/
    /*background-repeat: no-repeat;*/
    /*background-size: contain;*/
}
.bg-grad-1 {background-image: linear-gradient(to bottom, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 100%);}
.text-shadow-1 {text-shadow: 1px 1px 3px #000;}

.animate_zoom_45 {
    animation: animate_zoom_45 45s infinite;
}
@keyframes animate_zoom_45 {
    0% {transform: scale(1) translateX(0);}
    50% {transform: scale(1.5) translateX(80px);}
    100% {transform: scale(1) translateX(0);}
}

.breadcrumb li a {
    color: var(--butik-secondary);
}
.breadcrumb li a:hover {
    color: var(--butik-primary);
}

.topblock {
    position: relative;
    height: auto;
    /*padding-top: 100px;*/
    overflow: hidden;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.topblock .t1 {
    position: absolute;
    top: 170px;
    width: 100%;
    z-index: 11;
    margin-left: 80px;
    text-transform: uppercase;
}
.topblock .t1 h3 {
    font-weight: 900 !important;
}
.topblock .t2 {
    position: absolute;
    top: 240px;
    width: 100%;
    z-index: 11;
    margin-left: 110px;
    text-transform: uppercase;
}
.topblock .e1 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25vh;
    background-color: #1d294d;
    color: #ffffff;
    z-index: 10;
    transition: all .3s ease;
}
.box-shadow-100 {
    box-shadow: 0 0 100px #c3d6ff;
    height: 26vh !important;
}
.topblock .e2 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 75vh;
    background-image: url(/img/stuff.webp);
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 2;
}
.topblock .e3 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 75vh;
    background-image: url(/img/bgtop.webp);
    background-repeat: no-repeat;
    background-position: calc(50% + 30px) bottom;
    background-size: contain;
    z-index: 1;
}
.topblock .e4 {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 100px;
    width: 70%;
    height: 20vh;
    /*background-color: rgba(255, 255, 255, 1);*/
    z-index: 11;
}
@media (max-width: 1440px) {
    .topblock .e2 {
        background-size: 65%;
    }
    .topblock .e3 {
        background-size: 115%;
    }
}

@media (min-width: 1400px) and (max-width: 1920px) {
    .topblock .t1 {
        top: 100px;
        margin-left: 80px;
    }
    .topblock .t2 {
        top: 170px;
        margin-left: 110px;
    }
    .topblock .e1 .c-list * {
        font-size: 1.4rem !important;
    }
    .scene1 .i1 {
        height: calc(80% - 50px);
    }
}

.btn-main-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-45px);
    background-color: #1d294d;
    padding: 30px;
    border-radius: 37px;
    /*box-shadow: 0 0 0 10px #1d294d;*/
}
.btn-main {
    color: #ffffff;
    padding: 15px 40px;
    text-transform: uppercase;
    /*background-image: linear-gradient(to bottom, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 100%);*/
    background-image: linear-gradient(to bottom, rgba(72, 135, 255, 0.3) 0%, rgba(255,255,255,0) 100%);
    box-shadow: 0 0 0 10px rgb(193, 205, 243);
    transition: all .3s ease;
}
.btn-main:hover {
    background-image: linear-gradient(to bottom, rgba(72, 135, 255, 0.5) 0%, rgba(255,255,255,0) 100%);
    box-shadow: 0 0 0 10px rgb(193, 205, 243), 0 0 23px rgb(193, 205, 243);
}

.btn-flare {
    position: relative !important;
    overflow: hidden !important;
}
.btn-flare span {
    position: absolute;
    display: block;
    content: '';
    top: 0;
    height: 100%;
    width: 100px;
    transform: skewX(-45deg) translateX(-100%);
    animation: flareAnimation;
    left: 0;
    background: linear-gradient(90deg, rgba(194, 212, 255, 0.1), rgba(194, 212, 255, 0.4));
    animation: flareAnimation 8s infinite linear;
    z-index: 2;
}
@keyframes flareAnimation {
    0% {left: 0; transform: skewX(-45deg) translateX(-100%);}
    3% {left: 100%; transform: skewX(-45deg) translateX(100%);}
    100% {left: 100%; transform: skewX(-45deg) translateX(100%);}
}

.pro-modal .modal-content {
    background-color: transparent !important;
    background-image: linear-gradient(to top, rgba(219, 228, 255, .8), rgba(255, 255, 255, .8));
}
.pro-modal .modal-footer {
    background-color: transparent !important;
    border: none !important;
}
.pro-modal .form-control {
    border: none !important;
}
.pro-modal .form-select {
    border: none !important;
    height: 59px !important;
    font-size: 1.125rem !important;
}


.modal.show {
    backdrop-filter: blur(15px) !important;
}

.scene1 {
    width: 100%;
    height: 830px;
    background: linear-gradient(to bottom, rgba(180,215,253,0) 0%, rgba(180,215,253,0) 10%, rgba(180,215,253,.2) 45%, rgba(180,215,253,0) 45%, rgba(180,215,253,0) 100%);
    position: relative;
}
.wr1, .wr2 {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
}
.scene1 > .container {
    position: relative;
    z-index: 10;
    height: 800px;
}
.scene1 > .container > .c1 {
    position: absolute;
    z-index: 12;
    top: 50%;
    width: 120px;
    height: 120px;
    left: 60%;
    margin-left: 80px;
    /*transform: translateY(0);*/
}
.scene1 > .container > .c2 {
    position: absolute;
    z-index: 12;
    top: 50%;
    width: 120px;
    height: 120px;
    right: 40px;
    /*transform: translateY(0);*/
}
.scene1 > .container > .card > .card {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
.w1 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(212, 223, 234, 1) 0%, rgba(212, 223, 234,1) 20%, rgba(212, 223, 234, .5) 40%, rgba(212, 223, 234, .5) 100%);
    clip-path: polygon(40% 45%, 30% 45%, 0 0, 0 80%, 30% 70%, 40% 70%);
}
.w2 {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(212, 223, 234, .6) 0%, rgba(212, 223, 234, .7) 35%, rgba(212, 223, 234, 1) 60%, rgba(212, 223, 234, 1) 100%);
    clip-path: polygon(100% 0, 60% 45%, 60% 70%, 100% 80%);
}
.w3 {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(223, 210, 185) 0%, rgb(223, 210, 185) 65%, rgba(223, 210, 185,0) 110%);
    clip-path: polygon(100% 80%, 60% 70%, 30% 70%, 0 80%, 0 100%, 100% 100%);
}
.w4 {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(212, 223, 234, .6) 0%, rgba(212, 223, 234, .7) 35%, rgba(205, 218, 232, 1) 63%, rgba(205, 218, 232, 1) 100%);
    clip-path: polygon(60% 45%, 40% 45%, 40% 70%, 60% 70%);
}
.w4L {
    position: absolute;
    z-index: 11;
    left: 50%;
    top: 300px;
    margin-left: -800px;
    width: 800px;
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 90%);
}
.i1 {
    position: absolute;
    z-index: 10;
    height: calc(90% - 50px);
    left: 0;
    bottom: 30px;
    /*margin-left: -100px;*/
    /*transform: translateX(-150px);*/
}
.i2 {
    position: absolute;
    z-index: 10;
    height: calc(80% - 50px);
    right: 0;
    margin-right: 80px;
    bottom: 30px;
}
@media (max-width: 1440px) {
    .w1 {
        clip-path: polygon(40% 45%, 30% 45%, 0 20%, 0 75%, 30% 70%, 40% 70%) !important;
    }
    .w2 {
        clip-path: polygon(100% 20%, 60% 45%, 60% 70%, 100% 80%) !important;
    }
    .w3 {
        clip-path: polygon(100% 80%, 60% 70%, 30% 70%, 0 75%, 0 100%, 100% 100%) !important;
    }
}
.img-box {
    position: relative;
    overflow: hidden;
}
.img-box .bd {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-size: contain !important;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: all .5s ease;
    overflow: hidden;
    background: linear-gradient(to top, rgba(29,41,77,.9) 0%, rgba(29,41,77,0) 80%, rgba(29,41,77,0) 100%);
}
.img-box .bd:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 6;
    background: rgba(29,41,77,.9);
    transition: all .5s ease;
    opacity: 0;
}
.img-box .bd:hover:before {
    opacity: 1;
}
.img-box .bd h3 {
    position: relative;
    z-index: 7;
    transition: all .5s ease;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 0 25px;
}
.img-box .bd:hover h3 {
    margin-top: 25px;
    margin-bottom: 0px;
    flex: 1;
}
.img-box .bd .bd_text {
    flex: 0;
    max-height: fit-content;
    position: absolute;
    z-index: 7;
    padding: 15px 35px;
    transition: all .5s ease;
    transform: translateX(100%);
    opacity: 0;
}
.img-box .bd .bd_text.bd_text_gal {
    transform: translateX(150%);
}
.img-box .bd:hover .bd_text {
    transform: translateX(0);
    opacity: 1;
}
.img-box img {
    position: relative;
    z-index: 4;
}
.img-box-grascale img {
    filter: grayscale(70%);
}
.img-box-grascale:hover img {
    filter: grayscale(0);
}

.page_name {
    text-align: center;
    font-size: 2.2rem !important;
    font-weight: 600 !important;
    font-family: 'PT Sans';
}

#accordion .card-header {
    margin-bottom: 8px;
}
#accordion .accordion-title {
    position: relative;
    display: block;
    padding: 8px 0 8px 50px;
    background: rgba(var(--butik-secondary-rgb), 1);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    width: 100%;
    text-align: left;
    transition: all 0.4s ease-in-out;
}
#accordion .accordion-title i {
    position: absolute;
    width: 40px;
    height: 100%;
    left: 0;
    top: 0;
    color: #fff;
    background: radial-gradient(rgba(var(--butik-primary-rgb), 0.8), var(--butik-primary));
    text-align: center;
    border-right: 1px solid transparent;
}
#accordion .accordion-title:hover {
    padding-left: 60px;
    background: var(--butik-primary);
    color: #fff;
}
#accordion .accordion-title:hover i {
    border-right: 1px solid #fff;
}
#accordion [aria-expanded=true] {
    background: var(--butik-secondary);
    color: #ffffff;
}
#accordion [aria-expanded=true] i {
    color: #ffffff;
    background: var(--butik-secondary);
}
#accordion [aria-expanded=true] i:before {
    content: "";
}
#accordion .accordion-body {
    padding: 40px 55px;
}

.truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.truncate-2 {-webkit-line-clamp: 2;}
.truncate-3 {-webkit-line-clamp: 3;}
.truncate-4 {-webkit-line-clamp: 4;}

.row-line {
    position: relative;
    overflow: hidden;
}
.row-line:before {
    position: absolute;
    content: '';
    left: -20px;
    top: 25px;
    border-radius: 10px;
    background-color: var(--butik-secondary);
    width: 30px;
    height: 100px;
    z-index: 3;
}

.alert-static {
    position: fixed;
    z-index: 9990 !important;
    top: 0;
    transition: all .5s ease;
}
.alert-static .alert {
    box-shadow: 0 0.5rem 1rem -.5rem rgba(0, 0, 0, 0.15);
}

.infoblock1 {
    min-height: 50vh;
    background-size: cover !important;
    background: linear-gradient(to top, rgba(29,41,77,.8) 0%, rgba(29,41,77,.95) 100%), url(/img/r.webp) no-repeat center -400px;
}

.h90m60 {height: 90px;}
.fs15m13 {font-size: 1.5rem;}
.fs18m12 {font-size: 1.8rem;}
.fs26m20 {font-size: 2.6rem;}
.feature-card .feature-card-icon {font-size: 2.6rem;}
.feature-card .feature-card-header {font-size: 2.2rem;}
.feature-card .feature-card-text {font-size: 1.4rem;}
@media (max-width: 1440px) {
    .feature-card .feature-card-icon {font-size: 2rem;}
    .feature-card .feature-card-header {font-size: 1.6rem;}
    .feature-card .feature-card-text {font-size: 1.2rem;}
    .fs18m12 {font-size: 1.2rem;}
    .fs26m20 {font-size: 2rem;}
    .fs15m13 {font-size: 1.3rem;}
    .h90m60 {height: 60px;}
}

iframe {border-radius: 15px !important;}

.mh80vh {min-height: 80vh !important;}

.lh06 {line-height: .6rem !important;}
.lh07 {line-height: .7rem !important;}
.lh08 {line-height: .8rem !important;}
.lh09 {line-height: .9rem !important;}
.lh1 {line-height: 1rem !important;}
.lh11 {line-height: 1.1rem !important;}
.lh12 {line-height: 1.2rem !important;}
.lh13 {line-height: 1.3rem !important;}
.lh14 {line-height: 1.4rem !important;}
.lh15 {line-height: 1.5rem !important;}
.lh16 {line-height: 1.6rem !important;}
.lh17 {line-height: 1.7rem !important;}
.lh18 {line-height: 1.8rem !important;}
.lh19 {line-height: 1.9rem !important;}
.lh2 {line-height: 2rem !important;}
.lh21 {line-height: 2.1rem !important;}
.lh22 {line-height: 2.2rem !important;}
.lh23 {line-height: 2.3rem !important;}
.lh24 {line-height: 2.4rem !important;}
.lh25 {line-height: 2.5rem !important;}
.lh26 {line-height: 2.6rem !important;}
.lh27 {line-height: 2.7rem !important;}
.lh28 {line-height: 2.8rem !important;}
.lh29 {line-height: 2.9rem !important;}
.lh3 {line-height: 3rem !important;}

.fs06 {font-size: .6rem !important;}
.fs07 {font-size: .7rem !important;}
.fs08 {font-size: .8rem !important;}
.fs085 {font-size: .85rem !important;}
.fs09 {font-size: .9rem !important;}
.fs095 {font-size: .95rem !important;}
.fs10 {font-size: 1rem !important;}
.fs11 {font-size: 1.1rem !important;}
.fs12 {font-size: 1.2rem !important;}
.fs13 {font-size: 1.3rem !important;}
.fs14 {font-size: 1.4rem !important;}
.fs15 {font-size: 1.5rem !important;}
.fs16 {font-size: 1.6rem !important;}
.fs17 {font-size: 1.7rem !important;}
.fs18 {font-size: 1.8rem !important;}
.fs19 {font-size: 1.9rem !important;}
.fs20 {font-size: 2rem !important;}
.fs22 {font-size: 2.2rem !important;}
.fs24 {font-size: 2.4rem !important;}
.fs25 {font-size: 2.5rem !important;}
.fs26 {font-size: 2.6rem !important;}
.fs27 {font-size: 2.7rem !important;}
.fs28 {font-size: 2.8rem !important;}
.fs29 {font-size: 2.9rem !important;}
.fs30 {font-size: 3rem !important;}
.fs35 {font-size: 3.5rem !important;}
.fs40 {font-size: 4rem !important;}

.text-100 {color: var(--bs-gray-100) !important;}
.text-200 {color: var(--bs-gray-200) !important;}
.text-300 {color: var(--bs-gray-300) !important;}
.text-400 {color: var(--bs-gray-400) !important;}
.text-500 {color: var(--bs-gray-500) !important;}
.text-600 {color: var(--bs-gray-600) !important;}
.text-700 {color: var(--bs-gray-700) !important;}
.text-800 {color: var(--bs-gray-800) !important;}
.text-900 {color: var(--bs-gray-900) !important;}

.bg-100 {background-color: var(--bs-gray-100) !important;}
.bg-150 {background-color: rgba(233, 236, 239, 0.7) !important;}
.bg-200 {background-color: var(--bs-gray-200) !important;}
.bg-300 {background-color: var(--bs-gray-300) !important;}
.bg-400 {background-color: var(--bs-gray-400) !important;}
.bg-500 {background-color: var(--bs-gray-500) !important;}
.bg-600 {background-color: var(--bs-gray-600) !important;}
.bg-700 {background-color: var(--bs-gray-700) !important;}
.bg-800 {background-color: var(--bs-gray-800) !important;}
.bg-900 {background-color: var(--bs-gray-900) !important;}

.border-100 {border-color: var(--bs-gray-100) !important;}
.border-200 {border-color: var(--bs-gray-200) !important;}
.border-300 {border-color: var(--bs-gray-300) !important;}
.border-400 {border-color: var(--bs-gray-400) !important;}
.border-500 {border-color: var(--bs-gray-500) !important;}
.border-600 {border-color: var(--bs-gray-600) !important;}
.border-700 {border-color: var(--bs-gray-700) !important;}
.border-800 {border-color: var(--bs-gray-800) !important;}
.border-900 {border-color: var(--bs-gray-900) !important;}