@font-face {
	font-family:'Bree_B';
	font-weight:normal;
	font-style:normal;

	src:url('../polices/bree_serif_bold-webfont.eot');
	src:url('../polices/bree_serif_bold-webfont.eot?#iefix') format('embedded-opentype'),
	url('../polices/bree_serif_bold-webfont.woff2') format('woff2'),
	url('../polices/bree_serif_bold-webfont.woff') format('woff'),
	url('../polices/bree_serif_bold-webfont.ttf') format('truetype'),
	url('../polices/bree_serif_bold-webfont.svg#bree_serifbold') format('svg');
}




@font-face {
	font-family:'Bree';
	font-weight:normal;
	font-style:normal;

	src:url('../polices/bree_serif_light-webfont.eot');
	src:url('../polices/bree_serif_light-webfont.eot?#iefix') format('embedded-opentype'),
	url('../polices/bree_serif_light-webfont.woff2') format('woff2'),
	url('../polices/bree_serif_light-webfont.woff') format('woff'),
	url('../polices/bree_serif_light-webfont.ttf') format('truetype'),
	url('../polices/bree_serif_light-webfont.svg#bree_seriflight') format('svg');
}




@font-face {
	font-family:'AquaG';
	font-weight:normal;
	font-style:normal;

	src:url('../polices/aqua_grotesque-webfont.eot');
	src:url('../polices/aqua_grotesque-webfont.eot?#iefix') format('embedded-opentype'),
	url('../polices/aqua_grotesque-webfont.woff2') format('woff2'),
	url('../polices/aqua_grotesque-webfont.woff') format('woff'),
	url('../polices/aqua_grotesque-webfont.ttf') format('truetype'),
	url('../polices/aqua_grotesque-webfont.svg#aqua_grotesqueregular') format('svg');
}
/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	        box-sizing:border-box;
}

html {
	height:100%;
	min-height:100%;

	font-size:62.5%;
}

body {
	height:100%;
	min-height:100%;

	font-family:sans-serif;
	font-size:1.6rem;

	color:#dddddd;
}

a {
	text-decoration:none;

	color:#c5c5c5;
}

.slider-container {
	position:absolute;

	height:100%;
	width:100%;

	background:url('../wallpaper/background01.jpg'); /* Nécessaire pour afficher un background en cas de désactivation de JS */

	overflow:hidden;
	transform:scale(1.1);
}

.modal {
	position:absolute;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;

	top:50%;
	left:50%;

	width:600px;
	max-width:75%;
	/* padding:20px; */
	/* background:rgba(0,0,0,0.5); */

	-webkit-box-direction:normal;
	-webkit-box-orient:vertical;
	-ms-flex-direction:column;
	    flex-direction:column;
	-webkit-transform:translateY(-50%) translateX(-50%) translateZ(200px);
	   -moz-transform:translateY(-50%) translateX(-50%) translateZ(200px);
	    -ms-transform:translateY(-50%) translateX(-50%) translateZ(200px);
	     -o-transform:translateY(-50%) translateX(-50%) translateZ(200px);
	        transform:translateY(-50%) translateX(-50%) translateZ(200px);
}

.logo-container {
	padding:40px 40px 20px 40px;

	background:rgba(0,0,0,0.5);
}

.rndBckgd_Timer {
	position:relative;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;

	left:0;
	right:0;

	width:100%;

	margin:0 auto;
	padding:40px 0 20px 0;

	-webkit-box-direction:normal;
	-webkit-box-orient:horizontal;
	-webkit-box-pack:center;
	box-sizing:border-box;
	-ms-flex-direction:row;
	    flex-direction:row;
	-ms-flex-pack:center;
	justify-content:center;
}

.msg {
	width:100%;

	padding:20px;

	font-size:20px;
	line-height:28px;

	background:rgba(55, 168, 93, 0.6);

	margin-top:20px;
	text-align:center;
}

.contact {
	display:flex;

	padding:20px 40px;

	font-size:24px;

	background:rgba(0,0,0,0.5);

	align-items:center;
	flex-direction:row;
	justify-content:space-between;
	margin-top:20px;
}

.stroke {
	height:20px;
	width:1px;

	background:#37a85d;
}

.msg, .contact {
	font-family:'Bree';
}


@media only screen and (max-width: 720px), screen and (max-height: 720px) {
	.modal {
		transform:translateY(-50%) translateX(-50%);
	}
	.contact {
		font-size:20px;
	}
}
@media only screen and (max-width: 620px), screen and (max-height: 620px) {
	.contact {
		line-height:50px;

		flex-direction:column;
	}

	.stroke {
		height:1px;
		width:20px;
	}
}

@media only screen and (max-width: 560px), screen and (max-height: 560px) {
	.msg {
		font-size:16px;
	}
}

@media only screen and (max-width: 420px), screen and (max-height: 420px) {
	.contact {
		font-size:16px;
	}
}

/* LOCK ORIENTATION */
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
	html {
		position:absolute;

		top:100%;
		left:0;

		height:100vw;
		width:100vh;

		overflow-x:hidden;
		transform:rotate(-90deg);
		transform-origin:left top;
	}
}