Sites-Camelia/branches/zaap-sufokien/v3/sass/_hero.scss

/*---------------------
   Hero section
 -----------------------*/
 .hero-section {
     height: 100%;
    // @media #{$tab_device} {
    //     padding: 0 40px;
    // }
 }
.pana-accordion {
    @media #{$large_mobile, $small_mobile} {
        display: none;
    }
}
 .pana-accordion-item,
 .hero-item  {
     display: flex;
     align-items: flex-end;
     position: relative;
         .pa-text {
         padding-left: 40px;
         padding-bottom: 50px;
         position: relative;
         z-index: 5;
         opacity: 0;
         top: -50px;
         .pa-tag{
             display: inline-block;
             padding: 4px 20px;
             margin-bottom: 10px;
             font-size: 12px;
             color: $primary_color;
             text-transform: uppercase;
             font-weight: 600;
             border-radius: 2px;
             background: $white_color;
         }
         h2 {
             font-size: 60px;
             font-weight: 700;
             color: $white_color;
             margin-bottom: 20px;
             @media #{$large_mobile, $tab_device} {
                font-size: 48px;
            }
            @media #{$small_mobile} {
                font-size: 36px;
            }
            @media #{ $xs_mobile} {
                font-size: 24px;
            }
         }
         h4 {
            font-weight: 600;
            color: $white_color;
            padding-top: 15px;
            @media #{ $xs_mobile} {
                font-size: 16px;
            }
         }
         .pa-author {
             overflow: hidden;
            img {
                width: 60px;
                height: 60px;
                float: left;
                border-radius: 50%;
                margin-right: 10px;
            }
         }
     }
     &.active {
        .pa-text {
            opacity: 1;
            top: 0;
            @include transition(all 0.4s ease 0.4s);
        }
        &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 50%;
            left: 0;
            bottom: 0;
            background: rgb(0,0,0);
            background: -moz-linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
            background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
            background: linear-gradient(0deg, rgba(0,0,0,0.8211659663865546) 0%, rgba(0,0,0,0) 94%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
        }
     }
 }


.hero-slider-warp {
    height: 100%;
    display: none;
    @media #{$large_mobile, $small_mobile} {
        display: block;
    }
}
 .hero-slider {
     height: 100%;
     .owl-stage-outer,
     .owl-stage,
     .owl-item,
     .pana-accordion-item,
     .hero-item {
        height: 100%;
     }
 }
 .hero-item {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 0 15px;
     .pa-text {
         padding-left: 0;
         padding-bottom: 0;
        h4 {
            display: inline-block;
         }
         .pa-author {
            img {
                float: none;
                display: inline-block;
            }
         }
     }
}

 .owl-item.active .hero-item {
    .pa-text {
        opacity: 1;
        top: 0;
        @include transition(all 0.4s ease 0.4s);
    }
    &:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        background: #000000;
        opacity: 0.5;
    }
}