/*==============================================================
Classi Aggiunte
==============================================================*/

/*img-strategia*/

.bootstrap.strategia{
    position: relative;
}

.box-strategia>img:hover+.base-modal+h2 {
    visibility: hidden;
}

.flip-image {
    cursor: pointer;
}

.box-content {
    height: 100%;
    overflow: hidden;
}

.link-blu {
    color: rgb(41, 94, 185);
    font-weight: bold;
    text-transform: uppercase;
}

.link-deco {
    text-decoration: none;
    font-size: 0.75rem;
}

.link-deco:hover {
    text-decoration: underline;
}

.p-text {
    margin: 0px 10px 10px 10px;
    font-family: Roboto, sans-serif;
    font-size: 0.90rem;
}

.title-strate {
    margin: 0px 10px 0px 10px;
    font-family: Oswald, sans-serif;
    color: #09467c;
    font-size: 1.6rem;
    text-transform: uppercase;
    margin: 5px auto;
}

.title-box-modal {
    margin: 0px 10px 0px 10px;
    font-family: Oswald, sans-serif;
    color: #09467c;
    font-size: 1rem;
    text-transform: uppercase;
}

.title-blu {
    color: #09467c;
}

.title-arancio {
    color: #df8312;
}

.title-rosso {
    color: #a72e33;
}

.title-blu-chiaro {
    color: #2e5fb8;
}

.base-modal {
    /*transition: All 0.8s ease;
    -webkit-transition: All 0.1s ease;
    -moz-transition: All 0.8s ease;
    -o-transition: All 0.8s ease;*/
}

.active {
    opacity: 1;
    z-index: 2;
    transition: All 0.8s ease;
    -webkit-transition: All 0.8s ease;
    -moz-transition: All 0.8s ease;
    -o-transition: All 0.8s ease;
}

.base {
    opacity: 0;
    z-index: -1;
    transition: All 0.8s ease;
    -webkit-transition: All 0.8s ease;
    -moz-transition: All 0.8s ease;
    -o-transition: All 0.8s ease;
}

.box-regolato {
    height: auto;
    position: absolute;
    background-color: white;
    border: 1px solid #09467c;
    border-radius: 4px;
    transition: opacity 0.5s ease-in-out;
}

.box-non-regolato {
    height: auto;
    position: absolute;
    background-color: white;
    border: 1px solid #df8312;
    border-radius: 4px;
    transition: opacity 0.5s ease-in-out;
}

.box-internazionale {
    height: auto;
    position: absolute;
    background-color: white;
    border: 1px solid #a72e33;
    border-radius: 4px;
    transition: opacity 0.5s ease-in-out;
}

.box-innovazione {
    top: -55%;
    height: auto;
    position: absolute;
    background-color: white;
    border: 1px solid #2e5fb8;
    border-radius: 4px;
    transition: opacity 0.5s ease-in-out;
}

.box-persone {
    top: -70%;
    height: auto;
    position: absolute;
    background-color: white;
    border: 1px solid #2e5fb8;
    border-radius: 4px;
    transition: opacity 0.5s ease-in-out;
}

@media (max-width: 1020px) {
    .box-persone-xs {
        top: -83%;
        height: auto;
        position: absolute;
        background-color: white;
        border: 1px solid #2e5fb8;
        border-radius: 4px;
        transition: opacity 0.5s ease-in-out;
    }
}

@media (max-width: 990px) {
    .box-innovazione-xs {
        top: -85%;
        height: auto;
        position: absolute;
        background-color: white;
        border: 1px solid #2e5fb8;
        border-radius: 4px;
        transition: opacity 0.5s ease-in-out;
    }
}

@media (max-width: 990px) {
    .box-persone-xs {
        top: -100%;
        height: auto;
        position: absolute;
        background-color: white;
        border: 1px solid #2e5fb8;
        border-radius: 4px;
        transition: opacity 0.5s ease-in-out;
    }
}

@media (max-width: 768px) {
    .box-innovazione-xs {
        top: -110%;
        height: auto;
        position: absolute;
        background-color: white;
        border: 1px solid #2e5fb8;
        border-radius: 4px;
        transition: opacity 0.5s ease-in-out;
    }
}

@media (max-width: 768px) {
    .box-persone-xs {
        top: -110%;
        height: auto;
        position: absolute;
        background-color: white;
        border: 1px solid #2e5fb8;
        border-radius: 4px;
        transition: opacity 0.5s ease-in-out;
    }
}

@media (max-width: 575px) {
    .box-innovazione-xs {
        top: -43%;
        height: auto;
        position: absolute;
        background-color: white;
        border: 1px solid #2e5fb8;
        border-radius: 4px;
        transition: opacity 0.5s ease-in-out;
    }
}

