/**********************************************************************************
 * GENERAL
 **********************************************************************************/
.mr-top-10{
    margin-top: 10px;
}
.mr-top-20{
    margin-top: 20px;
}
.mr-top-30{
    margin-top: 30px;
}
.mr-bottom-10{
    margin-bottom: 10px;
}
.mr-bottom-20{
    margin-bottom: 20px;
}
.mr-bottom-30{
    margin-bottom: 30px;
}

/**********************************************************************************
 * FUNCTION -> callBoxAlert 
 **********************************************************************************/
.callBoxAlert{
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 3px;    
}
.callBoxAlert h5{
    font-weight: 300 !important;
    text-align: center;
    margin: 0px !important;
}
.callBoxAlert ul{
    margin-top: 0px !important;
    margin-bottom: 10px !important;
}
.callBoxAlert-default{
    border-left: 3px solid #B92928;
    background-color: #EBEBEB;
}

.callBoxAlert-red{
    border-left: 0px solid #B92928;
    background-color: #B92928;
}
.callBoxAlert-red .glyphicon{
    color: #FFFFFF;
}
.callBoxAlert-red ul li,
.callBoxAlert-red p, 
.callBoxAlert-red h5{
    color: #FFFFFF;
}
.callBoxAlert-red ul li a,
.callBoxAlert-red p a,
.callBoxAlert-red h5 a{
    color: #FFFFFF !important;
    font-weight: bold !important;
}

/**********************************************************************************
 * IMAGE -> Responsive banner {lg/sm}
 **********************************************************************************/
.banner-lg,
.banner-sm{
    width: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.banner-lg{
    display: block;
}
.banner-sm{
    display: none;
}
@media only screen and (max-width: 480px) { /* {768px/480px} */
    .banner-lg{
        display: none;
    }
    .banner-sm{
        display: block;
    }
}

/**********************************************************************************
 * IMAGE -> Zoom
 **********************************************************************************/
.zoom{
    cursor: zoom-in;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0);
    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0);
    box-shadow: 0px 0px 0px rgba(0,0,0,0);

    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.zoom:hover{
    -webkit-box-shadow: 0px 0px 12px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 12px rgba(0,0,0,0.25);

    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
}
@media only screen and (max-width: 576px) {
	.zoom:hover{
        -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0);
        -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0);
        box-shadow: 0px 0px 0px rgba(0,0,0,0);
    
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        transform: scale(1.0);
    }
}
