.col-1{width: 100%;}
.col-2{width: 50%;}
.col-3{width: calc(100%/3);}

.text_content_key_number_content h2{
    padding: 0 0 3rem 0;   
    line-height: 3rem;
}

.block-key_number .content-site{
    font-size: 0;
}

.block-key_number .text_content_key_number_container,
.block-key_number-text-left .key_number_container{
    vertical-align: middle;
    display: inline-block;
}

.block-key_number-text-left .text_content_key_number_container{
    width: calc(200% / 3);
    padding-right: 5.4rem;
    line-height: 2.7rem;
    font-size: 2rem;
}
.block-key_number-text-left .key_number_container{
    width: calc(100% / 3);
    border-left: 1px #c6c6c6 solid;
    padding-bottom: 5.4rem;
    padding-top: 3.6rem;
    padding-left: 3.6rem;
}

.block-key_number-text-left .key_number_el + .key_number_el{
    padding-top: 4.5rem;
}

.key_number_icon{
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    padding-bottom: 7.8rem;
    width: 3.8rem;
    height: 0;
}
.key_number_value,
.key_number_unit{
    color:#DB0717;
}
.key_number_value{
    font-size: 7.5rem;
    padding-bottom: 0.5rem;
    line-height: 5.5rem;
    font-weight: normal;
}
.key_number_unit{
    font-size: 3.75rem;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 200;
}
.block-key_number-column .key_number_unit{
    font-size: 3rem;   
}
.key_number_text{
    padding-top: 2rem;
    font-size: 1.8rem;
    line-height: 2.2rem;
}

/** Version en colone sans picto **/

.block-key_number-column .key_number_value,
.block-key_number-column .key_number_unit
{
    display: inline-block;
}
.block-key_number-column .key_number_el{
    vertical-align: middle;
    padding: 2.2rem 3.5rem;
}
.block-key_number-column .key_number_unit{
    vertical-align: baseline;
}
.block-key_number-column .key_number_value{
    padding-bottom: 0;    
    padding-right: 1.2rem;
}
.block-key_number-column .key_number_el + .key_number_el{
    border-left: 0.1rem #d1d1d1 solid;
}
.block-key_number-column .key_number_icon{
    display: none;
}
.block-key_number-column .key_number_container{
    padding-top: 3.5rem;
    padding-bottom: 2.8rem;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    display: flex;
}

.key_number_anim--curve,
.key_number_anim--ring{
    position: relative;
}
.key_number_anim--ring .key_number_number_container,
.key_number_anim--curve .key_number_number_container{
    position: absolute;
}
    
.key_number_anim--curve .key_number_number_container{
    top: 3rem;
    left: 4.5rem;
}
.key_number_anim--ring .key_number_number_container{
    top: 0;
    left: 12rem;
}

.block-key_number-text-left .key_number_anim--ring .key_number_number_container {
    top: 2rem;
    left: 9.5rem;
}

.block-key_number-text-left .key_number_el:first-child.key_number_anim--ring .key_number_number_container{
    top: -3rem;
    left: 9.5rem;
}

.block-key_number-text-left .key_number_el:first-child.key_number_anim--curve .key_number_number_container {
    top: .25rem;
    left: 1.5rem;
}

.block-key_number-text-left .key_number_anim--curve .key_number_number_container {
    top: 5rem;
    left: 1.5rem;
}


.key_number_el .curve,
.key_number_el .donut{
    width: 10rem;
    height: 10rem;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -ms-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
}



