html, body {
	margin: 0px;
	padding: 0px;
	font-family: Roboto;
	margin: 0 auto;
	overflow-x: hidden;
	text-rendering:optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}

.TxtBold {
	font-family: "Avenir-Medium" !important;
}

.MainColor {
	color: #ac026e !important;
}

.MarginTop {
	margin-top: 40px;
}

.LowerCaseTxt {
	text-transform: lowercase; 
	font-weight: lighter;
}

.Hide {
	display: none !important;
}

.NoMargin {
	margin: 0px !important;
}

.NoMarginTop {
	margin-top: 0px !important
}

.NoMarginBottom {
	margin-bottom: 20px !important;
}

.BrOnlyMobile {
	display: none;
}

@media screen and (max-width: 780px) {
	.BrOnlyMobile {
		display: block;
	}
}

.WrapperSpeechFlexReverse {
	flex-direction: row-reverse;
}



@font-face {
 font-family: "Avenir";
 src: url("../assets/fonts/avenir.ttf");
 font-weight: 300;
 font-style: normal;
}

@font-face {
 font-family: "Sentinel";
 src: url("../assets/fonts/sentinel.ttf");
 font-weight: 300;
 font-style: normal;
}

@font-face {
 font-family: "Avenir-Medium";
 src: url("../assets/fonts/avenir-medium.ttf");
 font-weight: 500;
 font-style: normal;
}


input,textarea,button,select,a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
    color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

/*Home*/
.Home {
	max-width: 1440px;
	margin: 0 auto;
	font-family: "Sentinel", sans-serif;
	padding: 0px 20px;
}

header {
	margin: 40px 0px 30px 0px;
	display: flex;
	justify-content: center;
}

@media screen and (max-width: 414px) {
	header {
		margin: 35px 0px 0px 0px;
	}
}

.Home_Logo {
	width: 200px;
	margin-top: 12px;
}

@media screen and (max-width: 320px) {
	.Home_Logo {
		width: 160px;
	}
}

.Wrapper_H1_Desktop {
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
}

.Wrapper_H1_Mobile {
	margin-top: 35px;
	margin-bottom: 35px;
	display: none;
}

@media screen and (max-width: 780px) {

	.Wrapper_H1_Desktop {
		display: none;
	}

	.Wrapper_H1_Mobile {
		display: block;
	}
}

@media screen and (max-width: 320px) {
	.Wrapper_H1_Mobile {
		margin-top: 30px;
		margin-bottom: 30px;
	}
}


.Home_H1 {
	font-size: 45px;
	line-height: 50px;
	text-align: center;
	text-transform: uppercase;
	color: #ac026e;
	margin: 0px;
	padding: 0px;
}

@media screen and (max-width: 500px) {
	.Home_H1 {
		font-size: 8vw;
		line-height: 9vw;
	}
}

@media screen and (max-width: 320px) {
	.Home_H1 {
		font-size: 30px;
		line-height: 40px;
	}
}

.Home_P {
	font-size: 18px;
	margin: 0 auto;
	margin-top: 5px;
	color: grey;
	max-width: 1000px;
	text-align: center;
	text-transform: uppercase;
}

@media screen and (max-width: 938px) {

	.Home_P {
		max-width: 650px;
	}
}

@media screen and (max-width: 635px) {

	.Home_P {
		width: 100%;
		max-width: 550px;
	}

	.BrHome_P_Tablet {
		display: none;
	}
}

@media screen and (max-width: 500px) {
	.Home_P {
		margin-top: 30px;
	}
}
	

.Wrapper {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: 0 auto;
	justify-content: center;
	position: relative;
}

.CardScale {
	width: 280px;
	height: 280px;
	border: solid 10px #FFFFFF;
	font-size: 20px;
	color: #FFFFFF;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;	
}

.LeftSpacing {
	margin-left: 2px;
}

.CardScaleImg {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 1s;
}

.CardScaleImg:hover {
	transform: scale(1.2);
}

.NameCard {
	z-index: 99;
	width: 100%;
	cursor: pointer;
}

.LinkCard {
	z-index: 98;
	height: 100%;
	width: 100%;
	position: absolute;
}

@media screen and (max-width: 938px) {
	.CardScale {
		width: 230px;
		height: 230px;
	}
}

@media screen and (max-width: 780px) {
	.CardScale {
		width: 280px;
		height: 280px;
		background-position: initial !important;
	}
}

@media screen and (max-width: 500px) {
	.CardScale {
		width: 300px;
		height: 300px;
		background-position: initial !important;
		border:0px;
		margin-bottom: 20px;
	}

	.CardScale:last-child {
		margin-bottom: 0px;
	}
}

.CardScaleImg1 {
	background-image: url('../assets/home/sujet-1.jpg');
}

.CardScaleImg2 {
	background-image: url('../assets/home/sujet-2.jpg');
}

.CardScaleImg3 {
	background-image: url('../assets/home/sujet-3.jpg');
}

.CardScaleImg4 {
	background-image: url('../assets/home/sujet-4.jpg');
}

.CardScaleImg5 {
	background-image: url('../assets/home/sujet-5.jpg');
}

.CardScaleImg6 {
	background-image: url('../assets/home/sujet-6.jpg');
}

.VilleRight {
	position: absolute;
	z-index: -1;
	width: 240px;
	right: -20px;
	top: 200px;
	transition: all ease-out 0.5s;
}

.VilleLeft{
	position: absolute;
	z-index: -1;
	width: 640px;
	left: -300px;
	top: 200px;
	transition: all ease-out 0.5s;
}


@media screen and (max-width: 1235px) {
	.VilleRight, .VilleLeft {
		opacity: 0 !important;
		display: none;
		transition: all ease-out 0.5s;
	}
}

footer {
	margin-top: 50px;
	background-color: #9b9b9b;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.FooterLinks {
	font-family: "Avenir", sans-serif;
	text-decoration:none;
	text-transform: uppercase;
	font-size: 13px;
	color: #FFF;
	transition:all ease-out 0.4s;
	margin-right: 10px;
}

