body{
	background-color: #f2efea;
	animation: fadeInAnimation ease 3s;
	animation-iteration-count: 1; 
	animation-fill-mode: forwards; 
}
@keyframes fadeInAnimation { 
            0% { 
                opacity: 0; 
            } 
            100% { 
                opacity: 1; 
            } 
        } 
.cl{
	min-height: 100vh;
	position: relative;
	z-index: 1;
}
.container{
	position: relative;
	height: 100%;
  width: 100%;
  height: 100vh;
}
#glob,#fst,#zero,#first,#second,#third,#forth,#fifth,#six{
	display: none;
}
.half_circle_Class {
	mix-blend-mode: normal;
	position: absolute;
	width: 443px;
	height: 842px;
	left: 284px;
	top: 0;
	overflow: hidden;
}
.hc_Class {
	fill: transparent;
	stroke: rgba(6,194,233,1);
	stroke-width: 4px;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	stroke-miterlimit: 4;
	shape-rendering: optimizeSpeed;
}
.hc {
	position: absolute;
	overflow: visible;
	width: 450px;
	height: 450px;
	left: -228px;
	top: 100px;
}
.glob_Class {
	position: absolute;
	width: 350px;
	height: 350px;
	left: 50px;
	top: 100px;
	overflow: visible;
}
.globe {
	color: #e8e8e8;
	width: 450px;
	height: 450px;
	opacity: 40%;
}
.logo {
	position: absolute;
	width: 270px;
	height: 270px;
	left: 100px;
	top: 80px;
}
.cr1 {
	stroke: #de6d18;
	fill: #de6d18;
	stroke-width: 1px;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	stroke-miterlimit: 4;
	shape-rendering: auto;
}
.cr2 {
	stroke: #f0a160;
	fill: #f0a160;
	stroke-width: 1px;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	stroke-miterlimit: 4;
	shape-rendering: auto;
}
.cr3 {
	stroke: #b01e7f;
	fill: #b01e7f;
	stroke-width: 1px;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	stroke-miterlimit: 4;
	shape-rendering: auto;
}
.cr4 {
	stroke: #186fb2;
	fill: #186fb2;
	stroke-width: 1px;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	stroke-miterlimit: 4;
	shape-rendering: auto;
}
.cr5 {
	stroke: #089a84;
	fill: #089a84;
	stroke-width: 1px;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	stroke-miterlimit: 4;
	shape-rendering: auto;
}
.cr6 {
	stroke: #597a37;
	fill: #597a37;
	stroke-width: 1px;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	stroke-miterlimit: 4;
	shape-rendering: auto;
}
.cr7 {
	stroke: #7bb631;
	fill: #7bb631;
	stroke-width: 1px;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	stroke-miterlimit: 4;
	shape-rendering: auto;
}
.c1 {
	position: absolute;
	overflow: visible;
	width: 25px;
	height: 25px;
	left: 272px;
	top: 85px;
}

.c2 {
	position: absolute;
	overflow: visible;
	width: 25px;
	height: 25px;
	left: 390px;
	top: 120px;
}

.c3 {
	position: absolute;
	overflow: visible;
	width: 25px;
	height: 25px;
	left: 462px;
	top: 195px;
}

.c4 {
	position: absolute;
	overflow: visible;
	width: 25px;
	height: 25px;
	left: 493px;
	top: 308px;
}

.c5 {
	position: absolute;
	overflow: visible;
	width: 25px;
	height: 25px;
	left: 461px;
	top: 425px;
}

.c6 {
	position: absolute;
	overflow: visible;
	width: 25px;
	height: 25px;
	left: 385px;
	top: 505px;
}

.c7 {
	position: absolute;
	overflow: visible;
	width: 25px;
	height: 25px;
	left: 274px;
	top: 537px;
}
.Ligne_Class {
	fill: transparent;
	stroke: rgba(6,194,233,1);
	stroke-width: 2px;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	stroke-miterlimit: 4;
	shape-rendering: auto;
}
.Ligne_0 {
	overflow: visible;
	position: absolute;
	width: 50px;
	height: 3px;
	left: 367px;
	top: 50px;
	transform: matrix(1,0,0,1,0,0);
}
.Ligne_00 {
	overflow: visible;
	position: absolute;
	width: 50px;
	height: 3px;
	left: 319px;
	top: 50px;
	transform: matrix(1,0,0,1,0,0);
}
.Ligne_1 {
	overflow: visible;
	position: absolute;
	width: 50px;
	height: 3px;
	left: 446px;
	top: 130px;
	transform: matrix(1,0,0,1,0,0);
}

