/* Gestion des gifs */

#gif, #stopgif { font-size:50%;}
.round p.gif {
    /*margin-top:-90px;*/
    position: absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%);
}
#stopgif { display:none;}
.round.noIcon p.gif {
    margin-top:-90px;
}
.round span.gif {
    display:none !important;
}
.gif.black{
	color:#000;
}
.gif-img {
    display:none;
    width:160px;
    height:160px;
}
.gif-img.gif {
    display:block;
}

.gif-img.transformX-1{
	width:auto;
	height:134%;
	-webkit-transform: translate(-17%,-14%);
	-ms-transform: translate(-17%,-14%);
	transform: translate(-17%,-14%);
}

.gif-img.transformX-2{
	width:auto;
	height: 100%;
	-webkit-transform: translate(-31%,-1%);
	-ms-transform: translate(-31%,-1%);
	transform: translate(-31%,-1%);
}
.gif-img.transformX-3{
	width:auto;
	height:100%;
	-webkit-transform: translateX(-16%);
	-ms-transform: translateX(-16%);
	transform: translateX(-16%);
}
.gif-img.transformX-4{
	width:auto;
	-webkit-transform: translateX(-20%);
	-ms-transform: translateX(-20%);
	transform: translateX(-20%);
}

.gif-img.transformX-5{
	width: auto;
	height:161px;
	-webkit-transform: translate(-12%,-7%);
	-ms-transform: translate(-12%,-7%);
	transform: translate(-12%,-7%);
}
.gif-img.transformX-6{
	width:auto;
	height:160px;
	-webkit-transform: translateX(-11%);
	-ms-transform: translateX(-11%);
	transform: translateX(-11%);
}
.gif-img.transformX-7{
	width:auto;
	-webkit-transform: translateX(-10%);
	-ms-transform: translateX(-10%);
	transform: translateX(-10%);
}

/*-----FONTS----*/

