body{
 background-color: #003569;
 margin : 8% 8% 8% 8%;
}

.images{
	width: 100%;
	height: 100%;
}
.images2{
	width:100%;
	height:100%;
}

.vide{
	width:84vw;
	height:4vw;
	background-color:;
}

.cadre{
	width: 10vw;
	height : 10vw;
	margin-left: 30%;
}

#togg1, #togg2, #togg3{
		user-select:none;
		-webkit-user-select:none;
			cursor:pointer; 


}

iframe{
	margin-left: 16%;
}

.animation1{
	width: 5vw;
	height: 5vh;
	background-color: orange;
	transition-duration: 1s;
}

.animation1:hover{
	width: 5vw;
	height: 15vh;
	background-color: yellow;
	transform: rotate(20deg);
	transition-duration: 1s;
}

.animation2{
	width: 5vw;
	height: 5vh;
	background-color:red;
	animation-iteration-count:infinite;
	animation-name: bouge-bouge;
	animation-duration: 2s;
}

@keyframes bouge-bouge{
	from{
	height: 10vh;
	background-color: pink;
	}
	
	to{
	height: 5vh;
	transition-duration : 2s;
	background-color: yellow;
	}
}

.animation3{
	width: 10vw;
	height: 15vh;
	background-color: #003569;
	transition-duration: 1s;
}

.animation3:hover{
	width: 6vw;
	height: 10vh;
	background-color: pink;	
	transition-duration: 1s;
	transition-property: 4s;
	transition-timing-function : linear;
}

.animation4{
	width: 5vw;
	height: 5vh;
	background-color: #4949ba;	
	transition-duration: 1s;
	transition: scale(12);
}

.animation4:hover{
	width: 5vw;
	height: 20vh;
	background-color:#1626b3;
	transition-duration: 0,5s;
}

.animation4bis{
	width: 5vw;
	height: 5vh;
	background-color: #;	
	transition-duration: 1s;
	transition: scale(12);
}

.animation4bis:hover{
	width: 5vw;
	height: 20vh;
	background-color: orange;
	transition-duration: 0,5s;
}

.animation6{
	width: 10vw;
	height: 10vh;
	background-color: green;
	transition: all 2s;
}

.animation6:hover{
	width: 30vw;
	height: 10vh;
	background-color: green;
	transition: all 2s;
}

.animation5{ 
   width:80px; 
   height:80px; 
	margin-right:200px;
	margin-top: 0%;
   background-color:#FF8800;  
   cursor:pointer; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease; 
  

} 
.animation5:hover{ 
   background-color:#1626b3; 
   border-radius:100px; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease;
 }
 
 .animation5bis{ 
   width:80px; 
   height:80px; 
	margin-right:200px;
   background-color:#e34e30;  
   cursor:pointer; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease; 
} 

.animation5bis:hover{ 
   background-color:#f38046; 
   border-radius:100px; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease;
 }
 
  .animation5bisbis{ 
   width:80px; 
   height:80px; 
	margin-right:200px;
   background-color:#4949ba;  
   cursor:pointer; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease; 
  

} 
.animation5bisbis:hover{ 
   background-color:#f38046; 
   border-radius:100px; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease;
 }
 
 .animation5-2{ 
   width:60px; 
   height:60px; 
	margin-top: 0%;
   background-color:#FF8800;  
   cursor:pointer; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease;
   margin-left: 30%;
} 


.animation5-2:hover{ 
   background-color:#1626b3; 
   border-radius:100px; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease;

 }
 
 .animation5-2bis{ 
   width:90px; 
   height:90px; 
	margin-right:200px;
   background-color:#e34e30;  
   cursor:pointer; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease; 
   margin-left: 20%;
} 


.animation5-2bis:hover{ 
   background-color:#f38046; 
   border-radius:100px; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease;
  
 }
 
  .animation5-2bisbis{ 
   width:50px; 
   height:50px; 
	margin-right:200px;
   background-color:#4949ba;  
   cursor:pointer; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease; 
     margin-left: 55%;
  

} 
.animation5-2bisbis:hover{ 
   background-color:#f38046; 
   border-radius:100px; 
   -webkit-transition:all 0.2s ease; 
   -o-transition:all 0.2s ease; 
   -moz-transition:all 0.2s ease; 
   -ms-transition:all 0.2s ease; 
   transition:all 0.2s ease;
     text-align: right;
 }


