body{
/*  background: url('logos/Brandon.png');
*/  background-color: #dddddc;

/*	background-image: url(../logos/extract.png);
	background-position: bottom 20px left 20px;
	background-repeat: no-repeat;
	background-size: 190vh;
	min-height: 300vh;*/
}

@font-face {
    font-family: 'around_midnightregular';
    src: url('../assets/AroundMidnight4.woff2') format('woff2'),
         url('../assets/AroundMidnight4.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'HappyTimes_regular';
    src: url('../assets/happy-times-NG_regular_master_web.woff2') format('woff2'),
         url('../assets/happy-times-NG_regular_master_web.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

a {
	font-family: 'around_midnightregular';
	text-decoration: none;
	color: black;
}

.flyers {
width: 400px;
/*filter: saturate(1.2);*/
}


img{
	filter: saturate(1.2);

}
.texte {
font-family: 'HappyTimes_regular', serif;
font-size: 35pt;
/*color: white;*/
}
#parent {
position: relative;
}
img.superpose {
position: absolute;
top: 25px;
left: 30px;
}
#img_1 {
z-index: 10;
}
#img_2 {
z-index: 11;
}
#img_3 {
z-index: 12;
}
#img_4 {
z-index: 9;
}
header {
margin-top:0px;
margin-left:0px;
margin-right:17px;
position: relative; /* ou fixed mais ensuite il faut faire quelques modifications additionnelles */
}
header nav ul{
margin: 0;
padding: 0;
display: flex;
list-style:none;
}
header nav ul li{
font-family: 'HappyTimes_regular', serif;
text-transform: uppercase;
font-size: 35pt;
display: grid;
width: 100%;
margin-left: 0px;
font-size: 23px;
font-weight: bold;
/*column-count: 3;*/
/*grid-column-gap: 100px;*/
/*column-width: 600px;*/
grid-template-columns: 1fr 1fr 1fr;
}

header nav ul li a{
	font-family: 'HappyTimes_regular', serif;
	font-weight: lighter;
	font-size: 17pt;
	white-space: nowrap;
}

iframe {
width: 558px;
/* invert()*/;
/*    min-height: auto;
*/}

.output {
	background: #eee;
}
.handle {
	width: 558px;
	/*background-image: url('logos/cadre2.png');*/
	color: #444444;
   background-color: #ddd;
   background-image: linear-gradient(#f7f7f7, #8f8f8f);
   box-shadow: /*-0.2px 1px 4px 1px rgba(0, 0, 0, 0.4),*/
            -1px 10px 20px rgba(255, 255, 255, 2) inset;
	/*  height: auto;
	*/ /*background: #ccc;*/
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	/*border: 1px solid #000;*/
	/*  border-radius: 4px 4px 0px 0px;*/
	height: 18px;
	margin-bottom: 0px;
}
.frameOverlay {
	/*  height: 100%;
	*/  width: 100%;
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.draggable {
	position: absolute;
	width: 150px;
	height: 150px;
	/*margin-left: 700px;*/
	/* margin-top: 700px;*/
	padding: 0.5em;
	border: none;
	background: none;
}

.draggable img{
	width: 558px;
	height: auto;
	/*box-shadow: -0.2px 1px 4px 1px rgba(0, 0, 0, 0.4);*/
}

#maps{
		top: 50vw;
	left: 10vw;
	z-index: 40000;
} 


#youtube1{
		top: 100vw;
	left: 40vw;
	z-index: 10000;
} 

#youtube2{
		top: 140vw;
	left: 20vw;
	z-index: 20000;
} 

#youtube3{
		top: 170vw;
	left: 50vw;
	z-index: 30000;
} 

#youtube{
		top: calc(200vh - 400px);
	right: 1200px;
	z-index: 10000;
} 

#jitsi{
	top: calc(200vh - 400px);
	right: 500px;
	z-index: 10000;
}



.boxgallery {
    margin: 0 0.6% 0 0;
    padding: 0;
    width: 24%;
    float:left;
}

.boxgallery img {
    clear: both;
    float: left;
    height: auto;
    margin-bottom: 2%;
    transition: opacity 0.3s ease 0s;
    width: 100%;
}

/*img {
	width:100%;
	height:100%;
	max-width: 100%;
	max-height: 100%;
	display:block;
}*/