html { 
    height: 100%
}
body {
    min-height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    top: -1.5rem;
    left: 40px;
    padding:10px 10px 10px 10px;
    background-color: black!important;
    color:white!important;
    opacity: 0;
    z-index:999;
    width:320px;
    visibility: hidden;
    border:solid 1px red
}
[data-title] {
    position: relative;
}

.pb-3 {
    padding-bottom: 1rem!important
}

.fs-7 {
     font-size: 0.9rem !important
 }

 .fs-8 {
     font-size: 0.8rem !important
 }

 .fs-9 {
     font-size: 0.7rem !important
 }

 .fs-10 {
     font-size: 0.6rem !important
 }

 .min-h-100 {
     min-height: 100%
 }

 .min-h-80px {
     min-height: 80px
 }

 .h-0 {
     height: 0
 }

 .max-h-0 {
     max-height: 0
 }

 .max-h-80px {
     max-height: 80px
 }

 .max-h-70px {
     max-height: 70px
 }

 .max-h-60px {
     max-height: 60px
 }

.max-w-100 {
    max-width: 100%;
}

.max-w-100px {
    max-width: 100px;
}

.max-w-210px {
    max-width: 210px;
}

.max-w-250px {
    max-width: 250px;
}

.min-w-600px {
    min-width: 600px
}

.min-w-200px {
    min-width: 200px
}

.max-w-200px {
    max-width: 200px;
}

.max-w-300px {
    max-width: 300px;
}

.max-w-400px {
    max-width: 400px;
}

.max-w-350px {
    max-width: 350px;
}

.max-w-50px {
    max-width: 50px
}

.max-w-500px {
    max-width: 500px
}

.max-w-40 {
    max-width: 40%
}

.border-red-hover:hover {
    border-color: red!important;
}

.border-solid {
    border: solid;
}

.border-white {
    border-color: white
}

.border-red {
   border-color: #ff0808 
}


.border-light-gray {
	border-color: #f6f6f6!important
}

.border-width-2 {
    border-width: 2px
}

.border-width-1 {
    border-width: 1px
}

.border-top-0 {
    border-top: 0px
}

.border-left-0 {
    border-left: 0px
}

.border-right-0 {
    border-right: 0px
}

.border-bottom-width-1 {
    border-bottom-width: 1px
}

.border-bottom-width-4 {
    border-bottom-width: 4px
}

.outline-width-1 {
    outline-width: 1px
}

.outline-width-4 {
    outline-width: 4px
}

.outline-style-dashed {
    outline-style: dashed
}

.outline-style-solid {
    outline-style: solid
}

.border-0 {
    border: 0!important
}

.border-0-active:active {
    border: 0!important
}

.border-4px-dashed {
    border: 4px dashed #f96c0d;
}

.border-bottom-4px-solid-brown {
    border-bottom: 4px solid #B0350A!important
}

 .z-index-20 {
     z-index: 20
 }

 .z-index-10 {
     z-index: 10
 }

 .z-index-1 {
     z-index: 1
 }

 .z-index-2 {
     z-index: 2
 }

 .z-index-3 {
     z-index: 3
 }

 .z-index-0 {
     z-index: 0
 }

 .header_catalog-popup.active,
 .popup.active {
     display: flex !important
 }

.bg-cover {
    background-size: cover
}

.bg-position-center {
    background-position: center
}

 .bg-brown {
     background-color: #7e2323
 }

 .bg-light-gray {
     background-color: #fafafa
 }

 .bg-main {
    background-color: #191921
 }

.bg-light-blue {
    background-color: #2C97CC
}

 .bg-white-hover:hover {
     background-color: white !important
 }

 .bg-red {
     background-color: #E83324 !important
 }

 .bg-red:hover {
     background-color: red !important
 }

 .bg-gray {
     background-color: gray !important
 }

 .bg-light-red-hover:hover {
     background-color: #ff8484 !important
 }

.text-light-blue {
    color: #2C97CC
}
.text-dark-blue {
    color: #3a6991
}

 .text-white-important {
     color: #FFF !important
 }

 .text-white-hover:hover {
     color: #FFF !important
 }

.text-brown-hover:hover {
     color: #7e2323 !important
 }

 .text-red-hover:hover {
     color: red!important
 }

 .background-color-transition-3s {
     transition: background-color .3s !important
 }

