.cm-video-section .circle {
display: block;
position: absolute;
top: 0;
transition: 1s ease;
}
.cm-video-section .circle,
.cm-video-section a {
background-image: url(https://26475452.fs1.hubspotusercontent-eu1.net/hubfs/26475452/Vector%20(1).png");
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
height: 100px;
width: 100px;
}
.cm-blue-home-lp .banner-logo {
margin-bottom: 20px;
}
.cm-video-section a .delay1 {
animation: waves 2s linear infinite;
animation-delay: 0.1s;
}
.cm-video-section a:hover .delay2 {
animation: waves 1s linear 0.7s infinite;
}
.cm-video-section a:hover .delay3 {
animation: waves 1s linear 1.2s infinite;
}
.cm-video-section a:hover .delay4 {
animation: waves 1s linear 1.7s infinite;
}
.cm-video-section a:hover .delay5 {
animation: waves 1s linear 2.2s infinite;
}
.cm-video-section a:hover .delay6 {
animation: waves 1s linear 2.7s infinite;
}
.cm-video-section {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 40%;
position: relative;
}
.cm-video-section a {
border-radius: 50%;
height: 100px;
left: 0;
position: absolute;
right: 0;
width: 100px;
z-index: 999;
}
.cm-video-section a,
.cm-video-section a img {
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
.cm-video-section a img {
left: 3px;
position: relative;
}
@-webkit-keyframes waves {
0% {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(1.8);
}
}
@media (max-width: 1200px) {
.cm-video-section {
padding-bottom: 47%;
}
}
@media (max-width: 767px) {
.cm-video-section {
padding-bottom: 72%;
}
.cm-video-section .circle,
.cm-video-section a {
height: 60px;
width: 60px;
}
.cm-video-section .playBtn {
background-size: cover;
height: 30px;
width: 24px;
}
}