/* ***********
	HERO (Header + Introduction)
** **********/

.hero{
	padding: 1.5rem 1rem 1.25rem 1rem ;
	background-color: #715AFF;
	background-image: url('../images/hero-bg.png');
	background-size: cover;
	border-radius: 0px 0px 1.25rem 1.25rem;
}

.header{
	margin-bottom: 1.5rem;
	padding: 0;
}

.header .logo{
	margin: 0;
	color: #ffffff;
	font-size: 1.5rem;
}

.header .links{
	margin: 0 -.875rem;
	padding: 0;
	list-style: none;
}

.header .links-item{
	padding: 0 .875rem;
}

.header .link-contact{
	display: none;
}

.header .link-donate{
	border: 1px solid #FA87C2;
	border-radius: 6.25rem;
	padding: .3875rem .75rem;
	color: #ffffff;
	text-decoration: none;
	transition: all 360ms ease-in-out;
}

.header .link-donate .icon{
	margin: 0 .5rem 0 0;
	font-size: .75rem;
}

.header .link-donate .label{
	font-size: .625rem;
	line-height: .875rem;
	font-weight: 530;
}

.introduction .text{
	margin: 0 0 1rem;
	width: 100%;
	font-weight: 400;
	font-size: .75rem;
	line-height: 1rem;
	color: #ffffff;
}

.introduction .text .large{
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.875rem;
}

.introduction .visuals{
	position: relative;
	margin-left: auto;
	padding-top: 100%;
	width: 75%;
}

.introduction .visual{
	overflow: hidden;
	display: block;
	border-radius: 1.25rem;
}

.introduction .visual-01{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
}

.introduction .visual-01 .img{
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}

.introduction .visual-02{
	position: absolute;
	left: -.5srem;
	top: 1rem;
    padding-top: 51.83%;
    width: 60.54%;
	height: 0;
	font-size: 0;
	transform: translateX(-50%);
	border: 5px solid #FA87C2;
}

.introduction .visual-02 .img{
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}

@media screen and (min-width: 360px) {

	.hero{
		padding: 1.5rem 1.25rem 1.25rem 1.25rem ;
	}

	.header .logo{
		font-size: 2rem;
	}

	.header .link-donate{
		padding: .5rem 1rem .5rem 1rem;
	}

	.header .link-donate .icon{
		font-size: .875rem;
	}

	.header .link-donate .label{
		font-size: .75rem;
		line-height: 1rem;
	}

	.introduction .text{
		font-size: .875rem;
		line-height: 1.25rem;
	}

	.introduction .text .large{
		font-size: 1.875rem;
		line-height: 2rem;
	}

}

@media screen and (min-width: 768px) {
		
	.hero{
		padding: 1.5rem 1.5rem 6.5rem;
	}

	.header{
		margin-bottom: 3rem;
	}

	.header .logo{
		margin: unset;
		font-size: 3rem;
	}

	.header .link-donate{
		border-radius: 6.25rem;
		padding: .5rem 1.875rem .5rem 1.5rem;
	}

	.header .link-donate .icon{
		margin: 0 .8125rem 0 0;
		font-size: 1rem;
	}

	.header .link-donate .label{
		font-size: .875rem;
		line-height: 1.4375rem;
	}

	.introduction .text{
		margin: unset;
		width: 50%;
		font-size: 1.125rem;
		line-height: 1.25rem;
	}

	.introduction .text .large{
		font-size: 2.125rem;
		line-height: 2.5rem;
	}

	.introduction .visuals{
		margin-left: unset;
		padding-top: 50.1515%;
		width: 40%;
	}

	.introduction .visual-01{
		left: 0;
		top: .25rem;
	}

	.introduction .visual-02{
		bottom: -4rem;
		padding-top: 50.83%;
		width: 53.54%;
	}
}