.border-width-1px-solid-orange {
    border: 1px solid #f96c0d
}

.border-bottom-1px-solid-gray {
    border-bottom: 1px solid #c8c8c8
}

.rounded-end-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.border-bottom-right-radius-0 {
    border-bottom-right-radius: 0 !important
}

.border-top-left-radius-0 {
    border-top-left-radius: 0 !important
}

.border-top-right-radius-0 {
    border-top-right-radius: 0 !important
}

 .rounded-start-0 {
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important
 }

.rounded-circle {
    border-radius: 50%!important;
}

.border-radius-30px {
    border-radius: 30px
}

.border-radius-5px {
    border-radius: 5px
}

.text-orange {
    color: #f96c0d!important
}

.text-blue {
     color: #3370AF!important
}

.text-light-green {
    color: #008000!important
}

 .text-light-blue-hover:hover {
     color: #3d7fc6 !important
 }

 .fs-text-screen {
     font-size: calc(0.9rem + 0.1vw)
 }

 .fs-h2-screen {
     font-size: calc(1.3rem + 0.4vw)!important
 }

 .fs-h3-screen {
     font-size: calc(1rem + 0.4vw)!important
 }

 .fs-h4-screen {
     font-size: calc(0.8rem + 0.4vw)!important
 }

 .bg-repeat-no {
     background-repeat: no-repeat
 }

 .bg-position-end {
     background-position: 90% 100%
 }

