/* micro reset */
@font-face {
	font-family: 'FuturaStd-Light', sans-serif;
	src: url('../fonts/FuturaStd-Light.woff') format('woff');
}
@font-face {
	font-family: 'Futura Std Light', sans-serif;
	src: url('../fonts/Futura Std Light.otf') format('otf');
}
* {
	box-sizing: border-box;
}
html, body{
	min-height: 100%;
  height: 100%;
}
body{
	box-sizing: border-box;
	-webkit-font-smoothing:antialiased;
	font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
	font-weight: lighter;
	line-height: 1.75;
	color: black;
	margin: 0;

}
table{
	width: 100%;
border-collapse: collapse;
border-style: none;
}
.center-div{
	padding-top: 25%;
	padding-bottom: 25%;
}
.td_1{
	width: 50%;
	border-style: none solid none none;
	text-align: right;
	padding-right: 20px;
	border-right: 0.5px solid;
}
.td_1 p{
	margin: 0;
	font-size: 10pt;
	letter-spacing: 2px;
}
.td_2{
	width: 50%;
	border-left: 2px none #000000;
	border-style: none;
	text-align: left;
	padding-left: 20px;
}

.td_2 p {
	margin: 0;
	font-size: 10pt;
	letter-spacing: 2px;
}


footer{
	display: block;
	float: left;
	margin-left: 0;
	text-align: center;
	width: 100%;
	color: #999999 !important;
	font-size: 12px;
	text-align: center;
	padding-bottom: 20px;
	margin-top: 20px;
}

