.bl-main {
    position: relative;
    width: 936px;
    min-height: 660px;
    overflow: hidden;
}

.bl-main>section {
    width: 169px;
    position: absolute;
    margin-left: 27px;
    height: 150px;
}

.bl-main>section table {
    margin-left: 115px;
}

.bl-main>section:first-child {
    top: 5px;
    left: 0;
    background: #ffffff;
}

.bl-main>section:nth-child(2) {
    top: 5px;
    left: 183px;
    background: #ffffff;
}

.bl-main>section:nth-child(3) {
    top: 5px;
    left: 366px;
    background: #ffffff;
}

.bl-main>section:nth-child(4) {
    top: 5px;
    left: 549px;
    background: #ffffff;
}

.bl-main>section:nth-child(5) {
    top: 5px;
    left: 732px;
    background: #ffffff;
}

.bl-main>section:nth-child(6) {
    top: 122px;
    left: 0;
    background: #ffffff;
}

.bl-main>section:nth-child(7) {
    top: 122px;
    left: 183px;
    background: #ffffff;
}

.bl-main>section:nth-child(8) {
    top: 122px;
    left: 366px;
    background: #ffffff;
}

.bl-main>section:nth-child(9) {
    top: 122px;
    left: 549px;
    background: #ffffff;
}

.bl-main>section:nth-child(10) {
    top: 122px;
    left: 732px;
    background: #ffffff;
}

.bl-main>section:nth-child(11) {
    top: 239px;
    left: 0px;
    background: #ffffff;
}

.bl-main>section:nth-child(12) {
    top: 239px;
    left: 183px;
    background: #ffffff;
}

.bl-main>section:nth-child(13) {
    top: 239px;
    left: 366px;
    background: #ffffff;
}

.bl-main>section:nth-child(14) {
    top: 239px;
    left: 549px;
    background: #ffffff;
}

.bl-main>section:nth-child(15) {
    top: 239px;
    left: 732px;
    background: #ffffff;
}

section .bl-box {
    width: 169px;
    opacity: 1;
    height: 102px;
    cursor: pointer;
    border: solid 2px #ffffff;
    box-shadow: 0px 0px 3px #979797;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

section .bl-box:hover {
    opacity: 0.6;
}

.bl-main>section .bl-icon-close {
    margin-bottom: 35px;
    clear: both;
    position: relative;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0px 0px 2px #c1c1c1;
    background: #ffffff url(../images/mai-multe-culori-bg.jpg) no-repeat;
    background-position: 1px 2px;
    padding: 9px 10px 9px 43px;
    font-size: 13px;
    font-weight: 300;
    color: #7a7a7a;
    margin-left: 330px;
}

.bl-icon-close:after {
    content: '\f0d7';
    margin-left: 7px;
    font-weight: normal;
    font-size: 14px;
}

.bl-content,
div.bl-panel-items>div>div {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 3px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    padding: 10px 20px;
    height: 100%;
}


/* Transition classes and properties */


/* Separated for a better overview and control */

.bl-main>section {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.bl-main>section.bl-expand {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bl-main>section.bl-expand-top {
    z-index: 100;
}

.bl-main.bl-expand-item>section:not(.bl-expand),
.bl-main.bl-expand-item>section.bl-scale-down {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
}

.bl-box {
    -webkit-transition: opacity 0.2s linear 0.5s;
    -moz-transition: opacity 0.2s linear 0.5s;
    transition: opacity 0.2s linear 0.5s;
}

section.bl-expand .bl-box {
    opacity: 0;
    -webkit-transition: opacity 0s linear;
    -moz-transition: opacity 0s linear;
    transition: opacity 0s linear;
}

.bl-box h2 {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.no-touch section:not(.bl-expand) .bl-box:hover h2 {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
}

.bl-content,
.bl-icon-close-fm,
.bl-icon-close {
    -webkit-transition: opacity 0.1s linear 0s;
    -moz-transition: opacity 0.1s linear 0s;
    transition: opacity 0.1s linear 0s;
}

section.bl-expand .bl-content,
section.bl-expand .bl-icon-close-fm,
section.bl-expand .bl-icon-close {
    pointer-events: auto;
    opacity: 1;
    -webkit-transition: opacity 0.3s linear 0.5s;
    -moz-transition: opacity 0.3s linear 0.5s;
    transition: opacity 0.3s linear 0.5s;
}

@media screen and (max-width: 46.5em) {
    .bl-content,
    .bl-box {
        font-size: 75%;
    }
    .bl-expand .bl-box {
        height: 130px;
    }
    .bl-content>ul li {
        width: 40%;
    }
}

section .bl-box img {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

section .bl-box:hover img {
    opacity: 0.6;
}

@media (min-width: 100px) and (max-width: 767px) {
    div .container.footer.cf {
        display: flex !important;
        flex-flow: column !important;
        align-items: center !important;
    }
    div.container.footer.cf>div {
        width: 90% !important;
        position: relative !important;
        margin: 20px auto !important;
    }
}