.key_number_anim--ring .key_number_line{
    display: block;
    position: absolute;
    bottom: -.9rem;
    left: -1.2rem;
    transform: rotate(-42deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    border-top: #DB0717 solid 1px;
    width: 0;
    -webkit-transition: width .2s;
    -moz-transition: width .2s;
    -ms-transition: width .2s;
    -o-transition: width .2s;
    transition: width .2s;
    transition-timing-function: ease-in;
}

.key_number_anim .key_number_text{
    position: relative;
    opacity: 0;
    top:-1.5rem;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
.key_number_anim.animationStart .key_number_text{
    position: relative;
    opacity: 1;
    top:0;
}

.key_number_anim--ring.animationEnd .key_number_line{
    width: 1.5rem;
}

.key_number_anim--curve .key_number_value,
.key_number_anim--ring .key_number_value
{
    padding-right: .1rem;
    line-height: 1;
}

.key_number_anim--curve .key_number_value{
    font-size: 2.4rem;
}

.key_number_anim--ring .key_number_value{
    font-size: 3rem;
}


.key_number_anim--curve .key_number_value,
.key_number_anim--ring .key_number_value,
.key_number_anim--curve .key_number_unit,
.key_number_anim--ring .key_number_unit{
    display: inline-block;
}


.key_number_anim--curve .key_number_number_container,
.key_number_anim--ring .key_number_number_container{
    opacity: 0;
    -webkit-transition: opacity .4s;
    -moz-transition: opacity .4s;
    -ms-transition: opacity .4s;
    -o-transition: opacity .4s;
    transition: opacity .4s;
    transition-timing-function: ease-in;
}

.key_number_anim--curve.animationEnd .key_number_number_container,
.key_number_anim--ring.animationEnd .key_number_number_container{
    opacity: 1;
}

.key_number_anim--curve .key_number_unit,
.key_number_anim--ring .key_number_unit{
    font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
    .col-1,
    .col-2,
    .col-3{
        width: 100%;
    }
    
    .block-key_number-column .key_number_container{
        flex-direction: column;    
        padding-top:0; 
         padding-bottom: 0;
    }
    .block-key_number-text-left .key_number_el + .key_number_el,
    .block-key_number-column .key_number_el + .key_number_el{
        border: none;
        border-top: 1px solid #d1d1d1;
    }
    .block-key_number-column .key_number_value{
        font-size: 19.5vw;
        line-height: 1;
    }
    
    .block-key_number-column .key_number_unit{
        font-size: 9.765625VW;
        line-height: 1;
    }

    .key_number_text{
        font-size:4.6875VW;
        line-height: 5.73VW;
        padding: 0;
    }

    .block-key_number-text-left .text_content_key_number_container,
    .block-key_number-text-left .key_number_container{
        width: 100%;
        border:none;
    }    
    .block-key_number-column .key_number_el,
    .block-key_number-text-left .key_number_el,
    .block-key_number-text-left .key_number_el + .key_number_el{
        padding: 8vw 4vw 4vw 4vw;
    }
    .block-key_number-text-left .key_number_number_container{
        display: inline-block;
    }
    .block-key_number-text-left .text_content_key_number_container{
        font-size: 5.21VW;
        line-height: 5.2VW;
        padding: 0 0 11VW 0;
    }
    
    .block-key_number-text-left .key_number_container{
        padding: 0;
        border-top: 1px solid #d1d1d1;
        border-bottom: 1px solid #d1d1d1;
    }
    
    .block-key_number-text-left .key_number_icon,
    .block-key_number-text-left .key_number_number_container{
        display: inline-block;
        vertical-align: bottom;
    }    
    .key_number_icon + .key_number_number_container{
        padding-left: 5.21VW;
    }    
    .block-key_number-text-left .key_number_icon{
        padding-bottom: 18.75vw;
        width: 7.4vw;
        padding-right: 5.21vw;
    }
    .block-key_number-text-left .key_number_value {
        font-size: 19.5VW;
        line-height: 16.47vw;
        margin-bottom: 0;
        padding: 0;
    }
    .block-key_number-text-left .key_number_unit{
        font-size: 9.8VW;
        line-height: 7.47vw;
    }

    .key_number_anim--curve .key_number_number_container .key_number_value, .key_number_anim--ring .key_number_number_container .key_number_value {
        font-size: 6.5VW;
        line-height: 6.5VW;
    }
    
    .key_number_anim--curve .key_number_number_container .key_number_unit, .key_number_anim--ring .key_number_number_container .key_number_unit {
        font-size: 3.8VW;
        line-height: 1;
        margin-left: .5vw;
    }
    
    .block-key_number-text-left .key_number_el:first-child.key_number_anim--ring .key_number_number_container,
    .key_number_anim--ring .key_number_number_container, 
    .block-key_number-text-left .key_number_anim--ring .key_number_number_container {
        top: 7.55vw;
        left: 24vw;
    }
    
    .block-key_number-text-left .key_number_el:first-child.key_number_anim--curve .key_number_number_container,
    .key_number_anim--curve .key_number_number_container,
    .block-key_number-text-left .key_number_anim--curve .key_number_number_container {
        top: 11vw;
        left: 7vw;
    }
    .key_number_el .curve, .key_number_el .donut {
        width: 22vw;
        height: 30vw;
    }
    .key_number_anim--ring.animationEnd .key_number_line {
        width: 2vw;
        left: -1.6vw;
        bottom: -1.3vw;
    }
    
    .text_content_key_number_content{
        font-size:2rem;
        line-height:2.7rem;
    }
    
}