.Ligne_2 {
	overflow: visible;
	position: absolute;
	width: 50px;
	height: 3px;
	left: 525px;
	top: 210px;
	transform: matrix(1,0,0,1,0,0);
}

.Ligne_3 {
	overflow: visible;
	position: absolute;
	width: 50px;
	height: 3px;
	left: 557px;
	top: 320px;
	transform: matrix(1,0,0,1,0,0);
}

.Ligne_4 {
	overflow: visible;
	position: absolute;
	width: 50px;
	height: 3px;
	left: 525px;
	top: 445px;
	transform: matrix(1,0,0,1,0,0);
}

.Ligne_5 {
	overflow: visible;
	position: absolute;
	width: 50px;
	height: 3px;
	left: 446px;
	top: 525px;
	transform: matrix(1,0,0,1,0,0);
}
.Ligne_6 {
	overflow: visible;
	position: absolute;
	width: 50px;
	height: 3px;
	left: 367px;
	top: 605px;
	transform: matrix(1,0,0,1,0,0);
}
.Ligne_7 {
	overflow: visible;
	position: absolute;
	width: 50px;
	height: 3px;
	left: 319px;
	top: 576px;
	transform: matrix(1,0,0,1,0,0);
}
/*items*/
.item0 {
	position: absolute;
	width: 85px;
	height: 85px;
	left: 473px;
	top: 0px;
	overflow: visible;
}
.item1 {
	position: absolute;
	width: 85px;
	height: 85px;
	left: 543px;
	top: 80px;
	overflow: visible;
}
/*-----------------------*/
.item2 {
	position: absolute;
	width: 85px;
	height: 85px;
	left: 613px;
	top: 160px;
	overflow: visible;
}
/*--------------------*/
.item3 {
	position: absolute;
	width: 85px;
	height: 85px;
	left: 648px;
	top: 270px;
	overflow: visible;
}
/*--------------------*/
.item4 {
	position: absolute;
	width: 85px;
	height: 85px;
	left: 616px;
	top: 390px;
	overflow: visible;
}
/*-------------------*/
.item5 {
	position: absolute;
	width: 85px;
	height: 85px;
	left: 537px;
	top: 470px;
	overflow: visible;
}
/*--------------------*/
.item6 {
	position: absolute;
	width: 85px;
	height: 85px;
	left: 467px;
	top: 550px;
	overflow: visible;
}
/*--------------------*/
.txt{
	font-size: 20px; 
	width: 200px;
	top: 35px;
	left: 120px;
	position: absolute ;
	font-family: Raleway;
}
button{
	border: all;
	border-color: rgba(6,194,233,1);
	border-width: 2px;
	box-shadow: inset 0 0 25px rgba(0,0,0,.4)
}

.b0{
  background-color: #de6d18;
  border: all;
  color: white;
  padding: 25px;
  display: inline-flex;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
}
.b0:hover, .b0:focus { 
  padding: 30px;
  border-radius: 50%;
}
.b1{
  background-color: #f0a160;
  color: white;
  padding: 25px;
  display: inline-flex;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
}
.b1:hover, .b1:focus { 
  padding: 30px;
  border-radius: 50%;
}
.b2{
  background-color: #b01e7f;
  color: white;
  padding: 25px;
  display: inline-flex;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
}
.b2:hover, .b2:focus { 
  padding: 30px;
  border-radius: 50%;
}


.b3{
  background-color: #186fb2;
  color: white;
  padding: 25px;
  display: inline-flex;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
}
.b3:hover, .b3:focus { 
  padding: 30px;
  border-radius: 50%;
}
.b4{
  background-color: #089a84;
  color: white;
  padding: 25px;
  display: inline-flex;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
}
.b4:hover, .b4:focus { 
  padding: 30px;
  border-radius: 50%;
}
.b5{
  background-color: #597a37;
  color: white;
  padding: 25px;
  display: inline-flex;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
}
.b5:hover, .b5:focus { 
  padding: 30px;
  border-radius: 50%;
}

.b6{
  background-color: #7bb631;
  color: white;
  padding: 25px;
  display: inline-flex;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
}
.b6:hover, .b6:focus { 
  padding: 30px;
  border-radius: 50%;
}
button.active.focus, button.active:focus,
button.focus, button:active.focus, 
button:active:focus, button:focus {
  outline: none;
  box-shadow: none;
  opacity: 0.7;
}
img{
	height: 35px;
	width: 35px;
}