/* ###

 :: APP CONTROLLER :: MAKE IMAGES DIR RELATIVE :: ../images/ ::
 :: APP CONTROLLER :: MAKE FONTS DIR RELATIVE :: ../fonts/ ::

 ### */

.banner
{
    margin: 60px 0 33px -22px;
    height: 200px;
}

.banner > .box-prod
{
    width: 100%;
    position: relative;    
}

.banner .box-prod .prod-info
{
    position: absolute;
    top:  0;
    left: 0;
    width: 185px;
    height: 173px;
    background-image: url('../images/app/product1.png');
    background-repeat: no-repeat;
    background-size: cover;
    transition:All 0.8s ease-out;
    -webkit-transition:All 0.8s ease-out;
    -moz-transition:All 0.8s ease-out;
    -o-transition:All 0.8s ease-out;
}

.banner .box-prod .prod-info2
{
    background-image: url('../images/app/product2.png');
}

.banner .box-prod .prod-info6
{
    background-image: url('../images/app/product6.png');
}

.banner .box-prod .prod-info3
{
    background-image: url('../images/app/product3.png');
}

.banner .box-prod .prod-info3
{
    background-image: url('../images/app/product6_new.png');
}

.banner .box-prod .prod-info4
{
    background-image: url('../images/app/product4.png');
}

.banner .box-prod .prod-info5
{
    background-image: url('../images/app/product5.png');
}

.banner .box-prod .prod-info span
{
    background: #47b3dd;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 3px 10px;
    position: absolute;
    z-index: 2;
    top: 80px;
    right: 0;
    transition:All 0.8s ease-out;
    -webkit-transition:All 0.8s ease-out;
    -moz-transition:All 0.8s ease-out;
    -o-transition:All 0.8s ease-out;
}

.banner .box-prod .prod-info:hover, .banner .box-prod .prod-info:focus, .banner .box-prod .prod-info:active
{
    width: 240px;
    height: 225px;
}

.banner .box-prod .prod-info:hover span, .banner .box-prod .prod-info:focus span, .banner .box-prod .prod-info:active span
{
    background: rgb(23,59,102); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(23,59,102,1) 0%, rgba(71,179,221,1) 61%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(23,59,102,1)), color-stop(61%,rgba(71,179,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(23,59,102,1) 0%,rgba(71,179,221,1) 61%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(23,59,102,1) 0%,rgba(71,179,221,1) 61%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(23,59,102,1) 0%,rgba(71,179,221,1) 61%); /* IE10+ */
    background: linear-gradient(to right,  rgba(23,59,102,1) 0%,rgba(71,179,221,1) 61%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173b66', endColorstr='#47b3dd',GradientType=1 ); /* IE6-9 */
    right: 20px;
}

.banner .box-prod .active, .banner .box-prod .active:hover
{
    position: absolute;
    top:  0;
    left: 0;
    width: 220px;
    height: 206px;
    /*background-image: url('../images/app/product6.png');*/
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.25s ease-in;
    z-index: 3;
}

.banner .box-prod .active span, .banner .box-prod .active:hover span
{
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    position: absolute;
    z-index: 4;
    top: 80px;
    right: 20px;
    background: rgb(23,59,102); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(23,59,102,1) 0%, rgba(71,179,221,1) 61%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(23,59,102,1)), color-stop(61%,rgba(71,179,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(23,59,102,1) 0%,rgba(71,179,221,1) 61%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(23,59,102,1) 0%,rgba(71,179,221,1) 61%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(23,59,102,1) 0%,rgba(71,179,221,1) 61%); /* IE10+ */
    background: linear-gradient(to right,  rgba(23,59,102,1) 0%,rgba(71,179,221,1) 61%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173b66', endColorstr='#47b3dd',GradientType=1 ); /* IE6-9 */
}