﻿
/*MORE BOX CSS SETTINGS*/
.container_overlay {
    position: relative;
    /*max-width: 800px;*/
    margin: 0 auto;
    /*width:30%*/
}

.container_overlay .content {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.3); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    width: 100%;
    height: 100%;
    /*    padding-left:20px;
padding-right:20px
padding: 20px;*/
}

.container_overlay img {
    vertical-align: middle;
}

.container_overlay:hover .image {
    opacity: 0.3;
}

.container_overlay_hide .content {
    display: none;
}

.image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

* {
    box-sizing: border-box;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border: 2px solid white
}

.image_zoom:hover {
    /*opacity: 0.8;*/
    /*transform: scale(1.1);*/
    /*transition: transform .3s ease-out .3s ease-in; */
    /*transition: transform .3s ease-in; */
    display: block;
    width: 110%;
    height: auto;
    transition-duration: 1s;
    backface-visibility: hidden;
}

