@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&display=swap');
@charset "UTF-8";
/*Обнуление*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:focus, :active {
  outline: none;
}

a:focus, a:active {
  outline: none;
}

nav, footer, header, aside {
  display: block;
}

html, body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input, button, textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a, a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*--------------------*/
body {
  background: #f7f7f0;
  font-family: "Sofia Sans Condensed", sans-serif;
  font-style: normal;
}
/*logo*/
         *,
        *:before,
        *:after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        .wrapper {
          margin: auto;
          width: 50px;
          height: 50px;
          background-color: transparent;
          -webkit-user-select: none;
        }
        .wrapper .box-wrap {
          width: 70%;
          height: 70%;
          margin: calc((100% - 70%)/2) calc((100% - 70%)/2);
          position: relative;
          transform: rotate(-45deg);
        }
        .wrapper .box-wrap .box {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background: rgba(135, 0, 0, 0.6);
          background: linear-gradient(to right, #141562, #486FBC, #EAB5A1, #8DD6FF, #4973C9, #D07CA7, #F4915E, #F5919E, #B46F89, #141562, #486FBC);
          background-position: 0% 50%;
          background-size: 1000% 1000%;
          visibility: hidden;
        }
        .wrapper .box-wrap .box.one {
          -webkit-animation: moveGradient 15s infinite, oneMove 3.5s infinite;
                  animation: moveGradient 15s infinite, oneMove 3.5s infinite;
        }
        .wrapper .box-wrap .box.two {
          -webkit-animation: moveGradient 15s infinite, twoMove 3.5s 0.15s infinite;
                  animation: moveGradient 15s infinite, twoMove 3.5s 0.15s infinite;
        }
        .wrapper .box-wrap .box.three {
          -webkit-animation: moveGradient 15s infinite, threeMove 3.5s 0.3s infinite;
                  animation: moveGradient 15s infinite, threeMove 3.5s 0.3s infinite;
        }
        .wrapper .box-wrap .box.four {
          -webkit-animation: moveGradient 15s infinite, fourMove 3.5s 0.575s infinite;
                  animation: moveGradient 15s infinite, fourMove 3.5s 0.575s infinite;
        }
        .wrapper .box-wrap .box.five {
          -webkit-animation: moveGradient 15s infinite, fiveMove 3.5s 0.725s infinite;
                  animation: moveGradient 15s infinite, fiveMove 3.5s 0.725s infinite;
        }
        .wrapper .box-wrap .box.six {
          -webkit-animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
                  animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
        }

        @-webkit-keyframes moveGradient {
          to {
            background-position: 100% 50%;
          }
        }

        @keyframes moveGradient {
          to {
            background-position: 100% 50%;
          }
        }
        @-webkit-keyframes oneMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @keyframes oneMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @-webkit-keyframes twoMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @keyframes twoMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @-webkit-keyframes threeMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @keyframes threeMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                    clip-path: inset(0% 70% 70% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(0% 35% 70% round 5%);
                    clip-path: inset(0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                    clip-path: inset(35% 70% 35% 0 round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @-webkit-keyframes fourMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @keyframes fourMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @-webkit-keyframes fiveMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @keyframes fiveMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @-webkit-keyframes sixMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
        }
        @keyframes sixMove {
          0% {
            visibility: visible;
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          14.2857% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          28.5714% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          42.8571% {
            -webkit-clip-path: inset(70% 0 0 70% round 5%);
                    clip-path: inset(70% 0 0 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          57.1428% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          71.4285% {
            -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                    clip-path: inset(35% 0% 35% 70% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          85.7142% {
            -webkit-clip-path: inset(35% round 5%);
                    clip-path: inset(35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
          100% {
            -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                    clip-path: inset(70% 35% 0% 35% round 5%);
            -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
          }
   }
/*Логотип*/

    svg {
      width: 100%;
      height: 100%;
    }
    .perspecitive-container {
      margin: 50px 50% -20px;
      transform: translate(-50%, -50%);
      width: 90px;
      height: 80px;
    }
    @keyframes rotateKader {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    #kader {
       transform-origin: 50% 50%;
       position: relative;
       animation: rotateKader 14s infinite linear;
       perspective: 500px;
       transform-style: preserve-3d;
       z-index: 10;
    }
    @keyframes frontBack {
      0% {
        transform: scale(1);
      }
      40% {
        transform: scale(0.8);
      }
      60% {
        transform: scale(0.8);
      }
      100% {
        transform: scale(1);
      }
    }
    #house-back {
      animation: frontBack 4.2s infinite linear;
    }
/*Логотип*/
/*Логотип*/
      svg {
      width: 100%;
      height: 100%;
    }
  .bti_logo {
      margin: 40% 50%;
      transform: translate(-50%, -50%);
      width: 90px;
      height: 90px;
    }
    @keyframes rotateKader {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    #kader {
       transform-origin: 50% 50%;
       position: relative;
       animation: rotateKader 14s infinite linear;
       perspective: 500px;
       transform-style: preserve-3d;
       z-index: 10;
    }
    @keyframes frontBack {
      0% {
        transform: scale(1);
      }
      40% {
        transform: scale(0.8);
      }
      60% {
        transform: scale(0.8);
      }
      100% {
        transform: scale(1);
      }
    }
    #house-back {
      animation: frontBack 4.2s infinite linear;
    }
/*Логотип*/
.box_1 {
  background: #fff;
  border-radius: 10px;
  text-align: center;
  margin: 40px auto;
  width: min(70%, 100%);
  border-radius: 1rem;
  border: 4px solid #199130;
  -webkit-box-shadow: 15px 19px 39px -21px rgba(187, 187, 187, 1);
  -moz-box-shadow: 15px 19px 39px -21px rgba(187, 187, 187, 1);
   box-shadow: 15px 19px 39px -21px rgba(187, 187, 187, 1);
}
.box_2, .box_3, .box_4, .box_5, .box_6 {
  background: #FFFBF1;
  border-radius: 10px;
  text-align: center;
  margin: 40px auto;
  width: min(70%, 100%);
  border-radius: 1rem;
  border: 1px solid #d6d5d0;
  -webkit-box-shadow: 15px 19px 39px -21px rgba(187, 187, 187, 1);
  -moz-box-shadow: 15px 19px 39px -21px rgba(187, 187, 187, 1);
   box-shadow: 15px 19px 39px -21px rgba(187, 187, 187, 1);
}
.box_7 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 40px;
  margin: 40px 25px;
}
h1 {
  text-align: center;
  text-decoration: none;
  color: #0C3D01;
  font-size: 40px;
  line-height: 1.7em;
  font-weight: bold;
  letter-spacing: 0.1rem;
  margin-top: 20px;
  text-shadow: 4px 8px 10px rgba(191, 191, 191, 1);
}
.sps_01, .sps_1, .sps_2, .sps_3, .sps_4, .sps_5 {
  text-align: center;
  text-decoration: none;
  color: #0C3D01;
  font-size: 38px;
  line-height: 1.7em;
  font-weight: bold;
  margin: 20px 0px 20px 0px;
  text-shadow: 9px 7px 9px rgba(193, 193, 193, 1);
}
li {
  list-style-type: none;
}
.possum_1, .possum_2, .possum_3, .possum_4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin: 40px 25px;
}
.possum_5 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 40px;
  margin: 40px 25px;
}
a.button_1:hover,
a.button_2:hover,
a.button_3:hover,
a.button_4:hover,
a.button_5:hover,
a.button_6:hover,
a.button_7:hover,
a.button_8:hover,
a.button_9:hover,
a.button_10:hover,
a.button_11:hover,
a.button_12:hover,
a.button_13:hover,
a.button_14:hover,
a.button_15:hover,
a.button_16:hover,
a.button_17:hover,
a.button_18:hover,
a.button_19:hover,
a.button_20:hover,
a.button_21:hover,
a.button_22:hover,
a.button_23:hover,
a.button_24:hover{
  background-image: -webkit-linear-gradient(top, #fff, #e3ebe3);
  background-image: linear-gradient(top, #fff, #f4f1ee);
}
.button_1,
.button_2,
.button_3,
.button_4,
.button_5,
.button_6,
.button_7,
.button_8,
.button_9,
.button_10,
.button_11,
.button_12,
.button_13,
.button_14,
.button_15,
.button_16,
.button_17,
.button_18,
.button_19,
.button_20,
.button_21,
.button_22,
.button_23,
.button_24 {
  display: grid;
  grid-template-rows: 70% 30%;
  background: #fff;
  container-type: inline-size;
  aspect-ratio: 1/1;
  border-radius: 1.2rem;
  place-content: center;
  border: 4px solid #199130;
  -webkit-box-shadow: 0px 14px 19px -10px rgba(66, 68, 90, 1);
  -moz-box-shadow: 0px 14px 19px -10px rgba(66, 68, 90, 1);
   box-shadow: 0px 14px 19px -10px rgba(66, 68, 90, 1);
    >img {
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }
    >.doc_1, .doc_2 {
      margin: auto;
      font-size: 8cqi;
      line-height: 1.2em;
      font-weight: 600;
      color: #2c3033;
      padding: 0px 6px 4px 6px;
    }
}
.button_12 {
  border: 4px solid #4289fc;
}
a.button_1:hover,
a.button_2:hover,
a.button_3:hover,
a.button_4:hover,
a.button_5:hover,
a.button_6:hover,
a.button_7:hover,
a.button_8:hover,
a.button_9:hover,
a.button_10:hover,
a.button_11:hover,
a.button_12:hover,
a.button_13:hover,
a.button_14:hover,
a.button_15:hover,
a.button_16:hover,
a.button_17:hover,
a.button_18:hover,
a.button_19:hover,
a.button_20:hover,
a.button_21:hover,
a.button_22:hover,
a.button_23:hover,
a.button_24:hover{
  background-image: -webkit-linear-gradient(top, #fff, #e3ebe3);
  background-image: linear-gradient(top, #fff, #f4f1ee);
}
.button_25,
.button_26,
.button_27,
.button_28,
.button_29,
.button_30,
.button_31,
.button_32 {
  display: grid;
  grid-template-rows: 70% 30%;
  background: #fff;
  container-type: inline-size;
  aspect-ratio: 1/1;
  border-radius: 1.2rem;
  border: 4px solid #199130;
  -webkit-box-shadow: 0px 14px 19px -10px rgba(66, 68, 90, 1);
  -moz-box-shadow: 0px 14px 19px -10px rgba(66, 68, 90, 1);
   box-shadow: 0px 14px 19px -10px rgba(66, 68, 90, 1);
    >img {
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }
    >.doc_3 {
      margin: auto;
      font-size: 10cqi;
      line-height: 1.2em;
      font-weight: 600;
      color: #2c3033;
      padding: 5px;
    }
}
/*МЕДІА*/
@media (max-width: 2200px) {
  .possum_5 {
    gap: 10px;
  }
  .bti_logo {
    margin: 40% 50%;
    width: 90px;
    height: 90px;
    }
}
@media (max-width: 2000px) {
  .possum_5 {
    gap: 10px;
  }
  .bti_logo {
    margin: 40% 50%;
    width: 90px;
    height: 90px;
    }
}
@media (max-width: 1800px) {
  body {
    background: #ecf2e6;
  }
  h1 {
    font-size: 28px;
    font-weight: 900;
  }
  .sps_01, .sps_1, .sps_2, .sps_3, .sps_4, .sps_5 {
    font-size: 26px;
    font-weight: 800;
  }
  .box_1, .box_2, .box_3, .box_4, .box_5, .box_6 {
    width: min(96%, 100%);
  }
  .possum_5 {
    gap: 10px;
  }
  .bti_logo {
    margin: 40% 50%;
    width: 60px;
    height: 60px;
    }
}
@media (max-width: 1600px) {
  body {
    background: #ecf2e6;
  }
  h1 {
    font-size: 28px;
    font-weight: 900;
  }
  .sps_01, .sps_1, .sps_2, .sps_3, .sps_4, .sps_5 {
    font-size: 26px;
    font-weight: 800;
  }
  .box_1, .box_2, .box_3, .box_4, .box_5, .box_6 {
    width: min(96%, 100%);
  }
  .possum_1, .possum_2, .possum_3, .possum_4, .possum_5 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  .bti_logo {
    margin: 40% 50%;
    width: 80px;
    height: 80px;
    }
}
@media (max-width: 1200px) {
  body {
    background: #ecf2e6;
  }
  h1 {
    font-size: 28px;
    font-weight: 900;
  }
  .box_1, .box_2, .box_3, .box_4, .box_5, .box_6 {
    width: min(96%, 100%);
  }
  .possum_1, .possum_2, .possum_3, .possum_4, .possum_5 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  .bti_logo {
    margin: 40% 50%;
    width: 60px;
    height: 60px;
    }
}
@media (max-width: 1000px) {
  .possum_1, .possum_2, .possum_3, .possum_4, .possum_5 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  .bti_logo {
    margin: 40% 50%;
    width: 60px;
    height: 60px;
    }
}
@media (max-width: 800px) {
  body {
    background: #ecf2e6;
  }
  h1 {
    font-size: 28px;
    font-weight: 900;
  }
.possum_1, .possum_2, .possum_3, .possum_4, .possum_5 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 10px 5px;
}
  .bti_logo {
    margin: 40% 50%;
    width: 60px;
    height: 60px;
    }
}
@media (max-width: 700px) {
  .sps_01, .sps_1, .sps_2, .sps_3, .sps_4, .sps_5 {
    font-size: 24px;
  }
  .bti_logo {
    margin: 40% 50%;
    width: 60px;
    height: 60px;
    }
}

@media (max-width: 500px) {
  h1 {
    font-size: 26px;
    font-weight: 900;
  }
  .box_1, .box_2, .box_3, .box_4, .box_5, .box_6 {
    width: min(96%, 100%);
  }
  .sps_01, .sps_1, .sps_2, .sps_3, .sps_4, .sps_5 {
    font-size: 20px;
    font-weight: 800;
  }
.possum_1, .possum_2, .possum_3, .possum_4, .possum_5 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 5px;
}
}