/* ==========================================================================
   Item Showcase start styles
   ========================================================================== */

.qodef-interactive-banner-holder {
    
    position:relative;
    padding:20px;
    background-position:center center;
    background-size: cover;
    overflow:hidden;
    
    .qodef-interactive-banner-icon {
        position:relative;
        display: inline-block;
        font-size:54px;
        color: $first-main-color;
        margin-bottom:35px;
        z-index:1;
    }
    
    .qodef-interactive-banner-title-holder {
        margin-bottom:16px;
        position:relative;
        display: inline-block;
        z-index:1;
    }

    .qodef-interactive-banner-text-holder {
        margin-bottom:20px;
        
        p {
            position:relative;
            display:inline-block;
            z-index:1;
        }
    }
    
    .qodef-btn {
        z-index:101;
        margin-top:23px;
    }

    .qodef-interactive-banner-initial {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        @include qodefTransition(opacity 0.3s);
    }
    
    .qodef-interactive-banner-overlay {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        @include qodefTransition(opacity 0.3s);
    }
    
    .qodef-interactive-banner-cover-link {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        z-index: 100;
    }
    
    &.qodef-interactive-banner-align-center {
        text-align:center;
    }
    
    &.qodef-interactive-banner-align-right {
        text-align:right;
    }
    
    &.qodef-interactive-banner-light-theme {
        
        .qodef-interactive-banner-title-holder > * {
            color:#fff;
        }
        
        .qodef-interactive-banner-text-holder {
            color:#fff;
        }
        
        .qodef-interactive-banner-overlay {
            background:#000;
            opacity:0;
        }

        &:hover .qodef-interactive-banner-initial {
            opacity:0;
        }
        
        &:hover .qodef-interactive-banner-overlay {
            opacity:0.88;
        }
    }
    
    &.qodef-interactive-banner-dark-theme {

        .qodef-interactive-banner-text-holder {
            color:#000;
        }
        
        .qodef-interactive-banner-overlay {
            background:#fff;
            opacity:0;
        }

        &:hover .qodef-interactive-banner-initial {
            opacity:0;
        }
        
        &:hover .qodef-interactive-banner-overlay {
            opacity:0.5;
        }
    }
    
}

/* ==========================================================================
   Item Showcase end styles
  ========================================================================== */