@media screen and (min-width: 1024px) {
		
	.hero{
		padding: 1.8125rem 3.75rem 6.75rem 3.75rem ;
	}

	.header{
		margin-bottom: 6.5625rem;
	}

	.header .logo{
		font-size: 3.9375rem;
	}

	.header .link-contact{
		display: unset;
		font-size: .875rem;
		line-height: 1.4375rem;
		font-weight: 400;
		color: #ffffff;
		text-decoration: none;
	}

	.header .link-donate:hover{
		background-color: #FA87C2;
	}

	.introduction .text{
		width: 61.51%;
		max-width: 50.75rem;
		font-size: 1.25rem;
		line-height: 1.5rem;
	}

	.introduction .text .large{
		font-size: 3rem;
		line-height: 3.6875rem;
	}

	.introduction .visuals{
		padding-top: 40.1515%;
		width: 32.348%;
		max-width: 26.6875rem;
	}

	.introduction .visual-01{
		left: 0;
		top: .25rem;
	}

	.introduction .visual-02{
		top:unset;
		bottom: -4.625rem;
		padding-top: 46.83%;
		width: 47.54%;
	}

}

@media screen and (min-width: 1440px) {
		
	.hero{
		padding: 1.8125rem 3.75rem 1.25rem 3.75rem ;
		min-height: 58.9375rem;
	}

	.header{
		margin-bottom: 6.5625rem;
	}

	.header .logo{
		font-size: 3.9375rem;
	}

	.header .link-contact{
		display: unset;
		font-size: .875rem;
		line-height: 1.4375rem;
		font-weight: 400;
		color: #ffffff;
		text-decoration: none;
	}

	.header .link-donate:hover{
		background-color: #FA87C2;
	}

	.introduction .text{
		width: 61.51%;
		max-width: 50.75rem;
		font-size: 1.5rem;
		line-height: 1.8125rem;
	}

	.introduction .text .large{
		font-size: 3.5rem;
		line-height: 4.1875rem;
	}

	.introduction .visuals{
		padding-top: 40.1515%;
		width: 32.348%;
		max-width: 26.6875rem;
	}

	.introduction .visual-01{
		left: 0;
		top: .25rem;
	}

	.introduction .visual-02{
		bottom: -4.625rem;
		left: -2rem;
		padding-top: 46.83%;
		width: 47.54%;
	}

}

/* ***********
	CONTENT
** **********/

.content{
	position: relative;
	padding: 1.5rem 1.25rem;
}

.edito .text{
	margin: 0 0 1.25rem 0;
	font-weight: 400;
	font-size: .8125rem;
	line-height: 1.125rem;
	color: #000000;
}

.edito .logo-lucky{
	margin: 1.25rem 0;
	font-size: 3.0625rem;
}

.edito .link-donate-m{
	margin: 1.25rem 0;
}

.edito .link-donate-m .link-donate{
	border: 2px solid #FA87C2;
	border-radius: 6.25rem;
	padding: .5rem 1rem .5rem 1rem;
	color: #FA87C2;
	text-decoration: none;
	transition: all 360ms ease-in-out;
}

.edito .link-donate-m .link-donate .icon{
	margin: 0 .5rem 0 0;
	font-size: 1.25rem;
}

.edito .link-donate-m .link-donate .label{
	font-size: 1.25rem;
	line-height: 1.5rem;
	font-weight: 530;
}

.infos .health-definition{
	margin: 0 0 1.5rem;
	padding: 1.5rem ;
	background-color: #715AFF;
	border-radius: 50%;
}

.infos .health-definition .logo{
	display: block;
	margin: 0 auto .6875rem;
	font-size: 2.5625rem;
}

.infos .health-definition .text{
	margin: 0;
	padding: 0;
	font-size: .75rem;
	line-height: 1.125rem;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}

.infos .health-definition .text .large{
	font-weight: 500;
}

.infos .visuals{
	position: relative;
	margin: 0 0 3rem;
	padding-top: 100%;
	width: 75%;
}

