.ib-container {
    position: relative;
    width: 100%;
    display: block;
}

    .ib-container:before,
    .ib-container:after {
        content: "";
        display: table;
    }

    .ib-container:after {
        clear: both;
    }


article input[type="submit"] {
    width: 55%;
    background: #43A5E6;
    color: #fff;
    font-family: 'IranSans',Arial;
    border-radius: 14px;
    cursor: pointer;
}

.ib-container article {
    border-radius: 30px;
    display: block;
    width: 200px;
    height: 424px;
    background: #FFFFFF;
    /* cursor: pointer; */
    float: right;
    /* border: 10px solid #EFEFED; */
    padding: 13px;
    text-transform: none;
    margin: 15px;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    box-shadow: 0px 0px 0px 5px rgb(234, 234, 234), -2px 5px 3px 5px rgba(0,0,0,0.2);
    -webkit-transition: opacity 0.4s linear, -webkit-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    -moz-transition: opacity 0.4s linear, -moz-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    -o-transition: opacity 0.4s linear, -o-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    -ms-transition: opacity 0.4s linear, -ms-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    transition: opacity 0.4s linear, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    /* border-radius: 0; */
}


.ib-container h3 a {
    color: #008578;
    text-decoration: none;
}

.ib-container article header span {
    padding: 10px 0;
    display: block;
    color: #FFD252;
    color: rgba(255, 210, 82, 1);
    text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
    text-transform: uppercase;
    opacity: 0.8;
}

.ib-container article p {
    color: #333;
    color: rgba(51, 51, 51, 1);
    text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
    opacity: 0.8;
    direction: rtl;
}

.ib-container h3 a,
.ib-container article header span,
.ib-container article p {
    -webkit-transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
    -moz-transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
    -o-transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
    -ms-transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
    transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
}
/* Hover Style for all the items: blur, scale down*/
.ib-container article.blur {
    box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.7;
}

    .ib-container article.blur h3 a {
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
        color: rgba(0, 0, 0, 0);
        opacity: 0.5;
    }

    .ib-container article.blur header span {
        text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
        color: rgba(255, 210, 82, 0);
        opacity: 0.5;
    }

    .ib-container article.blur p {
        text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
        color: rgba(51, 51, 51, 0);
        opacity: 0.5;
    }

/* Hover Style for single item: scale up */
.ib-container article.active {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    box-shadow: 0px 0px 0px 10px rgba(255,255,255,1), 1px 11px 15px 10px rgba(0,0,0,0.4);
    z-index: 100;
    opacity: 1;
}

    .ib-container article.active h3 a,
    .ib-container article.active header span,
    .ib-container article.active p {
        opacity: 1;
    }

.ib-container article img {
    width: 100%;
    /*height: 100%;  HM*/
    margin: 9px 0 0 0;
    border-top: 1px solid #FF685D;
}


.dtl {
    width: 100%;
    /*background: #eee;*/
}

    .dtl .dtl_right {
        width: 360px;
        height: 390px;
        float: right;
    }

    .dtl .dtl_left {
        width: 600px;
        height: 390px;
        float: left;
    }