/*  
---------------------------------------------------
Overlay icons
---------------------------------------------------  
*/

.image .overlayicon { 
    content: "";
    position:absolute; top:0; z-index:101;
    width:100%; height:100%;
    
    -webkit-transition:
        opacity 0.3s ease-in-out 0s,
        color 0.3s ease-in-out 0s,
        background-color 0.3s ease-in-out 0s,
        text-decoration 0.3s ease-in-out 0s,
        top 0.3s ease-in-out 0s,
        right 0.3s ease-in-out 0s,
        bottom 0.3s ease-in-out 0s,
        left 0.3s ease-in-out 0s,
        width 0.3s ease-in-out 0s,
        max-width 0.3s ease-in-out 0s,
        height 0.3s ease-in-out 0s,
        max-height 0.3s ease-in-out 0s,
        padding-top 0.3s ease-in-out 0s,
        padding-right 0.3s ease-in-out 0s,
        padding-bottom 0.3s ease-in-out 0s,
        padding-left 0.3s ease-in-out 0s,
        box-shadow 0.3s ease-in-out 0s,
        border-color 0.3s ease-in-out 0s,
        transform 0.3s ease-in-out 0s;
    transition:
        opacity 0.3s ease-in-out 0s,
        color 0.3s ease-in-out 0s,
        background-color 0.3s ease-in-out 0s,
        text-decoration 0.3s ease-in-out 0s,
        top 0.3s ease-in-out 0s,
        right 0.3s ease-in-out 0s,
        bottom 0.3s ease-in-out 0s,
        left 0.3s ease-in-out 0s,
        width 0.3s ease-in-out 0s,
        max-width 0.3s ease-in-out 0s,
        height 0.3s ease-in-out 0s,
        max-height 0.3s ease-in-out 0s,
        padding-top 0.3s ease-in-out 0s,
        padding-right 0.3s ease-in-out 0s,
        padding-bottom 0.3s ease-in-out 0s,
        padding-left 0.3s ease-in-out 0s,
        box-shadow 0.3s ease-in-out 0s,
        border-color 0.3s ease-in-out 0s,
        transform 0.3s ease-in-out 0s;
}

.image .overlayicon::before { 
    content: "";
    position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;
    width:100%; height:100%;
    background: rgba(var(--true-black), 1);
    opacity: 0.25;
    transition: all 0.3s ease-in-out 0s;
}

a:hover .image .overlayicon::before { 
    opacity: 0.5;
}

.item_overlay .image .overlayicon::before {
    opacity: 0.4;
}

.item_overlay a:hover .image .overlayicon::before {
    opacity: 0.8;
}

.image .overlayicon .icon { 
    position:absolute;
    top:50%; left:50%;
    z-index:101;
    text-align:center;
    font-size:3rem;
    transform: translate(-50%,-50%);
    transition: all 0.4s ease-in-out 0s;
    color: rgba(var(--true-white), 1);
}
a:hover .image .overlayicon .icon { 
    transform: translate(-50%,-50%) scale(1.25);
}

@media (min-width:0) and (max-width:575px) {}

@media (max-width:576px) {}

@media (max-width:767px) {}

@media (min-width:992px) {
    .image .overlayicon .icon { 
        font-size:4rem;
    }
    .items-5 .image .overlayicon .icon,
    .items-6 .image .overlayicon .icon { 
        font-size:2rem;
    }
    .items-7 .image .overlayicon .icon,
    .items-8 .image .overlayicon .icon { 
        font-size:1rem;
    }
}

@media (min-width:1200px) {
    .image .overlayicon .icon { 
        font-size:5rem;
    }
    .items-5 .image .overlayicon .icon,
    .items-6 .image .overlayicon .icon { 
        font-size:3rem;
    }
    .items-7 .image .overlayicon .icon,
    .items-8 .image .overlayicon .icon { 
        font-size:2rem;
    }
}




/* 	
-------------------------------------------------- 
Image icon
-------------------------------------------------- 
*/

.image.icon-image i.icon {
    font-size: 40px;
}
.item.item_has-bg .image.icon-image { 
    padding:var(--base-half-spacing) var(--base-spacing) 0;
}
.item.item_text-below.item_has-bg .image.icon-image + .info { 
    padding-top:0!important;
}
html.no-touch a:hover .image.icon-image {
    transform: scale(1.15);
}

@media (min-width:768px) {
    .image.icon-image { 
        text-align:center!important;
    }
    .item.item_text-below .text-left .image.icon-image { 
        text-align:left!important;
    }
    .item.item_text-below .text-right .image.icon-image { 
        text-align:right!important;
    }
}



/* 	
-------------------------------------------------- 
Overlay icon on Windows videos 
-------------------------------------------------- 
*/

.item.item_text-boxed.base-bg .image .overlayicon::before,
.item.item_text-boxed .inner.base-bg .image .overlayicon::before,
.item.item_text-boxed .image.base-bg .overlayicon::before { 
    background: rgba(var(--base-bg), 1);
}

.item.item_text-boxed.base-bg .image .overlayicon .icon,
.item.item_text-boxed .inner.base-bg .image .overlayicon .icon,
.item.item_text-boxed .image.base-bg .overlayicon .icon {
    color: rgba(var(--base-heading), 1);
}