.animation-rond{
width:50px; 
height:50px; 
border-radius:100px; 
background-color:#4949ba;  
   	animation-iteration-count:infinite;
	animation-name: rond-rond;
	animation-duration: 2s;
margin: 2% 2% 2% 2%;
margin-left: 90%;

}


@keyframes rond-rond{
	from{
width:20px; 
height:20px; 
border-radius:100px; 
background-color:#4949ba; 

	}
	
	to{
width:50px; 
height:50px; 
border-radius:100px; 
background-color:#4949ba; 
	}
}

.animation-rond-deux{
width:50px; 
height:50px; 
border-radius:50px; 
background-color:#4949ba;  
   	animation-iteration-count:infinite;
	animation-name: rond-rond-deux;
	animation-duration: 2s;
}


@keyframes rond-rond-deux{
	from{
width:20px; 
height:20px; 
border-radius:100px; 
background-color:#4949ba; 
	}
	
	to{
width:30px; 
height:30px; 
border-radius:100px; 
background-color:#4949ba; 
	}
}




.page1{
	display:flex;
	position:relative;
}

.page2{
	display:flex;
	background-color: ;

}

.conteneur-un{
	background-color:;
	display :flex;
	
}
#d1, #d2, #d3{
	opacity:0;
}
.contenu-un{
	background-color:;
	width: 25vw;
	height: 25vw;
	transition-duration: 1s;
}

.contenu-un:hover{
	background-color:;
	width: 40vw;
	height: 25vw;
	transition-duration: 1s;
}


.contenu-deux{
	background-color:;
	width : 25vw;
	height : 25vw;
	transition-duration: 1s;
}

.contenu-deux:hover{
	background-color:#003569;
	width : 32vw;
	height : 25vw;
	transition-duration: 1s;
}

.contenu-trois{
	background-color:;
	width : 25vw;
	height : 25vw;
	transition-duration: 1s;
}


.contenu-quatre{
	background-color:p#e8eae6;
	width: 25vw;
	height: 25vw;
	transition-duration: 1s;
}

.contenu-quatre:hover{
	background-color:;
	width: 30vw;
	height: 25vw;
	transition-duration: 1s;
}

.contenu-cinq{
	background-color:;
	width : 25vw;
	height : 25vw;
	transition-duration: 1s;
}

.contenu-cinq:hover{
	background-color:;
	width : 25vw;
	height : 30vw;
	transition-duration: 1s;
}

.contenu-six{
	background-color:#003569;
	width : 33vw;
	height : 25vw;
	transition-duration: 1s;
}

.contenu-six:hover{
	background-color:#e8eae6;
	transition-duration: 1s;
}

.conteneur-deux{
	background-color:;
	display :flex;	
}

.contenu-sept{
	background-color:;
	width: 26vw;
	height: 26vw;
	transition-duration: 1s;
	filter: hue-rotate(0deg);
}

.contenu-sept:hover{
	background-color:;
	width: 25vw;
	height: 30vw;
	transition-duration: 1s;
	filter: hue-rotate(180deg);
}


.contenu-huit{
	background-color:;
	width : 26vw;
	height : 26vw;
	transition-duration: 1s;
	filter: hue-rotate(0deg);
}

.contenu-huit:hover{
	background-color:;
	width : 28vw;
	height : 26vw;
	transition-duration: 1s;
}

.contenu-neuf{
	background-color:;
	width : 26vw;
	height : 26vw;
	transition-duration: 1s;

}

.contenu-neuf:hover{
	background-color:;
	width : 26vw;
	height : 26vw;
	transition-duration: 1s;
	filter: hue-rotate(200deg);
}

.contenu-dix{
	background-color:p#e8eae6;
	width: 26vw;
	height: 26vw;
	transition-duration: 1s;
	filter: hue-rotate(0deg);
}

.contenu-dix:hover{
	background-color:;
	width: 26vw;
	height: 26vw;
	transition-duration: 1s;
	filter: hue-rotate(30deg);
}

.contenu-onze{
	background-color:;
	width : 26vw;
	height : 26vw;
	transition-duration: 1s;
	filter: hue-rotate(0deg);
}

.contenu-onze:hover{
	background-color:;
	width : 32vw;
	height : 25vw;
	transition-duration: 1s;
	filter: hue-rotate(180deg);
}

.contenu-douze{
	width : 26vw;
	height : 26vw;
	transition-duration: 1s;
}

.contenu-douze:hover{
	transition-duration: 1s;
}











.entre-deux-un{
background-color:;
height : 100px;
}