.header {
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
	color: #000000;
  display: block;
  padding: 22px 30px;
  text-decoration: none;
	text-align: center;
	font-size: 1.2em;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
	letter-spacing: 1.5px;
	transition: letter-spacing 0.7s;

}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 5px 20px;
	color: #000000;
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 35px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {

  .header li {
    float: left;
  }
  .header li a {
    padding: 15px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}


.header-logo h1{
	font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
  display: inline-block;
  font-weight: 300;
  font-size: 2.5em;
  letter-spacing: 0.025em;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
}
/* Les éléments sont placés l'un à côté de l'autre */
.header-inner {
	display: table;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto; /* on centre l'élément */
}

/* Style the content */
.content{
	width: 100%;
	height: auto;
}

.content h3{
	text-align:center;
	font-size: 2em;
	font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
	margin: 0;
	font-weight: lighter;

}

.content_agency{
	padding-top: 75px;
	margin-left: 24.5%;
	max-width: 555px;
	clear: both;
}

.content_agency p{
	font-size: 10pt;
  letter-spacing:1pt;
	margin-top: 0;
	margin-bottom: 0;

}
.content_agency h2{
	font-size: 18pt;
	font-weight: normal;
	text-transform: uppercase;
	font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
	margin: 0;
}

.content p{
	text-align:center;
	font-size: 14px;
	font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
	margin: 0;
}
.top{
  font-size: 16px !important;
  padding-bottom: 10px;
}

.content video{
	text-align: center;
	width: 700px;
	height: auto;
	margin: 0 auto;
	display: block;
}

.row {
	margin-top: 20px;
}

@keyframes scroll {
  0% {
    transform: translateX(240px);
  }
  100% {
    transform: translateX(calc(-400px * 12 ));
  }
}

.slider1 {

  height: 400px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
	margin-top: 20px;
}
.slider1::before, .slider1::after {
  content: "";
  height: 400px;
  position: absolute;
  z-index: 2;
}
.slider1::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider1::before {
  left: 0;
  top: 0;
}
.slider1 .slide-track {
  animation: scroll 47s linear infinite;
  display: flex;
}
.slider1 .slide_top {
  height: 400px;
  margin-left: 10px;
}

.slider1 .slide_top img{
  height: 400px;
}
.header-inner > * {
	display: table-cell;
	vertical-align: middle;
}
/* Alignement du menu */
.header-nav {
	text-align: right;
}
/*
   Faire passer le menu en inline (inline-block, inline-table ou inline-flex) pour le rendre sensible à l'alignement à droite. Ses items aussi sont en inline.
*/
.header-nav ul,
.header-nav li {
	display: inline;
	list-style: none;
}
.header-nav a {
	position: relative;
	display: inline-block;
	padding: 8px 20px;
  font-size: 1.25em;
	vertical-align: middle;
	font-weight: 300; /* entre regular et light */
	letter-spacing: 0.025em;
	color: inherit;
	text-decoration: none;
  text-transform: uppercase;
	letter-spacing: 1px;
}

/* Animation du lien */
.header-nav a:after {

}
.header-nav a:hover {
	letter-spacing: 2px;
	transition: all .4s;
}
/* Le trait va remonter et apparaitre */
.header-nav a:hover:after,
.header-nav a:focus:after {
	opacity: .6;
	transform: translateY(0);

}
/* Je vire outline car juste au-dessus je définis un style :focus */
.header-nav a:focus {
	outline: none;
	letter-spacing: 2px;

}

.parent {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    float: left;
    display: inline-block;
	  cursor: pointer;
    margin-bottom: 5px;
		padding: 0 0;
}

.parent_top{
	width: 100%;
	height: 400px;
	overflow: hidden;
	position: relative;
	float: left;
	display: inline-block;
	margin-bottom: 5px;
	margin-top: 70px;
	padding: 0 0;
}

.parent_coloratura {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    float: left;
    display: inline-block;
    margin-bottom: 15px;
}

.child_coloratura {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.child {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.child:before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(52,73,94,0.70);
	}

.bg_coloratura{
	background-image: url("../images/Coloratura/coloratura_1.jpg");
	background-position: right 50% bottom 50%;
}

.bg_resonance{
	background-image: url("../images/Resonances/Resonances_1.jpg");
	background-position: right 50% bottom 50%;
}

.bg_makeup{
	background-image: url("../images/MakeUp/ysl_makeup_3.jpg");
	background-position: right 50% bottom 75%;
}

.bg_magicien{
	background-image: url("../images/Magicien/Magicien_6_1.jpg");
	background-position: right 50% bottom 50%;
}

.bg_perfume{
	background-image: url("../images/Perfume/Perfume_10.jpg");
	background-position: right 50% bottom 50%;
}

.bg_perfume_2{
	background-image: url("../images/Perfume/Perfume_11.jpg");
	background-position: right 50% bottom 50%;
}

.bg_diamonds{
	background-image: url("../images/Diamonds/Diamonds_4.jpg");
  background-position: right 50% bottom 50%;
}
/* Several different images */
.bg-one {
  background-image: url("../images/MakeUp/ysl_makeup_3.jpg");
  background-position: right 50% bottom 75%;
}

.bg-one a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
    font-family: "Futura Std Light",sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-two {
  background-image: url("../images/Resonances/Resonances_1.jpg");
  background-position: right 50% bottom 50%;
}

.bg-two a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-three {
  background-image: url("../images/Perfume/Perfume_10.jpg");
  background-position: right 50% bottom 50%;
}

.bg-three a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-four {
  background-image: url("../images/Magicien/Magicien_6_1.jpg");
  background-position: right 50% bottom 50%;
}

.bg-four a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-five {
  background-image: url("../images/Coloratura/coloratura_1.jpg");
  background-position: right 50% bottom 50%;
}

.bg-five a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-six {
  background-image: url("../images/Perfume/Perfume_11.jpg");
  background-position: right 50% bottom 50%;
}

.bg-six a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-seven {
  background-image: url("../images/Diamonds/Diamonds_4.jpg");
  background-position: right 50% bottom 50%;
}

.bg-seven a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-eight {
  background-image: url("../images/website luxury/Website.webp");
  background-position: right 50% bottom 50%;
}

.bg-eight a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-nine {
  background-image: url("../images/registration/Event_registration_platform.webp");
  background-position: right 50% bottom 50%;
}

.bg-nine a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-ten {
  background-image: url("../images/motion/Motion_design.webp");
  background-position: right 50% bottom 50%;
}

.bg-ten a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-eleven {
  background-image: url("../images/email/E-mail_whatsapp_wechat.webp");
  background-position: right 50% bottom 50%;
}

.bg-eleven a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}

.bg-twelve {
  background-image: url("../images/luxury edition/Luxury edition.webp");
  background-position: right 50% bottom 50%;
}

.bg-twelve a {
    display: none;
    font-size: 35px;
    text-decoration: none;
    color: #ffffff !important;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /*text-decoration: none;*/
}
.parent:hover .child, .parent:focus .child {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.parent:hover .child:before, .parent:focus .child:before {
    display: block;
}

.parent:hover a, .parent:focus a {
    display: block;
}

.parent_top:hover .child, .parent_top:focus .child {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.parent_top:hover .child:before, .parent_top:focus .child:before {
    display: block;
}

.parent_top:hover a, .parent_top:focus a {
    display: block;
}


.slides {
    padding: 0;
    width: 700px;
    height: 500px;
    display: block;
    margin: 40px auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
		width: 700px;
    height: 500px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}



input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
	padding-top: 20px;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6,
input#img-6:checked ~ .nav-dots label#img-dot-7,
input#img-6:checked ~ .nav-dots label#img-dot-8 {
	background: rgba(0, 0, 0, 0.8);
}

.content_agency td{
	width: 25%;
	height: 185px;
	text-align: left;
	padding: 0.2em;
}

.content_agency table {
	height: 185px;
	width: 100%;
	border-collapse: collapse;
	border-color: #ffffff;
	background-color: #ffffff;
	border-style: hidden;
}
.content_agency figcaption{
	font-size: 8pt;
	letter-spacing: 1px;
}

.column_1 {
  float: left;
  padding: 5px 5px 5px 0px;
}

.column_1 p{
    font-size: 7.5pt;
}

.column {
  float: left;
  padding: 5px;
}

.column p{
    font-size: 7.5pt;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px) {
	.slider{
		height: 400px;
	}
	.slider .slide_top img{
	  height: 400px;
	}
	.slider .slide_top {
	  height: 400px;
	}
}

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

.table_2{
	display: none;
}
}

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

	.content h3 {
		text-align:center;
		font-size: 18px;
		font-family: 'Futura Std Light','FuturaStd-Light', sans-serif;
		margin: 0;
		font-weight: lighter;
	}
  .column {
		float: none;
		margin: 0 auto;
  }
	.column img{
		display: block;
    margin-left: auto;
    margin-right: auto;
	}
	.column p{
		text-align: center;
	}
	.column_1 {
		float: none;
		margin: 0 auto;
  }
	.column_1 img{
		display: block;
    margin-left: auto;
    margin-right: auto;
	}
	.column_1 p{
		text-align: center;
	}
	.content_agency{
		padding-left: 27.141px;
		padding-right: 27.141px;
		margin-left: 0;
	}
	.slider{
		height: 200px;
	}
	.slider .slide_top img{
	  height: 200px;
	}
	.slider .slide_top {
	  height: 200px;
	}
	.td_1 p{
		text-decoration:none !important;
	}
	.td_2 p{
		text-decoration:none !important;
	}

	.td_3{
		text-align: center;
		margin: 0;
		font-size: 10pt;
		letter-spacing: 2px;
		line-height: 15px;

  	border-bottom: 0.5px solid black;
	}
	.td_4{
		text-align: center;
		margin: 0;
		font-size: 10pt;
		letter-spacing: 2px;
		line-height: 15px;
	}
	.table_1{
		display: none;
	}

	.table_2{
		width: 75%;
		margin-left: 12%;
	}

	.bg-one a {
	    display: none;
	    font-size: 20px;
	    text-decoration: none;
	    color: #ffffff !important;
	    font-family: "Futura Std Light",sans-serif;
	    text-align: center;
	    margin: auto;
	    position: absolute;
			top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    cursor: pointer;
	    /*text-decoration: none;*/
	}

	.bg-two a {
			display: none;
			font-size: 20px;
			text-decoration: none;
			color: #ffffff !important;
			font-family: "Futura Std Light",sans-serif;
			text-align: center;
			margin: auto;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			cursor: pointer;
			/*text-decoration: none;*/
	}

	.bg-three a {
	    display: none;
	    font-size: 20px;
	    text-decoration: none;
	    color: #ffffff !important;
	    font-family: "Futura Std Light",sans-serif;
	    text-align: center;
	    margin: auto;
	    position: absolute;
			top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    cursor: pointer;
	    /*text-decoration: none;*/
	}

	.bg-four a {
	    display: none;
	    font-size: 20px;
	    text-decoration: none;
	    color: #ffffff !important;
	    font-family: "Futura Std Light",sans-serif;
	    text-align: center;
	    margin: auto;
	    position: absolute;
			top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    cursor: pointer;
	    /*text-decoration: none;*/
	}

	.bg-five a {
	    display: none;
	    font-size: 20px;
	    text-decoration: none;
	    color: #ffffff !important;
	    font-family: "Futura Std Light",sans-serif;
	    text-align: center;
	    margin: auto;
	    position: absolute;
			top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    cursor: pointer;
	    /*text-decoration: none;*/
	}

	.bg-six a {
	    display: none;
	    font-size: 20px;
	    text-decoration: none;
	    color: #ffffff !important;
	    font-family: "Futura Std Light",sans-serif;
	    text-align: center;
	    margin: auto;
	    position: absolute;
			top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    cursor: pointer;
	    /*text-decoration: none;*/
	}

	.bg-seven a {
	    display: none;
	    font-size: 20px;
	    text-decoration: none;
	    color: #ffffff !important;
	    font-family: "Futura Std Light",sans-serif;
	    text-align: center;
	    margin: auto;
	    position: absolute;
			top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    cursor: pointer;
	    /*text-decoration: none;*/
	}
}

