@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
@-webkit-keyframes progression {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}
@keyframes progression {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}
@-webkit-keyframes flechehaut {
	0% {
		opacity: 0;
		margin-top: -40px;
		margin-bottom: 40px
	}

	100% {
		opacity: 1;
		margin: 0;
	}
}
@-webkit-keyframes flechebas {
	0% {
		opacity: 0;
		margin-top: 40px;
		margin-bottom: -40px
	}

	100% {
		opacity: 1;
		margin: 0;
	}
}

@-webkit-keyframes france {
	0% {
		opacity: 0;
	}

	70% {
		opacity: 1;
	}
}
@-webkit-keyframes angleterre {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}

	80% {
		opacity: 1;
	}
}
@-webkit-keyframes allemagne {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}

	90% {
		opacity: 1;
	}
}
@-webkit-keyframes espagne {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
@keyframes flechehaut {
	0% {
		opacity: 0;
		margin-top: -40px;
		margin-bottom: 40px
	}

	100% {
		opacity: 1;
		margin: 0;
	}
}
@keyframes flechebas {
	0% {
		opacity: 0;
		margin-top: 40px;
		margin-bottom: -40px
	}

	100% {
		opacity: 1;
		margin: 0;
	}
}

@keyframes france {
	0% {
		opacity: 0;
	}

	70% {
		opacity: 1;
	}
}
@keyframes angleterre {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}

	80% {
		opacity: 1;
	}
}
@keyframes allemagne {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}

	80% {
		opacity: 1;
	}
}
@keyframes espagne {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

* {
	margin: 0;
	padding: 0;
	font-family: "roboto", sans-serif;
	font-weight: 400;
	font-size: 1em;
}

html, body, #conteneur {
	width: 100%;
	height: 100%;
	
}

#conteneur {
    background: url("image/fond_usine.gif");
    background-size: contain;
}

#part_gauche {
    background: url(images/degrades_noir.png);
    background-size: contain;
    position: absolute;
    width: 55%;
}

#part_gauche #header_logo #logo_alpi{
	width: 50%;
    margin: 40px auto;
    padding-right: 15%;
    display: block;
}

#part_gauche #title_1{
	width: 75%;
    margin: 0 13% 0 7%;
    color: white;
}

#part_gauche #title_1 h1{
	font-weight: 900;
	font-size: 3.2em
}

#part_gauche #title_1 h2{
	font-weight: 500;
	font-size: 2.5em;
	font-style: italic;
	color:#E7E7E7;
	max-resolution: -20px;
}

#part_droite {
	position: relative;
    width: 62%;
    float: right;
}

#map_fond {
    transform: skew(-10deg);
    background: url("image/fond_map.jpg") white;
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    width: 65%;
    position: fixed;
	margin-left: 5%;
}

#infos {
	position: relative;
	padding: 2%;
	overflow: auto;
}

.hcpc {
	height: 100%;
}

#infos #header_welcome {
 	
}

#infos #header_welcome p {
    font-size: 1.6em;
    font-weight: 700;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

#bienvenue, #willkommen {
	color: #676767;
}

 #welcome, #bienvenido {
	padding-top: 5%;
	color: #ca443b;
}

#select_haut, #select_bas {
	text-align: center;
	font-size: 1.5em;
	font-weight: 600;
	margin-top: 20px;
	margin-bottom: 20px;
}


#pays ul li a img {
	width: 100%;
}

#pays ul li a#dfrance:hover img {
	background: url(images/france_alpi_caneco_selected.png);
    background-size: contain;
}
#pays ul li a#dallemagne:hover img {
	background: url(images/deutsch_alpi_caneco_selected.png);
    background-size: contain;
}
#pays ul li a#despagne:hover img {
	background: url(images/espanol_alpi_caneco_selected.png);
    background-size: contain;
}
#pays ul li a#dangleterre:hover img {
	background: url(images/english_alpi_caneco_selected.png);
    background-size: contain;
}

#pays ul li a#dfrance {
	-webkit-animation: france 2s;
	animation: france 2s;
}
#pays ul li a#dallemagne {
	animation: allemagne 2s;
	-webkit-animation: allemagne 2s;
}
#pays ul li a#despagne {
	animation: espagne 2s;
	-webkit-animation: espagne 2s;
}
#pays ul li a#dangleterre {
	animation: angleterre 2s;
	-webkit-animation: angleterre 2s;
}

.txt_gr {
	font-weight: 700;
	color:#676767;
}

.txt_lg {
	font-style: italic;
	color: #ca443b;
}

#footer {
	margin-top: 7%;
	clear: both;
}

#footer a {
	color:#a3a3a3;
}

#mentions {
	font-size: 0.7em;
	color:#a3a3a3;
}

#reseaux_sociaux ul li {
	padding: 4%;
}
#reseaux_sociaux ul li a img {
	width: 100%;
}

#bottom_logo #logo_white_alpi{
	width: 50%;
    margin: 10px auto;
    display: block;
}

#list_contact a {
	display: block;
	background: #98a0a6;
	padding: 7px;
	margin: 7px 0;
	border-radius: 25px;
	text-align: center;
	color: #ededed;
}

#list_contact a:hover {
	background: #848484;
	text-decoration: none;
}

#menu_bottom {
	margin-top: 10px;
	margin-bottom: 10px;
	color: white;
}

#baseline {
	color: white;
	clear: both;
	text-align: center;
	padding: 20px;
}

#barre {
	background: #ca443b;
	height: 2px;
	animation: progression 2s;
	-webkit-animation: progression 2s;
}

#flechehaut {
	animation: flechehaut 2s;
	-webkit-animation: flechehaut 2s;
}

#flechebas {
	animation: flechebas 2s;
	-webkit-animation: flechebas 2s;
}


@media screen and (min-width: 768px) and (max-width: 991px) {
	#infos #header_welcome p {
		font-size: 1.2em;
	}
	#pays ul li {
		padding: 15px;
	}
}
@media screen and (max-width: 767px){
	#conteneur {
		background: url("image/fond_map.jpg") white;
	}
	#part_gauche {
		background: none; 
		position: inherit;
		width: 100%;
	}
	#part_gauche #header_logo #logo_alpi {
		width: 60%;
		margin: 30px auto 0 auto;
		padding-right: 0;
		display: block;
	}
	#part_droite {
		position: inherit;
		width: 100%;
		float: none;
	}
	#part_droite #map_fond {
		display: none;
	}
	#infos {
		overflow: inherit;
		padding: 0;
		position: inherit;
	}
	#pays ul li {
		padding: 15px;
	}
	#footer {
		background: url("image/fond_mobile.png") white;
		background-position: top;
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 100px;
	}
	#header_welcome p img {
		width: 100%;
	}
}

@media screen and (min-width: 1600px) {
	* {
		font-size: 104%;
	}
}
@media screen and (min-width: 1700px) {
	* {
		font-size: 105%;
	}
}
@media screen and (min-width: 1800px) {
	* {
		font-size: 106%;
	}
}
@media screen and (min-width: 1900px) {
	* {
		font-size: 107%;
	}
}
@media screen and (min-width: 2000px) {
	* {
		font-size: 108%;
	}
}
@media screen and (min-width: 2100px) {
	* {
		font-size: 109%;
	}
}
@media screen and (min-width: 2200px) {
	* {
		font-size: 110%;
	}
}
@media screen and (min-width: 2300px) {
	* {
		font-size: 111%;
	}
}
@media screen and (min-width: 2400px) {
	* {
		font-size: 112%;
	}
}