.svg-left-section .svg-conent-show {
    margin-bottom: 60px;
    float: left;
    width: 100%;
    padding-left: 85px;
}
div#ecoute {
    position: relative;
}
div#Challenge {
    position: relative;
}
div#perfection {
    position: relative;
}

.svg-left-section .svg-conent-show > div {
    display: inline-block;
    width: 22%;
    float: left;
    position: absolute;
    left: 0;
}
.svg-left-section .svg-conent-show h2 {
    font-size: 16px !important;
    text-transform: uppercase;
    color: #fff;
    margin-top: 42px;
    float: left;
    width: 100%;
    margin-bottom: 25px;
}
.svg-left-section .svg-conent-show .content {
    float: left;
    width: 80%;
    color: #fff;
    display: none;
    transition: all .5s ease-in-out;
    position: relative;
}
.draw-line {
    position: absolute !important;
    width: 100% !important;
    left: 112px;
    top: 50px;
    left: 75px !important;
}
div#ecoute:hover .draw-line {display: block !important;}
div#Challenge:hover .draw-line {display: block !important;}
div#perfection:hover .draw-line {display: block !important;}
div#confiance:hover .draw-line {display: block !important;}
div#franchise:hover .draw-line {display: block !important;}
div#humanite:hover .draw-line {display: block !important;}
div#Challenge:hover{cursor: pointer;}
.svg-left-section .svg-conent-show .draw-line{display:none;}
.svg-right-section .svg-conent-show .draw-line{display:none;}
.path {
stroke-dasharray: 400;
stroke-dashoffset: -400;
animation: dash 0.5s linear forwards;
}
.challenge {
stroke-dasharray: 490;
stroke-dashoffset: -490;
animation: dash 0.5s linear forwards;
}
.perfection{
stroke-dasharray: 620;
stroke-dashoffset: -620;
animation: dash 0.5s linear forwards;
}
.confiance{
stroke-dasharray:1400;
  -webkit-animation: draw 1s ease-in;
}

.franchise{
stroke-dasharray:1400;
  -webkit-animation: draw 1s ease-in;
}

.humanite{
stroke-dasharray:1400;
  -webkit-animation: draw 1s ease-in;
}
@-webkit-keyframes draw {
  from {
    stroke-dashoffset: 1400;
  }
  to {
    stroke-dashoffset: 0;
  }
}
div#perfection .draw-line {
    top: -380px;
}


@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
div#ecoute:hover .content{display: block !important;} 
div#Challenge:hover .content {display: block !important;}
div#perfection:hover .content {display: block !important;}
div#confiance:hover .content {display: block !important;}
div#humanite:hover .content {display: block !important;}
div#franchise:hover .content {display: block !important;}
.svg-right-section .svg-conent-show {
    margin-bottom: 60px;
    float: left;
    width: 100%;
    padding-left: 150px;
}
.svg-right-section .svg-conent-show h2 {
font-size: 16px !important;
    text-transform: uppercase;
    color: #fff;
    margin-right: 42px;
    text-align: left;
    float: left;
    width: 100%;
    margin-right: 0px;
}
.svg-right-section .svg-conent-show .content {
    float: left;
    width: 100%;
    color: #fff;
    display: none;
    transition: all .5s ease-in-out;
    position: relative;
	text-align: left;
}
.svg-right-section .svg-conent-show > div {
        display: inline-block;
width: 22%;
    float: right;
    position: absolute;
    right: 0px;
}
.svg-right-section #confiance .draw-line {top: 24px;}
.svg-right-section .draw-line {left: -220px !important;top: 30px;}
.svg-step {margin-left: -35px;}
.svg-left-section {margin-top: 80px;}
.svg-mobile{display:none;}


#valeurs .down-scrolling a.scroll-tosection {
    text-align: center;
    display: inline-block;
}
#valeurs .down-scrolling a img {
    display: block;
    margin: 0 auto 10px;
}
#valeurs a.scroll-tosection span {
    float: left;
    width: 100%;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
}

