File: //home/codo66ho/.trash/assets/scss/_video-area.scss
@-webkit-keyframes border_animation {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
20% {
-webkit-transform: scale(1.24);
transform: scale(1.24);
opacity: 1
}
100% {
-webkit-transform: scale(2.1);
transform: scale(2.1);
opacity: 0
}
}
@-moz-keyframes border_animation {
0% {
-moz-transform: scale(1);
transform: scale(1);
opacity: 0
}
20% {
-moz-transform: scale(1.24);
transform: scale(1.24);
opacity: 1
}
100% {
-moz-transform: scale(2.1);
transform: scale(2.1);
opacity: 0
}
}
@-o-keyframes border_animation {
0% {
-o-transform: scale(1);
transform: scale(1);
opacity: 0
}
20% {
-o-transform: scale(1.24);
transform: scale(1.24);
opacity: 1
}
100% {
-o-transform: scale(2.1);
transform: scale(2.1);
opacity: 0
}
}
@keyframes border_animation {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 0
}
20% {
-webkit-transform: scale(1.24);
-moz-transform: scale(1.24);
-o-transform: scale(1.24);
transform: scale(1.24);
opacity: 1
}
100% {
-webkit-transform: scale(2.1);
-moz-transform: scale(2.1);
-o-transform: scale(2.1);
transform: scale(2.1);
opacity: 0
}
}
.rex_video_section {
padding: 120px 0px 115px;
.video_img_area {
max-width: 1010px;
}
.about_progress {
@extend%about_progress;
left: -120px;
bottom: 60px;
.progress_area {
width: 75px;
@extend%circle_progress;
}
.progress_text {
@extend%progress_text;
}
}
.video_play_area {
top: 50%;
z-index: 1;
right: -160px;
max-width: 370px;
padding: 65px 60px;
position: absolute;
background-color: #fff;
transform: translateY(-50%);
box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.06);
span {
@extend%themetag;
}
.video_play_btn {
@extend%video_playbtn;
margin: 65px auto;
}
.video_text {
h4 {
@extend%heading_style;
font-size: 20px;
padding-bottom: 20px;
}
p {
font-size: 14px;
line-height: 1.714;
}
}
}
.shape_pattern_3 {
position: absolute;
right: -190px;
bottom: 40px;
z-index: 0;
}
}
.video_btn_border {
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
border-radius: 60px;
position: absolute;
animation-play-state: running;
border: 2px solid #f7f3ea;
animation: border_animation 3.9s linear 0s infinite;
}
.video_btn_border.border_wrap-2 {
animation-delay: 1.3s
}
.video_btn_border.border_wrap-3 {
animation-delay: 2.6s
}