html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #09111e;
}

/* Фоновая сетка */

.grid-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0px;
  -webkit-perspective: 200px;
          perspective: 200px;
  background: #09111e;
  background: -webkit-linear-gradient(top, #253b5e, #09111e);
  background: linear-gradient(top, #253b5e, #09111e);
  box-shadow: inset 0px 0px 150px rgba(0, 0, 0, 0.65);
}
.grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin-top: -50px;
  -webkit-transform: rotateX(45deg);
          transform: rotateX(45deg);
}
.line {
  position: absolute;
  background: rgba(87, 193, 232, 0.35);
  -webkit-backface-visibility: hidden;
}
.vertical .line {
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(87, 193, 232, 0.35));
  background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(87, 193, 232, 0.35));
}
.vertical .line:nth-child(1) {
  left: 10%;
}
.vertical .line:nth-child(2) {
  left: 20%;
}
.vertical .line:nth-child(3) {
  left: 30%;
}
.vertical .line:nth-child(4) {
  left: 40%;
}
.vertical .line:nth-child(5) {
  left: 50%;
}
.vertical .line:nth-child(6) {
  left: 60%;
}
.vertical .line:nth-child(7) {
  left: 70%;
}
.vertical .line:nth-child(8) {
  left: 80%;
}
.vertical .line:nth-child(9) {
  left: 90%;
}
.vertical .line:nth-child(10) {
  left: 100%;
  margin-left: -1px;
}
.horizontal .line {
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 2;
}
.horizontal .line:nth-child(1) {
  top: 10%;
  opacity: 0.2;
}
.horizontal .line:nth-child(2) {
  top: 20%;
  opacity: 0.3;
}
.horizontal .line:nth-child(3) {
  top: 30%;
  opacity: 0.4;
}
.horizontal .line:nth-child(4) {
  top: 40%;
  opacity: 0.5;
}
.horizontal .line:nth-child(5) {
  top: 50%;
  opacity: 0.6;
}
.horizontal .line:nth-child(6) {
  top: 60%;
  opacity: 0.7;
}
.horizontal .line:nth-child(7) {
  top: 70%;
  opacity: 0.8;
}
.horizontal .line:nth-child(8) {
  top: 80%;
  opacity: 0.9;
}
.horizontal .line:nth-child(9) {
  top: 90%;
  opacity: 0.95;
}
.horizontal .line:nth-child(10) {
  top: 100%;
  margin-top: -1px;
  opacity: 1;
}
.horizontal .line:nth-child(11) {
  opacity: 0.05;
}
.dot {
  position: absolute;
  background: #57C1E8;
  width: 5px;
  height: 5px;
  top: 100%;
  border-radius: 5px;
  box-shadow: 0 0 3px #fff;
  -webkit-backface-visibility: hidden;
}
.dot:nth-child(1) {
  left: 10%;
  -webkit-animation: moveDot 5s infinite;
          animation: moveDot 5s infinite;
}
.dot:nth-child(2) {
  left: 20%;
  -webkit-animation: moveDot 20s infinite;
          animation: moveDot 20s infinite;
}
.dot:nth-child(3) {
  left: 30%;
  -webkit-animation: moveDot 15s infinite;
          animation: moveDot 15s infinite;
}
.dot:nth-child(4) {
  left: 40%;
  -webkit-animation: moveDot 8s infinite;
          animation: moveDot 8s infinite;
}
.dot:nth-child(5) {
  left: 50%;
  -webkit-animation: moveDot 10s infinite;
          animation: moveDot 10s infinite;
}
.dot:nth-child(6) {
  left: 60%;
  -webkit-animation: moveDot 12s infinite;
          animation: moveDot 12s infinite;
}
.dot:nth-child(7) {
  left: 70%;
  -webkit-animation: moveDot 7s infinite;
          animation: moveDot 7s infinite;
}
.dot:nth-child(8) {
  left: 80%;
  -webkit-animation: moveDot 6s infinite;
          animation: moveDot 6s infinite;
}
.dot:nth-child(9) {
  left: 90%;
  -webkit-animation: moveDot 9s infinite;
          animation: moveDot 9s infinite;
}
@-webkit-keyframes moveDot {
  0% {
    top: 100%;
    opacity: 1;
  }
  100% {
    top: 0%;
    opacity: 0;
  }
}
@keyframes moveDot {
  0% {
    top: 100%;
    opacity: 1;
  }
  100% {
    top: 0%;
    opacity: 0;
  }
}