@font-face {
    font-family: 'texgyreadventorregular';
    src: url('../fonts/texgyreadventor-regular-webfont.eot');
    src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
         url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('../fonts/texgyreadventor-regular-webfont.svg#texgyreadventorregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'texgyreadventorbold';
    src: url('../fonts/texgyreadventor-bold-webfont.eot');
    src: url('../fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/texgyreadventor-bold-webfont.woff') format('woff'),
         url('../fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
         url('../fonts/texgyreadventor-bold-webfont.svg#texgyreadventorbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?waqoqz');
  src:  url('../fonts/icomoon.eot?waqoqz#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?waqoqz') format('truetype'),
    url('../fonts/icomoon.woff?waqoqz') format('woff'),
    url('../fonts/icomoon.svg?waqoqz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-code:before {
  content: "\e900";
}
.icon-computer:before {
  content: "\e901";
}
.icon-cup:before {
  content: "\e902";
}
.icon-graphic:before {
  content: "\e903";
}
.icon-magic-stick:before {
  content: "\e904";
}
.icon-paint-brush:before {
  content: "\e905";
}
.icon-rocket:before {
  content: "\e906";
}
.icon-files:before {
  content: "\e907";
}


/*---------------ETAPE----------------*/

.etape p{
	font-family: texgyreadventorregular;
	font-size: 14px;
	line-height:20px;
}

.etape .row{
	margin-top: 60px;
	margin-bottom:60px;
	position: relative;
}

.etape .row:nth-child(6){
	margin-top:-90px;
}

.etape{
	background-color: #f2f2f2;
	position: relative;
}

/*---------------FIlLET & BORDER----------------*/

.fillet{
	width:95%;
	height:3px;
	background-color: #38b7bc;
	position: absolute;
	top:38%;
}

.fillet.secondRow{
	left:22px;
	width: 93%;
}

.fillet.secondRow.end{
	width:75%;
}

.fillet.dot:before{
	content:" ";
	width:15px;
	height:15px;
	background-color: #38b7bc;
	position: absolute;
	border-radius: 10px;
	top:-6px;
}

.fillet-droit{
	border-radius:24px;
	width:100px;
	height:100px;
	border:3px solid #38b7bc;
	position:absolute;
	right:0%;
	top:38%;
	border-left:none;
	border-bottom:none;
	border-top-left-radius:0px;
	border-bottom-right-radius:0px;
}

.fillet-droit.haut{
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	top:-14px;
}

.fillet-droit.bas{
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	top:83px;
	left:0;
}

.lastRow{
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	top:-14px;
	left:0;
}


.right-border{
	width:3px;
	height:260px;
	position:absolute;
	background-color: #38b7bc;
	right:0;
	top:-126px;
}

.right-border:before, .left-border:before, .text-border:not(.evo):before, .fillet.secondRow:before{
	content:"";
	background-image: url(../img/triangle2.png);
	background-size:21px 21px;
	width:20px;
	height:20px;
	position: absolute;
	right:-8px;
	top:50%;
}

.text-border:not(.evo):before, .fillet.secondRow.end:before{
	top:-11px;
	right:48%;
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.fillet.secondRow:not(.end):before{
	left:70%;
	top:-9px;
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.fillet.secondRow.end:before{
	top:-8px;
	right:63%;
}

.left-border{
	width:3px;
	height:160px;
	position:absolute;
	background-color: #38b7bc;
	left:0;
	top:-126px;
}

/*---------------ROUND----------------*/

.round{
	border-radius:100%;
	height:160px;
	width:160px;
	margin:0 auto;
	position: relative;
}

#etape.gif .round{
	overflow: hidden;
}

.round.blue{
	background-color: #5d6b8c;
}

.round.purpple{
	background-color: #493d4e;
}

.round span:not(.badge){
	text-align: center;
	display: block;
	color:#fff;
	font-size:57px;
	padding-top:30px;
}

.round.grey{
	background-color:#999b9e;
}

.round p{
	color:#fff;
	text-align: center;
	margin-top: 10px;
}

/*---------------.SEPARATION round .QUI----------------*/

.separation{
	width:2px;
	height:25px;
	background-color: #38b7bc;
	display: block;
	margin:0 auto;
}

.qui{
	background-color: #38b7bc;
	border-radius:5px;
	display: block;
	margin: 0 auto;
	width:130px;
}

.qui p{
	margin-bottom:0;
	text-align: center;
	padding:7px;
	color:#fff;
}

/*---------------.TEXT & BORDER----------------*/

.text{
	margin-top:60px;
	margin-bottom: 60px;

}

.text-border{
	width:66%;
	height:71px;
	border:3px dotted #38b7bc;
	border-bottom: none;
	border-radius:20px;
	position:absolute;
	left:17%;
	border-bottom-right-radius:0;
	border-bottom-left-radius:0;
}

.text-border.evo{
	border:3px dotted #38b7bc;
	border-right: 0;
	border-top:0;
	top:-105px;
	left:66%;
	border-top-left-radius: 0;
	border-bottom-left-radius: 20px;
	width:11%;
	height:120%;
}

.text p{
	font-weight:600;
	text-align: center;
}

/*---------------ROUND SANS ICONE----------------*/

.noIcon p{
	padding-top:35%;
	font-size:20px;
}

.noIcon.grey p{
	padding-top:45%;
}

/*---------------BADGE MOBILE----------------*/

.badge{
	padding:18px 23px;
	background-color: #5d6b8c;
	border-radius: 100%;
	position:absolute;
	top:-24px;
	right:56%;
	font-size:20px;
}

.badge.right{
	right: inherit;
	left:65%;
	background-color:#493d4e;
}

.noIcon .badge.right{
	left:inherit;
	right:65%;
}

.noIcon.grey .badge{
	right:inherit;
	left:65%;
	background-color:#999b9e;
}

/*---------------RESPONSIVE----------------*/

@media screen and (max-width:768px){
	.etape .qui{
		margin-bottom:50px;
	}
	.etape .container>.row:nth-child(5){
		margin-top: -60px !important;
	}
	.etape .text, .etape .container>.row:nth-child(6){
		margin-top:-50px !important;
	}
	.etape .separation{
		height:15px;
	}
	.etape .text p{
		max-width: 51%;
		margin:0 auto;
		border:1px dotted #38b7bc;
		padding:20px;
		border-radius:10px;
	}
}

@media screen and (max-width:400px){
	.round-responsive{
		width:100px;
		height:100px;
	}
	.round-responsive p{
		font-size:15px;
	}
}

/*---------------RESPONSIVE finition----------------*/

@media screen and (min-width:769px and max-width:992px){
	.etape .qui{
		margin-bottom:30px;
	}
}

@media screen and ( min-width:768px ) and ( max-width:781px ){
	.etape .container{
		width:732px ;
	}
}

@media screen and ( min-width:992px ) and ( max-width:1002px ){
	.etape .container{
		width:960px ;
	}
}