.page3{
	background-color:;
	z-index: 12;
	margin-bottom: 70px;

}

.conteneur-droit{
	background-color:;
	z-index: 1;
	position: absolute;
	opacity: 80%;
}


.conteneur-gauche{
	background-color:;
	width: 100%;
	z-index: 12;
	position: relative;
}

.texte{
	  font-family:gill sans;
	  text-align : right;
	  font-weight : 700;
	  	user-select:none;

}

.texte:hover{
	  font-family:gill sans;
	  color: white;
	  text-align : right;
	  font-weight : 700;
	  	user-select:none;

}

.texte-deux{
	  font-family:gill sans;
	  text-align : left;
	   font-weight : 700;
}

.entre-deux-texte{
background-color:red;
height : 100px;
}

.page4{
	display:flex;
	background-color: orange;
}
.conteneur-droit-deux{
	background-color:green;
	width : 40%;
	height : 50vw;	
}

.conteneur-gauche-deux{
	background-color:yellow;
	width : 60%;
	height : 50vw;
}


.page5{
	background-color: orange;
}

.conteneur-haut{
	background-color:red;
	width : 100%;
	height : 20vw;	
}

.conteneur-bas{
	background-color:;
	width : 100%;
	height : 20vw;
	
}

.page6{
	background-color: orange;
	display: flex;
}

.page7{
	background-color: orange;
}

.page8{
	display:flex;
}

