/*===========================
19.CHOOSE css
===========================*/
.choose-area{
padding-top: 113px;
padding-bottom: 120px;
background: #f5f7ff;
& .section-title{
& .title{
padding-bottom: 25px;
@media #{$lg} {
font-size: 50px;
}
@media #{$md} {
font-size: 50px;
}
&::before{
display: none;
}
}
}
& .choose-cat{
& .choose-cat-item{
position: relative;
padding-left: 80px;
@media #{$xs} {
padding-left: 60px;
}
& .title{
font-size: 24px;
@media #{$xs} {
font-size: 18px;
}
}
& p{
color: #81a3bb;
padding-top: 13px;
padding-right: 80px;
@media #{$xs} {
padding-right: 0;
}
}
& i{
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
background: $white;
box-shadow: 0px 4px 8px 0px rgba(160, 194, 255, 0.2);
font-size: 20px;
color: $theme-color;
@include transition(0.3s);
position: absolute;
top: -10px;
left: 0;
@media #{$xs} {
top: -15px;
}
@media #{$sm} {
top: -10px;
}
}
&:hover{
& i{
background: $theme-color;
color: $white;
}
}
}
}
& .choose-thumb-area{
position: relative;
& .choose-thumb-2{
position: absolute;
right: 0;
bottom: -150px;
z-index: 55;
@media #{$xs} {
position: inherit;
top: 30px;
}
&::before{
position: absolute;
content: '';
width: 0;
height: 0;
border-bottom: 370px solid $theme-color;
border-left: 370px solid transparent;
z-index: -1;
right: -20px;
bottom: -20px;
@media #{$xs} {
display: none;
}
}
}
}
& .choose-video-thumb{
position: relative;
@media #{$md} {
margin-top: 200px;
}
@media #{$xs} {
margin-top: 60px;
}
@media #{$sm} {
margin-top: 200px;
}
& a{
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
height: 100px;
width: 100px;
text-align: center;
line-height: 100px;
color: $white;
border-radius: 50%;
background: $theme-color;
&::before{
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 50%;
border: 2px solid rgba(227, 238, 255,1);
-webkit-animation: play-btn-1 2.5s linear infinite;
-moz-animation: play-btn-1 2.5s linear infinite;
-o-animation: play-btn-1 2.5s linear infinite;
animation: play-btn-1 2.5s linear infinite;
}
&::after{
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 50%;
border: 2px solid rgba(227, 238, 255,1);
-webkit-animation: play-btn-2 1.5s linear infinite;
-moz-animation: play-btn-2 1.5s linear infinite;
-o-animation: play-btn-2 1.5s linear infinite;
animation: play-btn-2 1.5s linear infinite;
}
}
}
}