.infos .visual{
	overflow: hidden;
	display: block;
	border-radius: 1.25rem;
}

.infos .visual-01{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
}

.infos .visual-01 .img{
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}

.infos .visual-02{
	position: absolute;
	right: 0;
	top: 1rem;
	padding-top: 37.25%;
	width: 58.25%;
	height: 0;
	font-size: 0;
	transform: translateX(50%);
	border: 5px solid #A3DEF7;
}

.infos .visual-02 .img{
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}

.call-to-action .icon{
	margin: 0 0 1rem;
	font-size: 2.5rem;
	color: #715AFF;
}

.call-to-action .text{
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: #715AFF;
}

.call-to-action .link-donate{
	background-color: #FA87C2;
	border-radius: 11.25rem;
	padding: .75rem 2rem ;
	font-size: 1rem;
	font-weight: 530;
	color: #ffffff;
	text-decoration: none;
	transition: all 360ms ease-in-out;
}


@media screen and (min-width: 360px) {

	.infos .health-definition{
		padding: 1.625rem 3rem;
	}

	.infos .health-definition .text{
		font-size: .875rem;
		line-height: 1.25rem;
	}

	.call-to-action .text{
		font-size: 1.25rem;
		line-height: 1.5rem;
	}

}

@media screen and (min-width: 768px) {

	.content{
		padding: 6.5rem 1.5rem;
	}

	.edito{
		margin: 0 0 4.875rem;
		order: 2;
		width: 49.16%;
	}

	.edito .text{
		font-size: .75rem;
		line-height: 1rem;
	}

	.infos{
		order: 1;
		width: 42.42%;
	}

	.infos .health-definition{
		order: 2;
		margin: 25% 0 0 auto;
		width: 100%;
		padding: 1.625rem 2rem;
	}

	.infos .health-definition .text{
		font-size: .875rem;
		line-height: 1.125rem;
	}

	.infos .visuals{
		position: relative;
		order: 1;
		width: 100%;
		margin: 0;
		padding-top: 100.892%;
		height: 0;
	}

	.infos .visual-01{
		left: 3.25rem;
		top: -100%;
		width: 76.25%;
	}

	.infos .visual-02{
		top: -3rem;
		right: unset;
		left: 0;

		padding-top: 36.25%;
		width: 56.25%;
		transform: unset;
	}

	.call-to-action{
		order: 3;
	}

}



@media screen and (min-width: 820px) {

	.edito .text{
		font-size: .875rem;
		line-height: 1.125rem;
	}

}

@media screen and (min-width: 1024px) {

	.content{
		padding: 6.25rem 3.75rem;
	}

	.edito{
		margin: 0 0 5.875rem;
		width: 49.16%;
	}

	.edito .text{
		font-size: 1.25rem;
		line-height: 1.8625rem;
	}

	.infos{
		width: 42.42%;
	}

	.edito .link-donate-m{
		display: none;
	}

	.infos .health-definition{
		margin: 25% 0 0 auto;
		width: 100%;
		padding: 1.625rem 3.75rem;
	}

	.infos .health-definition .text{
		font-size: .875rem;
		line-height: 1.125rem;
	}

	.infos .visuals{
		position: relative;
		order: 1;
		width: 100%;
		margin: 0;
		padding-top: 100.892%;
		height: 0;
	}

	.infos .visual-01{
    	left: 2.25rem;
    	top: -17rem;
		width: 76.25%;
	}

	.infos .visual-02{
		top: 3rem;
		right: unset;
		left: 0;

	    padding-top: 31.25%;
	    width: 45.25%;
		transform: unset;
	}

	.call-to-action .icon{
		font-size: 3.5rem;
	}

	.call-to-action .text{
		margin: 0 0 2.5rem;
		font-size: 2.5rem;
		line-height: 3.4375rem;
	}

	.call-to-action .link-donate{
		padding: .75rem 3.75rem ;
	}

	.call-to-action .link-donate:hover{
		background-color: #715AFF;
	}

}