.bg-shadow {
    background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

 /* Высота */
 .h-700px {
     height: 700px
 }

 .h-800px {
     height: 800px
 }

 .h-600px {
     height: 600px
 }

 .h-400px {
     height: 400px
 }

 .h-350px {
     height: 350px
 }

 .h-250px {
     height: 250px
 }

 .h-200px {
     height: 200px
 }

 .h-150px {
     height: 150px
 }

 .h-125px {
     height: 125px
 }

 .h-100px {
     height: 100px
 }

 .h-80px {
     height: 80px
 }

 .h-70px {
     height: 70px
 }

 .h-60px {
     height: 60px
 }

 .h-50px {
     height: 50px
 }

 .h-40px {
     height: 40px
 }

 .h-30px {
     height: 30px
 }

.h-20px {
    height: 20px
}



 /* Конец высоты */
 .w-90 {
     width: 90%
 }

 .w-80 {
     width: 80%
 }

 .w-60 {
     width: 60%
 }

 .w-49 {
     width: 49%
 }

 .w-48 {
     width: 48%
 }

 .w-55 {
     width: 55%
 }

 .w-45 {
     width: 45%
 }

 .w-35 {
     width: 35%
 }

 .w-32 {
     width: 32%
 }

 .w-40 {
     width: 40%
 }

 .w-20 {
     width: 20%
 }

 .w-10 {
     width: 10%
 }

 .opacity-100-hover:hover {
     opacity: 1 !important
 }

 .opacity-3-hover:hover, .opacity-3{
    opacity: .3
}

 .opacity-hover-time-05 {
     transition: opacity .5s
 }

 .bgr-size-contain {
     background-size: contain
 }

 .bgr-repeat-no {
     background-repeat: no-repeat
 }

 .bgr-position-center {
     background-position: center
 }

 .overflow-y-scroll {
     overflow-y: scroll
 }

.visibility-hidden {
    visibility: hidden
}

 .z-index-100 {
     z-index: 100
 }
 .z-index-99 {
     z-index: 99
 }

.border-style-solid {
    border-style: solid
}

.border-style-dashed {
    border-style: dashed
}

.w-600px {
    width: 600px
}

.w-400px {
     width: 400px
 }

.w-350px {
     width: 350px
 }

.w-300px {
     width: 300px
 }

 .w-200px {
     width: 200px
 }

 .min-w-50px {
     min-width: 50px
 }

 .min-w-150px {
     min-width: 150px
 }

 .w-150px {
     width: 150px
 }

 .w-140px {
     width: 140px
 }

.w-100px {
     width: 100px
 }

 .min-w-100px {
    min-width: 100px
}

.w-80px {
    width: 80px
}

.w-70px {
    width: 70px
}

.w-60px {
    width: 60px
}

 .w-50px {
     width: 50px
 }

 .max-w-40px {
     max-width: 40px
 }

 .min-w-40px {
     min-width: 40px
 }

.min-w-20px {
     min-width: 20px
 }

 .w-40px {
     width: 40px
 }

 .w-30px {
     width: 30px
 }

 .w-20px {
     width: 20px
 }

 .w-10px {
     width: 10px
 }

 .top-auto {
     top: auto
 }

 .bottom-auto {
     bottom: auto
 }

 .bottom-10px {
     bottom: 10px
 }

 .bottom-0px {
     bottom: 0px
 }

 .top-10px {
     top: 10px
 }

 .top-0px {
     top: 0px
 }

 .top-4px {
     top: 4px
 }

 .right-10px {
     right: 10px
 }

 .right-4px {
     right: 4px
 }



 input.webkit-appearance-none::-webkit-outer-spin-button,
 input.webkit-appearance-none::-webkit-inner-spin-button {
     -moz-appearance: textfield;
     -webkit-appearance: none !important;
     margin: 0
 }

 .icon-opacity-1-hover-before-important:hover .icon:before {
     opacity: 1 !important
 }

 .cursor-grabbing {
     cursor: grabbing
}

.cursor-pointer {
     cursor: pointer
}

.pointer-events-none {
    pointer-events: none;
}

 .transition-easy-time-05 {
     transition: all 0.5s ease
 }

 .transition-easy-time-03 {
     transition: all 0.3s ease
 }

 .text-black.active {
     color: #4195ea !important
 }

 .object-fit-contain {
     object-fit: contain
 }

 .max-h-900px {
     max-height: 900px
 }

 .max-h-800px {
     max-height: 800px
 }

 .max-h-600px {
     max-height: 600px
 }

 .max-h-450px {
     max-height: 450px
 }

 .max-h-400px {
     max-height: 400px
 }
 .min-h-400px {
     min-height: 400px
 }
 .border-bottom-solid {
     border-bottom: solid
 }

 .disabled {
     cursor: not-allowed
 }

.text-dark {
    color: #000000
}

 .text-red {
     color: #ff0808 !important
 }

 .text-light-red-hover:hover {
     color: #ff8484 !important
 }

.cursor-default {
    cursor: default;
}

.transition-color-3s {
    transition: color .3s, border-color .3s, border-color .3s !important;
}

.my-0 {
    margin-top: 0!important;
    margin-bottom: 0!important
}

.ms-first-child-0:first-child {
    margin-left: 0!important
}

.mx-minus-4 {
    margin-right: -1.5rem !important;
    margin-left: -1.5rem !important;
}

.mt-first-child-0:first-child {
    margin-top: 0!important
}

.flex-basis-0 {
    flex-basis: 0;
}

.line-h-1 {
     line-height: 1!important;
}

.line-h-0 {
    line-height: 0!important;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-x-visible-hover:hover {
    overflow-x: visible!important;
}

.overflow-y-visible-hover:hover {
    overflow-y: visible!important;
}

.h-100px {
    max-height: 100px;
}

.max-h-100 {
    max-height: 100%!important
}

.max-h-100px {
    max-height: 100px
}

.max-h-50px {
    max-height: 50px
}

.min-h-50px {
    min-height: 50px
}

.h-200px {
    max-height: 200px
}

.max-h-200px {
    max-height: 200px
}

.min-h-200px {
    min-height: 200px
}

.min-h-100px {
    min-height: 100px
}

.min-h-150px {
    min-height: 150px
}

.min-h-600px {
    min-height: 600px
}

.min-h-800px {
    min-height: 800px
}

.arrow-1 {
    font-size: calc(5rem + 0.5vw);
    font-weight: 300;
}

.left-minus-300px {
    left: -300px
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.user-select-none {
    user-select:none;
}
.text-original-orange-hover:hover {
    color: orange!important
}
.text-brown-hover:hover, .text-brown {
    color: #7e2323!important
}
.text-green {
    color: #33a531!important
}
.text-gray {
	color: #7a7a7a
}
.text-purple {
    color: #8508ac!important
}
.text-dark-yellow {
    color: #ffc604!important
}

.text-align-last-left {
  text-align-last: left;  
}

.text-uppercase {
    text-transform: uppercase;
}

.text-underline-hover:hover {
    text-decoration: underline;
}


.text-lowercase {
    text-transform: lowercase;
}

.shadow-brown {
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(78, 9, 130, .2) 100%);
}

.shadow-inside-04 {
    background: rgba(0,0,0, 0.4)
}

.d-none-temporary {
    display: none
}

.text-transform-none {
    text-transform: none
}

.transform-none {
    transform: none!important
}

.cursor-help {
    cursor: help
}

.transform-translateY-minus-3px-hover:hover{
    transform: translateY(-3px);
}

.svg-transform-translateX-minus-6px-hover:hover svg {
    transform: translateX(-6px);
}

.ms-6 {
  margin-left: 6rem !important;
}

.mt-6 {
    margin-top: 6rem!important
}

.mt-40px {
    margin-top: 40px
}

.fw-very-bold {
    font-weight: 800
}

:root {
    --bs-border-radius-lg: 1rem;
}

.img-contain {
    display: block;
    width: 100%;
    height: 100%;
    object-fit:contain
}

.lazy {
    position: absolute
}

.entered.loaded {
    position: relative!important
}

.shadow-d {
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%)
}

.rotate-180 {
    transform: rotate(-180deg)
}
.rotate-90 {
    transform: rotate(-90deg)
}

.background-shadow {
    background-color: rgba(0, 0, 0, .3)
}

.errortext
{
	color:red;
    font-size:18px;
    font-weight: bold
}

.py-3 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
}
    
