@font-face {

    font-family: 'relativebook_italic';

    src: url('relative-italic-webfont.woff2') format('woff2'),

         url('relative-italic-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}



@font-face {

  font-family: 'Relative-Book';

  src: url('Relative-Book.eot?#iefix') format('embedded-opentype'),  url('Relative-Book.otf')  format('opentype'),

	     url('Relative-Book.woff') format('woff'), url('Relative-Book.ttf')  format('truetype'), url('Relative-Book.svg#Relative-Book') format('svg');

  font-weight: normal;

  font-style: normal;

}



@font-face {

    font-family: 'relative10_pitch';

    src: url('relative-10pitch-webfont.woff2') format('woff2'),

         url('relative-10pitch-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'relativemedium';

    src: url('relative-medium-webfont.woff2') format('woff2'),

         url('relative-medium-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'relativebold';

    src: url('relative-bold-webfont.woff2') format('woff2'),

         url('relative-bold-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}



* { box-sizing: border-box; }



/* inherit height from window */

html, body { margin:0;height: 100%;}



i {

	font-family: 'relativebook_italic';

	}

strong {

	font-family: 'relativemedium';

	}

body {

	 text-rendering: optimizeLegibility;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

  font-family: sans-serif;

  hyphens: auto;

  quotes:"\AB\A0" "\A0\BB" "\201C\A0" "\A0\201D";

}

#gallery{

	display:none;

}

#intro{

	height:100%;

	width:100%;

	position:absolute;

	z-index:200;

}

.topleft {

	position:absolute;

	top:20px;

	left:50px;

	height:30%;

	width:35%;

	fill: green;

	background-image:url('logo-texte-blanc-home.svg');

	background-repeat: no-repeat;

	background-size:contain;

}

.botleft {

	position:absolute;

	bottom:25px;

	left:50px;

	height:90px;

	width:252px;

	background-image:url('baseline-blanc-home.svg');

	background-repeat: no-repeat;

	background-size:cover;

}

.botright {

	position:absolute;

	bottom:25px;

	right:36px;

	height:140px;

	width:140px;

	background-image:url('logo-picto-blanc-home.svg');

	background-repeat: no-repeat;

	background-size:cover;

}

.botright2 {

	position:absolute;

	bottom:5px;

	right:48px;

	height:20%;

	width:15%;

	background-image:url('logo-picto-noir-grand.svg');

	background-repeat: no-repeat;

	background-size:contain;

}

#info {

	cursor:url(ouvrir.svg) 185 15, default;

	position:fixed;

    height:100%;

    background:#c4c4c4;

    width:780px;

    right:-740px;

	z-index:30;

	line-height:18px;

	column-gap : 3rem;

	z-index:104;

	outline:none;

}

#info a{

	text-decoration:none;

	color:#000;

	z-index:102;

}

.indetinfo {

	font-family: 'relativemedium';

	float:left;

	font-size:20px;

	margin-left:62px;

	margin-top: 20px;

	width:35%;

	line-height:24px;

}

.indetinfo2 {

	font-family: 'relativemedium';

	font-size:13px;

	margin-left:462px;

	margin-top: 22px;

	width:35%;

	line-height:16px;

}

h5 {

	margin-left:15px;

	margin-top: -40px;

	font-family: 'relativemedium';

	font-size:20px;

	font-weight: normal;

	margin-bottom: -50px;

}

#pres2 {

	cursor:pointer;

	display:none;

	width:520px;

	height:100%;

	position:fixed;

	margin-left:0px;

	z-index:10;

}

.hidden{

	display:none;

}

#pres2 p{

	text-align:left;

	padding-top:60px;

	padding-right:50px;

	padding-left:50px;

	font-family: 'Relative-Book';

	font-size:28px;

	line-height:32px;

}

#bandeau{

	background:white;

	box-sizing:border-box;

	height:60px;

	line-height:20px;

	font-size:20px;

	z-index:20;

	-moz-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 5px 5px 5px white;

-webkit-box-shadow: 5px 5px 5px white;

box-shadow: 5px 10px 20px white;

}

.left{

	font-family: 'relativemedium';

position:absolute;

padding:20px;

padding-left:50px;

font-size: 20px;

z-index:101;

}

.lefthack{

	position:absolute;

	width:220px;

	height:85px;

	display:none;

}

.Prat{

	margin-right:15px;

	margin-left:15px;

	cursor:pointer;

	letter-spacing: 0.5px;

	z-index:101;

}

.Pres{

	cursor:pointer;

	letter-spacing: 0.5px;

	z-index:101;

}

