/*------------------------------------------*/
/*ACCUEIL*/
body main {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: auto;
	padding: 0px;
}
.all_container {
	width: 550px;
	margin: 0px auto 100px auto;
	height: 100vh;
}
.moment_center_wrapper {
	width: 100%;
	margin: auto;
}
/*------------------------------------------*/
.logo_txt {
	height: auto;
	width: 100%;
}

/*------------------------------------------*/
/*all the ratios of the following elements*/
._ratio {
	position: relative;
	width: 100%;
}
.logo_bubbles > ._ratio {
	padding-top: 70%;	
}
.circle > ._ratio {
	padding-top: 100%;
}
/*the wrapper box*/
.logo_bubbles {
	position: relative;
	width: 100%;
}
/*commmon settings*/
.logo_bubbles .circle {
	position: absolute;
	border-radius: 50%;
}
/*sie position and color for each circles*/
.logo_bubbles .circle._1 {
	top: 13.4%;
	left: 2.2%;
	width: 51.6%;
	background-color: #ee1998;
}
.logo_bubbles .circle._2 {
	top: 18.8%;
	left: 27.6%;
	width: 51.6%;
	background-color: #8fce3c;
}
.logo_bubbles .circle._3 {
	top: 5.9%;
	left: 66.1%;
	width: 30.5%;
	background-color: #0c9cb5;
}
.logo_bubbles .circle._4 {
	top: 36%;
	left: 59%;
	width: 10.9%;
	background-color: #e3e00a;
}
/*mix-blend-mode*/
.logo_bubbles .circle._blend._2 {
	mix-blend-mode: luminosity;
}
.logo_bubbles .circle._blend._3 {
	mix-blend-mode: color;
}
/*the line*/
.logo_bubbles .logo_line {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}
/*THE ANIMATION*/
@keyframes shape {
	0%		{transform: scale(1.00, 1.00);}
	20%		{transform: scale(1.01, 0.98);}
	30%		{transform: scale(0.98, 1.01);}
	40%		{transform: scale(1.02, 0.99);}
	50%		{transform: scale(1.00, 1.02);}
	60%		{transform: scale(0.98, 1.01);}
	70%		{transform: scale(1.01, 0.98);}
	80%		{transform: scale(0.99, 1.00);}
	90%		{transform: scale(0.98, 1.02);}
	100%	{transform: scale(1.00, 0.98);}
}
@keyframes size {
	0%		{transform: scale(1.00, 1.00);}
	20%		{transform: scale(0.98, 0.98);}
	30%		{transform: scale(1.01, 1.01);}
	40%		{transform: scale(0.99, 0.99);}
	50%		{transform: scale(1.02, 1.02);}
	60%		{transform: scale(1.01, 1.01);}
	70%		{transform: scale(0.98, 0.98);}
	80%		{transform: scale(1.00, 1.00);}
	90%		{transform: scale(1.02, 1.02);}
	100%	{transform: scale(0.98, 0.98);}
}
@keyframes position {
	0%		{transform: translate( 0%,  0%);}
	20%		{transform: translate( 2%, -2%);}
	30%		{transform: translate(-2%,  0%);}
	40%		{transform: translate( 2%, -2%);}
	50%		{transform: translate( 0%,  2%);}
	60%		{transform: translate( 2%, -2%);}
	70%		{transform: translate( 0%,  0%);}
	80%		{transform: translate(-2%, -2%);}
	90%		{transform: translate( 2%, -2%);}
	100%	{transform: translate( 0%,  0%);}
}
.logo_bubbles .circle {
	animation-duration: 4s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.all_container._1 .logo_bubbles .circle {
	animation-name: shape;
}
.all_container._2 .logo_bubbles .circle {
	animation-name: size;
}
.all_container._3 .logo_bubbles .circle {
	animation-name: position;
}
.logo_bubbles .circle._1 {
	animation-delay: -0.8s;
}
.logo_bubbles .circle._2 {
	animation-delay: -1.3s;
}
.logo_bubbles .circle._3 {
	animation-delay: -2.7s;
}
.logo_bubbles .circle._4 {
	animation-delay: 0s;
}






/*------------------------------------------*/
.logo_links {
	display: flex;
	flex-direction: row;
	padding: 10px;
}
.logo_links > * {
	margin: auto;
}
.logo_links > :first-child {
	margin-left: 0px;
}
.logo_links > :last-child {
	margin-right: 0px;
}
.logo_links #kosmopolit a {
	color: #ee1998;
}
.logo_links #litterall a {
	color: #8fce3c;
}
.logo_links #lea a {
	color: #0c9cb5;
}