/* Основной экран (коллекция треков) */

#header {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
  background: #09111e;
  background: -webkit-linear-gradient(top, #09111e, #253b5e);
  background: linear-gradient(top, #09111e, #253b5e);
  border-bottom: 1px solid #11649B;
  box-shadow: 0 0 15px 0 #11649B;
}

.song-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
//  margin: 0 20px;
  padding-top: 200px;
  padding-bottom: 20px;
}

.song-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px;
  text-align: center;
  position: relative;
  border-radius: 0 50%  50%  50%;
//  overflow: hidden;
}

#song-list {
  overflow-x: hidden;
}

.song-button {
  border: none;
  text-decoration: none;
  text-shadow: 1px 1px #000000;
  display: inline-block;
  padding: 12px 20px;
  margin: 10px 20px;
  border-radius: 20px;
  background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%);
  background-position: 100% 0;
  background-size: 200% 200%;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: white;
  box-shadow: 0 16px 32px 0 rgba(17, 100, 155, .75);
  transition: .5s;
  cursor: pointer;
  width: 200px;
}

.song-button:hover {
  box-shadow: 0 16px 32px 0 rgba(17, 100, 155, .95);
  background-position: 0 0;
}

.song-button-all {
  margin-top: 20px;
  position: absolute top center;
}

.playerButton-body {
  position: relative;
  height: 90px;
  text-align: center;
}

.small-descr {
  font-size: 14px;
  color: #C6E8F5;
}

.song-cover {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  cursor: pointer;
  opacity: 1;
  transition: opacity .3s ease-out;  
  -webkit-transition: opacity .3s ease-out;  
  -moz-transition: opacity .3s ease-in-out;
  position: relative;
  top: -254px;
  left: 50px;
  display: block;
  z-index: 2;
  margin-bottom: -254px;
}
.song-cover-opacity {
  opacity: 0;
}

/* Иконка поверх картинки */

.media-icon {
  position: absolute;
  top: 0px;
  right: 20px;
  width: 30px;
  height: 30px;
  background-color: #1A83AC;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 2px 2px 4px 0 rgba(0, 40, 120, .35);
  outline: none;
  border: 2px solid #61B4EB;
}

.media-icon:hover {
  background-color: #0D5793;
}

.video-icon {
  top: 40px;
}

.vario-icon {
  left: 0px;
  right: ;
  top: 25px;
  color: #75C8FF;
  font-size: 20px;
  font-weight: bold;
  line-height: 12px;
}

