/****************************************************************************/
/** Module Highlights *******************************************************/
/****************************************************************************/

@media screen,print
{
    .ModuleHighlightsContainer
    {
        margin: 20px 0;
    }
    
    .ModuleHighlightsContainer .MHCHighlight
    {
        margin: 20px auto;
        background-color: gold;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCImage
    {
        width: 258px;
        height: 160px;
        text-align: center;
        vertical-align: top;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCImage img
    {
        max-width: 258px;
        max-height: 160px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody
    {
        width: 258px;
        height: 200px;
        padding: 10px;
        text-align: center;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody .MHCTitle
    {
        font-size: 20px;
        color: #FFF;
        text-transform: uppercase;
        line-height: 28px;
        height: 56px;
        overflow: hidden;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody .MHCSeparator
    {
        /*background-image: url('/Css/Images/any/linha-destaque.jpg');
        background-position: center center;
        background-repeat: no-repeat;*/
        height: 5px;
        width: 40%;
        margin: 0 auto;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody .MHCDescription
    {
        font-size: 16px;
        color: #FFF;
        line-height: 22px;
        height: 88px;
        overflow: hidden;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody .MHCDescriptionMobile
    {
        display: none;
    }
    
    .ModuleHighlightsContainer .MHCCarousel
    {
        width: 258px;
        height: 400px;
        margin: 0 auto;
    }
    
    .ModuleHighlightsContainer .MHCCarouselItem
    {
        display: block;
        width: 258px;
        height: 400px;
    }
    
    .ModuleHighlightsContainer .owl-wrapper-outer
    {
        z-index: 1;
    }
    
    .ModuleHighlightsContainer .owl-controls
    {
        margin-top: -75px;
        z-index: 2;
        position: relative;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px)
{
    .ModuleHighlightsContainer .MHCHighlight .MHCImage
    {
        width: 220px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCImage img
    {
        max-width: 220px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody
    {
        width: 220px;
    }
    
    .ModuleHighlightsContainer .MHCCarousel
    {
        width: 220px;
    }
    
    .ModuleHighlightsContainer .MHCCarouselItem
    {
        width: 220px;
    }
}

@media screen and (min-width: 880px) and (max-width: 991px)
{
    .ModuleHighlightsContainer .MHCHighlight .MHCImage
    {
        width: 220px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCImage img
    {
        max-width: 220px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody
    {
        width: 220px;
    }
    
    .ModuleHighlightsContainer .MHCCarousel
    {
        width: 220px;
    }
    
    .ModuleHighlightsContainer .MHCCarouselItem
    {
        width: 220px;
    }
    
    .ModuleHighlightsContainer .col-xs-6, .ModuleHighlightsContainer .col-md-3
    {
        padding: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 879px)
{
    .ModuleHighlightsContainer .MHCHighlight .MHCImage
    {
        width: 190px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCImage img
    {
        max-width: 190px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody
    {
        width: 190px;
    }
    
    .ModuleHighlightsContainer .MHCCarousel
    {
        width: 190px;
    }
    
    .ModuleHighlightsContainer .MHCCarouselItem
    {
        width: 190px;
    }
    
    .ModuleHighlightsContainer .col-xs-6, .ModuleHighlightsContainer .col-md-3
    {
        padding: 0;
    }
}

@media screen and (min-width: 481px) and (max-width: 599px)
{
    .ModuleHighlightsContainer .MHCHighlight .MHCImage
    {
        width: 210px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCImage img
    {
        max-width: 210px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody
    {
        width: 210px;
    }
    
    .ModuleHighlightsContainer .MHCCarousel
    {
        width: 210px;
    }
    
    .ModuleHighlightsContainer .MHCCarouselItem
    {
        width: 210px;
    }
    
    .ModuleHighlightsContainer .col-xs-6, .ModuleHighlightsContainer .col-md-3
    {
        padding: 0;
    }
}

@media screen and (max-width: 480px)
{
    .ModuleHighlightsContainer .MHCHighlight
    {
        margin: 0px auto;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCImage
    {
        width: 95%;
        height: 85px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCImage img
    {
        max-width: 100%;
        max-height: 100%;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody
    {
        width: 95%;
        height: 140px;
        padding: 2px;
    }
    
    .ModuleHighlightsContainer .MHCCarousel
    {
        width: 95%;
        height: 235px;
    }
    
    .ModuleHighlightsContainer .MHCCarouselItem
    {
        width: 95%;
        height: 225px;
    }
    
    .ModuleHighlightsContainer .MHCHighlight .MHCBody .MHCDescriptionMobile
    {
        display: block;
        font-size: 16px;
        color: #FFF;
        line-height: 22px;
        height: 110px;
        overflow: hidden;
    }
    
    .ModuleHighlightsContainer .owl-controls
    {
        margin-top: -26px;
    }
    
    .ModuleHighlightsContainer .col-xs-6, .ModuleHighlightsContainer .col-md-3
    {
        padding: 0;
    }
}

@media print
{

}