@charset "utf-8";
/* CSS Document */
@font-face{font-family: "Chernobyl" ;src: url("Docu/Chernobyl.otf")}
body,td,th,a {font-family: "Chernobyl";}
body {
	margin: 0px;
	top: 0px; 
	background-size: contain cover; 
	background-repeat: repeat-y; 
	background-position: center top;  
	background-attachment: scroll; 
	background-image: url(Exports/SiteRMM%20_01.Accueil_Fond.png);
	position: fixed;
	width: 100%; 
	height: 100%;
}
header {
	z-index: 4;
    position: absolute;
    top: 0px;
	right: 0px;
}
.bandeau{
    height: 450px;
	width: 200%;
    background-color: #00171F;
    top: -50px;
	right: -50px;
	position: fixed;
	transform: rotate(-10deg);
}
h1 {
    color: #FFC869;
    font-size: 150px;
    position: fixed;
    bottom: -120px;
    left: 50%;
    margin-left: -10px;
}
h2 {
    color: #FFC869;
    font-size: 50px;
    position: fixed;
    bottom: 95px;
    left: 50%;
    margin-left: 180px;
}
.logoRMM{
    height: 200px;
    width: 200px;
    position: fixed;
    bottom: 150px;
    left: 50%;
    margin-left: -15px;
    transform: rotate(10deg);
    background-image: url("Logos/1x/Plan de travail 1 copie 2.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.rezo a,.rezo img{
    display: block;
    width: 100%;
    height: 100%;
}
.rezo{
    height: 70px;
    width: 70px;
    position: fixed;
    left: 50%;
    transform: rotate(10deg);
    background-position: center center;
    background-size: contain;
	overflow: hidden;
}
.rezotwitch{
    bottom: 50px;
    margin-left: 1105px;
    background-image: url(Exports/SiteRMM_Twitch.png);
}
.rezotwitch:hover{
	background-image: url(Exports/SiteRMM_Twitch.gif);
}
.rezotwitter{
    bottom: 110px;
    margin-left: 1165px;
    background-image: url("Exports/SiteRMM_Twitter.png");
}
.rezotwitter:hover{
	background-image: url("Exports/SiteRMM_Twitter.gif");
}
.rezoyt{
    bottom: 17px;
    margin-left: 1177px;
    background-image: url("Exports/SiteRMM_Youtube.png");
}
.rezoyt:hover{
    background-image: url("Exports/SiteRMM_Youtube.gif");
}
.rezoinsta{
    bottom: 80px;
    margin-left: 1228px;
    background-image: url("Exports/SiteRMM_Insta.png");
}
.rezoinsta:hover{
    background-image: url("Exports/SiteRMM_Insta.gif");
}
main{
	z-index: 1;
	position: absolute;
	width: 65%;
	height: 65%;
	margin-bottom: -370px;
    bottom: 50%;
    left: 5%;
}
.menu{
	z-index: 1;
	position: absolute;
	margin-left: -120px;
	width: 577px;
	height: 100px;
	transform: rotate(-45deg);
}
.menu:hover{
	mix-blend-mode: multiply;
}
.em{
	left: 5%;
	bottom: 150px;
}
.em:hover{background-image: url("Exports/SiteRMM_Accueil_MenuEm.gif")}
.dis{
	left: 35%;
	bottom: 165px;
}
.dis:hover{background-image: url("Exports/SiteRMM_Accueil_MenuDis.gif")}
.ex{
	left: 65%;
	bottom: 180px;
}
.ex:hover{background-image: url("Exports/SiteRMM_Accueil_MenuEx.gif")}
.pres{
	left: 95%;
	bottom: 195px;
}
.pres:hover{background-image: url("Exports/SiteRMM_Accueil_MenuPres.gif")}

@media (max-width:1350px){
	.bandeau{
   		height: 340px;
	}
	h1{
		font-size: 120px;
    	bottom: -95px;
    	margin-left: -20px;
	}
	h2{
		font-size: 40px;
    	bottom: 75px;
    	margin-left: 135px;
	}
	.logoRMM{
    	height: 150px;
   		width: 150px;
    	bottom: 120px;
	}
	.rezo{
		height: 50px;
		width: 50px;
    	left: 100%;
	}
	.rezotwitch{
    	bottom: -60px;
    	margin-left: -140px;
    	background-image: url("Exports/SiteRMM_Twitch - Copie.png");
	}
	.rezotwitch:hover{
		background-image: url("Exports/SiteRMM_Twitch - Copie.gif");
	}
	.rezotwitter{
    	bottom: -120px;
    	margin-left: -150px;
    	background-image: url("Exports/SiteRMM_Twitter - Copie.png");
	}
	.rezotwitter:hover{
		background-image: url("Exports/SiteRMM_Twitter - Copie.gif");
	}
	.rezoyt{
    	bottom: -180px;
    	margin-left: -160px;
    	background-image: url("Exports/SiteRMM_Youtube - Copie.png");
	}
	.rezoyt:hover{
		background-image: url("Exports/SiteRMM_Youtube - Copie.gif");
	}
	.rezoinsta{
    	bottom: -240px;
    	margin-left: -170px;
    	background-image: url("Exports/SiteRMM_Insta - Copie.png");
	}
	.rezoinsta:hover{
		background-image: url("Exports/SiteRMM_Insta - Copie.gif");
	}
	main{
		height: 60%;
		margin-bottom: -150px;
    	bottom: 27%;
	}
	.menu{
		margin-left: -180px;
		transform: rotate(-10deg);
	}
	.em{
		left: 20%;
		bottom: 70%;
	}
	.dis{
		left: 40%;
		bottom: 50%;
	}
	.ex{
		left: 60%;
		bottom: 30%;
	}
	.pres{
		left: 80%;
		bottom: 10%;
	}
}

@media (max-width:1000px){
	.bandeau{
   		height: 250px;
	}
	h1{
		font-size: 66px;
    	bottom: -50px;
    	margin-left: -40px;
	}
	h2{
		font-size: 22px;
    	bottom: 45px;
    	margin-left: 75px;
	}
	.logoRMM{
    	height: 120px;
   		width: 120px;
    	bottom: 65px;
    	margin-left: -40px;
	}
	.rezo{
    	bottom: -60px;
    	left: 75%;
	}
	.rezotwitch{
    	margin-left: -200px;
	}
	.rezotwitter{
    	margin-left: -140px;
	}
	.rezoyt{
    	margin-left: -80px;
	}
	.rezoinsta{
    	margin-left: -20px;
	}
	main{
		width: 90%;
		height: 55%;
		margin-bottom: -200px;
    	bottom: 58%;
    	left: 5%;
	}
	.menu{
		transform: scale(80%) rotate(-10deg);
		margin-left: -240px;
		left: 40%;
	}
	.em{
		bottom: 40%;
	}
	.dis{
		bottom: 15%;
	}
	.ex{
		bottom: -10%;
	}
	.pres{
		bottom: -35%;
	}
}

@media (max-width:600px){
	.bandeau{
   		height: 170px;
	}
	h1{
		font-size: 38px;
    	bottom: -28px;
    	margin-left: 60px;
	}
	h2{
		font-size: 18px;
    	bottom: 21px;
    	margin-left: 65px;
	}
	.logoRMM{
    	height: 100px;
   		width: 100px;
    	bottom: 8px;
    	margin-left: -45px;
	}
	.menu{
		transform: scale(70%) rotate(-10deg);
	}
	.em{
		bottom: 60%;
	}
	.dis{
		bottom: 30%;
	}
	.ex{
		bottom: 0%;
	}
	.pres{
		bottom: -30%;
	}
}