/* CSS HEX

    --mint-cream: #e6efec;
    --yellow-green: #aada2f;
    --carrot-orange: #f39200;
    --star-command-blue: #1480c4;
    --gunmetal: #192c38;

    CSS HSL
    --mint-cream: hsla(160, 22%, 92%, 1);
    --yellow-green: hsla(77, 70%, 52%, 1);
    --carrot-orange: hsla(36, 100%, 48%, 1);
    --star-command-blue: hsla(203, 81%, 42%, 1);
    --gunmetal: hsla(203, 38%, 16%, 1);

    SCSS RGB
    $mint-cream: rgba(230, 239, 236, 1);
    $yellow-green: rgba(170, 218, 47, 1);
    $carrot-orange: rgba(243, 146, 0, 1);
    $star-command-blue: rgba(20, 128, 196, 1);
    $gunmetal: rgba(25, 44, 56, 1);
    */

    .chisiamo {
        margin-top: 10rem;
        padding-bottom:10rem;

    }
    .chisiamo .container_intro {
        position: relative;
    }
    .chisiamo .content_intro{
    }
    .chisiamo .titolo {
        margin-bottom: 3rem;
        color: #e6efec;
        text-align: center;
    }
    .chisiamo .titolo h1{
        font-size: 70px;
        font-weight: bold;
        margin-bottom: 1.5rem;
    }
    .chisiamo .titolo h1:before {
        position: absolute;
        content:  "CHI SIAMO";
        font-size: 70px;
        font-weight: bold;
        color: #192c38;
        transform: translate(4px,-2px);
    }
    .chisiamo .titolo span {
        max-width: 330px;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        line-height: 5px;
    }
    .chisiamo .description {
        margin-top: 5rem;
        margin-bottom: 3rem;
        text-align: center;
    }
    .chisiamo .description .citazione {
        font-family: 'Grape Nuts', cursive;
        font-size: 24px;
    }
    .chisiamo .description .firma_citazione {
        font-family: 'Beau Rivage', cursive;
        font-size: 28px;
        color: #192c38;
        text-shadow: 1px 1px #f39200;
        font-weight: 700;
        text-align: center;
    }
    .chisiamo .description .description_content {
        margin-top: 5rem;
        text-align: justify;
    }
    .chisiamo .description .description_content span {
        text-align: center;
        display: block;
    }

    .chisiamo .description .description_content b {
        font-weight: bold;
        color:#192c38;
        text-shadow: 1px 0px #e6efec;
    }
    .chisiamo .descriptionName .citazione {
        font-family: 'Grape Nuts', cursive;
        font-size: 24px;
    }
    .chisiamo .descriptionName .firma_citazione {
        font-family: 'Beau Rivage', cursive;
        font-size: 28px;
        color: #192c38;
        text-shadow: 1px 1px #f39200;
        font-weight: 700;
        text-align: center;
    }
    .chisiamo .descriptionName .preview_description {
        margin-top: 1rem;
        margin-bottom: 0;
    }
    .chisiamo .descriptionBox b {
        font-weight: bold;
        color:#192c38;
        text-shadow: 1px 0px #e6efec;
    }

    .chisiamo .descriptionBox .descriptionName .btn-modal-lanfranchi {
        background: transparent;
        border: none;
        font-style: italic;
        color: #192c38;
        text-shadow: 1px 1px #f39200;
        width: auto;
        margin: auto;
    }
    .chisiamo .descriptionBox .descriptionName .btn-modal-lanfranchi:hover {
        background: transparent
        border:none;
        cursor: pointer;
        color: #192c38;
        text-shadow: 1px 1px #f39200;
    }
    .chisiamo .descriptionBox .descriptionName .btn-modal-lanfranchi:focus {
        border:none;
    }
    .chisiamo .descriptionBox .descriptionName .btn-modal-lanfranchi:focus-visible {
        border:none;
    }
    .chisiamo #lanfranchi_modal .modal-dialog {
        border-radius: 16px;
    }
    .chisiamo #lanfranchi_modal .modal-content {
        padding-top: 1rem;
        background-color: rgba(223, 255, 140, 1)
    }
    .chisiamo #lanfranchi_modal .modal-body {
        padding-left:2rem;
        padding-right: 2rem;
        margin-bottom: 2rem;
        margin-top: 2rem;
    }
    .chisiamo #lanfranchi_modal .modal-footer {
        justify-content: center;
        border-top: 2px solid #f39200;
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .chisiamo #lanfranchi_modal .modal-footer .btn-close-modal {
        font-weight: 500;
        text-transform: uppercase;
        color: #f39200;
    }


    .chisiamo .body .content1,
    .chisiamo .body .content2,
    .chisiamo .body .content3,
    .chisiamo .body .content4,
    .chisiamo .body .content5,
    .chisiamo .body .content6,
    .chisiamo .body .content7 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .chisiamo .body .imgBox {
        display: grid;
        place-items:center;
    }
    .wrapper {
        position: relative;
        perspective: 40em;
        display: grid;
        transform-style: preserve-3d;
        }
    @keyframes bounce {
       0%, 30%, 50%, 80%, 100% {transform: translateX(10px) rotateY(25deg) rotateX(10deg);}
       20% {transform: translateX(10px) rotateY(30deg) rotateX(10deg);}
       40% {transform: translateX(10px) rotateY(27deg) rotateX(10deg);}
    }
    @-webkit-keyframes bounce {
         0%, 30%, 50%, 80%, 100% {-webkit-transform: translateX(10px) rotateY(25deg) rotateX(10deg);}
         20% {-webkit-transform: translateX(10px) rotateY(30deg) rotateX(10deg);}
         40% {-webkit-transform: translateX(10px) rotateY(27deg) rotateX(10deg);}
      }
      .bounce {
        -webkit-animation-name: bounce;
        animation-name: bounce;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
      }
    .front_card {
        grid-area: 1 / 1;
        height: 200px;
        width: 250px;
        transform: translateX(10px) rotateY(25deg) rotateX(10deg);
        background: rgba(170, 218, 47, 0.88);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 30px;
        color: #192c38;
        text-transform: uppercase;
        font-size: 60px;
        font-weight: 900;
        backface-visibility: hidden ;
        box-shadow: 0 10px 30px -3px rgba(0, 0, 0, 0.1);
        opacity: 1;
    }
    .back_card {
        opacity:0;
        grid-area: 1 / 1;
        height: 200px;
        width: 250px;
        transform: translateX(10px) rotateY(25deg) rotateX(10deg);
        background: rgba(249, 198, 26, 0.1);
        background-image: url(https://economicdevelopment.lacounty.gov/wp-content/uploads/2017/05/Local-worker-construction.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        box-shadow: 0 10px 30px -3px rgba(0, 0, 0, 0.1);
        transition:1s;
    }

    .wrapper h3 {
        font-size: 2rem;
        font-weight: 800;
        }


    .front_card .enclosed {
        background: #192c38;
        line-height: 1;
        color: rgba(170, 218, 47, 1);
        padding: 1rem;
        display: inline-block;
        transform: translate(-1px, 1px) scale(0.75);
        transform-origin: right center;
        font-size: 40px;
        }

    .wrapper:before {
        --bw: 9px;
        grid-area: 1 / 1;
        content: "";
        backface-visibility: hidden;
        height: 100%;
        width: 100%;
        margin-top: calc(-1 * var(--bw));
        margin-left: calc(-1 * var(--bw));
        background: transparent;
        transform: translateX(-35px) rotateY(-30deg) rotateX(15deg) scale(1.03);
        pointer-events: none;
        border: var(--bw) solid #192c38;
        box-sizing: content-box;
        transition: 1s;
        }

    .wrapper:hover > div,
    .wrapper:hover:before {
        transform:none;
        transition: 1s;
        }

    .wrapper:hover>div {
        transform:  rotateY(180deg);
        transition:1s;
        }
    .wrapper:hover> .front_card {
        opacity:0;
        transition:1s;
        }

    .wrapper:hover> .back_card {
        transform:  rotateY(180deg);
        opacity:1;
        transition:1s;
        }

    .wrapper > div,
    .wrapper:before {
        will-change: transform;
        transition: 0.3s transform cubic-bezier(0.25, 0.46, 0.45, 1);
    }
    .chisiamo .body .descriptionBox {
        position: relative;
    }
    .chisiamo .body .descriptionBox .name {
        overflow: hidden;
    }
    #name1, #name2, #name3 {
        transform: translateX(-100%);
        transition: 1s;
     }
    .chisiamo .body .descriptionBox .descriptionName {
        text-align: justify;
    }

    #name_appear{
        transition:none;
    }
    .wrapper_active > div,
    .wrapper_active:before {
        transform:none;
        transition: 1s;
        }

    .wrapper_active>div {
        transform:  rotateY(180deg);
        transition:1s;
        }
    .wrapper_active> .front_card {
        opacity:0;
        transition:1s;
        }

    .wrapper_active> .back_card {
        transform:  rotateY(180deg);
        opacity:1;
        transition:1s;
        }
        #ivan_lanfranchi_back {
            background-image: url(../img/chisiamo/ivan.jpg);

        }

        #matteo_back {
            background-image: url(../img/chisiamo/paolo.jpg);

        }

        #omar_back {
            background-image: url(../img/chisiamo/omar.jpg);

        }

        #mirella_back {
            background-image: url(../img/chisiamo/mirella.jpg);

        }

        #elena_back {
            background-image: url(../img/chisiamo/elena.jpg);

        }

        #debora_back {
            background-image: url(../img/chisiamo/debora.jpg);

        }



    @media (max-width: 576px) {
        .chisiamo .body {
            margin-left: auto;
            margin-right: auto;
        }
        .chisiamo .body .content1, .chisiamo .body .content2, .chisiamo .body .content3 {
            padding-left: 0;
            padding-right: 0;
            margin-left: auto;
            margin-right: auto;
        }
        .chisiamo .body .descriptionBox {
            margin-top: 4rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        .chisiamo .body .descriptionBox .name{
            text-align: center;
         }
         .chisiamo .body .descriptionBox .name #name1,.chisiamo .body .descriptionBox .name #name2, .chisiamo .body .descriptionBox .name #name3 {
             transform: none;
         }
     }


    @media (max-width: 768px) {
        .chisiamo .body .descriptionBox .name #name1,.chisiamo .body .descriptionBox .name #name2, .chisiamo .body .descriptionBox .name #name3 {
            transform: none;
        }
        .chisiamo .body .descriptionBox .name{
            text-align: center;
         }

     }