@media screen and (min-width: 1440px) {

	.content{
		padding: 6.25rem 3.75rem;
	}

	.edito{
		margin: 0 0 13.875rem;
		width: 49.16%;
	}

	.edito .text{
		font-size: 1.5rem;
		line-height: 2.0625rem;
	}

	.infos{
		width: 42.42%;
	}

	.edito .link-donate-m{
		display: none;
	}

	.infos .health-definition{
		margin: -25% 0 0 auto;
		width: 83.75%;
		padding: 1.625rem 3.75rem;
	}

	.infos .health-definition .text{
		font-size: 1rem;
		line-height: 1.375rem;
	}

	.infos .visuals{
		position: relative;
		order: 1;
		width: 100%;
		margin: 0;
		padding-top: 100.892%;
		height: 0;
	}

	.infos .visual-01{
		left: 7.25rem;
		top: -29rem;
		width: 76.25%;
	}

	.infos .visual-02{
		top: 3rem;
		right: unset;
		left: 0;

		padding-top: 36.25%;
		width: 56.25%;
		transform: unset;
	}

	.call-to-action .icon{
		font-size: 3.5rem;
	}

	.call-to-action .text{
		margin: 0 0 2.5rem;
		font-size: 2.5rem;
		line-height: 3.4375rem;
	}

	.call-to-action .link-donate{
		padding: .75rem 3.75rem ;
	}

	.call-to-action .link-donate:hover{
		background-color: #715AFF;
	}

}

/* ***********
	EDGEHOGS !!!
** **********/

.edgehogs{
	display: none;
}

