/*Theme Name: Metaloïd
Version: 1.5
Description: Theme developed for the metal music festival Metaloïd
Author: Julien Courrejou
*/


/*********************************
*   0. CSS reset                 *
*********************************/

html,
body 
{
	border: none;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td 
{
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after 
{
	content: "";
}

iframe
{
	border: 0px;
}

/*********************************
*   1. Main Properties           *
*********************************/

/*Load the fonts*/
@font-face
{
	font-family: 'bank';
	src: url('font/bankgt.ttf') format("truetype");
}

@font-face
{
	font-family: 'gothic';
	src: url('font/gothic.ttf') format("truetype");
}

/*Main settings*/
a
{
	text-decoration: none;
}

.standard a
{
	color:#ab652f;
}

a:visited
{
	color:#965624;
}

body
{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-image: url('img/fond.png');
	background-color: black;
	background-attachment: fixed;
	overflow-x: hidden;
}

h1,h2,h3,h4
{
	font-family: 'bank';
}

p
{
	font-family: 'gothic';
}

/*images settings*/
img
{
	width: 100%;
}

.to_top
{
	object-position: top;
}

.to_bottom
{
	object-position: bottom;
}

.to_center
{
	object-position: center;
}


/*Header*/
header
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	line-height: 200px;
	background-color: #1A1617;
	align-items: center;
	line-height: normal;
	height: 200px;
}

#topbar
{
	display: flex;
	justify-content: right;
}

#logo
{
	display: inherit;
	width: 150px;
	margin-top: 8px;
	margin-left: auto;
	margin-right: auto;
}

header a
{
	flex-basis: 33%;
}

header:not(.home) a
{
	flex-basis: 0;
}

.home a
{
	flex-basis: unset;
}

header #logo
{
	margin-top: 0;
	margin-right: 20px;
}

.bloc-logo
{
	height: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h1
{
	text-align: center;
	font-size: 5rem;
	color: #E9E2E4;
}

header h1
{
	margin: auto 0;
	padding-bottom: 42px;
	font-size: 4rem;
}
header:hover #slogan
{
	color: #E9E2E4;
	transition: all 2s ease-in;
}

#slogan
{
	margin-top: 10px;
	font-family: 'gothic';
	font-weight: bold;
	font-size: 1.2rem;
	color: #7d797a;
	transition: color 2s ease-out;
}

#social
{
	display: flex;
	justify-content: right;
	height: 65px;
	padding-top: 20px;
	background-color: #1A1617;
}

#social a:hover
{
	filter: brightness(130%);
	transition: all 0.2s ease-out;
}

#social img
{
	width: 48px;
	margin: 0 30px;
}

#ticket
{
	box-shadow: 0px 0px 25px #61271d;
	border-style: solid;
	border-color: #1A1617;
	border-radius: 10px;
	filter: brightness(150%);
}

/*Navigation menu */
nav
{
	height: 55px;
	display: flex;
	flex-grow:0.3;
	justify-content: space-between;
	padding-left: 1%;
	padding-right: 1%;
	border-color: #1a1617;
	border-width: 0px;
	border-bottom-width: 15px;
	border-top-width: 15px;
	border-style: solid;
	background-color: #000;
}

nav:not(.home)
{
	margin-left: auto;
}

#menu-button
{
	display: none;
}

#menu-slide
{
	display: flex;
	justify-content: space-between;
	width: 100%;
	border-color: #1a1617;
	border-width: 0px;
	background-color: #000;
}

.menu-item /*all menu items*/
{
	height: 45px;
	margin-top: 10px;
	margin-right: 10%;
	padding-top: 5px;
	font-family: 'gothic';
	font-size: 1.4rem;
	font-weight: bold;
}

.menu-item:last-child
{
	margin-right: 0;
}

#menu-active
{
	background-color:#3d1710;
	height: 40px;
	padding-left: 20px;
	padding-right: 20px;
	pointer-events: none;
}

#menu-active a
{
	color: #E9E2E4;
}

.menu-item :hover
{
	color: #E9E2E4;
	padding: 5px 20px 5px 20px;
	background-color:#62281d;
	transition: all 0.2s ease-in;
}

.menu-item>a
{	
	color: #322e2f;
}

/*Footer*/

footer
{
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: auto;
	background-color: #1A1617;
	color: #E9E2E4;
}

footer a
{
	padding-bottom: 4px;
	font-family: 'gothic';
	font-size: 1.4rem;
	color: #ab652f;
	background-image: linear-gradient(to right, #4c2c13 ,#ab652f);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: center bottom 0px;
	transition: background-size 0.4s, color 0.4s ease-out;
}

footer a:visited
{
	color: #965624;
	transition: background-size 0.4s, color 0.4s ease-out;
}

footer a:hover
{
	background-size: 100% 3px;
	outline: 0;
	color: #965624;
	transition: background-size 0.4s, color 0.4s ease-in;
}

footer h3
{
	margin-left: 10%;
	margin-right: 2%;
	font-family: 'gothic';
	font-size: 1.1em;
}
footer p
{
	margin-right: 10%;
}
/*********************************
*   2. Index page                *
*********************************/
#intro
{
	width: 100%;
	height: auto;
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

#intro iframe
{
	box-shadow: 0px 0px 20px #61271d;
}

#annonce
{
	width: 50%;
	height: auto;
	margin-top: 20px;
	justify-content: center;
	background-color: #1A1617;
	box-shadow: 0px 0px 20px #61271d;
}

#annonce p
{
	font-size: 2rem;
	text-align: center;
	color: #E9E2E4;
}

#buttonBuy
{
	display: inline-block;
	height:40px;
	padding: 15px 40px 7px 40px;
	background-color: #1A1617;
	border-color: #ab652f;
	border-radius:20px;
	border-width: 1px;
	border-style: solid;
	box-shadow: 0px 0px 40px #61271d;
	font-family: "bank";
	font-size: 1.8rem;	
	color: #ab652f;
}

#buttonBuy:hover
{
	filter: brightness(140%);
	transition: all 0.15s ease-in;
	
}

section
{
	margin-bottom: 20px;
}

#event
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	margin-top: 20px;
}

.blocVideo
{
	width: 100%;
	background-color:#322E2F;
}

.videoEvent
{
	width: 1120px;
	height: 630px;
}

#event24 .videoEvent
{
	box-shadow: 0px 0px 20px #6C130D;
}

#event img
{
	max-height: 930px;
	max-width: 662px;
	min-width: 300px;
	height: auto;
	border-style: solid;
	border-color: #1a1617;
	border-width: 1px;
	box-shadow: 0px 0px 20px #61271d;
}

#event a
{
	margin-left: auto;
	margin-right: auto;
}



/*********************************
*   3. Event page         *
*********************************/
.event>#intro
{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding-bottom: 20px;
	background-color: #322E2F;
}

.event>#intro h2
{
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 2rem;
	color: #E9E2E4;
}

.event>#intro p
{
	font-size: 1.3rem;
	color: #E9E2E4;
}

.event section
{
	width:96%;
	margin-left: auto;
	margin-right: auto;
}

.event section>div
{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
}

.event section h2
{
	margin-top: 20px;
	padding: 0 20px;
	font-size: 2rem;
	color: #E9E2E4;
	background-color: #322E2F;
}
	
.event .affiche
{
	width: 40%;
	margin: 30px 0 30px 0;
}

.event #event19_1 .affiche
{
	box-shadow: 0px 0px 20px #813E83;
}

.event #event19_2 .affiche
{
	box-shadow: 0px 0px 20px #E1342B;
}

.event #event22 .affiche
{
	box-shadow: 0px 0px 20px #FFF400;
}

.event #event23 .affiche
{
	box-shadow: 0px 0px 30px #7F88A1;
}

.event #event24 .affiche
{
	box-shadow: 0px 0px 30px #6C130D;
}

.event #event25 .affiche
{
	box-shadow: 0px 0px 30px #35855E;
}

.event .allVideo
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	
}

.event .blocVideo
{
	width: 30%;
	padding-top:20px;
	margin-bottom: 40px;
}

.event #event19_2 .blocVideo
{
	box-shadow: 0px 0px 20px #E1342B;
}

.event #event22 .blocVideo
{
	box-shadow: 0px 0px 20px #FFF400;
}

.event #event23 .blocVideo
{
	box-shadow: 0px 0px 30px #7F88A1;
}

.event .blocVideo h3
{
	margin-bottom: 10px;
	padding: 0 20px;
	color: #E9E2E4;
	font-size: 2.1rem;
	text-align: center;
}

.event .videoContent
{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

.event .videoContent p
{
	width: 85%;
	margin-left: 20px;
	margin-bottom: 20px;
	color:#E9E2E4;
}

.event .videoEvent
{
	flex-shrink:0;
	margin: 10px 20px 20px 30px;
	width: 90%;
	height: 330px;
}
.event #event22 .videoEvent
{
	box-shadow: 0px 0px 20px #FFF400;
}

.event #event23 .videoEvent
{
	box-shadow: 0px 0px 20px #7F88A1;
}

.event #event22 allVideo img /*when no video available*/
{
	box-shadow: 0px 0px 20px #FFF400;
	width: 90%;
	max-width: initial;
}

.event #event19_2 allVideo img /*when no video available*/
{
	box-shadow: 0px 0px 20px #FFF400;
	width: 90%;
	max-width: initial;
}

/*********************************
*   4. Association page          *
*********************************/
.standard
{
	flex-grow: 1;
	margin: 26px 3%;
	padding: 10px 1% 10px 1%;
	background-color:#322E2F;
	color: #E9E2E4;
}

.standard h3
{
	font-family: 'gothic';
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-size: 1.5rem;
}


/*********************************
*   5. FAQ page                  *
*********************************/
.standard h2
{
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-size: 2rem;
}
.standard ul
{
	margin: 2%;
}

.standard ul li
{
	margin-top: 20px;
	font-family: gothic;
}

.faq-question
{
	font-size: 1.4rem;
}

.faq-answer a
{
	color: #ab652f;
}

#map
{
	width: 50%;
	height: auto;
	margin-left: 25%;
	box-shadow: 0px 0px 15px #61271d;
}

/*********************************
*   6. Legal-Contact pages       *
*********************************/
#mentions a
{
	color: #ab652f;
}


/*********************************
*   7. 404 page                 *
*********************************/
.erreur404 a
{
	color: #ab652f;

}

/*********************************
*   8. Sponsor page              *
*********************************/
.support-question
{
	font-size: 1.4rem;
}

.support-answer a
{
	color: #ab652f;
}

#solution
{
	font-size: 1.3rem;
}
.logo img
{
	max-width: 200px;
	height: 15%;
}

.logo-list
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;	
	margin: 50px 10% 30px 10%;

}

.logo-list a
{
	width: 25%;
	margin-bottom: 50px;
}

#thanks
{
	font-family: gothic;
	font-size: 1.5rem;
	margin-bottom: 100px;
	text-align: center;
}

#thanksto p
{
	margin-bottom: 10px;
}

/*********************************
*   9. Responsive               *
*********************************/

@media (max-device-width: 1380px) /*Smaller screen*/
{
	.menu-item
	{
		margin-right: 0;
	}
	
	iframe
	{
		width:1100px;
	}
	
	.videoEvent
	{
		width:1000px;
	}
	
	.event2022 > #intro h2
	{
		margin: 20px 20px 10px 20px;
	}
	
	.event2022 > #intro p
	{
		margin: 20px 20px 10px 20px;
	}
	
	.event2022 .videoToRight p
	{
		width: 80%;
	}
	
	.event2022 .videoToLeft p
	{
		width: 80%;
	}
}
@media (max-device-width: 1300px) /*Small screen*/
{
	iframe
	{
		width:1000px;
	}
	
	nav
	{
		width: 66%;
	}
	header
	{
		justify-content: center;
	}
	
	header a
	{
		width: 28%;
	}
	
	.home a
	{
		width: 33%;
	}
	
	.bloc-logo
	{
		margin-right: auto;
	}

	header:not(.home) a
	{
	flex-basis: unset;
	margin-right: auto;
	}

	header #logo 
	{
		margin-right:auto;
	}
	
	.event .blocVideo
	{
		width: 45%;
	}
	
	.videoEvent
	{
		width:96%;
		margin: 0 10px 0 20px;
		height: 400px;
	}
	
	.event .affiche
	{
		width: 60%;
	}
	
	.logo-list a
	{
		width: 30%;
	}
}

@media (max-device-width: 1024px) /*Horizontal tablet*/
{
	iframe
	{
		width:760px;
	}
	
	header
	{
		justify-content: space-around;
	}
	
	header a
	{
		width: 36%;
	}
	
	header h1
	{
		font-size: 3.5rem;
	}
	
	nav
	{
		height: 50px;
		width: 100%;
		justify-content: flex-end;
		padding: 0;
		background-color: transparent;
		border-style: solid;
		border-width: 0;
		border-color: #322e2f;
	}
	
	#topbar
	{
		width: 100%;
		flex-direction: column-reverse;
		align-items: end;
		margin-bottom: 5px;
	}
	
	#social 
	{
		justify-content: space-around;
		align-items: center;
		margin-top: 2px;
		margin-bottom: 2px;
		padding-top: 0;
		width: 56%;
	}
	
	#menu-button 
	{
		display: flex;
		justify-content: center;
		align-items: center;
		align-self: center;
		height: 50px;
		border-width: 2px;
		border-radius: 8px;
		border-color: #000;
		border-style: solid;
		width: 20%;
		font-family: bank;
		font-size: 2rem;
		color:#e9e2e4;
		background-color:#322e2f;
	}

	#menu-button img 
	{
		height: 100%;
		width: auto;
	}

	#menu-slide
	{
		width: 84%;
		flex-grow: 1;
		justify-content: space-around;
		position: absolute;
		right: -900px;
		z-index: 0;
		background-color: #000;
		margin-left: 10px;
		display:none;
	}
	
	.menu-item
	{
		margin-top: 5px;
	}

	.event .affiche
	{
		width: 75%;
	}
	
	.event-background 
	{
		flex-wrap: wrap;
	}

	.event .blocVideo
	{
		width: 90%;
	}
	
	.event .videoEvent
	{
		width: 75%;
	}
	
	.event #event img
	{
		width: 75%;
	}
	
	#map
	{
		width: 70%;
		margin-left: 15%;
	}
	
	footer a
	{
		font-size: 1.1rem;
	}
	
	
}
@media (max-device-width: 768px) /*Vertical tablet*/
{
	header
	{
		height: 150px;
	}
	
	#intro
	{
		width: 96%;
		margin-left: 2%;
	}
	
	iframe
	{
		width:100%;
	}
	
	#logo
	{
		display:none;
	}
	
	.home a
	{
		display: none;
	}
	
	header a
	{
		display: none;
	}
	
	.home .bloc-logo
	{
		margin-right: 0;
	}
	
	header .bloc-logo
	{
		margin-right: 0;
	}
	
	nav
	{
		height: 50px;
	}
	
	#menu-slide
	{
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		margin-left:0;
	}
	
	.menu-item
	{
		height: 100px;
		padding-top:0;
	}
	
	.menu-item a
	{
		display: inline-block;
		height: 60px;
		padding-top: 30px;
	}
	
	#menu-active
	{
		height: 50px;
	}

	#menu-active a
	{
		padding: 0;
	}
	
	.menu-item :hover
	{
		padding-top: 30px;
	}
	
	#menu-active
	{
		padding-left: 1%;
		padding-right: 1%;
	}	
	
	#menu-button 
	{
		width: 35%;
	}
	
	#social
	{
		width: 80%;
	}
	
	section
	{
		width: 94%;
		margin-left: 2%;
	}
	
	.event > #intro
	{
		width: 95%;
		margin: 0 2%;
		padding: 0 1%;
	}
	
	.event .affiche
	{
		width: 90%;
	}
	
	#event img
	{
		max-width: auto;
	}
		
	.event .videoEvent
	{
		width: 96%;
	}
	
	#map
	{
		width: 90%;
		margin-left: 5%;
	}

	.logo-list a
	{
		width: 46%;
	}
	
	footer
	{
		height: auto;
		min-height: 60px;
	}
	
	footer p
	{
		margin-right:5%
	}
}

@media (max-device-width: 600px) /*Phone*/
{
	header
	{
		height: 250px;
	}
	
	.home
	{
		height: 150px;
	}
	
	nav.home
	{
		height: 50px;
		margin-bottom: 4px;
		transition: height 0.5s ease-out;
	}
	
	#menu-slide
	{
		height: 100px;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-left: 2px;
	}
	
	.menu-item a
	{
		font-size: 1.1rem;
	}
	
	.logo-list a
	{
		width: 100%;
		text-align: center;
	}
	
	.event .videoContent img
	{
		height: auto;
	}
}

@media (max-device-width: 500px) /*Phone*/
{
	iframe
	{
		width:100%;
	}
	
	header 
	{
		height: 250px;
	}
	
	.home
	{
		height: 150px;
	}
	
	#logo
	{
		display:none;
	}
	
	nav
	{
		height: 50px;
	}
	
	#menu-slide
	{
		height: 200px;
	}
	
	.menu-item
	{
		height: 100px;
		width: 36%;
	}
	
	#event img
	{
		max-width: auto;
	}
	
	h1
	{
		font-size: 3rem;
	}
	
	#intro
	{
		width:96%;
	}
	
	#social
	{
		width: 100%;
		justify-content: center;
	}
	
	#social img
	{
		margin: 0 15px;
	}
	
	.event .videoEvent
	{
		width: 94%;
	}
	
	footer
	{
		height: auto;
	}
	
	footer a
	{
		font-size: 1.1rem;
	}
}