nav {
      width: 100%;
      background: #fff;
      height: 70px;
      position: fixed;
      z-index: 1;
}

nav #brand {
      float: left;
      display: block;
      margin-left: 50px;
      font-size: 30px;
      line-height: 70px;
      font-weight: bold;
      margin-top: 5px;;
}

nav #brand a {
      color: #000;
      transition: all 0.3s ease-out;
      font-weight: 300;
			text-decoration: none;
}

nav #brand img {
  height: 100%;
  max-height: 2rem;
  max-width: 20.875rem;
  width: 100%;
}

nav #menu {
      float: right;
      position: relative;
			margin-top: 0;
			margin-bottom: 0;
}

nav #menu li {
      display: inline-block;
      padding: 0px 30px;
      cursor: pointer;
      line-height: 70px;
      position: relative;
      transition: all 0.3s ease-out;
}

nav #menu li a {
      color: #000;
      font-weight: 200;
			text-decoration: none;
}

#toggle {
      position: absolute;
      right: 20px;
      top: 14px;
      z-index: 999;
      width: 30px;
      height: 40px;
      cursor: pointer;
      float: right;
      transition: all 0.3s ease-out;
      visibility: hidden;
      opacity: 0;
}

#toggle .span {
      height: 3px;
      background: #000;
      transition: all 0.3s ease-out;
      backface-visibility: hidden;
      margin: 5px auto;
}

