/* ***************************************************** */
/* FONTS & COLORS
/* ***************************************************** */
@font-face {
  font-family: 'dinregular';
  src: url('dinregular.eot?#iefix') format('embedded-opentype'),  url('dinregular.otf')  format('opentype'),
	     url('dinregular.woff') format('woff'), url('dinregular.ttf')  format('truetype'), url('dinregular.svg#dinregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'dinbold';
  src: url('dinbold.eot?#iefix') format('embedded-opentype'),  url('dinbold.otf')  format('opentype'),
	     url('dinbold.woff') format('woff'), url('dinbold.ttf')  format('truetype'), url('dinbold.svg#dinbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* ******************FONTS MISE EN FORME********************** */
b {
	font-family: 'dinbold';
	font-weight: normal;
	font-style: normal;
}

/* ***************************************************** */
/* DESIGN
/* ***************************************************** */
#viewport {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:100%;
	height:100%;
}
h1 {
	position:absolute;
	top: 50%;
	transform: translateY(-50%);
	left:50%;
	transform: translateX(-49%);
	z-index:1;
}
h2 {
	font-family: 'dinregular';
	font-weight: normal;
	font-style: normal;
	letter-spacing:0.1em;
	position:absolute;
	bottom:5%;
	right:1%;
	font-size:0.85em;
	color:#ff6100;
}
h3 {
	font-family: 'dinregular';
	font-weight: normal;
	font-style: normal;
	position:absolute;
	bottom:5%;
	left:1%;
	font-size:0.85em;
	color:#ff995a;
}
h3 a {
	color:#ff995a;
}
#classic {
	width:50%;
	height:100%;
	background:#565655;
	float:left;
	text-align:center;
	position:relative;
}
#xl {
	width:50%;
	height:100%;
	background:#ff6100;
	float:left;
	text-align:center;
	position:relative;
}
#classic img, #xl img {
	position:relative;
	top: 50%;
	transform: translateY(-50%);
}
/* ***************************************************** */
/* RESPONSIVE 
/* ***************************************************** */
}
@media screen
and (min-width : 320px) 
and (max-width : 480px)	{
}