.vario-icon span {
  display: block;
  position: relative;
  width: 100%;
  transform: rotate(-90deg);
  text-align: center;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.vario-icon-rotated {
  transform: rotate(90deg) !important;
}

.vario-icon-rotated_3 {
  transform: rotate(180deg) !important;
}

.vario-icon:before,
.vario-icon:after {
  position: absolute;
  font-size: 12px;
  text-align: center;
  padding: 2px 4px 1px 4px;
  line-height: 9px;
  color: #4DA0D7;
}

.vario-icon:before {
  top: -18px;
  content: "Var.1";
}

.vario-icon:after {
  top: 36px;
  content: "Var.2";
}

.vario-icon_3 {
  width: 67px;
  height: 68px;
  position: absolute;
  top: -20px;
  left: -35px;
  border-radius: 30px 0 0 30px;
}

.vario-icon_3:before {
  position: absolute;
  font-size: 12px;
  text-align: left;
  line-height: 9px;
  color: #4DA0D7;
  top: 32px;
  left: 0px;
  content: "Var.3";
}

.vario-icon:hover,
.vario-icon_3:hover,
.vario-icon:hover:before,
.vario-icon:hover:after,
.vario-icon_3:hover:before {
  color: #FFFFFF;
} 

/* Пагинация */

.pagination {
    display: block;
    justify-content: center;
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
    width: 100%;
}

.pagination button {
    margin: 10px 5px;
    padding: 10px 15px;
    border: none;
    background-color: #555;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.pagination button:disabled {
    cursor: not-allowed;
    background-color: #777;
}

/* Поле поиска и выпадающий список */

.search-container {
    position: relative;
    margin-bottom: 20px;
    width: calc(100% - 22px);
    max-width: 400px;
    display: inline-block;
}

.search-box {
    width: calc(100% - 22px);
    max-width: 400px;
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
    background: #C3E9FF;
    outline: none;
    border: 1px solid #11649B;
    box-shadow: 0 0 15px 0 rgba(117, 200, 255, .75);
}

.search-box-close-btn {
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    top: 7px;
    right: 10px;
    cursor: pointer;
    color: #C0C0C0;
}

.search-box-close-btn:hover {
    color: #AAAAAA;
}

.suggestions-list {
    position: absolute;
    width: calc(100% - 22px);
    max-width: 400px;
    background-color: white;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 0 15px 0 rgba(117, 200, 255, .75);
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
}

/* Ползунок прокрутки - Firefox */
.suggestions-list {
    scrollbar-width: auto;
    scrollbar-color: #C0C0C0 #F1F1F1;
}
/* Ползунок прокрутки - Chrome, Edge и Safari */
.suggestions-list::-webkit-scrollbar {
    width: 16px;
}
.suggestions-list::-webkit-scrollbar-track {
    background: #F1F1F1;
    border-radius: 0 0 10px 0;
}
.suggestions-list::-webkit-scrollbar-thumb {
    background-color: #C0C0C0;
    border-radius: 20px;
    border: 3px solid #F1F1F1;
}

.suggestions-list div {
    padding: 4px;
    cursor: pointer;
    border-bottom: 1px solid #E9E9E9; /* #B0D4EA */
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: left;
}

.suggestions-list div:hover {
    background-color: #f0f0f0;
}

.suggestions-list img {
    width: 50px;
    height: 50px;
    margin-right: 6px;
    border-radius: 6px;
}

/* Кнопка скрытия меню */

#menu-trigger {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1100;
    color: #75C8FF;
    font-size: 20px;
    font-weight: bold;
    line-height: 12px;
}

.menu-trigger-rotated {
  transform: rotate(180deg) !important;
}

#menu-trigger:hover {
  color: #FFFFFF;
} 

#menu-trigger span {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  padding-bottom: 3px;
}

/* Кнопка показа видео */

#video-trigger {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1100;
    color: #75C8FF;
    font-size: 20px;
    font-weight: bold;
    line-height: 12px;
}

#video-trigger:hover {
  color: #FFFFFF;
} 

#video-trigger.closed {
  opacity: 0.5;
} 

/* Модальное окно */

.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  background: linear-gradient(#2892EB, rgb(220,236,255));
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 80%;
  max-width: 600px;
  min-height: 348px;
  position: absolute;
  overflow: hidden;
  box-shadow: 4px 4px 8px 0 rgba(0, 40, 120, .5);
}

.modal-elements {
  width: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 12;
  top: 20px;
  left: 20px;
}

.modal img.coverimg, 
.modal video.coverimg {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  margin-top: 1px;
  margin-right: 40px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 33%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 33%, transparent 100%);
}