.px-6 {
    padding-right: 6rem!important;
    padding-left: 6rem!important
}

.transform-scale-hover-12:hover {
      transform: scale(1.2);
}

.filter-saturate-15-hover:hover {
    filter: saturate(1.5);
}

.order-6 {
  order: 6 !important;
}

.order-7 {
  order: 7 !important;
}

.overlay-shadow {
    background-color: rgba(0, 0, 0, 0.2)
}

.scale {
	transform: scale(0.5);
	opacity: 0;
	transition: all 0.5s;
}

.scale-show .scale {
	transform: scale(1);
	opacity: 1
}

.filter-white {    
    filter: brightness(0) invert(1)     
}

.filter-red {    
    filter: brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5876%) hue-rotate(358deg) brightness(98%) contrast(112%)!important
}

.filter-yellow {    
    filter: brightness(0) saturate(100%) invert(99%) sepia(98%) saturate(1251%) hue-rotate(351deg) brightness(105%) contrast(93%)!important
}

.filter-gray {    
    filter: brightness(0) saturate(100%) invert(83%) sepia(0%) saturate(1035%) hue-rotate(149deg) brightness(75%) contrast(82%)!important
}

.filter-green {    
    filter: brightness(0) saturate(100%) invert(70%) sepia(21%) saturate(6330%) hue-rotate(74deg) brightness(100%) contrast(83%)
}

.filter-secondary {    
    filter: brightness(0) saturate(100%) invert(79%) sepia(1%) saturate(6577%) hue-rotate(107deg) brightness(61%) contrast(55%)
}

.filter-red-hover:hover {    
    filter: brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5876%) hue-rotate(358deg) brightness(98%) contrast(112%)!important
}

.filter-danger {    
    filter: brightness(0) saturate(100%) invert(28%) sepia(91%) saturate(1525%) hue-rotate(332deg) brightness(91%) contrast(90%)  
}

.filter-blue-hover:hover {
    filter: brightness(0) saturate(100%) invert(50%) sepia(98%) saturate(745%) hue-rotate(168deg) brightness(88%) contrast(90%)
}

.border-blue-hover:hover {
    border-color: #2ba2dc!important
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    color-scheme: dark !important;
    background-color: transparent;
    opacity: 1;
    height:40px;
    cursor:pointer
}

[aria-expanded="true"] .rotate{
    transform: rotate(-180deg)
}

@media (min-width: 100px)
    .container, .container-md, .container-sm {
        max-width: 100% !important;
}

