:root {
  --purple_color: #8235ff;
  --black_color: #000000;
  --blue_color: #0063ff;
  --width_left:20%;
  --width_right:20%;
}

@font-face {
    font-family: 'AmaticRegular'; /*a name to be used later*/
    src: url('fonts/AmaticSC-Regular.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'FuturaBold'; /*a name to be used later*/
    src: url('fonts/FuturaMaxiCGBoldRegular/FuturaMaxiCGBoldRegular.otf'); /*URL to font*/
}

@font-face {
    font-family: 'RenogareRegular';
    src: url('fonts/renogare-cufonfonts/Renogare-Regular.otf'); /*URL to font*/
}

@font-face {
    font-family: 'AvenirNextBold';
    src: url('fonts/AvenirNext/AvenirNextLTPro-Bold.otf'); /*URL to font*/
}
/******************************************************
/**************		 HEAD and logo 		****************
/*******************************************************/

.logo{
	position:relative;
	width:40%;
	margin-top:10%;
	margin-bottom:10%;
	top:3em;
	left:50%;
	transform:translate(-50%,0);
}

.choix_lang
{
	margin-top:5em;
	margin-bottom:5em;
	font-family:"RenogareRegular";
	text-align:center;
	//visibility:hidden;
}

.lang
{
	font-size:1.5em;
	font-weight:bold;
	
}

.lang_choisie
{
	color:var(--purple_color);
}

.lang > a
{
	text-decoration:none;
	color:black;
}

/******************************************************
/**************			 GRILLE 		****************
/*******************************************************/

.grille
{
	display:grid;
	grid-template-columns: var(--width_left) auto var(--width_right);
	background-color:white;
	//padding:1em 1em 1em 1em;
	//grid-row-gap:1%;
	grid-column-gap:1%;
	
	/*background-image:url("pictures/logo_stakeholder.png");
	background-size:20% auto;
	background-repeat:no-repeat no-repeat;
	background-attachment:fixed;*/
}

.grille	 > div
{
	//background-color:red;
}

.head_colonne
{
	grid-column-start:2;
	grid-column-end:3;
	grid-row-start:1;
	grid-row-end:2;
	
	min-height:100vh;
	
	margin-bottom:-6em;
}


.colonne_centre
{
	grid-columm-start:2;
	grid-column-end:3;
	grid-row-start:2;
	grid-row-end:3;
	
	background-color:white;
	padding:0 1em 0 1em;
}
.colonne_centre_presskit
{
	grid-columm-start:2;
	grid-column-end:3;
	grid-row-start:1;
	grid-row-end:2;
	
	background-color:white;
	padding:0 1em 0 1em;
}

.bord_gauche
{
	grid-columm-start:1;
	grid-column-end:2;
	grid-row-start:1;
	grid-row-end:3;
	
	
}

.bord_droite
{
	grid-columm-start:3;
	grid-column-end:4;
	grid-row-start:1;
	grid-row-end:3;
	
}


/******************************************************
/**************		 h1, p,  ... 		****************
/*******************************************************/

body
{
	margin:0 0 0 0;
	padding : 0 0 0 0;
}


h1
{
	color:var(--black_color);
	//text-transform:uppercase;
	//font-family:"Bahnschrift SemiCondensed";
	font-family:"AmaticRegular";
	font-size:5em;
	text-align:center;
	//margin-top:0em;
	padding-top:1em;
}
h2
{
	color:var(--black_color);
	font-family:"AmaticRegular";
	font-size:2em;
	text-align:center;
	//margin-top:0em;
	//padding-top:1em;
}


p
{
	font-family:"RenogareRegular";
	font-size:1em;
}


/******************************************************
/**************		 BANDEROLE		 		****************
/*******************************************************/

.banderole
{
	opacity:0;
	z-index:10;
	
	background-image:url("pictures/fond_banderole.png");
	background-repeat:x-repeat;
	background-size:100% 100%;
	
	padding-top:0.5em;
	padding-bottom:2em;
	
	//height:500px;
	
	position:fixed;
	width:58%;
	left:50%;
	transform:translate(-50%,0);
	text-align:center;
	
	color:black;
	//font-family:"Bahnschrift SemiCondensed";
	font-family:"AmaticRegular";
	font-size:2em;
	font-weight:bold;
	text-transform:uppercase;
	
	display:grid;
	grid-template-columns:auto auto auto auto ;
	//grid-row-gap:1em;
	//grid-column-gap:2em;
	
}

.banderole > a
{
	text-decoration:none;
	color:black;
}

/******************************************************
/**************		 wandering_within	****************
/*******************************************************/



.grille_wandering_within
{
	display:grid;
	grid-template-columns: 48% 48%;
	//grid-row-gap:1em;
	grid-column-gap:4%;
	margin:7em 0 7em 0;
	//text-align:center;
	
	
}

.lien
{
	color:var(--blue_color);
	text-decoration:none;
}

.texte_wandering_within_1
{
	
	grid-columm-start:1;
	grid-column-end:2;
	grid-row-start:1;
	grid-row-end:2

}

.texte_wandering_within_2
{
	
	grid-columm-start:2;
	grid-column-end:3;
	grid-row-start:2;
	grid-row-end:3;
}

.texte_wandering_within_3
{
	
	grid-columm-start:1;
	grid-column-end:2;
	grid-row-start:3;
	grid-row-end:4

}

.texte_wandering_within_4
{
	
	grid-columm-start:2;
	grid-column-end:3;
	grid-row-start:4;
	grid-row-end:5;
}

.citation_wandering_within{
	
	grid-columm-start:1;
	grid-column-end:2;
	grid-row-start:3;
	grid-row-end:4;
	
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: auto;
	
	//padding-right:1em;
	//margin-top:6em;
	text-align:center;
	
	font-family:"AvenirNextBold";
	font-size:1.2em;
	font-style:italic;
	color:var(--purple_color);
}


.gif_wandering_within_1{
	
	grid-columm-start:2;
	grid-column-end:3;
	grid-row-start:1;
	grid-row-end:2;
}
.gif_wandering_within_2{
	
	grid-columm-start:1;
	grid-column-end:2;
	grid-row-start:2;
	grid-row-end:3;
}
.gif_wandering_within_3{
	
	grid-columm-start:2;
	grid-column-end:3;
	grid-row-start:3;
	grid-row-end:4;
}
.gif_wandering_within_4{
	
	grid-columm-start:1;
	grid-column-end:2;
	grid-row-start:4;
	grid-row-end:5;
}

.gif{
	width:100%;
	vertical-align:top;
}



.video_wandering_within
{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.video_wandering_within > iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wandering_within_images
{
	display:grid;
	grid-template-columns:auto auto auto;
	grid-column-gap:1em;
}

.small_image
{
	width:100%;
	//margin-bottom:1em;
}



/******************************************************
/**************		 TEAM		 		****************
/*******************************************************/


.team > img
{
	display:block;
}


.team_first_image
{
	float:left;
	display:inline;
	text-align:left;
	margin:0em 1em 1em 0;
}

.team_second_image
{
	float:right;
	display:inline;
	text-align:right;
	margin:1em 0 1em 1em;
}

.team_first_paragraph{
	//padding-top:6em;
}

.team_second_paragraph{
	//padding-top:6em;
}

.citation_team{
	
	//padding-right:1em;
	//margin-top:6em;
	
	font-family:"AvenirNextBold";
	font-size:1em;
	font-style:italic;
	color:var(--purple_color);
}

.grille_team{
	
	display:grid;
	grid-template-columns: 48% 48%;
	//grid-template-columns: 27% 42% 27%;
	grid-column-gap:4%;
	margin:0em 0 7em 0;
	//text-align:center;
	
}

.studio_right{
	
	grid-columm-start:2;
	grid-column-end:3;
	grid-row-start:1;
	grid-row-end:2;
	color:var(--blue_color);
}

.studio_left{
	
	grid-columm-start:1;
	grid-column-end:2;
	grid-row-start:1;
	grid-row-end:2;
	
}


/******************************************************
/**************		 CONTACT	 		****************
/*******************************************************/

.contact
{
	//background-color:#d2a5ff;
	//background-color:#7B5FEC;
	background-color:var(--black_color);
	//background-color:var(--blue_color);
	margin-bottom:-1em;
	margin-top:-1em;
	padding-bottom:0;
	
	/*margin-left:-1em;
	margin-right:-1em;*/
	
	min-height:100vh;
}

h1#contact
{
	color:white;
}


.contact_logo
{
	width:25%;
	left:50%;
	transform:translate(-50%, 0);
}

.contact_reseaux_sociaux
{
	width:5%;
	margin-bottom:3em;
	margin-left:0.9em;
	margin-right:0.9em;
}

.contact_image_mail
{
	width:3%;
}

.email
{
	margin-top:2em;
	margin-bottom:3em;
	font-size:1.4em;
	color:white;
	font-family:"AmaticRegular";
	font-size:2em;
}


/******************************************************
/**************		 Press Kit			****************
/*******************************************************/

.titre_categorie
{
	padding-bottom:2em;
	color:var(--blue_color);
}
.texte_categorie
{
	padding-bottom:2em;
}


.contact_reseaux_sociaux_presskit
{
	width:5%;
	margin-left:0.9em;
	margin-right:0.9em;
}


.gameplay_haut{
	grid-row-start:1;
	grid-row-end:2;
}
.gameplay_centre{
	grid-row-start:2;
	grid-row-end:3;
}
.gameplay_bas{
	grid-row-start:3;
	grid-row-end:4;
}
.gameplay_gauche{
	grid-columm-start:1;
	grid-column-end:2;
}
.gameplay_droite{
	grid-columm-start:2;
	grid-column-end:3;
}
/******************************************************
/**************		 divers		 		****************
/*******************************************************/

.centrer
{
	position:relative;
	display:block;
	text-align:center;
}



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

	p{
		padding:0em 2em 0em 2em;
	}
	
	.logo{
		position:relative;
		width:70%;
		margin-top:10%;
		margin-bottom:10%;
		top:3em;
		left:50%;
		transform:translate(-50%, 0);
	}


	.grille
	{
		background-color:white;
		display:block;
	}

	.head_colonne
	{
		
	}


	.colonne_centre
	{
		padding:0 0 0 0;
	}

	.bord_gauche
	{
		
		display:none;
	}

	.bord_droite
	{
		
		display:none;
	}



	.banderole
	{
		opacity:0;
		z-index:10;
		
		background-image:url("pictures/fond_banderole.png");
		background-repeat:x-repeat;
		background-size:100% 100%;
		
		padding-top:0.5em;
		padding-bottom:2em;
		
		//height:500px;
		
		position:fixed;
		width:100%;
		left:50%;
		transform:translate(-50%, 0);
		text-align:center;
		
		color:black;
		//font-family:"Bahnschrift SemiCondensed";
		font-family:"FuturaBold";
		font-size:1em;
		text-transform:uppercase;
		
		display:grid;
		grid-template-columns:25% 25% 25% 25% ;
		
	}
 

	.grille_wandering_within
	{
		display:block;
		margin-top:2em;
		
	}
	
	
	.grille_team{
		display:block;
	}
		
	.grille_jams
	{
		display:block;
	}
	
	.grille_jams > p{
		margin-bottom:10em;
	}
	
	.play
	{
		left:+0.5em;
	}
	
	.contact_reseaux_sociaux{
		width:12%;
	}
	
	.team_first_paragraph{
		padding-top:0em;
	}
	
	.team_second_paragraph{
		padding-top:0em;
	}
	
		
	.center_team_bottom{
		margin-bottom:2em;
		
	}
	
		
	.contact_logo
	{
		width:25%;
		left:50%;
		transform:translate(-50%, 0);
	}
  
}