.FooterLinks:hover {
	opacity: 0.5;
}

@media screen and (max-width: 500px) {
	.FooterLinks {
		margin-bottom: 7px;
	}
}


footer > a:last-child {
	margin-right: 0px;
}
/*Home*/

/*Template*/
.WrapperBody {
	max-width: 1340px;
	margin: 0 auto;
	padding: 0px 30px;
}

@media screen and (max-width: 414px) {
	.WrapperBody {
		padding: 0px 20px;
	}
}

.ShapeSeparator {
	margin-top: -1px;
	width: 100%;
}

@media screen and (max-width: 822px) {
	.ShapeSeparator {
		width: 100%;
	}
}

@media screen and (max-width: 414px) {
	.ShapeSeparator {
		display: none;
	}
}

.LinkBackHome {
	margin-right: 7px;
}

.NavFixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 150;
	margin-bottom: 100px;
	background-color: #FFFFFF;
	width: initial;
}

.RelativeContent {
	position: absolute;
	width: 100%;
	top: 100px;
	width: 100%;
}

@media screen and (max-width: 822px) {
	.RelativeContent {
		top: 100px;
		position: absolute;
	}
}

@media screen and (max-width: 635px) {
	.RelativeContent {
		top: 140px;
		position: absolute;
	}
}