@media (min-width: 576px) {
    

    .user-select-none {
        user-select: none
    }
     
     
     .h-sm-700px {
         height: 700px
     }

     .h-sm-600px {
         height: 600px
     }

     .h-sm-200px {
         height: 200px
     }

     .h-sm-150px {
         height: 150px
     }

     .h-sm-125px {
         height: 125px
     }

     .h-sm-100px {
         height: 100px
     }

     .h-sm-50 {
         height: 50% !important
     }
     
     .w-sm-auto {
         width: auto !important
     }

     .w-sm-100 {
         width: 100% !important
     }

     .w-sm-80 {
         width: 80% !important
     }

     .w-sm-75 {
         width: 75% !important
     }

     .w-sm-60 {
         width: 60% !important
     }

     .w-sm-50 {
         width: 50% !important
     }

     .w-sm-40 {
         width: 40% !important
     }

     .w-sm-25 {
         width: 25% !important
     }

     .w-sm-20 {
         width: 20% !important
     }

     .fs-sm-7 {
         font-size: 0.9rem !important
     }

     .fs-sm-6 {
         font-size: 1rem !important
     }
    
    .w-70 {
        width: 70%
    }
    
    .w-40 {
        width: 40%
    }
    
    .w-30 {
        width: 30%
    }
    
    .w-24 {
        width: 24%
    }
    
    .top {
        top: 0
    }
    
    .mb-5 {
        margin-bottom: 3rem!important
    }
    
    .mb-3-5 {
        margin-bottom: 1.5rem!important
    }
    
    .mb-1 {
        margin-bottom: 0.25rem!important;
    }
    
    .mb-0 {
        margin-bottom: 0 !important
    }
    
    .bottom-0 {
        bottom: 0
    }
    
    .ms-5 {
        margin-left: 3rem!important
    }
    
    .ms-4 {
        margin-left: 1.5rem!important
    }
    
    .ms-2 {
        margin-left: 0.5rem!important;
    }
    
    .ms-1 {
        margin-left: 0.25rem!important;
    }
    
    .me-5 {
        margin-right: 3rem!important;
    }
    
    .me-6 {
        margin-right: 6rem!important
    }
    
    .bgr-dark-green {
        background-color: #31979a;
    }
    
 }

 @media (min-width: 768px) {
     .h-md-700px {
         height: 700px
     }

     .h-md-600px {
         height: 600px
     }

     .h-md-200px {
         height: 200px !important
     }

     .h-md-150px {
         height: 150px
     }

     .h-md-125px {
         height: 125px
     }

     .h-md-100px {
         height: 100px
     }

     .h-md-50 {
         height: 50% !important
     }
     
     .w-md-auto {
         width: auto !important
     }

     .w-md-100 {
         width: 100% !important
     }

     .w-md-80 {
         width: 80% !important
     }

     .w-md-75 {
         width: 75% !important
     }

     .w-md-60 {
         width: 60% !important
     }

     .w-md-50 {
         width: 50% !important
     }
     
     .w-md-49 {
         width: 49% !important
     }
       
     .w-md-48 {
         width: 48% !important
     }
     
     .w-md-45 {
         width: 45% !important
     }

     .w-md-40 {
         width: 40% !important
     }
     
     .w-md-33 {
         width: 33% !important
     }
     
     .w-md-32 {
         width: 32% !important
     }
     
     .w-md-31 {
         width: 31% !important
     }
     
     .w-md-30-6 {
         width: 30.6% !important
     }
     
     .w-md-30 {
         width: 30% !important
     }

     .w-md-25 {
         width: 25% !important
     }

     .w-md-20 {
         width: 20% !important
     }

     .fs-md-7 {
         font-size: 0.9rem !important
     }

     .fs-md-6 {
         font-size: 1rem !important
     }
     
     .mt-md-0 {
         margin-top:0!important
     }
 }

 @media (min-width: 992px) { 
     .position-lg-relative {
         position: relative !important
     }
     
    .text-lg-start {
         text-align: left!important;
     }

     .h-lg-700px {
         height: 700px
     }

     .h-lg-600px {
         height: 600px
     }

     .h-lg-200px {
         height: 200px
     }

     .h-lg-150px {
         height: 150px
     }

     .h-lg-125px {
         height: 125px
     }

     .h-lg-100px {
         height: 100px
     }

     .col-lg-1-4 {
         width: 14%
     }
     .col-4-5 {
        width: 37.5%;
     }
     .w-lg-100 {
         width: 100% !important
     }

     .w-lg-80 {
         width: 80% !important
     }

     .w-lg-75 {
         width: 75% !important
     }

     .w-lg-60 {
         width: 60% !important
     }

     .w-lg-50 {
         width: 50% !important
     }
     
     .w-lg-45 {
         width: 45% !important
     }

     .w-lg-40 {
         width: 40% !important
     }
     
     .w-lg-30 {
         width: 30% !important
     }

     .w-lg-25 {
         width: 25% !important
     }
     
     .w-lg-24 {
         width: 24% !important
     }

     .w-lg-20 {
         width: 20% !important
     }

     .fs-lg-7 {
         font-size: 0.9rem !important
     }

     .fs-lg-6 {
         font-size: 1rem !important
     }
    .ps-lg-4 {
        padding-left: 1.5rem!important;
     }
     .pe-lg-4 {
        padding-right: 1.5rem!important;
     }
     .justify-content-lg-start {
        justify-content: flex-start!important;
     }
     .mt-lg-0 {
         margin-top: 0!important
     }
 }

 @media (min-width: 1200px) {
     
     .container, .container-xl {
        max-width: 1600px !important;
     }
     
     
    .top_big_banners.short_block .top_slider_wrapp .main-slider__item, .top_big_banners.short_block .top_slider_wrapp .main-slider__item td, .top_big_banners.short_block .top_slider_wrapp .main-slider {
        height: calc(10vw + 200px);
     }
     
     .ps-xl-5 {
        padding-left: 3rem!important;
     }
     .pe-xl-5 {
         padding-right: 3rem!important;
     }
     .h-xl-700px {
         height: 700px
     }

     .h-xl-600px {
         height: 600px
     }

     .h-xl-200px {
         height: 200px
     }

     .h-xl-150px {
         height: 150px
     }

     .h-xl-125px {
         height: 125px
     }

     .h-xl-100px {
         height: 100px
     }

     .w-xl-100 {
         width: 100% !important
     }

     .w-xl-80 {
         width: 80% !important
     }

     .w-xl-75 {
         width: 75% !important
     }

     .w-xl-60 {
         width: 60% !important
     }

     .w-xl-50 {
         width: 50% !important
     }

     .w-xl-40 {
         width: 40% !important
     }

     .w-xl-25 {
         width: 25% !important
     }

     .w-xl-20 {
         width: 20% !important
     }

     .fs-xl-7 {
         font-size: 0.9rem !important
     }

     .fs-xl-6 {
         font-size: 1rem !important
     }
     
     .w-xl-50 {
         width: 50%!important
     }
    .w-xl-30 {
         width: 30%!important
     }
    .text-xl-start {
         text-align: left!important;
     }
     .justify-content-xl-start {
         justify-content: flex-start!important;
    }
    .mx-xl-6 {
        margin-right: 6rem!important;
        margin-left: 6rem!important;
    }
    .mx-xl-12 {
        margin-right: 12rem!important;
        margin-left: 12rem!important;
    }
     
    .mt-xl-5 {
        margin-top: 3rem!important
    }
    .mb-xl-5 {
        margin-bottom: 3rem!important
    }
 }


