@import url("bootstrap.min.css");
@import url("animate.css");
@import url("owl.carousel.min.css");
@import url("owl.theme.css");
@import url('https://fonts.googleapis.com/css?family=Tajawal:200,300,400,500,700,800&display=swap');
body
{
    font-family:'Tajawal';
    overflow-x: hidden;
    text-align: right;
    font-size: 16px;
    color:#575757;
    position:relative;
    margin: 0;
    padding: 0;
    background: #FFF;
    direction: rtl;
}
.container .card-stack .card-list {
    margin-top: 50px;
    height: 300px;
    position: relative;
        }
          .container .card-stack .card-list li {
		display: flex;
    align-items: center;
    justify-content: center;
    transition: all 100ms ease-in-out;
    position: absolute;
    list-style: none;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-top: 20px;
    text-align: center;
    border: 1px solid #ECECF0;
    border-radius: 25px;
    background: #FFF;
            }
                .container .card-stack .card-list li:nth-child(1) {
                    left: 15px;
                    transform: rotateX(45deg);
                }
             .container .card-stack .card-list li:nth-child(2) {
                        left: 45px; 
                 transform: rotateX(35deg);
                }
               .container .card-stack .card-list li:nth-child(3) {
                  left: 75px;                 
                }

.transformThis {
    animation: scaleDown 500ms;
}

.transformPrev {
    animation: scaleUp 100ms;
		display: none;
}

@keyframes scaleUp {
    0% {transform: scale(1.2) translateY(50px); opacity: 0; }
    20% {transform: scale(1.15) translateY(40px); opacity: 0.10;}
    40% {transform: scale(1.10) translateY(30px); opacity: 0.20;}
    60% {transform: scale(1.05) translateY(20px); opacity: 0.40;}
    80% {transform: scale(1.01) translateY(10px); opacity: 0.80;}
    100% {transform: scale(1) translateY(0); opacity: 1;}
}

@keyframes scaleDown {
    0% {transform: scale(1) translateY(0); opacity: 1; }
    20% {transform: scale(1.01) translateY(20px); opacity: 0.80;}
    40% {transform: scale(1.05) translateY(40px); opacity: 0.40;}
    60% {transform: scale(1.10) translateY(60px); opacity: 0.20;}
    80% {transform: scale(1.15) translateY(80px); opacity: 0.10;}
    100% {transform: scale(1.2) translateY(100px); opacity: 0;}
}

@keyframes scaleCard {
    0%   {top:5px;}
    100% {top:24px;}    
}

*{
    transition: all .3s ease-in-out;
}
h1,h2,h3,h4,.navbar-nav,ul,p,figure
{
    padding: 0px;
    margin: 0px;
}
h2,.read-story a, .sound-story a, .down-story a,h1
{
   font-weight: 600;
}
.closebtn
{
    display: none;
}

#title-p {
    padding: 0 0 40px 0;
}

.nav-link {
    padding: 0 13px!important;
}
.shado
    {
    box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.04);
    -moz-box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.04);
    -webkit-box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.04);
    -o-box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.04);
    }
/*--Button--*/
.btn
{ 
 height: 45px;
    padding: 3px 20px;
    background: #58B0E3;
    border: 1px solid #58B0E3;
    color: #FFF;
}
.btn:hover,.owl-carousel .owl-nav .owl-next span:hover,.owl-carousel .owl-nav .owl-prev span:hover
.container .card-stack .next:hover
{ 
    background: #6db341;
}

