@charset "utf-8";
/* CSS Document */

.banner-wrapper .swiper-slide  {
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-banner-item{ display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center;}
.moral{background-color: #e48686;}
.Mytho{background-color: #66738d;}
.dada-comic{background-color: #95a568;}
.swami{background-color: #52a1cf;}



.story-banner-content {text-align: left;  padding: 0 2% 0 3%; flex: 1 0 50% ; transform: translateY(24%);}

.story-banner-img {flex: 1 0 50%;
  transform: translateX(0) translateY(0%);
  animation-duration: 1s; animation-fill-mode: both;
  animation-name: fadeInBottom; 
} 

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to { opacity: 1 }
}

.banner-wrapper .swiper-slide img{height: auto;}

.swiper-wrapper:nth-child(4n+1)  .swiper-slide .story-banner-img{animation-delay: 0.5s;}
.swiper-wrapper:nth-child(4n+2)  .swiper-slide .story-banner-img {animation-delay:3s;} 
.swiper-wrapper:nth-child(4n+3)  .swiper-slide .story-banner-img{animation-delay: 7s;} 
.swiper-wrapper:nth-child(4n+4)  .swiper-slide .story-banner-img{animation-delay: 9s;}

 

.slide-title  {
  font-size:50px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  margin: 0 0 20px;
  text-transform: uppercase;
  transition: all .4s ease;
}


.slide-text p {
  opacity: 0.8;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  color: #ffffff;
  margin: 0;
  padding-right: 50px;
  transition: all .4s ease;
}


.view{background: #fff; border-radius: 5px; padding: 3px 22px; width: 80px; text-align: center; color:#000; margin-top:10px; display: block;}


h2{margin: 30px auto;}
 

/*----------------------------------    */  
.pic-story{height: auto;}
.carousel .swiper{ margin:30px auto; width: 95%; height:285px; } 
.carousel{ margin-bottom:60px;}
.carousel .prev-slide-button, .carousel .next-slide-button{top: 40%; transform: translateY(-40%);}

.story-item { height:254px; margin: 0 auto 50px; display: table;}
.story-img img{border-radius:35px;
    display: block;
    width: 90%;
    height: 80%;
    object-fit: cover;
    transition: 0.6s ease;
    padding:10px;
    margin: 0 auto;
  }
.story-img img:hover { scale: 0.95; box-shadow: 10px 26px 60px rgba(68, 77, 136, 0.3);}

.story-title{font-size: 18px; line-height: 25px; font-weight: 500;  padding:12px 10px 0; text-align: center;}
.story-title a{ color: var(--secondry-color);}


.title-wrapper{display: flex; justify-content: space-between; padding:0px 30px; align-items: center;} 
.title-wrapper .story-title{ text-align: left !important; /*width: 85%;   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;*/}
.title-wrapper .share img{width:15px; height: 15px; border: none !important; margin:10px 10px 0 0 ; cursor: pointer;}




.story-wrapper:nth-child(odd) .story-item img {border:7px solid #a30c17;}
.story-wrapper:nth-child(even) .story-item img {border:7px solid #168f7d;}

/* --------------story main page-------------------- */

.swiper-slide:nth-child(odd) .story-item img {border:7px solid #a30c17;}
.swiper-slide:nth-child(even) .story-item img {border:7px solid #168f7d;}

 .section-title{display: flex; align-items: center; justify-content: space-between; width: 95%; margin: 0 auto;}
 .section-title a{color: var(--secondry-color); width: 120px;}
 .section-title h3{color: var(--red); font-weight: 600;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        /* width:calc(98% - 50px); */
        width: 100%;

}
 .section-title h3:after {
        content: "";
        border: 0;
        border-bottom:1px dashed #eee;
        background: #999;
        margin: 0 0px;
        flex: 1 0 20px;
        width: 100%;
        display: block;
      }

  .section-title .more{width:70px; text-align: center; margin-left: 3px;}    
/*-------------------comic story---------------------------*/

.comic-thumb{-webkit-box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
  border-right-color: transparent;
max-width:370px;
height:100%;
text-align:center; 
margin:0 auto 30px auto; border-radius:20px; background:#f2f2f2;  position: relative;}

.comic-thumb .comic-matter { padding:15px 8px; position: relative; }
.comic-thumb .comic-matter p{ font-size:18px; text-align:center; color: var(--secondry-color); line-height: 26px; }

.comic-thumb .comic-img {
position: relative;
width: 100%;
overflow: hidden;
z-index: 2;
border-radius: 20px 20px 0 0;
background:#000;
}


.comic-thumb .comic-img img{

transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
border-radius: 15px 15px 0 0;
-webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
width: 100%;
margin: 0;}


.comic-thumb .comic-img:hover img {
transform: scale(1.1);
opacity: 0.75;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}


.comic-thumb .wave-bg {
  position: absolute;
  width: 100%;
  left: 0;
  height: 0;
z-index: 5;
}


.comic-thumb .wave-bg:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 12px;
  background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -5px, transparent 14px, #f2f2f2 16px);
}

.comic-thumb .wave-bg:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 12px;
  background-size: 40px 20px;
background-image: radial-gradient(circle at 10px 15px, #f2f2f2 12px, transparent 13px);
}

/* -------------------------picture story--------------------------- */
.pic-container{width:80%; margin: 0 auto;}

@property --angle {
	syntax: '<angle>';
	inherits: true;
	initial-value: 0deg;
}
.pic-story{ margin:0px auto; 
        --angle: 0deg;
	background: linear-gradient(white, white) padding-box, conic-gradient(from var(--angle), #dfdfdf, #787943) border-box;
	border: 2px solid transparent;
	border-radius: 16px;
	-webkit-animation: rotate-gradient 3s infinite linear;
	animation: rotate-gradient 3s infinite linear;    
}

@-webkit-keyframes rotate-gradient {
	from { --angle: 0deg; }
	to { --angle: 360deg; }
}

@keyframes rotate-gradient {
	from { --angle: 0deg; }
	to { --angle: 360deg; }
}



.pstory-item {margin: 0 auto; }
.pstory-img img{border-radius:35px;
    display: block;
    width:100% !important;
    height: 400px !important;
    object-fit:contain;
    padding:20px 10px 10px;
    margin: 0 auto;
  }


.pstory-text{ padding: 10px 30px 15px; text-align: center;}
.pstory-item audio{margin: 0 auto;margin-top: 20px;margin-bottom: 20px;}


/* ----------select--------- */
.lang-opt .select-option{margin:0 20px 20px 0;}

/* -----------------audio------------------------ */
audio{ margin: 0 auto 35px; display: block;}

/* ------------next-previous-button------------- */
.ne-pre-btn{display:flex; justify-content: flex-end; flex-direction: row;  }
.ne-pre-btn .btn{font-size: 16px;
    border-radius: 5px;
    padding: 3px 15px;
    text-align: center;
    border: 1px solid #c8c8c8;
    background: #fff;
    cursor: pointer; width:100px; 
    margin-left:10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ne-pre-btn .btn:hover{background: var(--red); color: #fff; border-color: var(--red);}
.ne-pre-btn .btn:hover img{filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(7496%) hue-rotate(292deg) brightness(93%) contrast(122%);}

.ne-pre-btn img{width: 6px; filter: brightness(0) saturate(100%) invert(41%) sepia(11%) saturate(12%) hue-rotate(21deg) brightness(96%) contrast(75%);}
.ne-pre-btn .prev{margin-right:5px}
.ne-pre-btn .next{margin-left:5px}

/* -------------------------responsive---------------------------- */
@media only screen and (max-width: 1400px) {h2 { margin: -35px auto 30px; z-index: 2; padding: 0 15px; line-height: 30px;}
    }

@media (min-width: 1280px)  {.moral .story-banner-content{flex: 1 0 45%;}
.moral .story-banner-img{flex: 1 0 55%;}}

@media only screen and (min-width:960px) {.categories .swiper-wrapper {justify-content: center;}}
@media (max-width: 1400px){.story-banner-img img{ width:80%;}}
@media (max-width: 1199px) {.slide-title  {font-size:35px;  margin: 0 0 10px;}  .slide-text p {font-size:20px; }
.story-banner-content{padding: 0 2% 0 7%;} }

@media (max-width:960px){.pic-container{width:96%;}
.pstory-img img{height: 300px !important;}
}


@media (max-width: 767px) { .story-banner-content{order: 2; flex: 1 100%;  margin-top: calc(-10% + 50px); display: flex;  text-align:center ; align-items: center; flex-direction:column ;}
.story-banner-img{order: 1; flex: 1 100%; margin-top: -10%;}
.slide-text p {font-size: 16px;font-weight: normal; padding: 0; margin: 0; }
.slide-title  {font-size:25px;}
.slide-title br{display: none}
.story-banner-item{position: relative; z-index: 2;}
.banner-wrapper .swiper-slide { position: relative;}  
.banner-wrapper .swiper-slide::before{z-index: 1;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  bottom: 45px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%);}
  .story-banner-img img{ width:40%; margin: 0 auto; display: block; object-fit: contain;}
  .ne-pre-btn{justify-content: center; margin: 30px auto;}
}

@media (max-width:640px){
  .story-banner-img img{ width:58%;}
  .story-banner-content{margin-top: calc(-12% + 30px);}
}

@media (max-width:639px) {.prev-slide-button, .next-slide-button{visibility:visible;}
.story-img img{max-width: 369px;}
}

@media (max-width:580px){
.pstory-img img{height: 200px !important;}
}

@media screen and (max-width:480px){ .comic-thumb{ width:300px;} }


@media (max-width:420px){
        .story-banner-img{margin-top: -17%;}
        .story-banner-img img{ width:80%; margin: 0 auto 8px;}      
        .story-banner-content{margin-top: calc(-15% + 30px);}
.pstory-img img{height:180px !important;} 

}



        






/* ------------------banner bg animation------------------ */
/*** --- PARTICLES --- ***/
.bottom-particles {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 5;
}
.bottom-particles .bubble {
  opacity: 0;
  position: absolute;
  bottom: -10px;
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
.bottom-particles .bubble:nth-child(1) {
  left: 22%;
  -webkit-animation: blow 5000ms infinite;
          animation: blow 5000ms infinite;
  -webkit-animation-delay: 11461ms;
          animation-delay: 11461ms;
}
.bottom-particles .bubble:nth-child(2) {
  left: 34%;
  -webkit-animation: blow 5000ms infinite;
          animation: blow 5000ms infinite;
  -webkit-animation-delay: 9792ms;
          animation-delay: 9792ms;
}
.bottom-particles .bubble:nth-child(3) {
  left: 21%;
  -webkit-animation: blow 14751ms infinite;
          animation: blow 14751ms infinite;
  -webkit-animation-delay: 2830ms;
          animation-delay: 2830ms;
}
.bottom-particles .bubble:nth-child(4) {
  left: 64%;
  -webkit-animation: blow 5000ms infinite;
          animation: blow 5000ms infinite;
  -webkit-animation-delay: 8539ms;
          animation-delay: 8539ms;
}
.bottom-particles .bubble:nth-child(5) {
  left: 31%;
  -webkit-animation: blow 5000ms infinite;
          animation: blow 5000ms infinite;
  -webkit-animation-delay: 4025ms;
          animation-delay: 4025ms;
}
.bottom-particles .bubble:nth-child(6) {
  left: 70%;
  -webkit-animation: blow 5000ms infinite;
          animation: blow 5000ms infinite;
  -webkit-animation-delay: 9220ms;
          animation-delay: 9220ms;
}
.bottom-particles .bubble:nth-child(7) {
  left: 5%;
  -webkit-animation: blow 7737ms infinite;
          animation: blow 7737ms infinite;
  -webkit-animation-delay: 11643ms;
          animation-delay: 11643ms;
}
.bottom-particles .bubble:nth-child(8) {
  left: 27%;
  -webkit-animation: blow 6645ms infinite;
          animation: blow 6645ms infinite;
  -webkit-animation-delay: 5757ms;
          animation-delay: 5757ms;
}
.bottom-particles .bubble:nth-child(9) {
  left: 10%;
  -webkit-animation: blow 13284ms infinite;
          animation: blow 13284ms infinite;
  -webkit-animation-delay: 5607ms;
          animation-delay: 5607ms;
}
.bottom-particles .bubble:nth-child(10) {
  left: 56%;
  -webkit-animation: blow 12783ms infinite;
          animation: blow 12783ms infinite;
  -webkit-animation-delay: 8462ms;
          animation-delay: 8462ms;
}
.bottom-particles .bubble:nth-child(11) {
  left: 73%;
  -webkit-animation: blow 11023ms infinite;
          animation: blow 11023ms infinite;
  -webkit-animation-delay: 11300ms;
          animation-delay: 11300ms;
}
.bottom-particles .bubble:nth-child(12) {
  left: 74%;
  -webkit-animation: blow 14903ms infinite;
          animation: blow 14903ms infinite;
  -webkit-animation-delay: 10186ms;
          animation-delay: 10186ms;
}
.bottom-particles .bubble:nth-child(13) {
  left: 16%;
  -webkit-animation: blow 14034ms infinite;
          animation: blow 14034ms infinite;
  -webkit-animation-delay: 3677ms;
          animation-delay: 3677ms;
}
.bottom-particles .bubble:nth-child(14) {
  left: 81%;
  -webkit-animation: blow 13212ms infinite;
          animation: blow 13212ms infinite;
  -webkit-animation-delay: 10013ms;
          animation-delay: 10013ms;
}
.bottom-particles .bubble:nth-child(15) {
  left: 77%;
  -webkit-animation: blow 5081ms infinite;
          animation: blow 5081ms infinite;
  -webkit-animation-delay: 2725ms;
          animation-delay: 2725ms;
}
.bottom-particles .bubble:nth-child(16) {
  left: 2%;
  -webkit-animation: blow 5000ms infinite;
          animation: blow 5000ms infinite;
  -webkit-animation-delay: 4046ms;
          animation-delay: 4046ms;
}
.bottom-particles .bubble:nth-child(17) {
  left: 39%;
  -webkit-animation: blow 6182ms infinite;
          animation: blow 6182ms infinite;
  -webkit-animation-delay: 7158ms;
          animation-delay: 7158ms;
}
.bottom-particles .bubble:nth-child(18) {
  left: 20%;
  -webkit-animation: blow 10522ms infinite;
          animation: blow 10522ms infinite;
  -webkit-animation-delay: 1936ms;
          animation-delay: 1936ms;
}
.bottom-particles .bubble:nth-child(19) {
  left: 54%;
  -webkit-animation: blow 12717ms infinite;
          animation: blow 12717ms infinite;
  -webkit-animation-delay: 3426ms;
          animation-delay: 3426ms;
}
.bottom-particles .bubble:nth-child(20) {
  left: 29%;
  -webkit-animation: blow 5000ms infinite;
          animation: blow 5000ms infinite;
  -webkit-animation-delay: 10353ms;
          animation-delay: 10353ms;
}
.bottom-particles .bubble:nth-child(21) {
  left: 7%;
  -webkit-animation: blow 10199ms infinite;
          animation: blow 10199ms infinite;
  -webkit-animation-delay: 1881ms;
          animation-delay: 1881ms;
}
.bottom-particles .bubble:nth-child(22) {
  left: 90%;
  -webkit-animation: blow 6443ms infinite;
          animation: blow 6443ms infinite;
  -webkit-animation-delay: 411ms;
          animation-delay: 411ms;
}
.bottom-particles .bubble:nth-child(23) {
  left: 50%;
  -webkit-animation: blow 10282ms infinite;
          animation: blow 10282ms infinite;
  -webkit-animation-delay: 2477ms;
          animation-delay: 2477ms;
}
.bottom-particles .bubble:nth-child(24) {
  left: 29%;
  -webkit-animation: blow 11912ms infinite;
          animation: blow 11912ms infinite;
  -webkit-animation-delay: 776ms;
          animation-delay: 776ms;
}
.bottom-particles .bubble:nth-child(25) {
  left: 54%;
  -webkit-animation: blow 5000ms infinite;
          animation: blow 5000ms infinite;
  -webkit-animation-delay: 4680ms;
          animation-delay: 4680ms;
}


@-webkit-keyframes blow {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, -100vh) scale(0.2);
  }
}

@keyframes blow {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, -100vh) scale(0.2);
  }
}