#toggle.on .span {
      height: 3px;
      background: #fff;
      transition: all 0.3s ease-out;
      backface-visibility: hidden;
      margin: 5px auto;
}
#toggle.on #one {
      transform: rotate(45deg) translateX(2px) translateY(4px);
}

#toggle.on #two {
      opacity: 0;
}

#toggle.on #three {
      transform: rotate(-45deg) translateX(8px) translateY(-10px);
}

#resize {
      z-index: 1;
      top: 0px;
      position: absolute;
      background: #000;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all 1s ease-out;
      display: table;
}

#resize #menu {
      height: 90px;
      display: table-cell;
      vertical-align: center;
}

#resize #menu li {
      display: block;
      text-align: center;
      padding: 20px 0;
      font-size: 50px;
      min-height: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease-out;
}

#resize li:nth-child(1) {
      margin-top:140px;
}

#resize #menu li a {
      color: #fff;
			text-decoration: none;
}

#resize #menu  {
      padding: 0;
}
#resize.active {
      visibility: visible;
      opacity: 0.85;
}

@media(max-width: 768px) {
      #toggle {
            visibility: visible;
            opacity: 0.8;
            margin-top: 6px;
      }

      nav #brand {
            margin-left: 18px;
      }

      #menu a {
            font-weight: 200;
            font-size: 0.5em;
      }

      nav #menu {
            display: none;
      }
}

@media(min-width: 768px) {
      #resize {
            visibility: hidden !important;
      }
}

@media only screen and (max-width : 425px) {
  /* Styles pour cette Media Queries */
  nav #brand img {
    height: 83%;
    max-height: 1.55rem;
    max-width: 20.875rem;
    width: 100%;
  }
  nav #brand {
    margin-top: 3px;
  }
  .bg-eight a {
    display: none;
    font-size: 20px;
    text-decoration: none;
    color: #ffffff !important;
    font-family: "Futura Std Light", sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .bg-nine a {
    display: none;
    font-size: 20px;
    text-decoration: none;
    color: #ffffff !important;
    font-family: "Futura Std Light", sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .bg-ten a {
    display: none;
    font-size: 20px;
    text-decoration: none;
    color: #ffffff !important;
    font-family: "Futura Std Light", sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .bg-eleven a {
    display: none;
    font-size: 20px;
    text-decoration: none;
    color: #ffffff !important;
    font-family: "Futura Std Light", sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .bg-twelve a {
    display: none;
    font-size: 20px;
    text-decoration: none;
    color: #ffffff !important;
    font-family: "Futura Std Light", sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }
}