.circle {

	border-radius: 50%;
	text-align:    center;
	display:       inline-block;
	margin:        -5px;
	padding:       2em;
	transition:    .4s ease-in-out transform;
	}

.circle:hover {
	transform: scale(1.1);
	outline: 0 !important;
	}

.circle:hover a .content {
	text-decoration: none;
	}

.circle:hover .bg.inner {
	/*transform: rotateZ(-5deg);*/
	outline: 0 !important;
	}

.circle:hover .bg.outer {
	/*transform: rotateZ(+7deg);*/
	outline: 0 !important;
	}

#circle-container {
	padding: 50px 10vw;
	}

.circle h4 {
	font-family: Inter, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}
.circle:hover a {
	text-decoration: none;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	.shape .content h4 {
		font-size: 32px;
		}
	}

.shape {
	width:      25vw;
	height:     25vw;
	transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.975) transform;
	align-self: center;
	z-index:    105;
	cursor:     pointer;
	}

.shape .content {
	height: 25vw;
	height: 25vw;
	}

.shape.small {
	display: block;
	width:   12vw;
	height:  12vw;
	z-index: 100;
	}

.shape.small .content {
	width:  12vw;
	height: 12vw;
	}

.shape.xsmall {
	display: block;
	width:   40px;
	height:  40px;
	z-index: 100;
	}

.shape.xsmall .content {
	width:  40px;
	height: 40px;
	}


.shape.fluid {
	display:      block;
	width:        100%;
	height:       100%;
	z-index:      100;
	aspect-ratio: 1;
	}

.shape.fluid .content {
	
	width:  100%;
	height: 100%;
	}

.shape.big {
	width:  200%;
	height: 200%;
	}

.shape.photo {
	width:  10vw;
	height: 10vw;
	}

.shape .bg {
	width:  100%;
	height: 100%;
	}

.outer > svg {
	
	width:  100%;
	height: 100%;
	margin: 0%;
	}

.outer {
	margin-top: 00%;
	transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275) transform;
	}

.inner svg {
	position: relative;
	width:    90%;
	height:   90%;
	margin:   5%;
	}

.inner {
	margin-top: -100%;
	transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275) transform;
	}

.shape .inner.photo {
	/*margin-top: -120%;*/
	
	}

.shape .content {
	position:        relative;
	margin:          -95% 0% 0%;
	width:           90%;
	height:          90%;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-align:      center;
	}

.shape .content img {
	width: 80%;
	}

#splash .shape .content img {
	width: 15vw;
	}

#bubbles-container {
	position:   relative;
	width:      100%;
	min-height: 40vh;
	}

#bubbles-container > div {
	height: 40vh;
	}

#bubbles-container .content {
	margin-top: -8rem;
	position:   absolute;
	display:    flex;
	width:      8rem;
	height:     8rem;
	}

.shape .content h4 {
	color:      white;
	font-size:  1.5vw;
	
	text-align: center;
	margin:     0;
	}

#circle-container .shape .content h4 {
	padding: 20px;
	}

#cercles .shape .content h4 {
	font-size: 1.2vw;
	padding:   0 1em;
	}

.shape.hover:hover {
	transform: scale(1.1);
	z-index:   110;
	}

.shape.hover:hover .outer {
	transform: rotateZ(-30deg);
	}

.shape.hover:hover .inner {
	transform: rotateZ(30deg);
	}

.shape.big .content h4 {
	font-size: 4vw;
	
	}

@media screen and (min-device-width: 320px) and (max-width: 568px) {
	.shape .content h4 {
		font-size: 5vw;
		
		}
	
	#circle-container .shape .content h4 {
		padding: .3em;
		}
	
	.circle {
		padding: 0
		}
	
	#bubbles-container {
		min-height: 45vh;
		}
	
	#cercles .shape .content h4, #splash .shape .content h4 {
		font-size: 2vw;
		padding:   0 1em;
		max-width: 30vw;
		text-wrap: normal;
		}
	
	#splash .shape .content img {
		width: 25vw;
		}
		
		
	}

/* FONDS */
#backgrounds-container {
	position: absolute;
	height:   100%;
	width:    100vw;
	overflow: hidden;
	z-index:  -100;
	}

.backgrounds {
	position: relative;
	right:    0;
	top:      0vh;
	width:    10vw;
	height:   100vh;
	/*overflow: hidden;*/
	z-index:  -15;
	}


.backgrounds .bg {
	/*height: 100vh;*/
	/*width:  100vh;*/
	/*width:      100%;*/
	/*height:     100%;*/
	
	}

.backgrounds .outter svg {
	width:      100%;
	height:     100%;
	margin-top: 0%;
	}

.backgrounds .inner svg {
	margin-top: 0%;
	width:      99.5%;
	height:     99.5%;
	}