@keyframes pulsebt{
    0%{
        transform:scale(0.90);
    }
    70%{
        transform:scale(1);
    }
    100%{
        transform:scale(0.90);
    }
}


/* Анимация бегающие полоски у кнопки */

.b-anim:nth-child(1) {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, red, yellow);
	animation: animate1 2s linear infinite;
}

@keyframes animate1 {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

.b-anim:nth-child(2) {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 3px;
	background: linear-gradient(to bottom, red, yellow);
	animation: animate2 2s linear infinite;
	animation-delay: 1s;
}
@keyframes animate2 {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(100%);
	}
}

.b-anim:nth-child(3) {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to left, red, yellow);
	animation: animate3 2s linear infinite;
}

@keyframes animate3 {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}

.b-anim:nth-child(4) {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 3px;
	background: linear-gradient(to top, red, yellow);
	animation: animate4 2s linear infinite;
	animation-delay: 1s;
}

@keyframes animate4 {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(-100%);
	}
}
/* Конец анимации полоски */

@-webkit-keyframes spaceboots {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}


/* Анимация трясения */
.shake {  
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
/* конец анимации трясения */ 

/* Анимация прогресса */ 
.progress {
  /* pre-set background gradient */
  background-repeat: no-repeat;
  width: var(--scroll); /* Variable width based on scroll position */
  height: 4px;
  z-index: 1;
}

/* Анимация поворота влево вправо */ 
.swing {
  animation: hithere 1s ease infinite;
}
@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}
/* Конец поворота */