.NavTemplate {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media screen and (max-width: 822px) {
	.NavTemplate {
		height: 100px;
	}
}



@media screen and (max-width: 1120px) {
	.Home_Logo {
		width: 150px;
	}
}

@media screen and (max-width: 505px) {
	.Home_Logo_Index {
		margin-top: 10px !important;
		width: 175px !important;
	}
}

.H1NavTemplate, .MobileH1NavTemplate {
	font-family: "Sentinel", sans-serif;
	text-transform: uppercase;
	color: grey;
	font-size: 20px;
	margin-left: 50px;
	text-decoration: none;
	outline: 0;
	border-style: none;
}

.MobileH1NavTemplate {
	display: none;
}

.NavArrowBack {
	width: 8px;
	margin-right: 10px;
}

@media screen and (max-width: 1120px) {
	.H1NavTemplate, .MobileH1NavTemplate {
		font-size: 17px;
		margin-left: 30px;
	}
}

@media screen and (max-width: 320px) {
	.H1NavTemplate, .MobileH1NavTemplate {
		font-size: 14px;
	}
}

@media screen and (max-width: 635px) {
	.H1NavTemplate {
		display: none;
	}

	.MobileH1NavTemplate {
		display: flex;
		margin: 0px 0px 20px 20px;
		width: auto;
	}
}

.LeftInfos {
	display: flex;
}

@media screen and (max-width: 822px) {
	.SquareNavWrapper {
		position: relative;
	}

	.SquareNav::before {
		font-family: "Sentinel", sans-serif;
		content: 'Menu';
		position: absolute;
		font-size: 13px;
		color: grey;
		left: -50px;
		top: 12px;
	}
}

@media screen and (max-width: 320px) {
		.SquareNav::before {
			font-size: 12px;
			left: -35px;
			top: 12px;

	}
}

.SquareNav {
	display: flex;
	flex-wrap: wrap;
	width: 105px;
	height: 65px;
	position: relative;
}

@media screen and (max-height: 375px) {
		.SquareNav::before {
			content: none;

	}
}

.SquareNavItem {
	width: 30px;
	height: 30px;
	background-color: #E7E7E7;
	border: solid 2px #FFFFFF;
	cursor: pointer;
}

@media screen and (max-width: 822px) {
	.SquareNav {
		width: 70px;
		height: 45px;
		cursor: pointer;
	}

	.SquareNavItem {
		width: 18px;
		height: 18px;
	}
}

.SquareNavItemActive {
	background-color: #ac026e;
}

@media screen and (max-width: 822px) {
	.SquareNavItemActive {
		background-color: #E7E7E7;
	}
}

.PageName {
	font-family: "Sentinel", sans-serif;
	font-size: 17px;
	color: #ac026e;
	text-align: right;
	position: absolute;
	display: none;
	margin: 0px;
	top:22px;
	right: 120px;
	width: max-content;
}

.PageNameBreakLine {
	position: absolute;
	top: 18px;
}

.PageNameActive {
	display: block;
}

.SquareNavItem:hover .PageName {
	display: block;
}

.SquareNavItem > a {
	border:none;
}

@media screen and (max-width: 1035px) {
	.PageName {
		font-size: 15px;
	}
}

@media screen and (max-width: 822px) {
	.PageName, .PageNameActive {
		display: none !important;
	}
}

/*Burger Menu*/
.OpenBurger {
	position: absolute;
	width: 105px;
	height: 70px;
	right: 0;
	z-index: 99;
	cursor: pointer;
	display: none;
}

@media screen and (max-width: 822px) {
	.OpenBurger {
		display: block;
	}
}

.BurgerMenu {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 155;
	background-color: #ac026e;
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	overflow: hidden;
	display: none;
}

.CloseBurgerMenu {
	position: absolute;
	top: 30px;
	width: 35px;
	height: 35px;
	z-index: 9000;
	cursor: pointer;
}

.BurgerMenuItem {
	margin-top: 120px;
}

.BurgerMenuItem > a {
	color: #FFF;
	font-size: 20px;
	font-family: "Sentinel", sans-serif;
	text-align: center;
	margin: 0px 0px 30px 0px; 
	display: block;
}

@media screen and (max-width: 320px) {
	.BurgerMenuItem > a {
		font-size: 17px;
		margin-bottom: 20px;
	}
}

.BurgerMenuItem > a:last-child {
	margin: 0px;
}

@media screen and (max-height: 414px) {
	.BurgerMenuItem > a {
		margin: 0px 0px 4vh 0px;
	}

	.BurgerMenuItem {
		margin-top: 118px;
	}
}

@media screen and (max-height: 375px) {
	.BurgerMenuItem {
		margin-top: 105px;
	}
}

.VilleBurgerMenu {
	position: absolute;
	width: 110vw;
	opacity: 1;
	bottom: 10%;
}

@media screen and (max-height: 414px) {
	.VilleBurgerMenu {
		display: none;
	}
}

@media screen and (max-width: 800px) {
	.BurgerMenu {
		display: none;
	}
}
/*Burger Menu*/

.SectionIntro {
	background-color: #ac026e;
}

@media screen and (max-width: 822px) {
	.SectionIntro {
		padding: 0px 0px 50px 0px;
	}
}

@media screen and (max-width: 505px) {
	.SectionIntro {
		padding: 0px 0px 30px 0px;
	}
}

.WrapperFlex {
	display: flex;
	align-items: center;
	width: 1340px;
	justify-content: center;
}


.WrapperFlexReverse {
	display: flex;
	align-items: center;
	width: 1340px;
	justify-content: center;
}

@media screen and (max-width: 822px) {
	.WrapperFlex {
		width: 100%;
		max-width: 780px;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.WrapperFlexReverse {
		width: 100%;
		max-width: 780px;
		flex-wrap: wrap-reverse;
		justify-content: flex-start;
	}
}

.IntroContent {
	margin: 80px 0px;
	position: relative;
}

@media screen and (max-width: 822px) {
	.IntroContent {
		margin: 30px 0px;
	}
}

@media screen and (max-width: 505px) {
	.IntroContent {
		margin: 0px 0px;
	}
}

.IntroH2 {
	font-size: 50px;
	margin-top: 0px;
	color: #FFFFFF;
	font-family: "Sentinel", sans-serif;
	text-align: center;
	margin-bottom: 80px;
}

@media screen and (max-width: 505px) {
	.IntroH2 {
		font-size: 10vw;
	}
}

.IntroP {
	font-size: 22px;
	color: #FFFFFF;
	font-family: "Avenir", sans-serif;
	max-width: 850px;
	margin: 10px 0px 0px 0px;
	text-align: center;
}

@media screen and (max-width: 505px) {
	.IntroP {
		text-align: left;
		margin-top: 0px;
	}
}

@media screen and (max-width: 414px) {
	.IntroP, .ArticleDescription, .SocialPostDescription, .TxtSpeech, .Iexergue, .AfficheContent, .ArticleDescriptionCenter {
		max-width: 100% !important;
		font-size: 4.5vw !important;
	}
}

@media screen and (max-width: 320px) {
	.IntroP, .ArticleDescription, .SocialPostDescription, .TxtSpeech, .Iexergue, .AfficheContent, .ArticleDescriptionCenter {
		max-width: 100% !important;
		font-size: 5vw !important;
	}
}

.IntroImg {
	min-height: 500px;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
    box-sizing: border-box;
    width: 100vw;
    min-width: 1440px;
    margin-left: calc(-50vw + 50%);
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.IntroImgCommunication {
	background-image: url('../assets/template/page-communication/intro.jpg');
}

.IntroImgSituationUrgence {
	background-image: url('../assets/template/page-agir-sans-attendre/intro.jpg');
}

@media screen and (max-width: 505px) {
	.IntroImgSituationUrgence {
		background-position: -175px;
	}
}

.IntroImgInitiativeSolidaire {
	background-image: url('../assets/template/page-initiative-solidaire/intro.jpg');
}

@media screen and (max-width: 505px) {
	.IntroImgInitiativeSolidaire {
		background-position: -480px;
	}
}

.IntroImgBonMorale {
	background-image: url('../assets/template/page-bon-pour-le-morale/intro.jpg');
}

@media screen and (max-width: 822px) {
	.IntroImg {
		margin-bottom: 30px;
		min-width: 100%;
		width: 100%;
		min-width: 100vw;
	}
}

@media screen and (max-width: 505px) {
	.IntroImg {
		min-height: 400px;
	}
}

/*Ico Intro*/

.IntroNetwork {
	position: absolute;
	top: -120px;
	right: 30px;
	width: 140px;
}

@media screen and (max-width: 505px) {
	.IntroNetwork {
		top: -100px;
		width: 100px;
	}
}


.IntroSiren {
	position: absolute;
	top: -190px;
	right: -20px;
	width: 160px;
}

.IntroSmiley {
	position: absolute;
	top: -150px;
	right: -60px;
	width: 130px;
}

@media screen and (max-width: 825px) {
	.IntroSmiley {
		top: -106px;
		width: 95px;
		right: 30px;
	}
}

@media screen and (max-width: 825px) {
	.IntroSiren {
		top: -128px;
		width: 120px;
		right: 20px;
	}
}

@media screen and (max-width: 505px) {
	.IntroSiren {
		top: -105px;
		width: 100px;
	}
}

/*Ico Intro*/

.SectionQuote {
    display: flex;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
    margin: 50px auto;
    width: 1340px;
    position: relative;
}

.QuoteBlueBg {
	background-color: #5EB3AA;
}

.QuoteOrangeBg {
	background-color: #F3A55A;
}

.QuotePurpleBg {
	background-color: #D8626B;
}

.QuoteBlueBg {
	background-color: #4EA69B;
}

.SectionQuoteReverse {
	flex-flow: row-reverse;
}

@media screen and (max-width: 822px) {
	.SectionQuote {
		width: initial;
		padding: 30px;
	}

	.SectionQuoteReverse {
		flex-flow: wrap-reverse;
	}
}

@media screen and (max-width: 414px) {
	.SectionQuote {
		width: initial;
		padding: 20px;
	}
}

@media screen and (max-width: 414px) {
	.SectionQuote {
		width: initial;
		padding: 20px;
	}
}

.QuoteContent {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin:0px 50px;
	position: relative;
}

.QuoteContentReverse {
	align-items: flex-start;
}

@media screen and (max-width: 822px) {
	.QuoteContent {
		align-items: flex-start;
		margin:0px 0px;
	}
}

.ProfilInfos {
	display: flex;
	width: max-content;
	align-items: flex-end;
	justify-content: flex-end;
	font-family: "Sentinel", sans-serif;
	flex-direction: column;
	border-bottom: solid 2px #FFF;
	padding-bottom: 5px;
}

.QuoteContentReverse > .ProfilInfos {
	align-items: flex-start;
}


.ProfilInfosColorOrange {
	color: #DF9944;
}

.ProfilInfosColorBlue {
	color: #5AA89B;
}

@media screen and (max-width: 822px) {
	.ProfilInfos  {
		align-items: flex-start;
	}
}

@media screen and (max-width: 506px) {
	.ProfilInfos  {
		align-items: flex-start;
		flex-direction: column;
	}
}

.ProfilInfos > h3 {
	margin:0px;
	font-size: 30px;
	color: #FFF;
}

@media screen and (max-width: 505px) {
	.ProfilInfos > h3 {
		font-size: 25px;
	}
}

.ProfilInfos > p {
	margin: 0px 0px 6px 0px;
	color: #FFF;
	font-size: 15px;
	font-family: "Avenir-Medium", sans-serif;
}

@media screen and (max-width: 506px) {
	.ProfilInfos > p {
		margin: 0px
	}
}

.QuoteUp {
	width: 70px;
	position: absolute;
	z-index: 0;
	opacity: 0.3;
}


.QuoteDown {
	width: 70px;
	position: absolute;
	opacity: 0.3;
	z-index: 0;
}


.QuoteUpDalila {
	top: 50px;
	left: 0;
}

.QuoteDownDalila {
	bottom: -20px;
	right: -40px;
}

.QuoteUpPauline {
	top: 70px;
	left: -40px;
}

.QuoteDownPauline {
	bottom: -10px;
	right: -40px;
}

.QuoteUpMarieJeanne {
	top: 80px;
	left: -67px;
}

.QuoteDownMarieJeanne {
	bottom: -30px;
	left: 180px;
}

.QuoteUpMathilde {
	top: 70px;
	left: -70px;
}

.QuoteDownMathilde {
	bottom: -30px;
	left: 170px;
}

.QuoteUpAnnie {
	top: 70px;
	left: -70px;
}

.QuoteDownAnnie {
	bottom: -30px;
	left: 240px;
}

@media screen and (max-width: 822px) {
	.QuoteUpDalila, .QuoteUpPauline, .QuoteUpMarieJeanne, .QuoteUpMathilde, .QuoteUpAnnie {
		right: 0px !important;
		top: 0;
		left: auto;
		position: absolute;
	}

	.QuoteDown {
		display: none;
	}
}


@media screen and (max-width: 822px) {
	.QuoteProfilImg  {
		width: 250px;
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 620px) {
	.ProfilInfos > img{
		position: absolute;
		right: 0px;
	}
}

@media screen and (max-width: 375px) {
	.ProfilInfos > img{
		width: 70px;
	}
}

@media screen and (max-width: 325px) {
	.ProfilInfos > img{
		width: 50px;
	}
}

.QuoteImgElementDesktop {
	width: 250px;
	margin-bottom: -115px;
}

.QuoteElementPhone {
	margin-top: -120px;
	transform: rotate(5deg) !important;
	width: 250px;
}

@media screen and (max-width: 822px) {
	.QuoteImgElementDesktop  {
		position: absolute;
    	width: 150px;
    	left: 218px;
    	top: 80px;
    	transform: rotate(14deg) !important;
    	z-index: 100;
	}

	.QuoteElementPhone {
		position: absolute;
    	width: 105px;
    	left: 218px;
    	top: 180px;
    	transform: rotate(14deg) !important;
    	z-index: 100;	
	}
}

@media screen and (max-width: 414px) {
	.QuoteImgElementDesktop  {
    	right: 60px;
    	top: 100px;
    	left: initial;
    	z-index: 99;
	}
}

@media screen and (max-width: 320px) {
	.QuoteImgElementDesktop  {
    	right: 20px;
    	top: 60px;
	}
}

@media screen and (max-width: 320px) {
	.QuoteElementPhone {
		left: 180px;
		width: 100px;
	}
}


.QuoteDescription {
	text-align: right;
	width: 550px;
	font-family: "Avenir", sans-serif;
	margin-top: 30px;
	font-size: 18px;
	z-index: 99 !important;
}

.QuoteDescriptionReverse {
	text-align: left;
}

sup {
	font-size: 13px;
	padding-left: 1px;
}

.ButtonWrapper {
	margin-left: 30px;
	display: flex;
}

@media screen and (max-width: 505px) {
	.ButtonWrapper {
		margin-left: 0px;
		margin-right: 30px;
	}	
}

@media screen and (max-width: 822px) {
	.QuoteDescription  {
		width: 100%;
	}

	.BrOnlyDesktop {
		display: none;
	}
}

@media screen and (max-width: 822px) {
	.QuoteDescription {
		text-align: left !important;
	}
}

@media screen and (max-width: 414px) {
	.QuoteDescription {
		font-size: 4.5vw;
	}
}

.QuoteInTxt {
	font-family: "Sentinel", sans-serif !important;
	color: #FFF;
	font-size: 230px;
}

.SectionArticle {
	font-family: "Avenir", sans-serif;
	display: flex;
	align-items: center;
	position: relative;
	margin-top: 50px;
	margin-bottom: 50px;
	min-width: auto;
	width: 1440px;
}

.SectionArticle2column {
	align-items: flex-start !important;
	justify-content: space-between !important;
}

@media screen and (max-width: 822px) {
	.SectionArticle {
		flex-wrap: wrap;
		min-width: auto;
		width: auto;
	}
}

.Article {
	margin: 0px 50px 0px 0px;
	width: 100%;
}

.ArticleNoMargin {
	margin-right: 0px;
}

@media screen and (max-width: 822px) {
	.SectionArticle2column > .Article:first-child {
		margin-bottom: 50px;
	}
}


@media screen and (max-width: 822px) {
	.Article {
		margin-right: 0px;
		margin-bottom: 50px;
	}	
}

@media screen and (max-width: 822px) {
	.Article:last-child {
		margin-right: 0px;
		margin-bottom: 0px;
	}	
}

.ArticleImg {
	width: 100%;
	min-width: 645px;
}

@media screen and (max-width: 822px) {
	.ArticleImg {
		width: 100%;
		height: auto;
		min-width: auto;
	}
}

.ArticleTitle {
	font-size: 27px;
	line-height: 30px;
	margin-bottom: 10px;
	font-weight: 500;
	font-family: "Avenir-Medium", sans-serif;
	color: #111213;
}

.ArticleTitleMarginTop {
	margin-top: 35px !important;
}

@media screen and (max-width: 505px) {
	.ArticleTitleMarginTop {
		margin-top: 20px !important;
	}
}

.ArticleDescription {
	margin: 5px 0px 0px 0px; 
	max-width: 650px;
	color: #686868;
	line-height: 23px;
	font-size: 18px;
	font-family: 'Avenir', sans-serif;
}

.ImgDescription {
	margin: 5px 0px 0px 0px; 
	max-width: 550px;
	color: #686868;
}

.ArticleProfilDescription {
	font-family: "Avenir-Medium", sans-serif;
	color: grey;
}

.TxtAlignRight {
	text-align: right !important;
}

@media screen and (max-width: 820px) {
	.TxtAlignRight {
		text-align: left !important;
	}
}

.ArticleVilleGif {
	width: 100%;
	height: 100%;
	margin-top: -75px;
}

@media screen and (max-width: 822px) {
	.ArticleVilleGif {
		width: 100%;
		height: auto;
		margin-top: 50px;
	}
}

@media screen and (max-width: 414px) {
	.ArticleVilleGif {
		width: 100%;
		height: auto;
		margin-top: 30px;
	}
}

.SocialPostWrapper {
	background-color: #ac026e;
	height: 100%;
	min-height: 380px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding:50px;
	box-sizing: border-box;
	position: relative;
}

@media screen and (max-width: 822px) {
	.SocialPostWrapper {
		flex-direction: column;
		padding: 50px 30px;
		min-height: auto;
	}
}

.SocialPostContent {
	font-family: "Avenir", sans-serif;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	text-align: right;
	width: 480px;
	margin-right: 50px;
}

@media screen and (max-width: 822px) {
	.SocialPostContent {
		padding: 0px 0px 50px 0px;
		text-align: center;
		margin-right: 0px;
		width: 100%;
	}
}

@media screen and (max-width: 505px) {
	.SocialPostContent {
		padding: 0px 0px 30px 0px;
		text-align: center;
		margin-right: 0px;
		width: 100%;
	}
}


.SocialPostTitle {
	font-size: 25px;
	line-height: 30px;
	margin:0px;
	font-weight: 500;
	font-family: "Avenir-Medium", sans-serif;
}

.SocialPostDescription {
	font-size: 17px;
	font-weight: 300;
}

.SocialPostImgWrapper {
	width: 550px;
}

@media screen and (max-width: 822px) {
	.SocialPostImgWrapper {
		width: 100%;
	}
}

.SocialPostImg {
	width: 100%;
	height: 100%;
	transform: rotate(-3deg);
}

.LinkTwitterWrapper {
	display: flex;
	width: 100%;
	color: #FFFFFF;
	position: absolute;
	bottom: 25px;
	left: 25px;
	transition: all ease-out 0.3s;
	font-family: "Avenir", sans-serif;
	display: flex;
	align-items: center;
}

.LinkTwitterWrapper:hover {
	opacity: 0.3;
}

@media screen and (max-width: 822px) {
	.LinkTwitterWrapper {
		position: unset;
		margin-top: 50px;
		justify-content: center;
	}
}

@media screen and (max-width: 505px) {
	.LinkTwitterWrapper {
		margin-top: 50px;
	}
}

.LinkTwitterWrapper > a {
	margin: 0px 0px 0px 20px;
	font-size: 13px;
	font-family: "Avenir-Medium", sans-serif;
}

.IcoTwitter {
	width: 30px;
}

/*Section Margin Mobile*/

@media screen and (max-width: 822px) {
	.SectionQuote, .SectionArticle {
		margin: 40px 0px;
	}
}

.SectionVilleFooter {
	margin-top: 50px;
	display: flex;
	align-items: center;
}

.VilleFooter {
	width: 500px;
	display: block;
	margin: 0 auto;
}

@media screen and (max-width: 750px) {
	.VilleFooter {
		width: 70%;
	}
}

@media screen and (max-width: 414px) {
	.VilleFooter {
		width: 55%;
	}
}

.ArticleBack, .ArticleNext {
	position: relative;

}


.ArticleBack:hover::after {
	opacity: 1;
}

.ArticleBack::after {
	opacity: 0;
	content: 'Article précédent';
	position: absolute;
	left: 60px;
	top: 12px;
	font-family: "Avenir", sans-serif;
	color: #ac026e;
	text-transform: uppercase;
	width: 160px;
	transition: all ease-out 0.2s;
}

.ArticleNext::before {
	content: 'Article suivant';
	position: absolute;
	right: 30px;
	top: 12px;
	font-family: "Avenir", sans-serif;
	color: #ac026e;
	opacity: 0;
	text-transform: uppercase;
	width: 160px;
	transition: all ease-out 0.2s;
}

.ArticleNextEnd::before {
	content: 'Home';
	position: absolute;
	right: 115px;
	top: 327px;
	font-family: "Avenir", sans-serif;
	color: #ac026e;
	opacity: 0;
	text-transform: uppercase;
	width: auto;
	transition: all ease-out 0.2s;
}

.ArticleNext:hover::before {
	opacity: 1;
}

.ArticleNextEnd:hover::before {
	opacity: 1;
}

@media screen and (max-width: 750px) {
	.ArticleBack > img, .ArticleNext > img {
		width: 40px;
	}
}

@media screen and (max-width: 920px) {
	.ArticleBack:hover::after {
		content: none;
	}

	.ArticleNext:hover::before {
		content: none;
	}

	.ArticleNextEnd:hover::before {
		content: none;
	}
}
/*Template*/

/*Le mot de la DG*/
.BodySpeech {
	background: #eff3f9;
}

.BodyHomage {
	background: #EFEFEF;
}

.WrapperSpeech {
	font-family: "Avenir", sans-serif;
	display: flex;
	justify-content: space-around;
	margin-top: 50px;
}

@media screen and (max-width: 820px) {
	.WrapperSpeech {
		flex-direction: column-reverse;
	}
}

@media screen and (max-width: 414px) {
	.WrapperSpeech {
		margin-top: 10px;
	}
}

@media screen and (max-width: 375px) {
	.WrapperSpeech {
		margin-top: 30px;
	}
}

.ColumnLeft {
	width: 30%;
}

.ColumnRight {
	width: 50%;
}

@media screen and (max-width: 820px) {
	.ColumnLeft, .ColumnRight {
		width: 100%;
	}
}

.ColumnSpeech > h1 {
	font-family: "Sentinel", sans-serif;
	font-size: 50px;
	line-height: 55px;
	color: #ac026e;
	margin: 0px;
}

@media screen and (max-width: 414px) {
	.ColumnSpeech > h1 {
		font-size: 10vw;
		line-height: 11vw;
	}
}

.PostDescription {
	font-size: 18px;
	color: #ac026e;
	margin-top: 8px;
	margin-bottom: 35px;
}

@media screen and (max-width: 414px) {
	.PostDescription {
		font-size: 4.5vw;
		line-height: 5.5vw;
	}
}

@media screen and (max-width: 320px) {
	.PostDescription {
		font-size: 5.5vw;
		line-height: 7.5vw;
	}
}

.BoldTxt {
	font-family: "Avenir-Medium", sans-serif;
}

.TxtSpeech {
	color: grey;
	font-size: 17px;
	color: #4D4D4D;
}

.TxtFirstLetter::first-letter {
	font-size: 80px;
	line-height: 50px;
}

.SpeechQuote {
	width: 50px;
	margin: 10px 0px 10px 0px;
}

.SpeechExergue {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	font-size: 18px;
	margin-bottom: 60px;
}

@media screen and (max-width: 505px) {
	.SpeechExergue {
		margin-bottom: 30px;
	}
}

.Iexergue {
	color: #144c92;
	margin-bottom: 50px;
}

@media screen and (max-width: 820px) {
	.SpeechExergue {
		align-items: flex-start;
		text-align: left;
	}
}

.PresidenteImgDesktop {
	width: 100%;
	margin-bottom: 30px;
	transform: rotate(-5deg);
	box-shadow: 0 15px 20px 0 rgba(0,0,0,0.25);
	margin-left: 10px;
}

.PresidenteImgMobile {
	display: none;
}

@media screen and (max-width: 820px) {
	.PresidenteImgDesktop {
		display: none;
	}

	.PresidenteImgMobile {
		display: block;
		margin-bottom: 50px;
		transform: rotate(-5deg);
		box-shadow: 0 15px 20px 0 rgba(0,0,0,0.25);
		margin-left: 10px;
	}
}

@media screen and (max-width: 414px) {
	.PresidenteImgMobile {
		width: 65%;
		margin-bottom: 40px;
	}
}

.BrOnlyTablet {
	display: none;
}

@media screen and (max-width: 1209px) {
	.BrOnlyTablet {
		display: block;
	}

	.PostDescription {
		margin-top: 25px;
	}
}

@media screen and (max-width: 820px) {
	.BrOnlyTablet {
		display: none;
	}
}

@media screen and (max-width: 505px) {
	.BrOnlyTablet {
		display: block;
	}
}

.AudioMessage {
	color: #AC026E;
	text-transform: uppercase;
	font-size: 15px;
	font-family: "Avenir-Medium", sans-serif;
	display: flex;
}


@media screen and (max-width: 820px) {
	.AudioMessage {
		max-width: 280px;
	}
}

@media screen and (max-width: 505px) {
	.AudioMessage {
		flex-direction: column-reverse;
	}
}

button:focus {
	outline:0 !important; 
}

button:hover {
	opacity: 0.5;
}

@media screen and (max-width: 505px) {
	button:hover {
	opacity: 1;
}
}

.AudioMessage > img {
	margin-left: 20px;
	cursor: pointer;
	transition: all ease-out 0.2s;
}

.AudioMessage > img:hover {
	opacity: 0.5;
}
/*Le mot de la DG*/

/*Agir Sans Attendre*/
.IFCHelp > .WrapperBody {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 1340px;
	margin-top: 100px;
	margin-bottom: 100px;
}

@media screen and (max-width: 820px) {
	.IFCHelp > .WrapperBody {
		margin-top: 50px;
		margin-bottom: 50px;
	}
}


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

.IFCHelp > .WrapperBody {
	width: auto;
	flex-direction: column;
}

}

.Box {
	width: 375px;
	height: 375px;
	background-color: #BC6428;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: "Avenir-Medium", sans-serif;
	color: #FFF;
	font-size: 19px;
	line-height: 22px;
	box-sizing: border-box;
	padding: 35px;
	flex-direction: column;
}

.Box > img {
	width: 60px;
}

@media screen and (max-width: 820px) {
	.Box > img {
	width: 40px;
}
}

.Box > p {
	margin-bottom: 0px;
}

@media screen and (max-width: 820px) {
	.Box {
		width: 100%;
		margin-top: 50px;
		height: 100%;
		padding: 30px;
	}
}

.QuoteOnly {
	max-width: 350px;
	font-family: "Avenir", sans-serif;
	margin-right: 80px;
}

@media screen and (max-width: 820px) {
	.QuoteOnly {
		margin: 0 auto;
		text-align: center;
		max-width: 100%;
	}
}

.QuoteOnly > h4 {
	font-family: "Avenir-Medium", sans-serif;
	color: #ac026e;
	text-transform: uppercase;
	font-size: 20px;
	margin: 0px 0px 10px 0px;
}

.QuoteOnly > i {
	color: #3A3A3A;
	font-family: 17px;
}

.QuoteOnly > span {
	display: block;
	margin-top: 10px;
	font-family: "Avenir-Medium", sans-serif;
	color: #3A3A3A;
}

.IFCHelpVille {
	position: absolute;
	left: -270px;
}

@media screen and (max-width: 820px) {
	.IFCHelpVille {
		width: 100%;
		position: relative;
		left: 0;
	}	
}

.FlexEnd {
	display: flex;
	align-items: center;
}

@media screen and (max-width: 820px) {
	.FlexEnd {
		margin-top: 50px;
		flex-direction: column;
		align-items: flex-start;
}
}

.AfficheWrapper {
	display: flex;
	background-color: #ac026e;
	padding: 30px;
	box-sizing: content-box;
	align-items: center;
}

@media screen and (max-width: 820px) {
	.AfficheWrapper {
		align-items: flex-start;
	}
}

@media screen and (max-width: 505px) {
	.AfficheWrapper {
		flex-direction: column;
	}
}

.AfficheWrapper > img {
	width: 350px;
	transform: rotate(-5deg);
	margin-top: -50px;
	margin-left: 80px;
	box-shadow: 0 2px 20px 0 rgba(0,0,0,0.06);
}

@media screen and (max-width: 820px) {
	.AfficheWrapper > img {
		transform: rotate(0deg);
		margin-top: 0px;
		margin-left: 0px;
		width: 40%;
	}
}

@media screen and (max-width: 505px) {
	.AfficheWrapper > img {
		width: 170px;
		height: auto;
		margin-bottom: 0px;
	}
}

.AfficheContentWrapper {
	display: flex;
	flex-direction: column;
	max-width: 600px;
	margin-left: 70px;
}

.AfficheContentWrapper {
	color: #FFF;
	max-width: 60%;
}

@media screen and (max-width: 820px) {
	.AfficheContentWrapper {
		max-width: 100%;
		margin-left: 50px;
		text-align: left;
	}
}

@media screen and (max-width: 500px) {
	.AfficheContentWrapper {
		max-width: 100%;
		margin-left: 0px;
		text-align: left;
		margin-top: 30px;
	}
}

.AfficheTitle {
	font-family: 'Sentinel', sans-serif;
	font-size: 28px;
	margin: 0px;
}

.AfficheContent {
	font-family: 'Avenir', sans-serif;
	font-size: 20px;
}

@media screen and (max-width: 820px) {
	.AfficheContent {
		font-size: 18px;
	}
}

.SectionArticle2columnFlexEnd {
	align-items: flex-end !important;
}

.ArticleImgLogo {
	min-width: 50px !important;
	width: 100px ;
}

.QuoteDescription100Width {
	width: 770px;
	color: #FFF;
}

.SmallQuote {
	width: 50px;
	margin-bottom: -10px;
}

@media screen and (max-width: 820px) {
	.QuoteDescription100Width {
		width: 100%;
	}
}

.ProfilInfosColorPurple > .QuoteUpReverse {
	top: 82px !important;
	left: -70px;
}

.ProfilInfosColorPurple > .QuoteDownReverse {
	left: 180px !important;
}
/*Agir Sans Attendre*/

.Columns4 {
	background-color: #BC6428;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 1340px !important;
	box-sizing: border-box;
	padding: 40px;
}

@media screen and (max-width: 820px) {
	.Columns4 {
		min-width: 100% !important;
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 505px) {
	.Columns4 {
		padding: 20px 40px 20px 40px;
	}
}

.ColumnFlex {
	display: flex;
}

@media screen and (max-width: 820px) {
	.ColumnFlex {
		flex-direction: column;
	}

}

.Column {
	color: #FFF;
	width: 100%;
	margin-right: 30px;
}

@media screen and (max-width: 820px) {
	.Column {
		color: #FFF;
		width: 350px;
		margin-right: 0px;
		margin-bottom: 50px;
		text-align: center;
	}
}

@media screen and (max-width: 505px) {
	.Column {
		color: #FFF;
		width: 100%;
		margin-right: 0px;
		margin-bottom: 50px;
		text-align: center;
	}
}

.Column:last-child {
	margin-bottom: 0px;
}

.Columns4Title {
	font-family: 'Sentinel', sans-serif;
	font-size: 30px;
	color: #FFF;
	margin-bottom: 50px;
}

@media screen and (max-width: 505px) {
	.Columns4Title {
		margin-bottom: 40px;
	}
}

.Column > p:first-child {
	margin: 0px;
	font-family: 'Avenir-Medium', sans-serif;
	font-size: 23.5px;
}

.Column > p:last-child {
	margin: 10px 0px 0px 0px;
	font-family: 'Avenir', sans-serif;
}

.SmallImg {
	width: 350px;
}

@media screen and (max-width: 505px) {
	.SmallImg {
		width: 250px;
	}	
}

.LetterImg {
	width: 300px;
	box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
	transform: rotate(3deg);
}

.LetterImgPopUp {
	width: 600px;
}

@media screen and (max-width: 505px) {
	.LetterImg {
		transform: rotate(0deg);
	}	
}

.Mapico {
	margin-top: -80px;
}

@media screen and (max-width: 505px) {
	.Mapico {
		margin-top: 0px;
	}	
}

.SectionBorder {
	border: solid 8px #dadada;
	padding: 30px;
	flex-wrap: wrap;
}

.SectionBorderWrapper {
	display: flex;
}

@media screen and (max-width: 820px) {
	.SectionBorderWrapper {
		flex-wrap: wrap;
	}

	.ArticleAddContent {
		margin-top: 30px;
	}
}

@media screen and (max-width: 505px) {
	.SectionBorder {
		border: solid 0px #dadada;
		padding: 0px 20px 0px;
	}	

	.ArticleAddContent {
		margin-top: 10px;
	}
}

.WrapperBodyArticle {
	max-width: 1270px !important;
}


.ArticleDescriptionCenter {
	max-width: 750px;
	margin-top: 5px;
	color: #686868;
	line-height: 23px;
	font-size: 18px;
	font
}

@media screen and (max-width: 505px) {
	.Center, .ArticleDescriptionCenter {
		text-align: left;
		margin-bottom: 0px;
	}
}

.IFCVilleBonMorale {
	height: 400px;
}

@media screen and (max-width: 820px) {
	.IFCVilleBonMorale {
		height: auto;
		width: 100%;
		max-width: 400px;
	}
}

.AlignCenter {
	display: flex;
	align-items: center;
}

.SectionPurpleArticle {
	display: flex;
	background-color: #C173A5;
	flex-direction: column;
}

.SectionPurpleArticleTitle {
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}

@media screen and (max-width: 820px) {
	.ArticlePurpleSection {
		margin-right: 30px;
		margin-bottom: 0px !important;		
	}
}

@media screen and (max-width: 505px) {
	.ArticlePurpleSection {
		margin-right: 0px;
		margin-bottom: 50px !important;		
	}

	.FlexAlign {
		flex-direction: column;
		margin-top: 30px;
		margin-bottom: 30px;
	}
}

.SectionPurpleArticleTitle > p {
	margin: 0px;
	font-family: 'Sentinel', sans-serif;
	font-size: 30px;
	margin-left: 20px;
	color: #FFF;
}

@media screen and (max-width: 505px) {
	.SectionPurpleArticleTitle > p {
		font-size: 7vw;
	}
}

.SectionPurpleArticleTitle > img {
	margin-left: -100px;
	width: 80px;
}

@media screen and (max-width: 505px) {
	.SectionPurpleArticleTitle > img {
		margin-left: -0px;
		width: 80px;
	}	
}

.FlexAlign {
	display: flex;
	margin-top: 50px;
	margin-bottom: 50px;
}

.ArticleDescriptionSmall {
	color: #111213;
}

.NumberKey {
	max-width: 300px;
	margin-top: 50px;
	font-family: 'Avenir', sans-serif;
}

@media screen and (max-width: 822px) { 
	.NumberKey {
		text-align: center;
		max-width: 100%;
	}
}

.NumberKey > span {
	font-size: 43px;
	margin-bottom: 0px;
	letter-spacing: -2.0px;
	color: #ac026e;
	font-weight: 500;
	font-family: 'Avenir-Medium', sans-serif;
}

.NumberKey > p {
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: left;
	font-size: 16px;
}

@media screen and (max-width: 822px) { 
	.NumberKey > p {
		text-align: center;
	}
}

.NumberKey > img {
	width: 40px;
	margin-bottom: -3px;
	margin-right: 10px;
}

/*PopUp Lettre*/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: scroll; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

@media screen and (max-width: 505px) {
	.modal {
		display: none;
	}
}

/* Modal Content/Box */
.modal-content {
  background-color: #FFF;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 600px; /* Could be more or less, depending on screen size */
  position: relative;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  right: 30px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#myBtn {
	font-family: 'Avenir-Medium', sans-serif;
	color: #FFF;
	border:none;
	background: #ac026e;
	border-radius: 30px;
	margin-top: 20px;
	padding: 10px 20px;
	font-size: 15px;
	cursor: pointer;
	height: initial;
	width: initial;
}

@media screen and (max-width: 505px) {
	#myBtn {
		display: none;
	}
}

.SectionCenter {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
}

@media screen and (max-width: 505px) {
	.SectionCenter {
		margin-top: 30px;
		margin-bottom: 30px;
	}
}
.BandeauEnd {
	width: 100%;
}

.BandeauEnd > div {
	width: 100%;
	background: #ac026e;
	padding: 10px 20px;
	box-sizing: border-box;
	margin-top: -1px;
}

.BandeauMessage {
	font-family: 'Sentinel', sans-serif;
	text-align: center;
	font-size: 20px;
	color: #FFF;
}

.BandeauMessage > span {
	font-size: 30px;
}

@media screen and (max-width: 505px) {
	.VilleFooterLastPage {
		width: 85%;
	}
}

.SectionNextArrow {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}

.SectionNextArrowEnd {
	margin-top: 50px;
}

button {
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 74px;
  padding-left: 0px;
  border-color: transparent transparent transparent #ae356e;
  transition: 100ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 37px 0 37px 60px;
}
.button.paused {
  border-style: double;
  border-width: 0px 0 0px 60px;
}
.button:hover {
  border-color: transparent transparent transparent #ae356e;
}

.QuoteElementDice {
	width: 80px;
}

@media screen and (max-width: 500px) {
	.QuoteElementDice {
		position: absolute;
		left: 250px;
    top: 30px;
    width: 60px;
    z-index: 99;
	}
}

.BasketPng {
	width: 140px;
}

.QuoteElementClock {
	width: 180px;
	position: absolute;
	top: -130px;
	right: 0px;
}

@media screen and (max-width: 822px) {
	.QuoteElementClock { 
		top:-190px;
		left: 170px;
	}
}

.LastInfos {
	font-size: 10px;
	text-align: center;
	width: 1000px;
	margin-top: 30px;
	color: grey;
	font-family: 'Avenir', sans-serif;
}

@media screen and (max-width: 822px) {
	.LastInfos {
		width: auto;
	}
}

.ml-box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 100px);
}

@media screen and (max-width: 500px) {
	.ml-box {
	min-height: 100vh;
	}

	.ml-p {
		max-width: 335px !important;
		text-align: justify !important;
	}

}
.ml-h2 {
	font-size: 30px;
	text-align: center;
	margin-top: 100px;
	font-family: "Avenir-Medium";
	color: #ac026e;
}

.ml-p {
	font-size: 14px;
	font-family: "Avenir";
	color: grey;
	max-width: 1000px;
	text-align: center;
	margin: 0 auto;
}

.FooterSocialLinksWrapper {
	margin-top: 20px;
}

.FooterSocialLinks:hover {
	opacity: 0.7;

}

.FooterSocialLinks {
	margin-right: 10px;
	transition: all ease-out 0.4s;
}

.FooterSocialLinks:last-child {
	margin-right: 0px;
}

@media screen and (max-width: 500px) {
footer > div:first-child {
	display: flex;
	flex-wrap: wrap-reverse;
	width: 90vw;
	justify-content: center;
	text-align: center;
}
}

/**/