/* Corpo do card */

.site-card {
    margin-bottom: 20px;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
    border: 0;
    display: block;
    width: 100%;
}

.site-card:last-of-type {
    margin-bottom: 0;
}

.site-card .site-card-content {
    display: block;
    position: relative;
    width: 100%;
}

/* textos do card */
.site-card .card-text-content {
    padding:0;
}

.site-card .card-text {
    --card-text-padding: 10px;
    margin: 0 0 10px 0;
    display: block;
    float: left;
    position: relative;
    padding:0;
}

.site-card .card-text:last-of-type{
    margin-bottom:0;   
}

.site-card .card-text.full-on-xs{
    padding: 0;
}

.site-card.card-image-left .card-text.side-on-xs,
.site-card.card-image-top .card-text.side-on-xs{
    padding-left: var(--card-text-padding);
}

.site-card.card-image-right .card-text.side-on-xs{
    padding-right: var(--card-text-padding);
}

/* Cartola */
.card-hat .hat,
.card-hat .hat-time {
    color:#989898;
    text-transform: uppercase;
    font-size:11px;
    font-family: 'Roboto' , 'Arial' , 'Arial', 'san-serif';
    font-weight: 400;
    text-align: left;
    display: block;
    line-height: 1;
    float:left;
}

.card-hat .hat-time {
    font-weight: 400;
    text-transform: none;
    margin-left: 4px;
    color: #666;
}

.site-card.card-image-background .card-hat {
    position: relative;
    z-index: 1;
}

.site-card.card-image-background .card-hat .hat,
.site-card.card-image-background .card-hat .hat-time {
    color: #fff;
}

.card-format-video .card-hat .hat{
    border:1px solid var(--nd-roxo);
    padding: 3px 4px;
    color: var(--nd-roxo);
    border-radius: 3px;
}

.card-format-video .card-hat .hat-time {
    line-height: 19px;
}

.site-card.conteudopublicitario .card-hat .hat {
    color: #ff9900;
}

.loop-container .conteudopublicitario {
    margin-bottom: 30px;
}


/* Imagens do card */

.site-card .card-image {
    padding: 0;
    margin:0;
    background-color: #ddd;
}

.site-card .card-image .card-image-content {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    display: block;
    width: 100%;
}

.site-card .card-image.side-on-xs{
    margin-bottom: 0;
}

.site-card .card-image.full-on-xs{
    margin-bottom: 10px;
}

.card-image-content.aspect-xs-16x9 {
    padding-bottom: 56.25%!important;
}

.card-image-content.aspect-xs-3x2 {
    padding-bottom: 66.66%!important;
}

.card-image-content.aspect-xs-2x1 {
    padding-bottom: 50%!important;
}

.card-image-content.aspect-xs-1x1 {
    padding-bottom: 100%!important;
}

.site-card .card-image .card-image-src {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
}

.site-card.card-format-video .card-image .card-image-src {
    background-size: cover;
}

.site-card.card-image-background .card-image {
    position: relative;
    margin-bottom: 0;
}

.site-card.card-image-background .card-text-content {
    position: absolute;
    bottom: 0;
    padding: 10px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a8000000', GradientType=0);
    /* IE6-9 */
    width: 100%;
}


/* titulos do card */

.site-card .card-title .title {
    display: block;
    width: 100%;
    color: #000000;
}

.site-card .card-title .title:hover {
    text-decoration: none;
    color: #222;
}

.site-card .card-title .title .title-text {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    text-align: left;
}

.site-card.card-image-background .card-title {
    margin-top: 0;
}

.site-card.card-image-background .title {
    color: #fff;
    text-shadow: 1.5px 1px 0 #000;
}

.site-card.card-featured .title .title-text {
    font-size: 28px;
    font-weight: 900;
}

.site-card.card-no-image.card-featured .title .title-text {
    font-size: 30px;
}

.site-card.card-image-background .title:hover {
    color: #f9f9f9;
}


/* resumos dos cards */

.site-card .card-resume .resume {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    color: #000000;
    margin: 0;
    padding: 0;
}

.site-card.card-image-background .resume {
    color: #fff;
}

.site-card.card-image-background .card-resume {
    margin-top: 0;
}


/* card relacionadas */

.site-card .card-related {
    margin-bottom: 0;
    float:left;
}

.site-card .card-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-card .card-related ul li {
    position: relative;
    margin-bottom: 10px;
    padding: 0 0 0 20px;
}

.site-card .card-related ul li:last-of-type{
    margin-bottom:0;
}

.site-card .card-related ul li::before {
    content: ' ';
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 3px;
    left:0;
    background-image: url('../../img/icons/list-arrow.png');
    background-size:contain;
    background-repeat: no-repeat;
}

.site-card .card-related ul li a {
    line-height: 1;
    font-size: 13px;
    display: block;
    color:#000;
}


/* botoes */

.site-card .card-action-bt .action-bt {
    background-color: #117AB3;
    border-radius: 0;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 20px;
}


/* overlays formatos card */

.site-card .card-image-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    transition: background-color 0.3s ease;
}

.site-card.card-format-video .card-image-overlay {
    display: block;
}

.site-card.card-format-video .card-image-overlay:hover{
    background-color: rgba(0, 0, 0, 0.65);
}

.site-card .card-play-icon {
    color: #fff;
    position: absolute;
    font-weight: 300;
    bottom:5px;
    left: 5px;
}
.site-card .card-play-icon .icon-play {
    font-size: 20px;
    line-height: 20px;
    display: block;
    float: left;
}
.site-card .title-duration {
    font-size: 12px;
    font-family: 'Roboto' , 'Arial' , 'Arial', 'sans-serif';
    line-height: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    margin-left: 5px;
}
.site-card.card-format-video .card-play-icon {
    display: table-cell;
}

