/*
Style Name:     components.css
Description:    Stili comuni per le tcard
Author:         NS12 - dream-team - rcs 
Version:        2.6
Date:           16.04.2019
Modified:      	15.04.2021
*/

/* Working per @media print */

/* =============================================================
>> TABLE OF CONTENTS:
================================================================

1.0 - DECK
    1.1 - Numero e dimensioni - Default
    1.2 - Numero e dimensioni - Deck
    1.3 - Allineamento Deck
2.0 - TCARD
    2.1 - Border
    2.2 - Img
    2.3 - Video
    2.4 - Body
    2.5 - Spaziature
    2.6 - Dimensioni
3.0 - IMAGE-LINKS-VR
    3.1 - Img
    3.2 - Body
4.0 - IMAGE-LINKS-HR
    4.1 - Img
    4.2 - Body
5.0 - CARD BANNER
6.0 - CARD TEXT STYLES
    6.1 - Footer text
    6.2 - Links
    6.3 - Sizing
7.0 - ICONS

--------------------------------------------------------------*/

/* 
>> 1.0 - DECK
   since: ver 1.0
==============================================================*/

.tcard-deck {
    box-sizing: border-box;
}

@media screen and (min-width: 48em) {
    .tcard-deck {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/* @media print {
    .tcard-deck {
        display: table;
        border-collapse: collapse;
    }
} */

/* >> 1.1 - Numero e dimensioni - Default
   since: ver 1.0
--------------------------------------------------------------*/

@media screen and (min-width: 48em) {
    .tcard-deck .tcard.image-links-vr {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0;
        flex-basis: calc(33.33333% - 2rem);
    }
}

@media screen and (min-width: 62em) {
    .tcard-deck .tcard.image-links-vr {
        -ms-flex: 0 0 25%;
        flex: 0 0;
        flex-basis: calc(25% - 2rem);
    }
}

@media screen and (min-width: 48em) {
    .tcard-deck .tcard.image-links-hr {
        -ms-flex: 0 0 50%;
        flex: 0 0;
        flex-basis: calc(50% - 2rem);
    }
}

/* >> 1.2 - Numero e dimensioni - Deck
   since: ver 1.1
--------------------------------------------------------------*/

@media screen and (min-width: 48em) {
    .tcard-deck.deck-3 .tcard.image-links-vr,
    .tcard-deck.deck-3 .tcard.image-links-hr{
        -ms-flex: 0 0 33.33333%;
        flex: 0 0;
        flex-basis: calc(33.33333% - 2rem);
    }
}

/* since: ver 2.5 */
@media screen and (min-width: 48em) {
    .tcard-deck.deck-5 .tcard.image-links-vr{
        -ms-flex: 0 0 20%;
        flex: 0 0;
        flex-basis: calc(20% - 1.25rem);
    }
}

@media screen and (min-width: 48em) {
    .tcard-deck.deck-2 .tcard.image-links-vr{
        -ms-flex: 0 0 50%;
        flex: 0 0;
        flex-basis: calc(50% - 2rem);       
    }
}

/* >> 1.3 - Allineamento Deck
   since: ver 1.1
--------------------------------------------------------------*/

@media screen and (min-width: 48em) {
    .tcard-deck.deck-left {
        justify-content: flex-start;
    }

    .tcard-deck.deck-center {
        justify-content: center;
    }

    .tcard-deck.deck-right {
        justify-content: flex-end;
    }
}

/* 
>> 2.0 - TCARD
   since: ver 1.0
==============================================================*/

.tcard {
    display: -ms-flexbox;
    display: flex;
}

.tcard {
    position: relative;
    min-width: 0;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid transparent;
    margin-bottom: 1rem;
    word-wrap: break-word;
}

@media screen and (min-width: 48em) {
    .tcard {
        margin-left: 0.9375rem;
        margin-right: 0.9375rem;
    }

    /* since: ver 2.5 */
    .tcard-deck.deck-5 .tcard {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* >> 2.1 - Border
   since: ver 1.6
--------------------------------------------------------------*/

.tcard               { border-color: #d4dff1; }
.tcard.no-border     { border-color: transparent; }
.tcard.border-blue   { border-color: #295eb9; }
.tcard.border-black  { border-color: #000000; }
.tcard.border-navy   { border-color: #0A3C82; }
.tcard.border-green  { border-color: #1E5A32; }
.tcard.border-red    { border-color: #8C1432; }
.tcard.border-orange { border-color: #C85000; }
.tcard.border-ocra   { border-color: #D78C00; }
.tcard.border-white  { border-color: #ffffff; }

/* >> 2.1 - Backgrounds
   since: ver 1.6
--------------------------------------------------------------*/

.tcard.no-bg     { background-color: transparent; }
.tcard.bg-blue   { background-color: #295eb9; }
.tcard.bg-black  { background-color: #000000; }
.tcard.bg-navy   { background-color: #0A3C82; }
.tcard.bg-green  { background-color: #1E5A32; }
.tcard.bg-red    { background-color: #8C1432; }
.tcard.bg-orange { background-color: #C85000; }
.tcard.bg-ocra   { background-color: #D78C00; }
.tcard.bg-white  { background-color: #ffffff; }

@media print {
    .tcard.bg-blue   { border-color: #295eb9; }
    .tcard.bg-black  { border-color: #000000; }
    .tcard.bg-navy   { border-color: #0A3C82; }
    .tcard.bg-green  { border-color: #1E5A32; }
    .tcard.bg-red    { border-color: #8C1432; }
    .tcard.bg-orange { border-color: #C85000; }
    .tcard.bg-ocra   { border-color: #D78C00; }
    .tcard.bg-white  { border-color: #ffffff; }
}

/* >> 2.2 - Img
   since: ver 1.0
--------------------------------------------------------------*/

.tcard-img {
    position: relative;
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
}

    .tcard-img img {
        width: 100%;
        max-width: 100%;
        /*margin-bottom: -4px;*/
    }

    @media print {
        .tcard-img {
            width: 100%;
            max-width: 210px;
            flex-shrink: 0;
        }

        .tcard-img img {
            width: 100%;
            max-width: 210px;
        }
    }

/* since: ver 2.6 */
.img-darkening {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 25, 89, 0.5);
}

/* >> 2.3 - Video
   since: ver 2.2
--------------------------------------------------------------*/

.tcard-img .embed-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 70%;
    overflow: hidden;
}

.tcard-img .embed-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border: none;
}

/* >> 2.4 - Body
   since: ver 1.0
--------------------------------------------------------------*/

.tcard-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.tcard-body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: flex-start;
}

.tcard .tcard-body.vr-align-center{
    justify-content: center;
}

.tcard .tcard-body.vr-align-bottom{
    justify-content: flex-end;
}

/* >> 2.5 - Spaziature
   since: ver 1.0
--------------------------------------------------------------*/

.tcard-title + .tcard-text {
    margin-top: 0.5rem;
}

.tcard-title + .tcard-footer,
.tcard-text + .tcard-footer {
    padding-top: 2rem;
}

.tcard-footer {
    margin-top: auto;
}

/* >> 2.6 - Dimensioni
   since: ver 1.0
--------------------------------------------------------------*/

@media screen and (min-width: 48em) {
    .tcard.image-links-vr.col-25,
    .tcard.image-links-hr.col-25{
        max-width: calc(25% - 2rem);
        min-width: calc(25% - 2rem);
    }

    .tcard.image-links-vr.col-33,
    .tcard.image-links-hr.col-33{
        max-width: calc(33% - 2rem);
        min-width: calc(33% - 2rem);
    }

    .tcard.image-links-vr.col-50,
    .tcard.image-links-hr.col-50{
        max-width: calc(50% - 2rem);
        min-width: calc(50% - 2rem);
    }

    .tcard.image-links-hr.col-75{
        max-width: calc(75% - 2rem);
        min-width: calc(75% - 2rem);
    }

    .tcard.image-links-hr.col-100{
        max-width: calc(100% - 2rem);
        min-width: calc(100% - 2rem);
    }
}

/* 
>> 3.0 - IMAGE-LINKS-VR
   since: ver 1.0
==============================================================*/

.tcard.image-links-vr {
    -ms-flex-direction: column;
    flex-direction: column;
}

@media screen and (min-width: 30em) and (max-width: 48em) {
    .tcard.image-links-vr {
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

@media screen and (min-width: 48em) {
    .tcard.image-links-vr {
        max-width: calc(50% - 2rem);
    }
}

@media print {
    .tcard.image-links-vr {        
        display: block;
        page-break-before: avoid;

        /* display: table-row;
        -webkit-column-break-inside: avoid !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important; */
    }
}

/* >> 3.1 - Img
   since: ver 1.0
--------------------------------------------------------------*/

@media screen and (min-width: 30em) and (max-width: 48em) {
    .image-links-vr .tcard-img {
        width: 50%;
        max-width: 22.5rem;
    }

        .image-links-vr .tcard-img img {
            width: 100%;
            max-width: 22.5rem;
        }
}

@media print {
    .image-links-vr .tcard-img {
        width: 33%;
        max-width: 22.5rem;
        display: inline-block;
        /* display: table-cell; */
    }

        .image-links-vr .tcard-img img {
            width: 100%;
            max-width: 22.5rem;
        }
}

/* >> 3.2 - Body
   since: ver 1.0
--------------------------------------------------------------*/

.image-links-vr .tcard-body {
    min-width: 0; /* break-word x chrome */
}

@media screen and (min-width: 30em) and (max-width: 48em) {
    .image-links-vr .tcard-body {
        width: 100%; /* break-word x ie */
    }
}

@media print {
    .image-links-vr .tcard-body {
        display: inline-block;
        /* display: table-cell; */
        vertical-align:top;
    }
}

/* 
>> 4.0 - IMAGE-LINKS-HR
   since: ver 1.0
==============================================================*/

.tcard.image-links-hr {
    -ms-flex-direction: column;
    flex-direction: column;
}

@media screen and (min-width: 30em) {
    .tcard.image-links-hr {
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

@media print {
    .tcard.image-links-hr {
        display: block;
        page-break-before: avoid;
    }
}

/* >> 4.1 - Img
   since: ver 1.0
--------------------------------------------------------------*/

@media screen and (min-width: 30em) {
    .image-links-hr .tcard-img {
        width: 50%;
        max-width: 22.5rem;
    }

        .image-links-hr .tcard-img img {
            width: 100%;
            max-width: 22.5rem;
        }

        .image-links-hr .tcard-img.img-xs {
            width: 25%;
            max-width: 22.5rem;
        }

        .image-links-hr .tcard-img.img-sm {
            width: 35%;
            max-width: 22.5rem;
        }
}

@media print {
    .image-links-hr .tcard-img {
        width: 33%;
        max-width: 22.5rem;
        display: inline-block;
    }

        .image-links-hr .tcard-img img {
            width: 100%;
            max-width: 22.5rem;
        }

        .image-links-hr .tcard-img.img-xs {
            width: 25%;
            max-width: 22.5rem;
        }
}

/* >> 4.2 - Body
   since: ver 1.0
--------------------------------------------------------------*/

.image-links-hr .tcard-body {
    min-width: 0; /* break-word x chrome */
}

@media screen and (min-width: 30em) {
    .image-links-hr .tcard-body {
        width: 100%; /* break-word x ie */
    }
}

@media print {
    .image-links-hr .tcard-body {
        display: inline-block;
        vertical-align:top;
    }
}

/* 
>> 5.0 - CARD BANNER
   since: ver 2.6
==============================================================*/
.image-links-hr.tcard-banner {
    text-decoration: none;
    min-height: 20rem;
    overflow: hidden;
    -webkit-transition: .3s all;
            transition: .3s all;
    
}

.image-links-hr.tcard-banner:hover {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
    -webkit-transition: .5s all;
            transition: .5s all;
    box-shadow: 0 0 3px 0 rgba(0,0,0,.3);
}

.image-links-hr.tcard-banner .tcard-img {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

.image-links-hr.tcard-banner .tcard-img img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    -webkit-transition: .7s all;
            transition: .7s all;
}

.image-links-hr.tcard-banner:hover img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: .7s all;
    transition: .7s all;
    /* box-shadow: 0 0 3px 0 rgb(0 0 0 / 40%); */
}

.image-links-hr.tcard-banner .tcard-body {
    position: relative;
    padding: 5rem 3rem 3rem;
    /* background-color: rgba(41, 25, 89, 0); */
    -webkit-transition: .5s all;
    transition: .5s all;
}

.image-links-hr.tcard-banner .tcard-body:hover{
    -webkit-transition: .5s all;
    transition: .5s all;
    /* background-color: rgba(41, 25, 89, 0.5); */
    background-color: rgba(0, 0, 0, 0.2);
}

.image-links-hr.tcard-banner .tcard-title,
.image-links-hr.tcard-banner .tcard-text {
    max-width: 100%;
}

.image-links-hr.tcard-banner .tcard-text {
    margin-bottom: 1rem;
}

@media screen and (min-width: 30em) {
    .image-links-hr.tcard-banner .tcard-title,
    .image-links-hr.tcard-banner .tcard-text {
        max-width: 60%;
    }
}

.tcard i.trn-white:before {
    color: #fff;
}

.tcard i.trn-white:hover:before {
    color: #fff;
}


/* 
>> 6.0 - CARD TEXT STYLES
   since: ver 1.2
==============================================================*/

.tcard {
    font-family: Roboto,sans-serif;
}

.tcard-body {
    font-size: .875rem;
    line-height: 1.4;
}

.tcard-title {
    font-family: Oswald,sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #295eb9;
    word-break: break-word;
}

.tcard-footer {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

@media screen and (min-width: 48em) {
    .tcard-body {
        font-size: 1rem;
    }

    .tcard-title {
        font-size: 1.125rem;
    }

    .tcard-footer {
        font-size: .875rem;
    }
}

/*
>> 6.1 - Footer text
   since: ver 1.2
--------------------------------------------------------------*/

.tcard-footer span,
.tcard-footer a{
    display: block;
}

.tcard-footer span a{
    display: inline-block;
}

/*
>> 6.2 - Links
   since: ver 1.2
--------------------------------------------------------------*/
.tcard a{
    padding: 0;
    text-decoration: none;
    font-family: Roboto,sans-serif;
    color: #295eb9;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-size: .875rem;
}
    .tcard a:hover {
        color: #152f5d;
    }

.tcard .tcard-title a{
    font-family: Oswald,sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #295eb9;
    word-break: break-word;
}

.tcard .tcard-footer a{
    font-size: .75rem;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (min-width: 48em) {
    .tcard .tcard-title a {
        font-size: 1.125rem;
    }

    .tcard .tcard-footer a {
        font-size: .875rem;
    }
}

/*
>> 6.3 - Sizing
   since: ver 1.8
--------------------------------------------------------------*/

.tcard .tcard-footer .trn-xs,
.tcard .tcard-footer a.trn-sm{
    font-size: .75rem;
}


/* 
>> 7.0 - ICONS
   since: ver 1.2
==============================================================*/

.tcard i {
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    position: relative;
    top: 2px;
    margin-right: .25rem;
}

    .tcard i:before {
        font-size: 1.5rem;
        color: #295eb9;
    }

    .tcard i:hover:before {
        color: #152f5d;
    }

.tcard .terna-icon-arrow-right:before {
    font-size: .875rem;
}