@media screen and (min-width: 768px) {
	.edgehogs{
		display: unset;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	.edgehogs .edgehog{
		position: absolute;
		z-index: 1;
		font-size: 4.0625rem;
	}

	.edgehogs .edgehog-01{
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.edgehogs .edgehog-02{
		top: 4.625rem;
		left: 0;
		transform: translate(-50%, 0);
	}

	.edgehogs .edgehog-03{
		top: 25.8125rem;
		left: 33.819%;
	}

	.edgehogs .edgehog-04{
		display: none;
	}

	.edgehogs .edgehog-05{
		top: 64.6875rem;
		left: 10.416%;
	}

	.edgehogs .edgehog-06{
		top: 75.0625rem;
		left: 76.3888%;
	}
}

@media screen and (min-width: 1024px) {

	.edgehogs{
		display: unset;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	.edgehogs .edgehog{
		position: absolute;
		z-index: 1;
		font-size: 4.0625rem;
	}

	.edgehogs .edgehog-01{
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.edgehogs .edgehog-02{
		top: 4.625rem;
		left: 0;
		transform: translate(-50%, 0);
	}

	.edgehogs .edgehog-03{
		top: 25.8125rem;
		left: 33.819%;
	}

	.edgehogs .edgehog-04{
		display: unset;
		top: 56.5625rem;
		left: 65.416%;
	}

	.edgehogs .edgehog-05{
		top: 64.6875rem;
		left: 10.416%;
	}

	.edgehogs .edgehog-06{
		top: 75.0625rem;
		left: 76.3888%;
	}

}


/* ***********
	GALLERY
** **********/

.gallery{
	position: relative;
	padding: 0 0 1.25rem 1.25rem;
}

.gallery .my-slider{
	overflow: auto;
	flex-wrap: nowrap;
}

.gallery .col-auto{
	padding: 0 .625rem 0 0;
	max-width: unset;
}

.gallery .slide-visual{
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	border-radius: 1.25rem;
	overflow: hidden;
}

.gallery .visual{
	flex: 0 0 auto;
}

.gallery .img{
	height: 25rem;
	width: auto;
}

.gallery .slider-controls{
	display: none;
}

.gallery .slider-anim{
	display: flex;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 50%;
	margin: -1.5rem 0 0;
	padding: 0 1.25rem;
	height: 3rem;
	width: 100%;
}

.gallery .slider-anim-circle{
	position: relative;
	background-color: #715AFF;
	border-radius: 50%;
	padding: 0;
	width: 3rem;
	height: 3rem;
	font-size: .75rem;
	overflow: hidden;
	transition: all 360ms ease-in-out;
}
.gallery .slider-anim-circle.done{
	opacity: 0;
}

@keyframes slide-anim-arrow {
	0% {
	transform: translate(-50%, -50%);
	}
	32% {
	transform: translate(100%, -50%);
	}
	33% {
	transform: translate(-100%, -50%);
	}
	75% {
	transform: translate(-50%, -50%);
	}
	100% {
	transform: translate(-50%, -50%);
	}
}

.gallery .slider-anim-arrow{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: slide-anim-arrow 1000ms infinite;s;
}

@media screen and (min-width: 1024px) {


	.gallery{
		padding: 0 0 6.25rem 3.75rem;
	}

	.gallery .my-slider{
		overflow: unset;
		flex-wrap: unset;
	}


	.gallery .slide-visual{
		padding: 0;
	}

	.gallery .img{
		height: auto;
		width: auto;
		max-height: 38rem;
	}

	.gallery .slider-anim{
		display: none;
	}

	.gallery .slider-controls{
		display: flex;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 50%;
		margin: -2.875rem 0 0;
		padding: 0 3.75rem;
		height: 5.75rem;
		width: 100%;
	}

	.gallery #slider-prev,
	.gallery #slider-next{
		background: none;
		background-color: #715AFF;
		outline: none;
		box-shadow: unset;
		border: none;
		border-radius: 50%;
		padding: 0;
		width: 5.75rem;
		height: 5.75rem;
		font-size: 1rem;
		cursor: pointer;
		transition: all 360ms ease-in-out;
	}

	.gallery #slider-next{
		margin-left: auto;
	}

	.gallery #slider-prev:disabled,
	.gallery #slider-next:disabled{
		transform: scale(0.2);
		opacity: 0;
	}


	.gallery #slider-prev svg{
		transform: rotate(180deg);
	}

	.gallery #slider-prev:hover,
	.gallery #slider-next:hover{
		transform: scale(1.1);
	}

}


/* ***********
	FOOTER 
** **********/

.footer{
	padding: 3rem 1.25rem;
	background-color: #FA87C2;
}

.footer .logo{
	order: 3;
	margin: 1.25rem auto 0;
	font-size: 5rem;
}

.footer .text{
	order: 1;
	margin: 0 auto;
	width: 100%;
	font-size: 1rem;
	line-height: 1.é5rem;
	font-weight: 375;
	color: #ffffff;
	text-align: center;
}

.footer .link-contact{
	order: 2;
	font-size: .875rem;
	line-height: 1.125rem;
	font-weight: 400;
	color: #ffffff;
}

@media screen and (min-width: 360px) {

	.footer .link-contact{
		font-size: 1rem;
		line-height: 1.25rem;
	}
}

@media screen and (min-width: 768px) {

	.footer .logo{
		order: 1;
		margin: 0;
		font-size: 7rem;
	}

	.footer .text{
		order: 2;
		margin: 0 auto;
		width: auto;
		font-size: 1rem;
		line-height: 1.125rem;
	}

	.footer .link-contact{
		order: 3;
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@media screen and (min-width: 1024px) {

	.footer{
		padding: 7.5rem 3.75rem;
	}

	.footer .logo{
		font-size: 11rem;
	}

	.footer .text{
		margin: 0 auto;
		font-size: 1.5rem;
		line-height: 1.8125rem;
	}

	.footer .link-contact{
		font-size: 2rem;
		line-height: 2.375rem;
	}
}