.right {

	text-align:right;

	position:absolute;

	right:0;

	padding:20px;

	padding-right:50px;

	width:auto;

	max-width:65%;

	z-index: 100;

}

.rightPres {

	display:none;

	font-family: 'relative10_pitch';

	font-size:10px;

	text-transform: uppercase;

	position:absolute;

	text-align:left;

	right:0;

	padding:20px;

	padding-right:70px;

	z-index:20;

}

.open{

	color:#000;

	cursor:pointer;

	letter-spacing: 0.6px;

	margin-bottom:-6px;

	padding-top: -10px;

}

.close {

	cursor:pointer;

	fill:#000;

	color:#000;

	letter-spacing: 0.6px;

	display:none;

}

.open2{

	display:none;

	cursor:pointer;

	letter-spacing: 0.6px;

	margin-bottom:-6px;

}

.close2 {

	fill:#000;

	cursor:pointer;

	letter-spacing: 0.6px;

	display:none;

	color:#000;

}

.middle {

	display:none;

	text-align:center;

	padding:20px;

	font-family: 'relative10_pitch';

	font-size: 15px;

	position:absolute;

	width:100%;

	padding-left:30%;

}

.Val{

	cursor:pointer;

	font-size:20px;

	color:#c4c4c4;

}

.Def{

	cursor:pointer;

	margin-right:15px;

	font-size:20px;

}

.button {

	font-family: 'relativemedium';

    border: none;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 13px;

	margin-right:10px;

	cursor:pointer;

	letter-spacing: 0.5px;

	height:24px;

}

.bordure {

	border-bottom:2px solid #000;

}

.bordure6 {

	border-bottom:2px solid #000;

}

.bordure7 {

	border-bottom:2px solid #c4c4c4;

}

.bordure2 {

	border-bottom:2px solid;

}

.bordure3 {

	border-bottom:2px solid;

}

.bordure4 {

	border-bottom:2px solid;

}

.bordure5 {

	border-bottom:2px solid;

}

.b1 {

	border-bottom:2px solid #e3132c;

}

.b3 {

	border-bottom:2px solid #060e9f;

}

.b2 {

	border-bottom:2px solid #00c4b3;

}

.b4 {

	border-bottom:2px solid #e8b143;

}

.b5 {

	border-bottom:2px solid #8531a7;

}

#Enpratique{

	

}



#Presentation {

	position:relative;

	display: none;

	margin:0 auto;

	width:600px;

	text-align:center;

	left:15%;

	height:100%;

}

#Presentation h1 {

	font-family: 'relativemedium';

	text-transform:uppercase;

	font-size:36px;

	margin-bottom:15px;

	letter-spacing: 1.5px;

	line-height:36px;

}

.textexplicatif {

	font-family: 'Relative-Book';

	font-size:28px;

	line-height:32px;

	color:#b1b1b1;

	margin-bottom:15px;

}



.textderouler {

	font-family: 'Relative-Book';

	font-size:20px;

	line-height:24px;

	text-align:left;

	display:none;

	color:#000;

}

.textderouler2 {

	font-family: 'Relative-Book';

	font-size:20px;

	line-height:24px;

	text-align:left;

	display:none;

	color:#000;

}

#Valeur {

	display:none;

}

.deplier {

	margin: 0 auto;

	margin-bottom:24px;

	margin-top:24px;

	cursor:pointer;

}

.replier {

	margin: 0 auto;

	margin-bottom:24px;

	margin-top:24px;

	display:none;

	cursor:pointer;

}

.deplier2 {

	margin: 0 auto;

	margin-bottom:24px;

	margin-top:24px;

	cursor:pointer;

}

.replier2 {

	margin: 0 auto;

	margin-bottom:24px;

	margin-top:24px;

	display:none;

	cursor:pointer;

}

.test {

	

}

/* ---- grid ---- */



.grid {

  margin-left:50px;

  margin-top:10px;

  width:95%;

}

/* clearfix */

.grid:after {

  content: '';

  display: block;

  clear: both;

}

.grid-sizer {

  width: 20%;

}



/* ---- .grid-item ---- */



.grid-item {

  float: left;

  margin-top: 20px;

  margin-right: 30px;

  margin-bottom:10px;

}



.grid-item p{

	font-family: 'relative10_pitch';

	font-size:13px;

	height:100%;

	position:relative;

	

}

.imageP1 {

  background:center;

  background-repeat:no-repeat;

  background-size:cover;

  border: 3px solid #e3132c;

  height: auto;

}

.imageP2 {

  background:center;

  background-repeat:no-repeat;

  background-size:cover;

 border: 3px solid #00c4b3;

  height: auto;

}

