@font-face {
    font-family: 'OpenSans-Light';
    src: url('../../fonts/OpenSans-Light-webfont.eot');
    src: url('../../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('../../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../../fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../../fonts/OpenSans-Regular-webfont.eot');
    src: url('../../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
/* Add here all your css styles (customizations) */
body{
    min-height: 100%;
}


.imageBox {
            position: relative;
            float: left;
        }
        .imageBox .hoverImg {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .imageBox:hover .hoverImg {
            display: block;
        }


.product p{
    margin-bottom: 12px;
}

.product .img-responsive {
    margin: 0 auto;
}


.service .desc {
    height:150px;
}

.service:not(:hover) .faded-bottom:after {
    content  : "";
    position : absolute;
    z-index  : 1;
    bottom   : 0;
    left     : 0;
    pointer-events   : none;
    width    : 100%;
    height   : 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 1) 100%
    );
}

.service:hover .faded-bottom:after {
    content  : "";
    position : absolute;
    z-index  : 1;
    bottom   : 1em;
    left     : 5%;
    right     : 5%;
    pointer-events   : none;
    width    : 90%;
    height   : 4em;
    background: -webkit-linear-gradient(
        rgba(252, 252, 252, 0) 0,
        rgba(252, 252, 252, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(252, 252, 252, 0) 0,
        rgba(252, 252, 252, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(252, 252, 252, 0) 0,
        rgba(252, 252, 252, 1) 100%
    );
    background-image: linear-gradient(

        rgba(252, 252, 252, 0) 0,
        rgba(252, 252, 252, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(252, 252, 252, 0) 0,
        rgba(252, 252, 252, 1) 100%
    );
}

/*.faded-bottom:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 5px;
    margin-left: 50px;
    margin-right:50px;
    pointer-events: none;
    width:auto;
    height: 4em;
    background: linear-gradient( rgba(252, 252, 0, 1) 0, rgba(252, 252, 0, 1) 100% );
}*/