.svg-right-section .svg-conent-show {margin-bottom: 90px;}
/* .svg-step {max-height: 680px;height: 680px;} 
#valeurs .down-scrolling{bottom: -100px;}	*/
.svg-desktop .svg-step {height:80vh;}
.svg-left-section #perfection h2 {margin-top:18px;}
div#humanite .draw-line {top: 291px;right: 0;}
div#Challenge {z-index: 9999;}


/******************************31-01-2020*********************************/
/* ,.perfection-star, .confiance-start, 
.franchise-start, .humanite-star{animation: blinker 1s linear infinite;} */
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#ecoute-star-hover:hover .ecoute-star{animation: blinker 1s linear infinite;}
#challenge-star-hover:hover .challenge-star{animation: blinker 1s linear infinite;}
#perfection-star-hover:hover .perfection-star{animation: blinker 1s linear infinite;}
#confiance-star-hover:hover .confiance-start{animation: blinker 1s linear infinite;}
#franchise-start-hover:hover .franchise-start{animation: blinker 1s linear infinite;}
#humanite-star-hover:hover .humanite-star{animation: blinker 1s linear infinite;}

#challenge-star-hover,#perfection-star-hover, #confiance-star-hover,
#ecoute-star-hover,#franchise-start-hover,#humanite-star-hover{cursor:pointer;}
.svg-desktop .svg-step {z-index: 9999;}


#valeurs{padding:190px 30px 20px!important;}


/**********Media****************2500 1920 78******/

@media (max-width: 1600px){
.svg-desktop .svg-step {height: 88vh;}
#valeurs { padding:80px 30px 20px!important;}
}

@media (max-width: 1400px){
.svg-left-section #perfection h2 {margin-top:18px;margin-bottom: 22px;}
.svg-conent-show .content {font-size: 12px;}
.svg-conent-show h2 {font-size: 14px !important}
#valeurs .down-scrolling {bottom:0px;} 
div#perfection {margin-bottom: 0;}
/* #valeurs {padding: 70px 30px 70px!important;}*/
.svg-desktop .svg-step {height:89vh;} 
#valeurs {padding: 80px 30px 20px!important;}
}

@media (max-width: 1366px){
#valeurs .down-scrolling {bottom: -10px;}
#valeurs {padding: 21px 30px 20px!important;}
.svg-desktop .svg-step {height: 94vh;}
}

@media (max-width: 1200px){
 .path, .challenge, .perfection, .confiance, .humanite, .franchise{display:none; } 
div.svg-conent-show:hover .draw-line {
    display: block !important;
    position: relative !important;
    left: inherit !important;
    top: -15px !important;
}
div.svg-conent-show:hover .draw-line:before {
    content: '';
    width: 100%;
    border-top: 2px solid #cc9966;
    display: block;
}
div.svg-conent-show .draw-line svg {display: none;}.
.svg-right-section .svg-conent-show {padding-left: 130px;}
.svg-right-section .svg-conent-show {padding-left: 130px;}
}
@media (max-width: 1024px){
.svg-right-section .svg-conent-show > div {
    display: inline-block;
    width: 16%;
    float: right;
    position: absolute;
    right: 0px;}
.svg-left-section .svg-conent-show {width: 85%;}
.svg-left-section .svg-conent-show .content {width: 100% !important;}
}
@media (max-width: 1000px){
.svg-right-section .svg-conent-show {  padding-left: 110px;}
.svg-step { margin-left: -55px;}
.svg-left-section .svg-conent-show h2 { font-size: 14px !important;}
.svg-right-section .svg-conent-show h2 { font-size: 14px !important;}
.svg-right-section .svg-conent-show > div {width: 12%;}
div.svg-conent-show:hover .draw-line {  top: -10px !important;}
}
@media (max-width: 800px){
.svg-desktop{display:none;}
.svg-mobile{display:block;}
.svg-step {text-align: center;margin: 0 auto;}
.svg-left-section .svg-conent-show > div {width: 13%;}
.svg-right-section .svg-conent-show > div {width: 16%;float: left;left: 0px;text-align: center;}
.svg-right-section .svg-conent-show > div:first-child {min-height: 70px;}
.svg-left-section .svg-conent-show > div:first-child {min-height: 100px;}
.svg-right-section .svg-conent-show {padding-left: 10px;}
.svg-conent-show .content{width: 80% !important;margin-left: 30px;}
.svg-conent-show:hover .draw-line {width: 70% !important;}
.svg-conent-show:hover .draw-line:before{width: 70% !important;}
.svg-conent-show {margin-bottom:20px;}
.svg-conent-show h2 { margin-top: 0px !important;}
.svg-left-section .svg-conent-show:hover .draw-line {margin-left: 30px;}
.svg-left-section .svg-conent-show:hover .content{margin-left: 30px;}
.svg-conent-show h2 { width: 77% !important;}
div#humanite:hover .draw-line {display: block !important;}
.svg-mobile .down-scrolling {display: block;}
div#perfection {margin-bottom:60px;}
.svg-right-section .svg-conent-show {margin-bottom: 65px;}
.svg-left-section .svg-conent-show h2 {margin-top: 40px !important;font-size: 16px !important;}
.svg-right-section .svg-conent-show h2 {font-size: 16px !important;}
.svg-conent-show .content { font-size: 14px;}
}

