
body{
	font-family:  'Quando', serif !important;
	overflow-x: hidden !important;
	
}
h1{


    font-family: 'Spectral SC', serif !important;
    /*font-family: 'Oswald', sans-serif;*/

}
h2,h3,h4,h5{
	font-family: 'Oswald', sans-serif !important;
}
button{
	background-color: transparent;
}
 

/*

			MENU

*/

.container_menu{
	/*position:relative;*/
}
.barres{
	position: absolute;
	top:0;
	right:0;
	border-radius: 4px;
	box-shadow: 1px 1px 3px #182a48;
	padding: 6px 12px;
	z-index:20;
}
.menuAppears{
	position: fixed !important;
	right:50px;
	top:50px;
}
/* Halo lumineux */
.light div {
	/*position: relative;*/
}
.light div::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(0,0,0,.5);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.light div::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
.img_menu{
	height:35px;
	background-image: url('../images/menuorange.svg');
	background-position: center;
	background-size:cover;
	width:35px;
}
.img_hamburger{
	background-image: url('../images/menuorange.svg');
}
.img_cross{
	background-image: url('../images/close.svg');
}
#menuToggle
{
  display: block;
  position: absolute;
  top:20px;
  right: 20px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
.menu
{
  width: 300px;
  padding: 0px;
  padding-top: 125px;
  background-color: #f7992b;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  height: 100vh;
  position: fixed;
  top:0;
  right:0;
}

.menu li
{
  font-size: 20px;
  cursor: pointer;
}
.menu li:hover{
	color:white;
}
.menu>a>li{
	color:#212524;
	width:100% !important;
	/*margin-left:20px !important;*/
	padding: 0px 30px !important;
	text-align:left;
	height:60px;
	display: flex;
	align-items: center;
}


/*

			HEADER

*/

.image_header{
	background-size: cover;
	background-position: center center;
	height:750px;
	width:100%;
}
.masque_image{
	background-color: rgba(0,0,0,0.6);
	height: 750px;
	width:100%;
}
.container_header{
	text-align: center;
	width:100%;
	height:750px;
	padding:5%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.title_h1{
	color: white;
	font-weight: 700;
	letter-spacing: 4px;
	font-size: 35px;
	text-transform: uppercase;
	/*padding: 0px 50px;*/
	width:85%;
	margin:0 auto;
}

.logo{
	position: absolute;
	top:0px;
	left:0px;
}
.container_logo{
	background-position: center;
	background-size: cover;
	width:370px;
	height:230px;
}
.accroche{
	font-family: 'Damion', cursive !important;
	color: #f7992b;
	font-size: 35px;
}
.virgule{
	background-image: url('../images/virgule.png');
	background-position: center;
	background-size: cover;
	width:17%;
	height:44px;
	margin: 0 auto;
	opacity: 0;
}

.texte_header{
	width:80%;
	margin:0 auto;
	padding: 2%;
	margin-top:5%;
	margin-bottom: 5%;
}
.texte_header h3{
	margin-bottom:10%;
	text-align:left;
}

@media screen and (max-width: 480px){

	.container_logo {
	    width: 210px;
	    height: 210px;
	}
	.image_header{
		height: 650px;
	}
	.masque_image{
		height: 100%;
	}
	.container_header{
		height: 100%;
	}
	.barres{
		padding: 6px 6px;
	}

	.title_h1 {
	    font-size: 35px;
	    font-family: 'Oswald', sans-serif !important;
	    width: 95%;
	    margin-top: 70px;
	    letter-spacing: 3px;
	}
	.accroche{
		font-size:30px;
		padding: 0 15px;
	}
	.virgule{
		width:40%;
	}

	.barres{
		position: fixed;
		top:20px;
		right:20px;
	}
	.menu
	{
	  width: 100%;
	  padding-top: 40px;
	  height: 100vh;
	}
	.menu>a>li{
		height:45px;
	}
}

@media screen and (min-width: 481px) and (max-width: 600px){

	.container_logo {
	    width: 210px;
	    height: 210px;
	}
	.image_header{
		height: 650px;
	}
	.masque_image{
		height: 100%;
	}
	.container_header{
		height: 100%;
	}
	.barres{
		padding: 6px 6px;
	}

	.title_h1 {
	    font-size: 30px;
	    font-family: 'Oswald', sans-serif !important;
	    width: 95%;
	    margin-top: 70px;
	    letter-spacing: 4px;
	}
	.accroche{
		font-size:30px;
		padding: 0 15px;
	}
	.virgule{
		width:40%;
	}

	.barres{
		position: fixed;
		top:20px;
		right:20px;
	}
	.menu
	{
	  width: 100%;
	  padding-top: 40px;
	  height: 100vh;
	}
	.menu>a>li{
		height:45px;
	}
}

@media screen and (min-width: 601px) and (max-width: 800px){

	.container_logo {
	    width: 210px;
	    height: 210px;
	}
	.image_header{
		height: 650px;
	}
	.masque_image{
		height: 100%;
	}
	.container_header{
		height: 100%;
	}
	.barres{
		padding: 6px 6px;
	}

	.title_h1 {
	    font-size: 30px;
	    font-family: 'Oswald', sans-serif !important;
	    width: 95%;
	    margin-top: 70px;
	    letter-spacing: 4px;
	}
	.accroche{
		font-size:30px;
		padding: 0 15px;
	}
	.virgule{
		width:28%;
	}

	.barres{
		position: fixed;
		top:20px;
		right:20px;
	}
	.menu
	{
	  padding-top: 40px;
	  height: 100vh;
	}
	.menu>a>li{
		height:45px;
	}
}