.modal img.coverimg:hover,
.modal img.coverimg.fixvisio,
.modal video.coverimg:hover,
.modal video.coverimg.fixvisio {
  box-shadow: 2px 2px 6px 0 rgba(17, 100, 155, .75);
  outline: 1px solid #C4E8FE;
  -webkit-mask-image: none;
  mask-image: none;
}

.modal img.cloudimg {
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  -webkit-user-select: none;  
  -moz-user-select: none;  
  -ms-user-select: none;
  user-select: none;  
  pointer-events: none;
  z-index: 1;
}

.modal h2 {
  font-size: 24px;
  margin-bottom: 50px;
  margin-top: 10px;
  font-weight: 600;
  color: #5E9CD1;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.3), 2px 2px 4px rgba(179, 147, 211, 0.1),
    3px 4px 4px rgba(179, 147, 211, 0.15),
    4px 6px 4px rgba(179, 147, 211, 0.2),
    5px 8px 4px rgba(179, 147, 211, 0.25);
  font-family: 'Roboto', sans-serif;
  width: calc(100% - 40px);
}

.modal div.small-descr {
  color: #72B0E5;
}

.modal audio, .modal video {
  width: calc(100% - 40px);
  margin-top: 15px;
}

.close-btn {
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  top: -8px;
  right: 40px;
  cursor: pointer;
  color: white;
  text-shadow: 1px 1px #909090;
}

/* Плеер */

#modal-audio {
  opacity: 0.5;
}

#modal-video {
  border-radius: 10px;
}

#modal-video-cover:hover {
    transform: scale(1.9);
    transform-origin: 50% 19px;
    border-radius: 4px;
}

#modal-video-cover {
    transition-duration: 1.5s;
}

/* Волны */

.wave-divider {
  width: 100%;
  height: 120px;
  display:block;
  position:absolute;
  bottom: -21px;
  left:-20px;
  border-radius: 0 0 10px 10px;
}

.wave-parallax1 > use {
  animation: wave-move1 10s linear infinite;
    &:nth-child(1) {
    animation-delay: -2s;
  }
}

.wave-parallax2 > use {
  animation: wave-move2 8s linear infinite;
}

.wave-parallax3 > use {
  animation: wave-move3 6s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}
.wave-parallax4 > use {
  animation: wave-move4 4s linear infinite;
  &:nth-child(1) {
    animation-delay: -2s;
  }
}

@keyframes wave-move1 {
  0% {
    transform: translateX(85px);
  }
  100% {
    transform: translateX(-90px);
  }
}

@keyframes wave-move2 {
  0% {
    transform: translateX(-90px);
  }
  100% {
    transform: translateX(85px);
  }
}

@keyframes wave-move3 {
  0% {
    transform: translateX(85px);
  }
  100% {
    transform: translateX(-90px);
  }
}

@keyframes wave-move4 {
  0% {
    transform: translateX(-90px);
  }
  100% {
    transform: translateX(85px);
  }
}

/* Облака */

@-webkit-keyframes animcloud {
  from {
  -webkit-transform: translateX(100%)
  }
  to {
  -webkit-transform: translateX(-100%)
  }
}

@-moz-keyframes animcloud {
  from {
  -moz-transform: translateX(100%)
  }
  to {
  -moz-transform: translateX(-100%)
  }
}

@keyframes animcloud {
  from {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%)
  }
  to {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%)
  }
}

.cloud1 {
  -webkit-animation: animcloud 20s infinite linear;
  -moz-animation: animcloud 20s infinite linear;
  animation: animcloud 20s infinite linear
}

.cloud2 {
  -webkit-animation: animcloud 40s infinite linear;
  -moz-animation: animcloud 40s infinite linear;
  animation: animcloud 40s infinite linear
}

.cloud3 {
  -webkit-animation: animcloud 60s infinite linear;
  -moz-animation: animcloud 60s infinite linear;
  animation: animcloud 60s infinite linear
}

.cloud4 {
  -webkit-animation: animcloud 80s infinite linear;
  -moz-animation: animcloud 80s infinite linear;
  animation: animcloud 80s infinite linear
}