@media (max-width: 650px){
    .svg-left-section .svg-conent-show h2 {margin-top: 20px !important;}
}
@media (max-width: 600px){
.svg-right-section .svg-conent-show h2 {margin-left: 40px;}
/* .svg-left-section .svg-conent-show:hover .draw-line {margin-left: 80px;}
.svg-left-section .svg-conent-show:hover .content{margin-left: 80px;} */
}

@media (max-width: 550px){
.svg-left-section div#perfection h2 { margin-top: 10px !important;}
}
@media (max-width: 500px){
.svg-left-section .svg-conent-show:hover .content {margin-left: 44px !important;}
.svg-left-section .svg-conent-show > div:first-child {min-height: 28px;}
.svg-mobile {padding: 100px 30px !important;}
.svg-left-section .svg-conent-show > div {width: 15% !important;}
.svg-right-section .svg-conent-show > div {width: 15% !important;}
.svg-left-section .svg-conent-show > div.content {width: 100% !important;}
.svg-right-section .svg-conent-show > div.content {width: 100% !important;}
.svg-left-section .svg-conent-show:hover .content {margin-left: 45px !important;}
.svg-conent-show .content { margin-left: 92px;}
}
@media (max-width: 435px){
.svg-conent-show h2 { width: 70% !important;}
.svg-left-section .svg-conent-show:hover .content {margin-left: 45px !important;}
.svg-conent-show .content {width: 70% !important;margin-left: 85px;}
.svg-conent-show .content {font-size: 12px;}
.svg-left-section .svg-conent-show h2 {font-size: 14px !important;}
.svg-right-section .svg-conent-show h2 {font-size: 14px !important;}
}
@media (max-width: 420px){
.svg-right-section .svg-conent-show > div:first-child { min-height: auto;}
.svg-mobile {padding: 100px 30px !important;}
}
@media (max-width: 400px){
div#humanite:hover .draw-line { display: block !important;}
.svg-conent-show .content {margin-left: 80px;}
.svg-left-section .svg-conent-show:hover .content {margin-left: 40px !important;}
.svg-left-section .svg-conent-show:hover .content {margin-left: 76px !important;}
}
@media (max-width: 370px){
    .svg-left-section .svg-conent-show:hover .content {margin-left: 0px !important;}
    .svg-conent-show .content {margin-left: 0px;}
    .svg-right-section .svg-conent-show > div.content {width: 100% !important;padding-left: 75px;}
    .svg-left-section .svg-conent-show > div.content {width: 100% !important;padding-left: 75px;}  
}