.load{
position:relative;left:89%;transform:translate(-50%, -50%);
  width:120px;
  height:120px;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
.load :first-child{background:#e34e30;animation-delay:-1.5s}
.load :nth-child(2){background:#9587de;animation-delay:-1s}
.load :nth-child(3){background:#1626b3;animation-delay:-0.5s}
.load :last-child{background:#f38046}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}




@keyframes draw {
  0% {
    stroke-dasharray: 140 540;
    stroke-dashoffset: -474;
    stroke-width: 8px;
  }
  100% {
    stroke-dasharray: 760;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}

.svg-wrapper:hover .shape {
  -webkit-animation: 0.5s draw linear forwards;
  animation: 0.5s draw linear forwards;
}


@keyframes textColor {
    0% {
      color: #7e0fff;
    }
    50% {
      color: #0fffc1;
    }
    100% {
      color: #7e0fff;
  }
}

#load {
  position:absolute;
  width:400px;
  height:32px;
  margin-top: 50px;
  margin-left : 25%;
  overflow:visible;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
}

#load div {
  position:absolute;
  width:20px;
  height:36px;
  opacity:0;
  font-family:gill sans;
  animation:move 2s linear infinite;
  -o-animation:move 2s linear infinite;
  -moz-animation:move 2s linear infinite;
  -webkit-animation:move 2s linear infinite;
  transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  color:white;
}

#load div:nth-child(2) {
  animation-delay:0.2s;
  -o-animation-delay:0.2s;
  -moz-animation-delay:0.2s;
  -webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
  animation-delay:0.4s;
  -o-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
  animation-delay:0.6s;
  -o-animation-delay:0.6s;
  -moz-animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
  animation-delay:0.8s;
  -o-animation-delay:0.8s;
  -moz-animation-delay:0.8s;
  -webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
  animation-delay:1s;
  -o-animation-delay:1s;
  -moz-animation-delay:1s;
  -webkit-animation-delay:1s;
}
#load div:nth-child(7) {
  animation-delay:1.2s;
  -o-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
  -webkit-animation-delay:1.2s;
}

@keyframes move {
  0% {
    left:0;
    opacity:0;
  }
	35% {
		left: 41%; 
		-moz-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		transform:rotate(0deg);
		opacity:1;
	}
	65% {
		left:59%; 
		-moz-transform:rotate(0deg); 
		-webkit-transform:rotate(0deg); 
		-o-transform:rotate(0deg);
		transform:rotate(0deg); 
		opacity:1;
	}
	100% {
		left:100%; 
		-moz-transform:rotate(-180deg); 
		-webkit-transform:rotate(-180deg); 
		-o-transform:rotate(-180deg); 
		transform:rotate(-180deg);
		opacity:0;
	}
}

@-moz-keyframes move {
	0% {
		left:0; 
		opacity:0;
	}
	35% {
		left:41%; 
		-moz-transform:rotate(0deg); 
		transform:rotate(0deg);
		opacity:1;
	}
	65% {
		left:59%; 
		-moz-transform:rotate(0deg); 
		transform:rotate(0deg);
		opacity:1;
	}
	100% {
		left:100%; 
		-moz-transform:rotate(-180deg); 
		transform:rotate(-180deg);
		opacity:0;
	}
}

@-webkit-keyframes move {
	0% {
		left:0; 
		opacity:0;
	}
	35% {
		left:41%; 
		-webkit-transform:rotate(0deg); 
		transform:rotate(0deg); 
		opacity:1;
	}
	65% {
		left:59%; 
		-webkit-transform:rotate(0deg); 
		transform:rotate(0deg); 
		opacity:1;
	}
	100% {
		left:100%;
		-webkit-transform:rotate(-180deg); 
		transform:rotate(-180deg); 
		opacity:0;
	}
}

@-o-keyframes move {
	0% {
		left:0; 
		opacity:0;
	}
	35% {
		left:41%; 
		-o-transform:rotate(0deg); 
		transform:rotate(0deg); 
		opacity:1;
	}
	65% {
		left:59%; 
		-o-transform:rotate(0deg); 
		transform:rotate(0deg); 
		opacity:1;
	}
	100% {
		left:100%; 
		-o-transform:rotate(-180deg); 
		transform:rotate(-180deg); 
		opacity:0;
	}
}






.container {
	width: 200px;
	height: 100px;
	padding-top: 100px;
	margin-left: 500px;
}

.ball {
	width: 20px;
	height: 20px;
	margin: 20px auto;
	border-radius: 50px;
}

.ball:nth-child(1) {
	background: white;
	-webkit-animation: right 1s infinite ease-in-out;
	-moz-animation: right 1s infinite ease-in-out;
	animation: right 1s infinite ease-in-out;
}

.ball:nth-child(2) {
	background: #e34e30;
	-webkit-animation: left 1.1s infinite ease-in-out;
	-moz-animation: left 1.1s infinite ease-in-out;
	animation: left 1.1s infinite ease-in-out;
}

.ball:nth-child(3) {
	background: #1626b3;
	-webkit-animation: right 1.05s infinite ease-in-out;
	-moz-animation: right 1.05s infinite ease-in-out;
	animation: right 1.05s infinite ease-in-out;
}

.ball:nth-child(4) {
	background: #9587de;
	-webkit-animation: left 1.15s infinite ease-in-out;
	-moz-animation: left 1.15s infinite ease-in-out;
	animation: left 1.15s infinite ease-in-out;
}

.ball:nth-child(5) {
	background: #f38046;
	-webkit-animation: right 1.1s infinite ease-in-out;
	-moz-animation: right 1.1s infinite ease-in-out;
	animation: right 1.1s infinite ease-in-out;
}

.ball:nth-child(6) {
	background: #e34e30;
	-webkit-animation: left 1.05s infinite ease-in-out;
	-moz-animation: left 1.05s infinite ease-in-out;
	animation: left 1.05s infinite ease-in-out;
}

.ball:nth-child(7) {
	background: #e63025;
	-webkit-animation: right 1s infinite ease-in-out;
	-moz-animation: right 1s infinite ease-in-out;
	animation: right 1s infinite ease-in-out;
}

@-webkit-keyframes right {
	0% {
		-webkit-transform: translate(-15px);
	}
	50% {
		-webkit-transform: translate(15px);
	}
	100% {
		-webkit-transform: translate(-15px);
	}
}

@-webkit-keyframes left {
	0% {
		-webkit-transform: translate(15px);
	}
	50% {
		-webkit-transform: translate(-15px);
	}
	100% {
		-webkit-transform: translate(15px);
	}
}

@-moz-keyframes right {
	0% {
		-moz-transform: translate(-15px);
	}
	50% {
		-moz-transform: translate(15px);
	}
	100% {
		-moz-transform: translate(-15px);
	}
}

@-moz-keyframes left {
	0% {
		-moz-transform: translate(15px);
	}
	50% {
		-moz-transform: translate(-15px);
	}
	100% {
		-moz-transform: translate(15px);
	}
}

@keyframes right {
	0% {
		transform: translate(-15px);
	}
	50% {
		transform: translate(15px);
	}
	100% {
		transform: translate(-15px);
	}
}

@keyframes left {
	0% {
		transform: translate(15px);
	}
	50% {
		transform: translate(-15px);
	}
	100% {
		transform: translate(15px);
	}
}




svg {
    font: 10.5em 'arial';

}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 8% 29%;
    stroke-width: 2px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
	stroke:black;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: white;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: red;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: ;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #FDB731;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}