@media (max-width: 575px) {
    .box-persone-xs {
        top: -43%;
        height: auto;
        position: absolute;
        background-color: white;
        border: 1px solid #2e5fb8;
        border-radius: 4px;
        transition: opacity 0.5s ease-in-out;
    }
}

@media (max-width: 533px) {
    .box-persone-xs {
        top: -42%;
        height: auto;
        position: absolute;
        background-color: white;
        border: 1px solid #2e5fb8;
        border-radius: 4px;
        transition: opacity 0.5s ease-in-out;
    }
}

@media (max-width: 410px) {
    .box-persone-xs {
        top: -50%;
        height: auto;
        position: absolute;
        background-color: white;
        border: 1px solid #2e5fb8;
        border-radius: 4px;
        transition: opacity 0.5s ease-in-out;
    }
}

@media (max-width: 940px) {
    .title-xs {
        font-family: Oswald, sans-serif;
        font-size: 1.6rem;
        text-transform: uppercase;
    }
}

/*==============================================================
Classi Aggiunte Gianluca
==============================================================*/

@font-face {
    font-family: "Oswald";
    src: url('https://fonts.gstatic.com/s/oswald/v23/TK3iWkUHHAIjg752GT8G.woff2');
}

.strategia [class^=col] {
    display: flex;
    flex-direction: column;
}

.contorno {
    border: 1px dashed #333;
    width: 83%;
    height: calc(100% - 91px);
    position: absolute;
    top: 47px;
    left: 8%;
    border-radius: 80px;
}

.box-laterale {
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
    /* font-family: Roboto,sans-serif; */
    font-size: 1.7rem;
    color: #295eb9;
}

.box-laterale p, .box-laterale img {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.3;
    font-weight: bold;
    width: 80%;
    background: #fff;
}

.box-strategia {
    /*border-radius: 5px;
        padding: 10px;*/
    width: 100%;
    margin: 0 auto;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    flex-grow: 1;
    /*background: #fff;*/
    text-align: center;
}

.box-strategia img {
    height: 100px;
    margin: 0 auto;
}

.box-strategia h3 {
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
}

.box-strategia.blue {
    /*border: 1px solid #09467C;*/
}

.box-strategia.blue h3 {
    color: #09467C;
}

.box-strategia.yellow {
    /*border: 1px solid #DF8312;*/
}

.box-strategia.yellow h3 {
    color: #DF8312;
}

.box-strategia.red {
    /*border: 1px solid #A72E33;*/
}

.box-strategia.red h3 {
    color: #A72E33;
}

.box-strategia.lightblue {
    /*border: 1px solid #005AA9;*/
}

.box-strategia.lightblue h3 {
    color: #005AA9;
}

.box-strategia-main {
    border-radius: 5px;
    background: #d4dff1;
    border: 2px solid #005AA9;
    padding: 5px;
    width: 100%;
    text-align: center;
}

.box-strategia-main h3 {
    margin: 0;
    font-family: Oswald, sans-serif;
    font-size: 2.0rem;
    text-transform: uppercase;
    color: #005AA9;
}

/*  to 940px px */

@media (max-width: 940px) {
    /* .box-strategia-main-xs {
        border-radius: 5px;
        background: #005AA9;
        padding: 5px;
        width: 100%;
        text-align: center;
    } */
}

/*  to 940px px */

@media (max-width: 940px) {
    /* .box-strategia-main-xs h3 {
            margin: 0;
            font-family: Oswald,sans-serif;
            font-size: 1.5rem;
            text-transform: uppercase;
            color: #fff;
        } */
}

.st-arrow-up {
    position: relative;
    width: 0;
    height: 0;
    border-bottom: 30px solid #005AA9;
    border-right: 35px solid transparent;
    border-left: 35px solid transparent;
    margin: 5px auto;
}

.st-arrow-up:after {
    content: '';
    position: absolute;
    top: 3px;
    left: -30px;
    width: 0;
    border-bottom: solid 25px #fff;
    border-right: solid 30px transparent;
    border-left: solid 30px transparent;
}

.st-arrow-down {
    position: relative;
    width: 0;
    height: 0;
    border-top: 30px solid #005AA9;
    border-right: 35px solid transparent;
    border-left: 35px solid transparent;
    margin: 5px auto;
}

.st-arrow-down:after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: -30px;
    width: 0;
    border-top: solid 25px #fff;
    border-right: solid 30px transparent;
    border-left: solid 30px transparent;
}