.btn.focus, .btn:focus,.form-control:focus,textarea:focus
{
box-shadow: none;
}
/*--Sticky Menu--*/
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999999999999;
    box-shadow: 0 0 10px rgba(123, 123, 123, 0.5);
    -moz-box-shadow: 0 0 10px rgba(123, 123, 123, 0.5);
    -webkit-box-shadow: 0 0 10px rgba(123, 123, 123, 0.5);
    -o-box-shadow: 0 0 10px rgba(123, 123, 123, 0.5);
    transition: all .5s ease 0s;
    right: 0;
    left: 0px;
    background: #000000e3;
    padding: 10px;
}
.sticky .pt-4
{
    padding-top: .5rem!important;
}
#myBtn {
    z-index: 5;
    display: none;
    bottom: 30px;
    right: 50px;
    position: fixed;
}
#myBtn a {
width: 45px;
    height: 45px;
    font-size: 18px;
    opacity: 0.7;
    filter: alpha(opacity=70);
    border: solid 1px #fff;
    line-height: 2;
    display: block;
    background: #2a88c0;
    border-radius: 25px;
    color: #FFF;
}
#myBtn a:hover
{
     opacity: 1;
}
a:hover
{
    text-decoration: none;
}
/*--Rulls--*/
.navbar-light .navbar-nav .active>.nav-link,.navbar-expand-lg .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover,.about-text,
.bully h5
{
    color: #575757;
}
.menu-button-opener.menu-button-opener-predefined .qodef-hm-lines .qodef-hm-line ,.overlay,.center-btn,.activity:before,.infografic:before,.infografic:after,footer:before,.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next,.bully:before,.aboutus:before,header:before,.container .card-stack .buttons
{
    position: absolute;
}
#hero .hero-box,.bully-box,.pic-box
{
    display: flex;
}
.socail-media li,#myBtn a,.owl-dots,.storyline,.drawing,.cant
{
    text-align: center;
}
.owl-infografic .item,.bully-mid,.video-about,.activity,.infografic,footer,.bully,.aboutus,header,.owl-infografic-2 .item
{
  position: relative;
}
section
{
    padding-top: 20px;
}
.activity:before,.infografic:before,.infografic:after,footer:before,.bully:before,.aboutus:before,header:before
{
    content: '';
}
/*---header----*/
header:before
{
    background: url(../img/shape.png) no-repeat;
    left: 100px;
    top:0px;
    width: 500px;
    height: 250px; 
}
header .row
{
    justify-content: center;
    align-items: center;
}
.navbar-light .navbar-toggler
{
    border: 0px;
}
    .side-logo
    {
        display: none;
    }