/* Звездное небо */

.warot {
  overflow-y: hidden;
}

.stars {
  position: relative;
  overflow: hidden;
  height: 2000px;
  background: #000 url('../data/stars/stars0.png');
}

.blink, .blink_2, .blink_3, .blink_4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: url('../data/stars/stars1.png');
  -webkit-animation: stars 5s linear infinite;
  animation: stars 5s linear infinite;
}

.blink_2 {
  background-position: 100px 100px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.blink_3 {
  background-image: url('../data/stars/stars2.png');
  background-position: 300px 100px;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.blink_4 {
  background-image: url('../data/stars/stars2.png');
  background-position: 0 0;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(0, 0, 255, 0.3), rgba(0, 0, 0, 0));
}

@-webkit-keyframes stars {
  0%, 50%, 100% {opacity: 0;}
  1%, 49% {opacity: 1;}
}

@keyframes stars {
  0%, 50%, 100% {opacity: 0;}
  5%, 45% {opacity: 1;}
}

/* Прелоадер */

.preloader {
  background-color: rgba(11,19,33,0.95); /* 12,82,144  24,39,63 */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;    
}

.loader {
  position: absolute;
  top: calc(50% - 64px);
  left: calc(50% - 64px);
  width: 128px;
  height: 128px;
  border-radius: 50%;
  perspective: 800px;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 6px solid #EFEFFA;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 6px solid #EFEFFA;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 6px solid #EFEFFA;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}    

/* Текст по дуге */

:root {
  --color-primary: #A0A0A0;
  --color-secondary: #AAA;
  --color-shadow: #F5DDDD;
}

.arc-heading {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.arc-heading__heading,
.arc-heading__subheading,
.arc-heading__horizont {
  font-family: 'Oswald', sans-serif;
  line-height: 1;
}    

.arc-heading__heading {
  font-size: 20px;
  fill: var(--color-primary);
  text-shadow: 1px 1px var(--color-shadow);
}

.arc-heading__subheading {
  font-size: 18px;
  fill: var(--color-secondary);
  text-shadow: 1px 1px var(--color-shadow);
  letter-spacing: tracking(50);
}

.arc-heading__horizont_right {
  font-size: 14px;
  color: var(--color-primary);
  text-shadow: 1px 1px var(--color-shadow);
  position: absolute;
  width: 38px;
  height: 20px;
  right: 2px;
  top: calc(50% - 10px); 
}

.arc-heading__horizont_left {
  font-size: 14px;
  color: var(--color-primary);
  text-shadow: 1px 1px var(--color-shadow);
  position: absolute;
  width: 38px;
  height: 20px;
  left: 2px;
  top: calc(50% - 10px); 
}

/* Compact-disc */

.cd {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at center, #e1e1e1, #c0c0c0);
  box-shadow: inset -8px -8px 16px rgba(255, 255, 255, 0.5),
              inset 8px 8px 16px rgba(0, 0, 0, 0.1),
              0px 0px 32px rgba(0, 0, 0, 0.3),
              0 0 8px 4px rgba(17, 100, 155, .75);
  overflow:hidden;
}

/* Внутреннее кольцо */
.cd::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at center, transparent 50%, rgba(255, 255, 255, 0.3) 52%);
}

/* Центральное отверстие */
.cd::after {
  content: '';
  position: absolute;
  top: 135px;
  left: 135px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #182740;
  opacity: 0.8;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* Радужные эффекты */
.rainbow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    red, orange, yellow, green, blue, indigo, violet, red
  );
  mix-blend-mode: overlay;
    opacity: 0.5;
    animation: rotate 5s linear infinite;
}

/* Анимация вращения радужного слоя */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Анимация вращения диска при наведении */
.cd:hover {
  animation: 5s linear 0s normal none infinite running rot;
  -webkit-animation: 5s linear 0s normal none infinite running rot;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}