@font-face {
	font-family: "Designer";
	src: url('../Fonts/designer/DESIGNER.otf');
}

@font-face {
	font-family: "Gobold";
	src: url('../Fonts/gobold/Gobold Regular.otf');
}

@font-face {
	font-family: "Pricedown";
	src: url('../Fonts/pricedown/pricedown bl.otf');
}

body{
	background-color: #202021;
	font-family: helvetica, sans-serif;
	margin: 0;
	margin-left: 20%;
	margin-right: 20%;
}

.all{

}

.band{
	background-color: #202021;
	margin: 0;
	padding-top: 1vh;
	padding-bottom: 4vh;
	display:grid;
	color: white;
}

h1{
	background-color: #111112;
	text-align: center;
	font-family: Designer, helvetica, Arial;
	font-size: 5vh;
	padding: 1%;
	margin: 0;
	color: white;
}

h2{
	text-align: center;
	font-size: 4vh;
	font-family: Gobold, helvetica, Arial;
	margin: 0;
	padding: 1%;
}

h3{
	color: white;
	text-align: center;
	font-size: 4vh;
	font-family: Gobold, helvetica, Arial;
	margin: 0;
	padding: 1%;
	background-color: #111112;
}

h4{
	color: white;
	text-align: left;
	font-family: Gobold, helvetica, Arial;
	font-size: 5vh;
	margin: 0;
	padding-left: 2%;
	padding-top: 1%;
}

a {
	text-decoration: none;
	list-style-type: none;
}

li a {
	width: 100%;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: black;

	text-align: center;
	font-size: 250%;
	color: white;
	font-family: Gobold, helvetica, Arial;

	transition: transform .2s;

	border-top-style: solid;
	border-color: white;
	border-width: medium;
}

li a:hover {
    background-color: #202020;
	transform: scale(1.1);
	transition: 0.15s ;
}


img {
	width: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}

video {
	width: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}

.video-responsive {
	overflow:hidden;
	padding-bottom:56.125%;
	position:relative;
	height:0;
	margin-left: 2%;
	margin-right: 2%;
}
.video-responsive iframe {
	top:0;
	height:100%;
	width:100%;
	position: absolute;
}

.txtpres{
	font-weight: lighter;
	color: white;
	text-align: justify;
	font-size: 2vh;
	margin: 4%;
}

.prix{
	color: white;
	text-align: center;
	font-size: 3vh;
	font-family: Pricedown, helvetica, Arial;
	margin: 0;
	padding-left: 2%;
	padding-top: 1%;
}

.prixtxt{
	color: white;
	text-align: center;
	font-size: 3vh;
	font-family: Gobold, helvetica, Arial;
	margin: 0;
	padding-left: 2%;
	padding-top: 1%;
}

#desc{
	font-style: italic;
	margin-left: 4%;
}

.reseau{
	width: 30%;
	height: auto;
	margin: auto;
	display: flex;
	justify-content: space-evenly;
}

.column2 {
	float: left;
	width: 25%;
	text-align: center;
	font-size: 2vw;
	margin-top: 1%;
	margin-bottom: 1%;
}

@media (min-aspect-ratio: 20/9) {
	body{
		margin-left: 30%;
		margin-right: 30%;
	}
}

@media (min-aspect-ratio: 1/1) {

	.row {
		margin: 1%;
	}

	.column {
		float: left;
		width: 50%;
	}

	.row:after {
		display: table;
		clear: both;
	}
}

@media (max-aspect-ratio: 1/1) {

	body{
		margin-left: 0;
		margin-right: 0;
	}

	h1{
		font-size: 4vh;
		padding: 2%;
	}

	.row:after {
		display: table;
		clear: both;
	}

	li a {
		padding-top: 2%;
		padding-bottom: 2%;
	}


	h2 {
		font-size: 4vh;
	}

	h4{
		font-size: 3vh;
	}

	.video-responsive {
		overflow:hidden;
		padding-bottom:56.125%;
		position:relative;
		height:0;
		margin: 0;
	}
	.video-responsive iframe {
		top:0;
		height:100%;
		width:100%;
		position: absolute;
	}

	.txtpres{
		font-size: 150%;
	}

	.column2 {
		margin-top: 3%;
		margin-bottom: 3%;
	}

	#reseau{
		width: 60%;
	}
}