@import "https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800";
*{margin:0;padding:0;box-sizing:border-box}
body{background-color:#ffe53b;background-image:linear-gradient(147deg,#ffe53b 0%,#fd3838 74%);min-height:100vh;font-family:'Fira Sans',sans-serif;display:flex}
.blog-slider{width:95%;position:relative;max-width:800px;margin:auto;background:#fff;box-shadow:0 14px 80px rgba(34,35,58,0.2);padding:25px;border-radius:25px;height:400px;transition:all .3s}
.blog-slider__item{display:flex!important;align-items:center}
.blog-slider__item.swiper-slide-active .blog-slider__img img{opacity:1;transition-delay:.3s}
.blog-slider__item.swiper-slide-active .blog-slider__content > *{opacity:1;transform:none;&:nth-child(1) {transition-delay:.3s}}
&:nth-child(2){transition-delay:.4s}
.blog-slider__img{width:300px;flex-shrink:0;height:300px;background-image:linear-gradient(147deg,#fe8a39 0%,#fd3838 74%);box-shadow:4px 13px 30px 1px rgba(252,56,56,0.2);border-radius:20px;transform:translateX(-80px);overflow:hidden;&:after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(147deg,#fe8a39 0%,#fd3838 74%);border-radius:20px;opacity:0}}
.blog-slider__img img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;border-radius:20px;transition:all .3s}
.blog-slider__content{padding-right:25px;width:50%}
.blog-slider__content > *{opacity:0;transform:translateY(25px);transition:all .4s}
.blog-slider__title{font-size:24px;font-weight:700;color:#0d0925;margin-bottom:20px}
.blog-slider__text{color:#4e4a67;margin-bottom:30px;line-height:1.5em}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets,.blog-slider .swiper-pagination-custom,.blog-slider .swiper-pagination-fraction{bottom:10px;left:0;width:100%}
.blog-slider__pagination{position:absolute;z-index:21;right:20px;width:11px!important;text-align:center;left:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet{margin:8px 0}
.blog-slider__pagination .swiper-pagination-bullet{width:11px;height:11px;display:block;border-radius:10px;background:#062744;opacity:.2;transition:all .3s}
.blog-slider__pagination .swiper-pagination-bullet-active{opacity:1;background:#fd3838;height:30px;box-shadow:0 0 20px rgba(252,56,56,0.3)}
.hidden {display: none;}
@media screen and (max-width: 992px) {
.blog-slider{max-width:680px;height:400px}
}
@media screen and (max-width: 768px) {
.blog-slider{min-height:500px;height:auto;margin:180px auto}
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.blog-slider{height:350px}
}
@media screen and (max-width: 768px) {
.blog-slider__item{flex-direction:column}
}
@media screen and (max-width: 768px) {
.blog-slider__img{transform:translateY(-50%);width:90%}
}
@media screen and (max-width: 576px) {
.blog-slider__img{width:95%}
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.blog-slider__img{height:270px}
}
@media screen and (max-width: 768px) {
.blog-slider__content{margin-top:-80px;text-align:center;padding:0 30px}
}
@media screen and (max-width: 576px) {
.blog-slider__content{padding:0}
}
@media screen and (max-width: 576px) {
.blog-slider__button{width:100%}
}
@media screen and (max-width: 768px) {
.blog-slider__pagination{transform:translateX(-50%);left:50%!important;top:205px!important;width:100%!important;display:flex;justify-content:center;align-items:center}
}
@media screen and (max-width: 768px) {
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}
}
@media screen and (max-width: 768px) {
.blog-slider__pagination .swiper-pagination-bullet-active{height:11px;width:30px}
}