@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700;800&display=swap');

:root{
	--color: #343434;
	--background: #e7e7e7;
	--bg_menu: #1b566c;
	--primary: #06444f;
	--hover: #4790A8;
}

*{
	box-sizing: border-box;
}

html, body{
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 400;
	font-size: 20px;
	color: var(--color);
	background: var(--background);
	box-sizing: border-box;
}

a{
	color: var(--color);
	transition: .2s;
}

a:hover, button.btn:hover{
	transform: scale(1.1);
	transition: .3s;
}

h1, h2, h3, h4{
	margin: 0;
}






header{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	color: #FFF;
	background: var(--primary);
	padding: 8px;
	font-weight: 700;
	font-size: 28px;
}

.header__body{
	text-align: center;
	max-width: 380px;
}

.header__body a{
	font-weight: 700;
}

header.animated{
	animation: slideIn .8s linear;
}

header img{
	height: 140px;
	transition: .3s;
}

nav{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

nav h1{
	font-size: 32px;
	transition: .3s;
	font-weight: 100!important;
}

nav a{
	text-decoration: none;
	color: #FFF;
}

nav a:not(:last-child):after{
	content: '\002014';
	padding: 0 8px;
}


@keyframes slideIn{
	from {
		opacity: 0;
		transform: scale(3);
	}
	
	to {
		opacity: 1;
		transform: scale(1);
	}
}






.container{
	padding: 64px 0;
}

.container{
	width: 100%;
	margin: auto;
	text-align: center;
	/*min-height: 400px;*/
}

.container:nth-child(2n){
	background: #FFF;
	color: #292929;
	z-index: 1;
}




ul{
	display: inline-flex;
	flex-direction: column;
	text-align: left;
}





.hero{
	width: 100%;
	height: 300px;
	position: relative;
	background: var(--primary);
}

.hero::before{
	content: '';
	z-index: 1;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 300px;
	background: url(lieu.jpg?) no-repeat;
	background-size: cover;
	background-position: center center;
	opacity: .5;
	/*filter: blur(4px);*/
}





.picto_float img{
	position: absolute;
	opacity: .5;
}

.picto_float img:nth-child(1){
	left: 50px;
}

.picto_float img:nth-child(2){
	right: 50px;
}


#intro_dates img{
	max-width: 300px;
}

#intro_dates .picto img{
	max-width: 80px;
}


/*

#intro_dates{
	position: relative;
	overflow: hidden;
}

#intro_dates:before{
	content: '';
	display: block;
	position: absolute;
    top: 0;
    padding-left: 100%;
    bottom: 0;
	width: 100%;
	height: 1200px;
	background: var(--background);
	z-index: -1;
	-webkit-transform: skewY(-15deg);
	-moz-transform: skewY(-15deg);
	-ms-transform: skewY(-15deg);
	-o-transform: skewY(-15deg);
	transform: skewY(-15deg);
}

*/




.picto{
	display: inline-grid;
	grid-template-columns: 60px 1fr;
	gap: 40px;
	align-items: center;
	justify-content: center;
	text-align: left;
	margin-top: 32px;
}




.formations{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: auto;
	margin-top: 48px;
}

.formations a.js-modal{
	border: 1px solid #000;
	padding: 8px;
	margin: 8px;
	width: 180px;
	height: 60px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}




.exposants{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 900px;
	margin: auto;
	gap: 40px;
}






.form{
	display: inline-flex;
	align-items: end;
	justify-content: center;
	flex-direction: column;
	margin-top: 24px;
}

.form p{
	margin: 8px 0;
}

.form input:not([type='checkbox']):not([type='radio']), .form select{
	width: 400px!important;
}



.ms-drop{
	width: auto!important;
	min-width: 100%!important;
	text-align: left;
}

.ms-drop ul{
	width: 100%;
}

.ms-drop label span{
	font-size: 14px;
}




input[type=submit], .btn{
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: var(--primary);
	color: #FFF;
	text-decoration: none;
	padding: 8px 32px;
	border: 0;
	transition: .3s;
	cursor: pointer;
	font-size: 18px;
}

input[type=submit]:hover, .btn:hover{
	background: var(--hover);
}

input, textarea, select, button.btn{
	font-size: 18px;
	border-radius: 4px;
	border: 1px solid #ccc;
	padding: 6px 12px;
}

.contact{
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	text-align: left;
	margin-bottom: 80px;
}

.contact label{
	display: block;
	margin-top: 16px;
}

.contact input[type=text], .contact textarea{
	display: block;
	text-align: left;
	width: 500px;
	border-radius: 4px;
	border: 1px solid #ccc;
	padding: 6px 12px;
	margin-top: 4px;
	box-sizing: border-box;
}






.inline{
	display: inline-block;
}

.flex{
	display: flex;
	align-items: center;
	justify-content: center;
}

.center{
	text-align: center;
}

.justify{
	text-align: justify;
}

.margin{
	margin: 30px;
}

.mb{
	margin-bottom: 10px!important;
}

.nomargin{
	margin: 5px;
}

.padding{
	padding: 20px;
}

.hidden{
	display: none;
}

label.checkbox{
	display: block;
}











footer{
	padding: 64px 0;
	background: #1a1a1a;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 176px;
}

.footer a{
	color: #FFF;
	height: 40px;
	text-decoration: none;
}

.footer svg, .socials svg{
	width: 30px;
	margin-right: 10px;
	transition: .3s;
}

.footer svg:hover, .socials svg:hover{
	transform: scale(1.4);
}







.menu-mobile, .menu-close, .hidden-xl{
	display: none;
}


@media only screen and (max-width: 1300px){
	
	.picto_float{
		display: none;
	}
	
	#contact iframe{
		width: 100%!important;
	}
	
}


@media only screen and (max-width: 700px){
	
	.contact{
		display: block;
		padding: 16px;
	}
	
	.form{
		display: flex;
		align-items: stretch;
		padding: 16px;
	}
	
	input[type=text], textarea, .form input[type=text], .form select{
		width: 100%!important;
	}
	
	.btn{
		width: 100%;
		display: inline;
	}
	
	.hidden-xl{
		display: block!important;
	}
	
	.hidden-xs{
		display: none!important;
	}

}