@font-face {
    font-family: 'mavislight';
    src: url('mavis-light-webfont.woff2') format('woff2'),
         url('mavis-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*
Couleur à remplacer : #E60065
Windows : Ctrl+H
Mac : Cmd+Shift+F
*/
#mj-w-overlay {z-index: 10000;}
body {font-size: 20px; margin: 0 auto; font-family: 'Calibri', sans-serif; height: 100vh; max-height: 100vh; color: #333; height: 85vh;}
#main {height: 100%;}
div.mod-languages ul {
	margin: 0;
	padding: 0;
	list-style:none;
}
div.mod-languages li {
	margin-left: 5px;
	margin-right: 5px;
}

div.mod-languages ul.lang-inline li {
	display:inline;
}

div.mod-languages ul.lang-block li {
	display:block;
}

div.mod-languages img {
	border:none;
}

div.mod-languages a {
	text-decoration: none;
}
#bgr {background-color: #F5F5F5; display: flex; justify-content: center; align-items: center; height: 100%;}
#content {position: relative; display: flex; justify-content: center;}
#texte {padding-right: 4rem;}
#texte h1 {font-family: 'mavislight', sans-serif; font-size: 17.5rem; margin-top: 0; margin-bottom: 2.5rem; line-height: 0.6; position: relative;}
#texte h2 {font-size: 2rem; font-weight: 700; margin-top: 0; margin-bottom: 1.5rem;}
#texte p {margin-bottom: 1.75rem;}
#texte .btn,
#texte .btn:visited {padding: 0.5rem 2.25rem; border: 4px solid #E60065; color: #333; text-decoration: none; display: inline-block; background-color: transparent; transition: all 0.15s ease-out;}
#texte .btn:hover {background-color: #E60065; color: white;}
.buttons-404 {display: flex; align-items: center;}
.buttons-404 form {margin: 0 0 0 1em;}

#image {position: relative;}
#cable {position: absolute; top: 8vw; left: 69%; width: 26vw; z-index: 1;}
#cable img {width: 100%;}
#cosmonaute, #tache {position: absolute; top: 45%; left: 0; transform: translate(0, -50%); width: 100%; z-index: 2;}
#tache {position: relative; z-index: 0;}
#cosmonaute img, #tache img {width: 100%;}
#elem-cosmos {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#elem-cosmos .cls-1 {fill: #E60065;}
#elem-cosmos .cls-2 {fill: #333;}

@media (max-width: 1600px) {
	#cable {top: 9.5vw; width: 32vw;}
}

@media (max-width: 1350px) {
	#content {padding: 0 2rem;}
	#cable {top: 12vw; width: 38vw;}
}

@media (max-width: 1200px) {
	#content {padding: 0 3rem;}
	#cable {top: 13vw; left: 73%; width: 42vw;}
}

@media (max-width: 992px) {
	body {height: auto; font-size: 16px; max-height: none;}
	#content {flex-direction: column; align-items: center; padding: 5rem 3rem;}
	#texte {padding-right: 0; margin-bottom: 4rem; display: flex; flex-direction: column; align-items: center;}
	#texte * {text-align: center;}
	#cable {display: none;}
	#cosmonaute, #tache {top: 0; left: 0; transform: translate(0,0);}
}

@media (max-width: 767px) {
	#content {padding: 3rem 2rem;}
	#texte h1 {font-size: 12.5rem;}
	#texte h2 {font-size: 1.5rem;}
}