.abha-social-sec1 { width: 100%; height: auto; float: left; display: block;margin-top:0px; padding: 70px 0 70px 0; position: relative;  }
.abha-social-sec1:after {content: ''; width: 100%; display: block; height: 0; font-size: 0px;  line-height: 0; clear: both;}
.abha-social-sec1-box1{width: 100%; height: auto; float: left; display: block; }
.abha-social-sec1-box1-left{width: 70%; height: auto; float: left; display: block; }
.social-box{width: 100%; height: auto; float: left; display: block; position: relative; padding-bottom: 30px; margin-bottom: 30px;}
.social-box h2{width: 100%; height: auto;  font-size: 32px; font-weight: 500; color: #3f3f3f; line-height:35px; padding: 0px 0px 10px 0; margin-bottom: 15px; border-bottom: 1px solid #ED168C; }
 .social-box-facebook{ margin-left: -10px;  margin-right: -10px;  }
 .social-box2-facebook{ width: 100%; height: auto; float: left; display: block;}
.social-media{ height: auto; }
.social-box-facebook ul li{padding: 10px 10px; position: relative;} 
.social-media li a{ width: 100%; height: 100%; position: relative; overflow: hidden; z-index: 1; }
.social-media a aside{ width: 100%; min-height: 480px; float: left; background: #fff; border-radius: 5px;-webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16); padding-bottom: 40px; position: relative; display: block; overflow: hidden;  }
.social-media li a:hover aside{-webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.26);
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.26);}
.social-media li a aside figure{width: 100%; height: auto; float: left; display: block; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.social-media li a aside figure img{width: 100%; display: block; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.social-media li a aside article{width: 100%; height: auto; float: left; display: block; margin-top:0px; padding: 30px 30px;  position: relative; }
.social-media li a aside article span{ position: absolute; left: 30px; top: -20px; width: 40px; height: 40px; border-radius: 50%;  background: #3B579D;
}
.social-media li a aside article span i{ width: auto; height: auto; display: table; margin: 0 auto; text-align: center; font-size: 20px; font-weight: 600; color: #fff; line-height: 40px;}

.social-media li a aside article span.youtube{ position: absolute; left: 30px; top: -20px; width: 40px; height: 40px; border-radius: 50%; background: #ED228A; 
}
.social-media li a aside article span.youtube i{ width: auto; height: auto; display: table; margin: 0 auto; text-align: center; font-size: 20px; font-weight: 600; color: #fff; line-height: 40px;}
.social-media li a aside article h3{width: 100%; height: auto; float: left; display: block;  font-size: 24px; font-weight: 400; color: #ED228A;  line-height:30px; padding: 0px 0px 0px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
.social-media li a aside article p{width: 100%; height: auto; float: left; display: block;  font-size: 14px; font-weight: 400; color: #505050;  line-height:20px; padding: 20px 0px 0px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp:3; line-clamp: 3; -webkit-box-orient: vertical;}
.social-media li a aside article h4{width: 100%; height: auto; float: left; display: block; font-size: 14px; font-weight: 400; color: rgb(99, 99, 99); line-height: 20px; position: relative; padding: 0px 0px 10px 30px;}
.social-media li a aside article h4::after { content: ""; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background: url(../images/calendar-icon.svg) left top no-repeat;}

.social-media li a aside article h5{width: auto; height: auto; float: left; display: inline-block;  font-size: 14px; font-weight: 300; color: #636363;  line-height:24px; padding: 10px 20px 0px 25px; position: relative; }
.social-media li a aside article h5 i{ position: absolute; left: 0; top: 9px; width: 25px; height: 25px; font-size: 14px; font-weight: 700; color: #ED228A;  line-height:30px; }
.social-media li a aside article h5 strong{font-weight: 600; }
.social-media li a aside article h6{width: auto; height: auto; float: left; display: inline-block;  font-size: 14px; font-weight: 300; color: #636363;  line-height:24px; padding: 10px 0px 0px 25px; position: relative; }
.social-media li a aside article h6 i{ position: absolute; left: 0; top: 7px; width: 25px; height: 25px; font-size: 17px; font-weight: 700; color: #ED228A;  line-height:30px; }
.social-media li a aside article h6 strong{font-weight: 600; }
.social-media li a aside small{ position: absolute; right: 0; bottom: 0px; width: auto; height: auto; padding: 10px 30px; background: #e33861; cursor: pointer;  border-bottom-right-radius: 5px; font-size: 14px; font-weight: 600; color: #fff;  line-height:20px;  background-image: linear-gradient(0, #000, #000); background-size: 0; transition: .8s;background-repeat: no-repeat;  display: inline-block; padding-left: 35px; }
.social-media li a:hover aside small{background-size: 100%; -webkit-box-shadow: 0px 10px 9px -3px rgba(0, 0, 0, 0.14); -moz-box-shadow: 0px 10px 9px -3px rgba(0,0,0,0.14);  box-shadow: 0px 10px 9px -3px rgba(0, 0, 0, 0.14); color: #fff;}
.social-media li a aside small i { position: absolute; top: 50%;left: 22px; font-size: 12px; color: #fff;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: -webkit-transform .4s;  transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s,-webkit-transform .4s; -webkit-transform-origin: center; -ms-transform-origin: center;transform-origin: center}
.social-media li a:hover aside small i{ -webkit-transform: translate(-50%,-50%) rotate(1turn);  -ms-transform: translate(-50%,-50%) rotate(1turn);  transform: translate(-50%,-50%) rotate(1turn)}
.social-media li a aside:before { box-sizing: border-box; transform: translateX(100%); content: '';
  position: absolute;bottom: 0;left: 0; width: 100%;height: 1px;border-radius: 4px;border-bottom: 1px solid transparent; border-left: 1px solid transparent;z-index: 22;}
.social-media li a aside:after { box-sizing: border-box; transform: translateX(-100%); content: '';
  position: absolute;top: 0; left: 0;width: 100%;height: 1px;border-radius: 4px;border-top: 1px solid transparent; border-right: 1px solid transparent;}
.social-media li a:hover aside:before { transition: 0.1s transform linear, 0.5s height linear 0.1s; transform: translateX(0); height: 100%; border-color: #e33861 ;}
.social-media li a:hover aside:after {transition: 0.1s transform linear 0.2s, 0.5s height linear 0.3s;
  transform: translateX(0);height: 100%; border-color: #e33861;}



.social-media .blog-ps_prev, .social-media .blog-ps_next {position: absolute; bottom: -25px;  z-index: 5; width:20px; height:20px; font-size: 0px; cursor: pointer;  }
.social-media .blog-ps_prev {left: 25px; background: url(../images/blog-arrow5.png) no-repeat 3px 4px; display: block; border: 1px solid #ED228A; border-radius: 2px; }
.social-media .blog-ps_next {background: url(../images/blog-arrow5.png)no-repeat -13px 4px; display: block; left:52px; border: 1px solid #ED228A; border-radius: 2px;}
.social-media .blog-ps_prev.slick-disabled { border: 1px solid #a3a3a3; background: url(../images/blog-arrow5.png) no-repeat 3px -11px; }
.social-media .blog-ps_next.slick-disabled { border: 1px solid #a3a3a3; background: url(../images/blog-arrow5.png) no-repeat -13px -11px; }









.social-box-right{width: 30%; height: auto; float: left; display: block; padding-left: 50px; position: sticky;  top: 120px; }

.social-box1-right{ width: 100%; height: auto ; float: left; display: block; margin: 20px 0; }
.social-box1-right h2{width: 100%; height: auto; float: left; display: block;  font-size: 24px; font-weight: 600; color: #050505;  line-height:30px; padding: 0px 0px 20px 0;  }

.social-box1-right ul{width: 100%; height: auto; float: left;  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;-webkit-flex-wrap: wrap;}
.social-box1-right ul li{width: 100%; height: auto; float: left; display: block; }

.social-box1-right ul li a{width: auto; height: auto; float: left; display: block;padding: 0px 30px 10px 0px;  font-size: 24px; font-weight: 500; color: #454545;  line-height:40px; position: relative;  border-bottom: 0px solid #d2d2d2; margin-bottom: 10px;  transition: .4s; position: relative;}
.social-box1-right ul li a big{content: ''; position: absolute; right: 0; top: 0; width: 20px; height: auto;  
    font-size: 20px; font-weight: 400; line-height: 40px; }
    .social-box1-right ul li a:hover big{ color: #e33861 !important;}
.social-box1-right ul li a span{width: 40px; height: 40px; margin-right: 30px; float: left; display: table;  border-radius: 50%; position: relative;}
.social-box1-right ul li a span:after{content:'';  position: absolute; right:0px ; top: 20px; width: 10px; height: 1px; background: #fff;}
.social-box1-right ul li a span::before{content:'';  position: absolute; right:-20px ; top: 20px; width: 20px; height: 1px; background: #000;}
.social-box1-right ul li a span i{ display: table-cell; vertical-align: middle; text-align: center; font-size: 16px; font-weight: 600; line-height: 40px; }

.social-box1-right ul li.facebook a span{background: #3B579D;}
.social-box1-right ul li.facebook a span i{ color: #fff;}
.social-box1-right ul li.facebook a span::before{background: #3B579D;}
.social-box1-right ul li.facebook a big{color: #3B579D;}
.social-box1-right ul li.instagram a span{background: #FD01BE;}
.social-box1-right ul li.instagram a span i{ color: #fff;}
.social-box1-right ul li.instagram a span::before{background: #FD01BE;}
.social-box1-right ul li.instagram a big{color: #FD01BE;}
.social-box1-right ul li.x a span{background: #000;}
.social-box1-right ul li.x a span i{ color: #fff;}
.social-box1-right ul li.x a span::before{background: #000;}
.social-box1-right ul li.x a big{color: #000;}
.social-box1-right ul li.linkedin a span{background: #0274B3;}
.social-box1-right ul li.linkedin a span i{ color: #fff;}
.social-box1-right ul li.linkedin a span::before{background: #0274B3; }
.social-box1-right ul li.linkedin a big{color: #0274B3;}
.social-box1-right ul li.youtube5 a span{background: #ff0000;}
.social-box1-right ul li.youtube5 a span i{ color: #fff;}
.social-box1-right ul li.youtube5 a span::before{background: #ff0000;}
.social-box1-right ul li.youtube5 a big{color: #ff0000;}
.social-box1-right ul li:last-child a{border-bottom: 0px solid #d2d2d2; margin-bottom: 0px;}
.social-box1-right ul li a:hover{ color: #e33861;  border-bottom: 0px solid #fabedf; }
.social-box1-right ul li a.active{ color: #e33861;  border-bottom:0px solid #fabedf; }
.social-box1-right ul li:last-child a:hover{  border-bottom: 0px solid #fabedf; }
/* .social-box1-right ul li a:after{content:'';  position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: url(../images/blog-arrow5.png) no-repeat -18px 10px; display: block; } */


















@media screen and (max-width: 1280px) {
.social-media li a aside article h3 { font-size: 20px;line-height: 26px;}
}
@media screen and (max-width: 800px) {
.abha-social-sec1-box1-left { width: 100%;}
.social-box-right {padding-left: 0px;
    position: relative;
    top: inherit; width: 100%;
}
.social-media a aside {
  min-height: 100%;
}
}