.menu-button-opener.menu-button-opener-predefined .qodef-hm-lines .qodef-hm-line.qodef-line-1 {
    top: 15px;
    width: 13px;
}
.menu-button-opener.menu-button-opener-predefined .qodef-hm-lines .qodef-hm-line {
    right: 0;
    height: 2px;
    background-color: currentColor;
    -webkit-transition: width .3s ease;
    -moz-transition: width .3s ease;
    transition: width .3s ease;
}
.menu-button-opener.menu-button-opener-predefined .qodef-hm-lines .qodef-hm-line.qodef-line-2 {
    top: 20px;
    width: 18px;
}
.menu-button-opener.menu-button-opener-predefined .qodef-hm-lines .qodef-hm-line.qodef-line-3 {
    top: 25px;
    width: 23px;
}
.menu-button-opener.menu-button-opener-predefined:hover .qodef-hm-lines .qodef-hm-line.qodef-line-1,
.menu-button-opener.menu-button-opener-predefined:hover .qodef-hm-lines .qodef-hm-line.qodef-line-2, 
.menu-button-opener.menu-button-opener-predefined:hover .qodef-hm-lines .qodef-hm-line.qodef-line-3 {
    width: 23px;
}
.clearfix
{
    clear: both;
}
.navbar-expand-lg .navbar-nav .nav-link {
font-weight: 500;
    font-size: 19px;
}
.navbar-expand-lg .navbar-nav .nav-link:hover {
color: #2988c1;
}
#navbarNav
{
        justify-content: center;
}
.socail-media li
{
height: 30px;
    width: 30px;
    line-height: 28px;
    margin: 0px 5px;
    border: 3px solid #8b8b8b;
    border-radius: 50%;
           
}
.pic-box,.socail-media li
{
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.socail-media li a
{
    color: #8b8b8b;
}
.socail-media li:hover a
{
    color: #6dbf57;
}
.socail-media li:hover 
{
    border:3px solid #6dbf57;
}
/*--AboutUS--*/
.video-about img
{
    height: 350px;
}
iframe {
  width: 100%;
  height: 100%;
}
.about-text h2,.activity-title h2
{
    font-size: 38px;
        color: #454545;
}
.about-text h2,.about-text h3,.sound-story,.read-story
{
     margin-top: 10px;
}
.about-text h3,.activity-title h3,.activity-title p
{
    color: #707070;
    font-size: 35px;
    margin-top: 10px;
}

.about-text p
{
    font-weight: 400;
    font-size: 18px;
}
.aboutus:before
{
    top: 136px;
    left: 0px;
    background:url(../img/about-bg.png) no-repeat;
    width: 200px;
    height: 200px;
}
/*---Bully---*/
.bully:before
{
    background: url(../img/bully-bg.png) no-repeat;
  left: 0px;
    top: 37px;
    width: 236px;
    height: 400px;
    z-index: -1;
}
.bully h5
{
    font-weight: 500;
    font-size: 24px;
}
.bully-mid,.owl-story .item
{
     padding: 20px;
}
.bully-mid,.read-story,.sound-story,.down-story
{
    border:1px solid #ECECF0;
    border-radius: px;
    background: #FFF;
}
.read-story,.sound-story,.down-story
{
    padding: 10px;
    cursor: pointer;
}
.read-story a,.sound-story a,.down-story a
{
    color: #3C3C3C;
    font-size: 18px;
}
.down-story:hover,.read-story:hover,.sound-story:hover
{
    background: #3AA2DD;
}
.down-story:hover a,.read-story:hover a,.sound-story:hover a
{
    color: #FFF;
}
.bully-mid:hover
{
    background: #FAFAFA;
}
.bully-mid:hover h5,.bully-mid:hover p
{
    color: #0076b4;
}
.bully .bully-mid img
{
    /*padding-left:20px;*/
    width: 350px;
    height: 220px;
}
.bully .bully-mid a.read-more
{
    border-radius: 50%;
    width: 37px;
    height: 37px;
    color: #FFF;
    padding: 5px 15px;
    background:#0076B4;
    position: absolute;
    left: 20px;
    bottom: 20px;
}
.owl-theme .owl-dots .owl-dot span {
     border-radius: 5px;
    width: 40px;
    height: 5px;
    margin-top: 30px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #0076B4;
}
/*--Vedio Rekeen--*/
.center-btn
{
    color: #6FBCD6;
    background: linear-gradient(to right,#EFFBFB,#B6C3C5);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
}
.video .center-btn
{
       height: 60px;
    width: 60px; 
    font-size: 22px;
}
.video-about .center-btn
{
       height: 60px;
    width: 60px; 
}
.owl-sound .center-btn
{
       height: 50px;
    width: 50px;
    font-size: 22px;
}
.owl-video .item:hover .center-btn,.center-btn:hover,.owl-media .item:hover
{
    color: #6dbf57;
}
/*--Activity--*/
.activity-title h2
{
    font-weight: 300;
}
.activity-title h3,.activity-title p
{
    font-weight: 400;
}
.activity-title p
{
 font-size: 18px;
}
.activity-box
{
     padding: 20px 10px 3px 10px;
}
.activity
{
    width: 100%;
    border-radius: 5px;
    padding: 5px 0px!important;
    text-indent: 10px;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #d8d6d6;
    color: #757575;
    background: #fbfbfb;
}
.activity:before 
{
    right: 0px;
    top: 0px;
    background: url(../img/activity-bg.png) no-repeat;
    width: 350px;
   
}
/*--infografic--*/
.owl-infografic .item,.owl-infografic-2 .item
{
    height: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.owl-infografic .info-text,.owl-infografic-2 .info-text
{
      height: 50px;
        padding: 5px 10px;
}
.owl-infografic .info-text,.owl-sound h3,.owl-infografic-2 .info-text
{
    color: #360A2B;
    font-size: 18px;
    font-weight: 600;
}
.item-box
{
    border-radius: 25px;
    border:1px solid #707070;
    height: 100%;
}
.owl-infografic .owl-item img,.owl-infografic-2 .item img
{
    border-radius: 25px 25px 0px 0px;
}
.owl-infografic .owl-item .item-one img
{
    height: 619px;
}
.owl-infografic .owl-item .item-two img
{
    height: 277px;
}
.owl-infografic .owl-item .item-two .item-box
{
   height: 49%;
    width: 85%;
}
.owl-carousel .owl-nav .owl-next,.container .card-stack .next
{
    left: 45px;
}
.owl-carousel .owl-nav .owl-prev,.container .card-stack .prev
{
    left: 13px;
}
.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next,.container .card-stack .next,.container .card-stack .prev
{
       top: -80px; 
}
.owl-carousel .owl-nav .owl-prev span, .owl-carousel .owl-nav .owl-next span, .container .card-stack .next,.container .card-stack .prev
{
    color: #FFF;
    background: #3AA2DD;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
}
.owl-carousel .owl-nav .owl-next span,.container .card-stack .next
{
    height: 28px;
    width: 28px;
}
.owl-carousel .owl-nav .owl-prev span,.container .card-stack .prev
{
    height: 25px;
    width: 25px;
}
.owl-infografic .owl-item .item-two .item-box:first-of-type,.owl-sound .item .bully-mid:first-of-type
{
     margin-bottom: 15px;   
}
/*--sound--*/
.owl-sound .item,.owl-sound-2 .item
{
    background: #6DB341;
    border-radius: 25px;
    padding: 35px;
}
.owl-sound .bully-mid
{
    
}
.bully-mid a,.video-about a
{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.owl-sound .bully-mid img
{
    height: 120px;
}
.infografic:before 
{
left: 0px;
    bottom: 273px;
    background: url(../img/infografic-bg.png) no-repeat;
    width: 500px;
    z-index: -1;
    height: 600px;
}
.infografic:after 
{
 right: -177px;
    bottom: 0px;
    background: url(../img/infografic-bg02.png) no-repeat;
    width: 348px;
    height: 328px;
    z-index: -1;
}
#hero
{
    background: url(../img/hero1.png) no-repeat left;
    background-size: 90%;
    BACKGROUND-POSITION: -200PX;
}
/*--Hero--*/
#hero .hero-box
{
    font-size: 18px;
}
.bully-mid a.read-more:hover
{
    background: #6dbf57;
}

.storyline:hover,.drawing:hover,.cant:hover
{
    box-shadow: -7px 7px 9px 1px rgba(182, 180, 180, 0.37);
    -moz-box-shadow: -7px 7px 9px 1px rgba(182, 180, 180, 0.37);
    -webkit-box-shadow: -7px 7px 9px 1px rgba(182, 180, 180, 0.37);
    -o-box-shadow: -7px 7px 9px 1px rgba(182, 180, 180, 0.37);
    transition: 0.5s ease;
    cursor: pointer;
    transform: translateX(-8px) !important;
}
.drawing
{
    background: #704DBC;
}
.storyline
{
    background: #3AA2DD;
}
.cant
{
    background: #6DB341;
}
.storyline,.drawing,.cant
{
    height: 80px;
    padding: 30px 10px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 5px;
        display: flex;
    justify-content: center;
    align-items: center;
}
.storyline a,.drawing a,.cant a
{
    color:#FFF;
}
.story-box
{
    padding: 20px;
    position: relative;
}
.story-box h4
{
  font-weight: 500;
}
.storyline,.drawing,.cant
{
    padding: 10px;
    margin: 10px 0px;
    cursor: pointer;
}
.h-30
{
   height: 270px;
    margin-bottom: 10px;
}
.h-30 .story-pic
{
    max-height: 100%;
}
/*--Footer--*/
footer:before
{
    left: 30%;
    background: url(../img/footer-bg.png) no-repeat;
    width: 800px;
    z-index: -1;
    height: 400px;
    top: 0px;
}
footer
{
    padding-top: 120px;
    padding-bottom: 20px;
    color: #A7A7A7;
}
footer ul.menu a
{
padding: 10px 0px 10px 50px;
    color: #707070;
    font-weight: 400;
}
footer ul.menu a:hover
    {
        color: #2A88C0;
    }
.foot-menu
{
    align-items: center;
}
.foot-menu h3
{
    font-size: 23px;
    font-weight: 500;
}
.star-y
{
    color: #F8C962;
}
.detail-menu a
{
    color: #231F20;
}
.icon-g
{
    color: #B9B9B9;
}
.fa-share
{
    color: #6DB341
}
.fa-share:hover
{
    color: #0178FF;
}
.detail-menu .nav-link {
    padding: .5rem;
}
.details-pic
{
    height: 500px;
}
.audio-box
{
    margin-top: -100px;
    width: 100%;
}
.details-text
{
    font-weight: 400;
    font-size: 20px;
}
@media (max-width: 1299px)
{
.owl-sound .item,.owl-sound-2 .item {
    padding: 35px 15px;
}
}
@media only screen and (max-width: 1199px)
{
    footer ul.menu a {
    padding: 8px;
    font-size: 14px;
}
     h6 {
    font-size: 0.8rem;
}
}
@media (min-width: 991px) and (max-width: 1199px)
{
    .read-story img, .sound-story img, .down-story img
    {
        width: 50px;
    }
    .read-story a, .sound-story a, .down-story a {
    font-size: 13px;
}
}
@media (min-width: 768px) and (max-width: 991px)
{
    .activity-title
    {
        padding-top: 30px;
    }
}
@media only screen and (max-width: 991px)
{
    .container .card-stack .card-list {
    height: 540px;
}
    #hero {
    background-size: 90% 100%;
}
    .video-about
    {
        margin-top: 20px;
    }
.navbar-expand-lg .navbar-nav .nav-link
    {
        background: none;
        padding: 10px;
    }
#mySidepanel {
    width: 0;
    position: fixed;
    z-index: 999999;
    height: 100%;
    top: 0;
    right: 0;
    background: #0076B4;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 100px !important;
}
.navbar-light .navbar-nav .nav-link,.navbar-light .navbar-nav .active>.nav-link, .navbar-expand-lg .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover,header .socail-media li a
    {
            color: #FFF;
    }
    header .socail-media li
    {
        border: 3px solid #FFF;
    }
.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover
    {
        text-decoration: underline;
    }

#mySidepanel .closebtn {
    position: absolute;
    top: 0;
    left: 25px;
    font-size: 36px;
    display: block;
    color: #FFF;
}
    .navbar-expand-lg .navbar-nav {
    flex-direction: column;
}
    .side-logo
    {
        display: flex;
    }
    .socail-up
    {
        display: none;
    }
    .logo
    {
        text-align: center;
    }
    #hero .hero-box
    {
        display: block;
    }
    .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next
    {
            top: -40px;
    }
    .bully-mid, .owl-story .item {
    padding: 10px;
        margin: 10px;
}
    .hero-text
    {
         background: #ffffffc9;   
    }
}
@media only screen and (max-width: 767px)
{
    .container .card-stack .card-list {
    height: 800px;
}
    .details-pic {
    width: 500px;
    height: 225px;
}
.audio-box {
    margin-top: -60px;
}
}
@media only screen and (max-width: 576px)
{
    .h-30 .story-pic {
    height: 200px;
}
    #hero .hero-box {
    font-size: 14px;
}
    footer ul.menu a {
    padding: 7px;
    font-size: 14px;
}
        footer
    {
        text-align: center;
        padding-top: 0px;
    }
    .h-30 {
    height: auto;
    }
    .foot-menu ul,.foot-menu .socail-media 
    {
        justify-content: center;
    }

}
@media only screen and (max-width: 425px)
{
    .owl-theme .owl-dots .owl-dot span
    {
    width: 10px;
    margin-top: 10px;
        margin: 5px 2px;
    }
    .story-box {
    padding: 5px;
}
    .activity:before
    {
        width: 250px;
    }
    .about-text h2
    {
        margin-top: 15px;
    }
    .aboutus:before {
    top: 76px;
    }
    .sound-box h2
    {
        margin-top: 25px;
    }
    .read-story a, .sound-story a, .down-story a {
    font-size: 15px;
}
.audio-box {
    margin-top: 16px;
}
}
@media only screen and (max-width: 375px)
{
    .bully-box
    {
    display: flex;
    flex-direction: column;
}
}