.titolo-strategia-small {
    font-size: 1rem;
    font-family: Oswald, sans-serif;
    color: #295eb9;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

@media only screen and (min-width: 48em){
.titolo-strategia-small {
    font-size: 1.3rem;
    }   
}

.show-small {
    display: none !important;
}

/*  to 575px px */

@media (max-width: 575px) {
    .hide-xsmall {
        display: none !important;
    }
}

/*   to 1023 px */

@media (max-width: 1023px) {
    .hide-small {
        display: none !important;
    }
    .show-small {
        display: block !important;
    }
}

/* Classi Aggiunte RIc */

#tornapilastri .act {
    position: relative;
}

#tornapilastri .act div {
    line-height: 1.5rem;
    transition: all 0.5s;
}

#tornapilastri .act .act-detail-hover {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.box-strategia .title-strate, .act-detail .trn-title, .act-detail .trn-txt {
    white-space: nowrap;
}

.act-detail .trn-title {
    /* margin-top: 13px; */
    line-height: 1.5rem;
}

/* Icone */

.box-strategia .img-cont {
    position: relative;
    width: 100px;
    background: #fff;
    margin: 0 auto;
}

.box-strategia .flip-image {
    transition: all 0.5s;
}

.box-strategia .flip-image.flip-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.box-strategia:hover {
    cursor: pointer;
}

.box-strategia:hover .flip-image.flip-hover {
    opacity: 1;
}

/* st-arrow */

.st-arrow-up:after, .st-arrow-down:after {
    transition: all 0.5s;
}

.st-arrow {
    visibility: visible;
    opacity: 1;
    transition: all 0.5s;
}

.st-arrow.act {
    visibility: hidden;
    opacity: 0;
}

.st-arrow-up:after {
    border-bottom: solid 25px #005AA9;
}

.st-arrow-down:after {
    border-top: solid 25px #005AA9;
}

.box-strategia:hover .st-arrow-up:after {
    border-bottom: solid 25px #fff;
}

.box-strategia:hover .st-arrow-down:after {
    border-top: solid 25px #fff;
}

.box-strategia:hover .st-arrow.act {
    visibility: visible;
    opacity: 1;
}

.box-details {
    background-color: #fff;
    border: 2px solid #005AA9;
    border-radius: 5px;
    padding: 20px;
}

.box-details img {
    margin: 0 auto;
}

#tornapilastri .trn-numb .numb-title {
    font-size: 64px;
    line-height: normal;
}

.trn-numb .numb-title, .trn-numb .numb-txt {
    margin: 0 auto;
}

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

/* .strategia a {
    padding: 0;
    text-decoration: none;
    font-family: Roboto, sans-serif;
    color: #295eb9;
    font-weight: 500;
    text-transform: uppercase;
    font-size: .875rem;
} */

/* .strategia a:hover {
    color: #152f5d;
} */

/* @media only screen and (min-width: 48em) {
    .strategia a {
        font-size: .875rem;
    }
} */

.strategia .left-content{
    transition: margin 400ms;
}
.strategia .right-content{
    display: none;
}

.strategia .text-strategia {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    height: 420px;
    max-height: 500px;
}

.strategia .text-strategia.active{
    transition: opacity 100ms;
    opacity: 1;
    visibility: visible;
}

.strategia .text-strategia .title > img {
    margin-right: 15px;
}

.strategia .text-strategia .title {
    font-size: 180%;
    color: #09467c;
    font-weight: bold;
}

.strategia .text-strategia.blue > .title {
    color: #09467c;
}
.strategia .text-strategia.orange > .title {
    color: #dd8227;
}
.strategia .text-strategia.red > .title {
    color: #a52f36;
}

.strategia .text-strategia p {
    font-size: 100%;
    color: #000;
}

.strategia .bold{
    font-weight: bold;
    display: inline-block;
}

.strategia .text-strategia ul {
    list-style: none; 
}

.strategia .text-strategia ul li {
    font-size: 100%;
}

.terna-blue{
    color: #09467c;
}

.terna-orange{
    color: #dd8227;
}

.terna-red{
    color: #a52f36;
}

.strategia .text-strategia ul > li::before {
    content: "\2022";   
    font-weight: bold; 
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
    float: left;
}

.strategia .text-strategia.blue ul > li::before {
    color: #09467c;
}
.strategia .text-strategia.orange ul > li::before {
    color: #dd8227;
}
.strategia .text-strategia.red ul > li::before {
    color: #a52f36;
}

.strategia .text-strategia a{
    float: right;
}

@media only screen and (max-width: 992px) {
    .strategia .text-strategia {
        display: none;
    }
    .strategia .text-strategia.active {
        display: block;
		margin-top: 50px;
    }
    .strategia .text-strategia {
        position: relative;
    }
    .strategia .text-strategia .title > img {
        width: 70px;
        margin-right: 0px;
    }
}