.site-card.card-image-background.card-format-video .card-play-icon {
    display: none;
}

/* credito */

.site-card .card-image-credit{
    position:absolute;
    bottom: 0;
    left:0;
    background: rgba(0,0,0,0.5);
    padding: 7.5px ;
    line-height: 1;
    font-size: 10px;
    color: #fff;
    display:none;
}

.site-card.card-format-video  .card-image-credit{
    bottom: auto;
    top: 0;
}

.site-card .card-image-credit.show-img-credit{
    display: block;
}

.site-card .card-image-credit.show-img-credit::before{
    content: 'Foto:';
    margin-right: 5px;
}


@media only screen and (min-width:576px) {
    /* imagens do card */
    .card-image-content.aspect-sm-16x9 {
        padding-bottom: 56.25%!important;
    }
    .card-image-content.aspect-sm-3x2 {
        padding-bottom: 66.66%!important;
    }
    .card-image-content.aspect-sm-2x1 {
        padding-bottom: 50%!important;
    }
    .card-image-content.aspect-sm-1x1 {
        padding-bottom: 100%!important;
    }

}

@media only screen and (min-width:768px) {

    /* imagens do card */
    .site-card .card-image.side-on-md{
        margin-bottom: 0;
    }
    
    .site-card .card-image.full-on-md{
        margin-bottom: 10px;
    }
    .card-image-content.aspect-md-16x9 {
        padding-bottom: 56.25%!important;
    }
    .card-image-content.aspect-md-3x2 {
        padding-bottom: 66.66%!important;
    }
    .card-image-content.aspect-md-2x1 {
        padding-bottom: 50%!important;
    }
    .card-image-content.aspect-md-1x1 {
        padding-bottom: 100%!important;
    }

    /* textos do card */
    .site-card .card-text.full-on-md{
        padding: 0;
    }
    
    .site-card.card-image-left .card-text.side-on-md,
    .site-card.card-image-top .card-text.side-on-md{
        padding-left: var(--card-text-padding);
    }
    
    .site-card.card-image-right .card-text.side-on-md{
        padding-right: var(--card-text-padding);
    }
}

@media only screen and (min-width:992px) {
    /* cards */
    .site-card {
        margin-bottom: 30px;
        background-color: transparent;
    }
    .site-card.card-image-background {
        margin-bottom: 0;
        border-bottom: 0;
    }
    .site-card.card-no-image,
    .site-card.card-image-top {
        padding-bottom: 0px;
    }
    
    /*Imagens do card */
    .site-card .card-image.side-on-lg{
        margin-bottom: 0;
    }
    .site-card .card-image.full-on-lg{
        margin-bottom: 15px;
    }
    .card-image-content.aspect-lg-16x9 {
        padding-bottom: 56.25%!important;
    }
    .card-image-content.aspect-lg-3x2 {
        padding-bottom: 66.66%!important;
    }
    .card-image-content.aspect-lg-2x1 {
        padding-bottom: 50%!important;
    }
    .card-image-content.aspect-lg-1x1 {
        padding-bottom: 100%!important;
    }
    .site-card.card-format-video.card-featured .card-image .card-image-src {
        background-size: cover;
    }

    /* textos do card */
    .site-card .card-text{
        --card-text-padding: 15px;
        margin-bottom:15px;
    }

    .site-card .card-text-content .card-text:last-of-type{
        margin-bottom:0;
    }

    .site-card .card-text.full-on-lg{
        padding: 0;
    }
    
    .site-card.card-image-left .card-text.side-on-lg,
    .site-card.card-image-top .card-text.side-on-lg{
        padding-left: var(--card-text-padding);
    }
    
    .site-card.card-image-right .card-text.side-on-lg{
        padding-right: var(--card-text-padding);
    }

    /* cartola */
    .site-card.card-image-background .card-hat {
        margin: 15px 0;
    }
    
    /* titulos dos cards */
    .site-card .card-title .title .title-text {
        font-size: 25px;
        font-weight: 700;
    }
    .site-card.card-featured .title .title-text {
        font-weight: 900;
        font-size: 35px;
    }
    .site-card.card-no-image.card-featured .title .title-text {
        font-size: 40px;
    }
    /* resumos dos cards */
    .site-card .card-resume .resume {
        font-size:16px;
    }
    /* botoes dos cards*/
    .site-card .card-action-bt .action-bt {
        width: auto;
    }
}

@media only screen and (min-width:1200px) {
    /* titulos dos cards */
    .site-card .card-title .title .title-text {
        font-size: 30px;
        font-weight: 700;
    }
    .site-card.card-featured .title .title-text {
        font-weight: 900;
        font-size: 45px;
    }
    /* imagens do card */
    .site-card .card-image.side-on-xl{
        margin-bottom: 0;
    }
    .site-card .card-image.full-on-xl{
        margin-bottom: 15px;
    }
    .card-image-content.aspect-xl-16x9 {
        padding-bottom: 56.25%!important;
    }
    .card-image-content.aspect-xl-3x2 {
        padding-bottom: 66.66%!important;
    }
    .card-image-content.aspect-xl-2x1 {
        padding-bottom: 50%!important;
    }
    .card-image-content.aspect-xl-1x1 {
        padding-bottom: 100%!important;
    }
    .site-card .card-related ul li a {
        line-height: 1.1;
        font-size: 16px;
    }

    /* textos do card */
    .site-card .card-text.ful-on-xl{
        padding: 0;
    }
    
    .site-card.card-image-left .card-text.side-on-xl,
    .site-card.card-image-top .card-text.side-on-xl{
        padding-left: var(--card-text-padding);
    }
    
    .site-card.card-image-right .card-text.side-on-xl{
        padding-right: var(--card-text-padding);
    }
  
}