@font-face {
	font-family: Roboto;
	src: local("Roboto Bold"),
		 local("Roboto-Bold"),
		 url(fonts/RobotoCondensed-Bold.ttf);
	font-weight: bold;
  }
  @font-face {
	font-family: Roboto;
	src: local("Roboto Bold Italic"),
		 local("Roboto-Bold-Italic"),
		 url(fonts/RobotoCondensed-BoldItalic.ttf);
		 font-weight: bold;
		 font-style: italic;
  }
  @font-face {
	font-family: Roboto;
	src: local("Roboto Italic"),
		 local("Roboto-Italic"),
		 url(fonts/RobotoCondensed-Italic.ttf);
		 font-style: italic;
  }
  @font-face {
	font-family: Roboto;
	src: local("Roboto"),
		 url(fonts/RobotoCondensed-Regular.ttf);
  }


html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;

	font-family: "Roboto", sans-serif;


    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;

	overflow: hidden;

}

#bg06{
	display: block;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	height: 100%;	  
}

body {
	background: #f8f8f8 url(../img/bg.png) repeat 0 0;
}

header {
	position: relative;
	
	background-color: #ffffff;
	border-bottom: 1px solid #e7e7e7;

	height: 100px;

	margin: 0px;
}

main {
	position: relative;
	height: calc(100% - 101px);
	width: 100%;

	overflow: auto;

	text-align: center;
}

h1 {
	text-align: center;
	margin: 0;
	font-weight: bold;
	padding-top: 20px;
	font-size: 45px;
}

#loading {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
	width: 100%;
	height: 100%;

	background-color: rgba(0,0,0,.8);
}
#loading img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

div#logo {
	position: absolute;
	z-index: 2;
	top: 0px;
	right: 0px;
	height: 100%;
}
div#logo img {
	height: 100%;
}

div#accueil {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	z-index: 2;
	text-align: center;
	width: 100%;
}


section.bouton {
	
	display: inline-block;

	background-color: #ffffff;
	border: 1px solid #e7e7e7;

	width: 300px;
	height: 210px;

	position: relative;

	overflow: hidden;

	margin: 20px;


	cursor: pointer;

}

section.bouton .txt {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	text-align: center;

	padding-top: 5px;
	padding-bottom: 5px;
	z-index: 4;

	color: #ffffff;

	font-size: 15px;
	background-color: rgba(0,0,0,.7);
}

section.bouton img {
	position: absolute;
	z-index: 3;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

section.choix,
section.video {
	
	display: inline-block;

	background-color: #ffffff;
	border: 1px solid #e7e7e7;

	z-index: 2;

	width: 500px;
	height: 110px;

	position: relative;

	overflow: hidden;

	margin: 20px;
	
	cursor: pointer;

}
section.choix img,
section.video img {
	position: absolute;
	z-index: 2;
	max-width: 100px;
	max-height: calc(100% - 20px);
	left: 60px;
	top: 50%;
	transform: translate(-50%, -50%);
}
section.choix .txt,
section.video .txt {
	position: absolute;
	z-index: 2;
	width: calc(100% - 140px);
	top: 50%;
	left: calc(50% + 60px);
	transform: translate(-50%, -50%);
	font-weight: bold;
	font-size: 29px;
	text-align: left;
	word-wrap: normal;
	text-align: center;
}
section.choix .sub,
section.video .sub {
	font-weight: normal;
	font-style: italic;
	font-size: 15px;
}
.lien {
	cursor: pointer;
}

#videos {
	width: 1200px;
	position: relative;
	z-index: 2;
	margin: auto;
	overflow-x: auto;
	overflow-y: hidden;
	height: 160px;
	word-wrap: normal;
	white-space: nowrap;
}

#video {
	position: relative;
	z-index: 2;
}

div#viewport {
	width: 1500px;
	margin: auto;
	margin-top: 10px;
	height: 95%;
	position: relative;
	z-index: 2;
}