.imageP3 {

  background:center;

  background-repeat:no-repeat;

  background-size:cover;

   border: 3px solid #060e9f;

  height: auto;

}

.imageP4 {

  background:center;

  background-repeat:no-repeat;

  background-size:cover;

  border: 3px solid #e8b143;

  height: auto;

}

.imageP5 {

  background:center;

  background-repeat:no-repeat;

  background-size:cover;

  border: 3px solid #8531a7;

  height: auto;

}

.hoverText{

	position:absolute;

	top:15px;

	right:10px;



}

.hoverimage1{

	position:absolute;

	width:100%;

	display:none;

	background-color:#e3132c;

	height:100%;

	font-family: 'relativebold';
	font-size:16px;
	color:white;

	padding:10px;

	padding-right: 60px;

	letter-spacing: 0.8px;

}

.hoverimage2{

	position:absolute;

	width:100%;

	display:none;

	background-color:#00c4b3;

	height:100%;

	font-family: 'relativebold';
	font-size:16px;
	color:white;

	padding:10px;

	padding-right: 60px;

	letter-spacing: 0.8px;

}

.hoverimage3{

	position:absolute;

	width:100%;

	display:none;

	background-color:#060e9f;

	height:100%;

	font-family: 'relativebold';
	font-size:16px;
	color:white;

	padding:10px;

	padding-right: 60px;

	letter-spacing: 0.8px;

}

.hoverimage4{

	position:absolute;

	width:100%;

	display:none;

	background-color:#e8b143;

	height:100%;

	font-family: 'relativebold';
	font-size:16px;
	color:white;

	padding:10px;

	padding-right: 60px;

	letter-spacing: 0.8px;

}

.hoverimage5{

	position:absolute;

	width:100%;

	display:none;

	background-color:#8531a7;

	height:100%;

	font-family: 'relativebold';
	font-size:16px;
	color:white;

	padding:10px;

	padding-right: 60px;

	letter-spacing: 0.8px;

}

@media screen and (min-width: 1680px) {

	.width1{

		width: 350px;

	}

	.width2{

		width: 450px;

	}

	}

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

	.width1{

		width: 310px;

	}

	.width2{

		width: 370px;

	}

	}

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

	#bandeau{

		height:65px;

	}

	.width1{

		width: 280px;

	}

	.width2{

		width: 330px;

	}



}

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

	#Definition{

		width:500px;

		padding-left: 160px;

	}

	#Valeur{

		width:500px;

		padding-left: 160px;

	}

	.disapear{

		display:none;

	}

	.Prat{

	margin-left:1px;

	}

}

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

	

    .right{

		padding-top:20px;

		padding-right:50px;

		padding-bottom:;

		width:50%;

	}

	#pres2 p{

		font-size: 22px;

		line-height: 26px;

	}

	#Definition{

		width:500px;

		padding-left: 200px;

	}

	#Valeur{

		width:500px;

		padding-left: 200px;

	}

	.indetinfo{

	}

}

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

   #Presentation{

   	left:20%;

   }

	.middle{

		padding-left:40%;

	}

}



.pictoinfo{

	position:absolute;

	top:24px;

	left:15px;

	height:70px;

	width:10px;

	background-image:url('info.svg');

	background-repeat: no-repeat;

	background-size:cover;

}

.pictointro{

	position:absolute;

	bottom:10px;

	right:15px;

	height:86px;

	width:10px;

	background-image:url('intro.svg');

	background-repeat: no-repeat;

	background-size:cover;

}

.pictorond{

	position:absolute;

	bottom:10px;

	height:25px;

	width:25px;

	left:7px;

	background-image:url('logo-picto-noir-grand.svg');

	background-repeat: no-repeat;

	background-size:contain;

}

.inactive{

	display:none;

	height:100%;

	width:99.9%;

	z-index:300;

	position:absolute;

}

.pictoinactive {

	position:absolute;

	left:45%;

	top:42%;

	height:140px;

	width:140px;

	background-image:url('logo-picto-blanc-home.svg');

	background-repeat: no-repeat;

	background-size:contain;

	-webkit-animation:spin 3s linear infinite;

    -moz-animation:spin 3s linear infinite;

    animation:spin 3s linear infinite;

}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.infoLeft{

	width:520px;

	float:left;

}

.infoRight{

	position:absolute;

	left:330px;

	width:300px;

}

.hackinfo2{

	display:none;

}

#msg_open{

	display:none;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;



    /* Position the tooltip */

    position:fixed;

    z-index: 1;

}