/* just a sample css rule to show that everything works */


body
{
	font-family: 'Ubuntu'!important;
}

footer p
{
  font-size: small;
}

h1, h2, h3, h4, h5, h6
{
	position: relative;
	color: black;
	text-align: center;
	font-size: 2.5vw;
}

h2
{
	font-size: 1.75vw;
}

li
{
	position: relative;
	display:block;
	width:15%;
	height: 5vw;
	float:left;
	margin-right: 9.15%;
	margin-left: 9.15%;
	font-size: 0.625vw;
	cursor: pointer;
}

span>ul>li
{
	border: solid 1px #245186;
	background-color: #E1F1F3;
	border-radius: 1vw;
	color: black;
	display: table;
	vertical-align: middle;
}

span>ul>li>p
{
	font-size: 1vw;
	color: #002266;
	font-weight: bold;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.section
 {
	background-color:#f7fbfc; 
	opacity: 0.9;
 }

 .responsive_container
{
	overflow: hidden;
	width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

.titre
{
	font-weight: bold;
	text-align: center;
	position: absolute;
	color: #002266;
}

#fond_intercal_q
{
	left: -39.9%;	
}

#titre_intercalaire_questionnaire
{
	left: 6.5%;
	bottom: 72.5%;
}

.text-left
{
	text-align: left;
	left: 2%;
}

#titre_intro
{
	bottom: 82%;
	left: 15%;
}

.sous_titre_orange
{
	position: absolute;
	text-align: center;
	bottom: 75.6%;
	left: 32%;
	font-size: 2vw;
	color: #ADCC58;
	font-weight: bold;
}

.contenu
{
	position: absolute;
	top: 50%;
	height: auto;
}

.propositions
{
	top: 80.5%;
	width: 25%;
	margin-right:15px;
	margin-left:15px;
}

.liste_propositions
{
	z-index: 1;
	position: absolute;
	left: 8%;
	width: 60%;
}

.bloc_reponse
{
	z-index: 1;
	position: absolute;
	top: 30%;
	left: 28.5%;
	background-color: #365471;
	width: 10%;
	height: 35%;
	color: white;
	border-radius: 5vw;
	display: table;
	vertical-align: middle;
}

.contenu_reponse
{
	font-size: 1.125vw;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding-left: 17.5%;
	padding-right: 5%;
	line-height: 1.75vw;
}

.contenu_reponse>b
{
	font-size: 1.5vw;
}

#q2
{
	left: 8%;
	z-index: 1;
}

#q3
{
	left: 7.7%;
	z-index: 1;
}

#q4
{
	left: 7.6%;
}

.q2
{
	left: 48.5%;
	z-index: 1;
}

.q3
{
	left: 68.5%;
}

.q4
{
	left: 88.5%;
}

.bouton
{
	position: relative;
	color: black;
}

.bouton_demarrer
{
	z-index: 1;
	color: white;
	position: absolute;
	top : 80%;
	left: 8.25%;
	width: 3.5%;
	font-size: 1.5vw;
	background-color:#e4685d;
	border:1px solid #ffffff;
	display:inline-block;
	cursor: pointer;
	padding:6px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35;
}

.bouton_valider
{
	cursor: pointer;
	position: absolute;
	width: 10%;
	right: -15%;
}

.bouton_continuer
{
	position: relative;
	margin-top: 200%;
	right: 35%;
	cursor: pointer;
}

.mot_important
{
	font-size: 2vw;
	color: #e4685d;
	font-weight: bold;
}

#titre_q1
{
	position: absolute;
	bottom: 85.5%;
	left: 20.5%;
	width: 20%;
}

.section_perso
{
	background-color: #F7FBFC;
}

.image_fond
{
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	bottom: 0%;
}

.image_fond2
{
	width: 100%;
	height: 100%;
}

.element_fond
{
	position: absolute;
	z-index: 1;
	opacity: 0;
}

#fond_q1
{
	z-index: 0;
	left: -19.9%;
}

#fond_q2
{
	left: 0%;
}

#fond_q3
{
	z-index: 0;
	left: 20%;
}

#fond_q4
{
	left: 40%;
}

#nuage1
{
	bottom: 42.5%;
	left: 0%;
	width: 28%;
	height: auto;
}

#nuage2
{
	bottom: 42%;
	left: 60%;
	width: 15%;
	height: auto;
}

#nuage3
{
	bottom: 52%;
	left: 80%;
	width: 15%;
	height: auto;
}

#tracteur_intro
{
	opacity: 1;
	bottom: 8%;
	left: 32.5%;
	width: 5%;
	height: auto;
}

#bateau_intro
{
	opacity: 1;
	bottom: 10%;
	left: 80%;
	width: 12%;
	height: auto;
}

#panneau_intro_1
{
	opacity: 1;
	bottom: 8.5%;
	left: 56%;
	width: 6%;
	height: auto;
}

#panneau_intro_2
{
	opacity: 1;
	bottom: 3%;
	left: 53%;
	width: 6%;
	height: auto;
}

#panneau_intro_3
{
	opacity: 1;
	bottom: 3%;
	left: 58%;
	width: 6%;
	height: auto;
}

#pale_intro_1
{
	opacity: 1;
	bottom: 31.7%;
	left: 57.4%;
	width: 7%;
	height: auto;
}

#pale_intro_2
{
	opacity: 1;
	bottom: 31.7%;
	left: 64.23%;
	width: 7%;
	height: auto;
}

#pale_intro_3
{
	opacity: 1;
	bottom: 31.7%;
	left: 71.25%;
	width: 7%;
	height: auto;
}

#france
{
	position: absolute;
	width: 10%;
	bottom: 5%;
	left: 25%;
}

#pays_de_la_loire
{
	position: absolute;
	width: 2.5%;
	left: 27.1%;
	bottom: 45%;
}

#ampoule_q2
{
	position: absolute;
	left: 44%;
	width: 4%;
	top: 32.5%;
	height: auto;
}

#batiment_q2
{
	position: absolute;
	left: 48%;
	width: 4%;
	top: 32.5%;
	height: auto;
}

#euro_q2
{
	position: absolute;
	left: 52%;
	width: 4%;
	top: 32.5%;
	height: auto;
}

#titre_q2
{
	z-index: 5;
	left: 45%;
	bottom: 85.5%;
	width: 10%;
}

#elements_q3
{
	position: absolute;
	width: 20%;
	height: auto;
	left: 60%;
	bottom: -10%;
}

#tracteur_q3
{
	position: absolute;
	width: 2%;
	height: auto;
	left: 65%;
	bottom: 25%;
}

#panneau_1_q3
{
	position: absolute;
	width: 1.5%;
	height: auto;
	bottom: 20%;
	left: 70.75%;
}

#panneau_2_q3
{
	position: absolute;
	width: 1.5%;
	height: auto;
	bottom: 26%;
	left: 71.5%;
}

#panneau_3_q3
{
	position: absolute;
	width: 1.5%;
	height: auto;
	bottom: 26%;
	left: 70%;
}

#pale_1_q3
{
	position: absolute;
	width: 1.6%;
	bottom: 55.1%;
	left: 70.8%;
}

#pale_2_q3
{
	position: absolute;
	width: 1.6%;
	bottom: 55.2%;
	left: 73.02%;
}

#pale_3_q3
{
	position: absolute;
	width: 1.6%;
	bottom: 52.2%;
	left: 71.87%;
}

#titre_q3
{
	left: 62%;
	bottom: 85.5%;
	width: 15%;
}

/* 
Elements de la question 4
*/
#titre_q4
{
	left: 81%;
	bottom: 85.5%;
	width: 18%;
}

#elements_q4
{
	position: absolute;
	width: 9%;
	height: auto;
	left: 85.5%;
	bottom: 5%;
}

#maison1_q4
{
	opacity: 0;
	position: absolute;
	width: 2%;
	left: 81%;
	bottom: 55%;
}

#maison2_q4
{
	opacity: 0;
	position: absolute;
	width: 2%;
	left: 84%;
	bottom: 48%;
}

#maison3_q4
{
	opacity: 0;
	position: absolute;
	width: 3.5%;
	left: 94.5%;
	bottom: 42%;
}

#maison4_q4
{
	opacity: 0;
	position: absolute;
	width: 5%;
	left: 81.5%;
	bottom: 12%;
}

#maison5_q4
{
	opacity: 0;
	position: absolute;
	width: 1.5%;
	left: 92.5%;
	bottom: 65%;
}

#maison6_q4
{
	opacity: 0;
	position: absolute;
	width: 1%;
	left: 88.5%;
	bottom: 70%;
}

#perso1_q4
{
	opacity: 0;
	position: absolute;
	width: 2.5%;
	left: 94%;
	bottom: 42%;
}

#perso2_q4
{
	opacity: 0;
	position: absolute;
	width: 1.5%;
	left: 83%;
	bottom: 48%;
}

#perso3_q4
{
	opacity: 0;
	position: absolute;
	width: 0.8%;
	left: 92.2%;
	bottom: 66%;
}

/*
DATA 1
*/

.element_decor
{
	opacity: 0.6;
}

#titre_data1
{
	position: absolute;
	width: 35%;
	left: 10%;
	bottom: 85.5%;
	text-align: left;
}

#data1_infos
{
	position: absolute;
	width: 30%;
	height: 25%;
	left: 10%;
	top: 15%;
	font-size: 1vw;
	color: #002266;
}

#data1_infos>b
{
	font-size: 1.25vw;
}

#saviez_vous
{
	position: absolute;
	width: 30%;
	padding: 2%;
	top: 40%;
	left: 9.6%;
	text-align: center;
}

.petit_mot
{
	font-size: 1.25vw;
	color: #e4685d;
}

#saviez_vous>p
{
	text-align: left;
	font-size: 1vw;
}

#saviez_vous>b
{
	font-size: 1.25vw;
}

#data1_contenu_carte
{
	position: relative;
	width: 100%;
	height: auto;
}

.elem_14
{
	opacity: 0;
}

#bouton_2008_data1
{
	position: absolute;
	width: 12%;
	left: 78%;
	bottom: 32%;
	cursor: pointer;
	transform: scale(1.3);
}

#bouton_2014_data1
{
	position: absolute;
	width: 12%;
	left: 78%;
	bottom: 13%;
	cursor: pointer;
	transform: scale(0.7);
	opacity: 0.8;
}

#legende_eolienne_data1
{
	position: absolute;
	width: 6%;
	left: 45%;
	bottom: 5%;
}

#legende_eolienne
{
	position: absolute;
	width: 20%;
	left: 50%;
	bottom: 6%;
	font-size: 1vw;
	color: #002266;
	font-weight: bold;
}

#legende_panneau_data1
{
	position: absolute;
	width: 6%;
	left: 63%;
	bottom: 5%;
}

#legende_panneau
{
	position: absolute;
	width: 20%;
	left: 69%;
	bottom: 6%;
	font-size: 1vw;
	color: #002266;
	font-weight: bold;
}

#legende_tracteur_data1
{
	position: absolute;
	width: 6%;
	left: 81%;
	bottom: 5%;
}

#legende_tracteur
{
	position: absolute;
	width: 20%;
	left: 88%;
	bottom: 6%;
	font-size: 1vw;
	color: #002266;
	font-weight: bold;
}

#tracteur1_data1
{
	position: absolute;
	width: 2.5%;
	left: 63%;
	bottom: 78%;
}

#tracteur2_data1
{
	position: absolute;
	width: 1%;
	left: 70%;
	bottom: 79%;
}

#tracteur3_data1
{
	position: absolute;
	width: 1.8%;
	left: 66%;
	bottom: 64%;
}

#tracteur4_data1
{
	position: absolute;
	width: 1.8%;
	left: 76.5%;
	bottom: 65%;
}

#tracteur5_data1
{
	position: absolute;
	width: 1%;
	left: 63%;
	bottom: 57%;
}

#tracteur6_data1
{
	position: absolute;
	width: 1.9%;
	left: 62.5%;
	bottom: 40.5%;
}

#tracteur7_data1
{
	position: absolute;
	width: 1.3%;
	left: 57.5%;
	bottom: 49.5%;
}

#tracteur8_data1
{
	position: absolute;
	width: 1.8%;
	left: 55.5%;
	bottom: 28.5%;
}

#panneau1_data1
{
	position: absolute;
	width: 2%;
	left: 67%;
	bottom: 74%;
}

#panneau2_data1
{
	position: absolute;
	width: 1.5%;
	left: 76%;
	bottom: 59%;
}

#panneau3_data1
{
	position: absolute;
	width: 2.2%;
	left: 64%;
	bottom: 46%;
}

#panneau4_data1
{
	position: absolute;
	width: 1.7%;
	left: 51%;
	bottom: 56%;
}

#panneau5_data1
{
	position: absolute;
	width: 2.6%;
	left: 47%;
	bottom: 43%;
}

#panneau6_data1
{
	position: absolute;
	width: 1.5%;
	left: 48%;
	bottom: 31%;
}

#panneau7_data1
{
	position: absolute;
	width: 1.4%;
	left: 59%;
	bottom: 18%;
}

#eolienne1_data1
{
	position: absolute;
	width: 3.5%;
	left: 64.5%;
	bottom: 69%;
}

#eolienne2_data1
{
	position: absolute;
	width: 2%;
	left: 74%;
	bottom: 71%;
}

#eolienne3_data1
{
	position: absolute;
	width: 1.8%;
	left: 62%;
	bottom: 66%;
}

#eolienne4_data1
{
	position: absolute;
	width: 1.9%;
	left: 65.5%;
	bottom: 53%;
}

#eolienne5_data1
{
	position: absolute;
	width: 2.5%;
	left: 56.5%;
	bottom: 55%;
}

#eolienne6_data1
{
	position: absolute;
	width: 2.5%;
	left: 48.5%;
	bottom: 51%;
}

#eolienne7_data1
{
	position: absolute;
	width: 3.5%;
	left: 52%;
	bottom: 47%;
}

#eolienne8_data1
{
	position: absolute;
	width: 3.5%;
	left: 57%;
	bottom: 30%;
}

#eolienne9_data1
{
	position: absolute;
	width: 1.9%;
	left: 51%;
	bottom: 21%;
}

#arbre1_data1
{
	position: absolute;
	width: 2.1%;
	left: 60%;
	bottom: 63%;
}

#arbre2_data1
{
	position: absolute;
	width: 2.1%;
	left: 79%;
	bottom: 69%;
}

#arbre3_data1
{
	position: absolute;
	width: 2.1%;
	left: 55.5%;
	bottom: 40%;
}

#arbre4_data1
{
	position: absolute;
	width: 2.1%;
	left: 73%;
	bottom: 50%;
}

#arbre5_data1
{
	position: absolute;
	width: 2.1%;
	left: 61.5%;
	bottom: 25%;
}

#entreprise1_data1
{
	position: absolute;
	width: 2%;
	left: 71%;
	bottom: 61%;
}

#entreprise2_data1
{
	position: absolute;
	width: 1.5%;
	left: 43.5%;
	bottom: 48.5%;
}

#entreprise3_data1
{
	position: absolute;
	width: 1.5%;
	left: 70.5%;
	bottom: 41.5%;
}

#personnage1_data1
{
	position: absolute;
	width: 5.5%;
	left: 66%;
	bottom: 43.5%;
}

#personnage2_data1
{
	position: absolute;
	width: 5.5%;
	left: 71.5%;
	bottom: 61.5%;
}

#personnage3_data1
{
	position: absolute;
	width: 4.5%;
	left: 52.5%;
	bottom: 18.5%;
}

#personnage4_data1
{
	position: absolute;
	width: 3.5%;
	left: 67.5%;
	bottom: 68.5%;
}

#personnage5_data1
{
	position: absolute;
	width: 3.5%;
	left: 53.5%;
	bottom: 51.5%;
}

#tracteur1_14_data1
{
	position: absolute;
	width: 1.5%;
	left: 60.5%;
	bottom: 67%;
}

#tracteur2_14_data1
{
	position: absolute;
	width: 2.3%;
	left: 75.5%;
	bottom: 79%;
}

#tracteur3_14_data1
{
	position: absolute;
	width: 1.5%;
	left: 73.5%;
	bottom: 58%;
}

#tracteur4_14_data1
{
	position: absolute;
	width: 3.2%;
	left: 69.5%;
	bottom: 51%;
}

#tracteur5_14_data1
{
	position: absolute;
	width: 2.3%;
	left: 51.5%;
	bottom: 38%;
}

#tracteur6_14_data1
{
	position: absolute;
	width: 1.7%;
	left: 63%;
	bottom: 16%;
}

#panneau1_14_data1
{
	position: absolute;
	width: 2%;
	left: 62.5%;
	bottom: 70%;
}

#panneau2_14_data1
{
	position: absolute;
	width: 2.3%;
	left: 77.5%;
	bottom: 74%;
}

#panneau3_14_data1
{
	position: absolute;
	width: 1.5%;
	left: 80.5%;
	bottom: 61%;
}

#panneau4_14_data1
{
	position: absolute;
	width: 2.5%;
	left: 65%;
	bottom: 57%;
}

#panneau5_14_data1
{
	position: absolute;
	width: 2.9%;
	left: 70%;
	bottom: 46%;
}

#panneau6_14_data1
{
	position: absolute;
	width: 1.7%;
	left: 56%;
	bottom: 59%;
}

#panneau7_14_data1
{
	position: absolute;
	width: 2.5%;
	left: 54.5%;
	bottom: 45%;
}

#panneau8_14_data1
{
	position: absolute;
	width: 1.9%;
	left: 52%;
	bottom: 34%;
}

#panneau9_14_data1
{
	position: absolute;
	width: 2.5%;
	left: 58.5%;
	bottom: 23%;
}

#eolienne1_14_data1
{
	position: absolute;
	width: 2%;
	left: 66.5%;
	bottom: 79%;
}

#eolienne2_14_data1
{
	position: absolute;
	width: 2%;
	left: 70%;
	bottom: 81%;
}

#eolienne3_14_data1
{
	position: absolute;
	width: 2.3%;
	left: 63.5%;
	bottom: 64%;
}

#eolienne4_14_data1
{
	position: absolute;
	width: 3%;
	left: 76.5%;
	bottom: 69%;
}

#eolienne5_14_data1
{
	position: absolute;
	width: 2.1%;
	left: 81.5%;
	bottom: 66%;
}

#eolienne6_14_data1
{
	position: absolute;
	width: 3.2%;
	left: 77.5%;
	bottom: 59%;
}

#eolienne7_14_data1
{
	position: absolute;
	width: 3.2%;
	left: 62.5%;
	bottom: 50%;
}

#eolienne8_14_data1
{
	position: absolute;
	width: 2.2%;
	left: 72.5%;
	bottom: 44%;
}

#eolienne9_14_data1
{
	position: absolute;
	width: 3.2%;
	left: 65.5%;
	bottom: 40%;
}

#eolienne10_14_data1
{
	position: absolute;
	width: 4.2%;
	left: 59%;
	bottom: 38%;
}

#eolienne11_14_data1
{
	position: absolute;
	width: 2.2%;
	left: 53.5%;
	bottom: 58%;
}

#eolienne12_14_data1
{
	position: absolute;
	width: 4.2%;
	left: 49.8%;
	bottom: 47%;
}

#eolienne13_14_data1
{
	position: absolute;
	width: 2.2%;
	left: 45.8%;
	bottom: 50%;
}

#eolienne14_14_data1
{
	position: absolute;
	width: 2.2%;
	left: 53.8%;
	bottom: 40%;
}

#eolienne15_14_data1
{
	position: absolute;
	width: 2.2%;
	left: 60%;
	bottom: 29%;
}

#eolienne16_14_data1
{
	position: absolute;
	width: 3.2%;
	left: 49%;
	bottom: 26%;
}

#eolienne17_14_data1
{
	position: absolute;
	width: 2.5%;
	left: 56%;
	bottom: 22%;
}

#eolienne18_14_data1
{
	position: absolute;
	width: 3.2%;
	left: 61%;
	bottom: 18%;
}

#entreprise1_14_data1
{
	position: absolute;
	width: 1.5%;
	left: 62%;
	bottom: 74%;
}

#entreprise2_14_data1
{
	position: absolute;
	width: 1.5%;
	left: 68%;
	bottom: 56%;
}

#entreprise3_14_data1
{
	position: absolute;
	width: 1.5%;
	left: 49%;
	bottom: 41%;
}

#entreprise4_14_data1
{
	position: absolute;
	width: 1.2%;
	left: 52%;
	bottom: 30%;
}

#personnage1_14_data1
{
	position: absolute;
	width: 3%;
	left: 64.5%;
	bottom: 75%;
}

#personnage2_14_data1
{
	position: absolute;
	width: 2.8%;
	left: 72%;
	bottom: 73%;
}

#personnage3_14_data1
{
	position: absolute;
	width: 3.2%;
	left: 60%;
	bottom: 57%;
}

#personnage4_14_data1
{
	position: absolute;
	width: 3.2%;
	left: 48.7%;
	bottom: 54.8%;
}

#personnage5_14_data1
{
	position: absolute;
	width: 2.5%;
	left: 55.7%;
	bottom: 32.8%;
}

.chiffre_important
{
	font-weight: bold;
	font-size: 1.5vw;
	color: #e4685d;
}

#svg_dataviz3
{
	position: absolute;
}

#fp-nav
{
	transform: rotate(90deg);
}

#fp-nav.right {
    right: -70px !important;
}

/* Dataviz 2 */

#titre_data2
{
    position: absolute;
    width: 35%;
    left: 10%;
    top: 2%;
    text-align: left;
}

#data2_pale
{
    position: absolute;
    width: 44%;
    top: 5%;
    left: 40%;
}

#data2_eolien
{
    position: absolute;
    width: 10%;
    top: 35%;
    left: 82%;
}


#data2_solaire
{
    position: absolute;
    width: 10%;
    top: 2%;
    left: 44%;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

#data2_biomasse
{
    position: absolute;
    width: 10%;
    top: 75%;
    left: 45%;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

#svg_dataviz2
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 17%;
    left: 22%
}

#saviez_vous_eolienne
{
    position: relative;
    width: 30%;
    height: 25%;
    padding: 2%;
    top: 25%;
    left: 9.6%;
    text-align: center;
}

#saviez_vous_eolienne>p
{
    text-align: left;
    font-size: 1vw;
}

#saviez_vous_eolienne>b
{
    font-size: 1.25vw;
}

#saviez_vous_solaire
{
    position: relative;
    width: 30%;
    height: 25%;
    padding: 2%;
    top: 25%;
    left: 9.6%;
    text-align: center;
}

#saviez_vous_solaire>p
{
    text-align: left;
    font-size: 1vw;
}

#saviez_vous_solaire>b
{
    font-size: 1.25vw;
}

#saviez_vous_biomasse
{
    position: relative;
    width: 30%;
    height: 25%;
    padding: 2%;
    top: 25%;
    left: 9.6%;
    text-align: center;
}

#saviez_vous_biomasse>p
{
    text-align: left;
    font-size: 1vw;
}

#saviez_vous_biomasse>b
{
    font-size: 1.25vw;
}


#bouton_eolien_data2
{
    position: absolute;
    width: 5%
    top: 50%;
    left: 70%;
}

#bouton_solaire_data2
{
    position: absolute;
    width: 5%
    top: 10%;
    left: 60%;
}

#bouton_biomasse_data2
{
    position: absolute;
    width: 5%
    top: 10%;
    left: 60%;
}

/* Intercalaire Dataviz 3 */
#bandeau_i3
{
	position: absolute;
	width: 78%;
	top : 6.5%;
	left: 11.5%;
}

#trotteuse
{
	position: absolute;
	width: 31%;
	top : 37.5%;
	left: 34.45%;
}

#eolienne1_i3
{
	position: absolute;
	width: 6%;
	top : 32.5%;
	left: 31.7%;
}


#eolienne2_i3
{
	position: absolute;
	width: 6%;
	top : 31.5%;
	left: 38%;
}

/*Dataviz3*/

#bloc_data3
{
	width: 60%;
	height: auto;
	z-index: 4;
	left: 32%;
	top: 38%;
	opacity: 0.9;
}

#eolienne_mat1_3
{
	position: absolute;
	width: 17%;
	top : 53.5%;
	left: 11%;
}

#eolienne_mat2_3
{
	position: absolute;
	width: 23%;
	top : 44.5%;
	left: 23.5%;
}

#eolienne_mat3_3
{
	position: absolute;
	width: 30%;
	top : 34.5%;
	left: 34.5%;
}

#eolienne_mat4_3
{
	position: absolute;
	width: 42%;
	top : 15.5%;
	left: 42.8%;
}

#eolienne_mat5_3
{
	position: absolute;
	width: 45%;
	top : 9.5%;
	left: 56.4%;
}

#eolienne_pale1_3
{
	position: absolute;
	width: 13%;
	top : 44%;
	left: 13%;
}

#eolienne_pale2_3
{
	position: absolute;
	width: 16%;
	top : 33.2%;
	left: 27%;
}

#eolienne_pale3_3
{
	position: absolute;
	width: 18%;
	top : 22.7%;
	left: 40.7%;
}

#eolienne_pale4_3
{
	position: absolute;
	width: 20%;
	top : 11%;
	left: 54.7%;
}

#eolienne_pale5_3
{
	position: absolute;
	width: 20%;
	top : 5.5%;
	left: 69.7%;
}

#line_data3_1
{

}


.draw_line
{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 5s linear forwards;
}

@keyframes draw {
  from {
  	stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.dash_line
{
	stroke-dasharray:50;
	stroke-dashoffset: 50;
	animation: dash 1s linear forwards;
}

@keyframes dash {
  from {
  	stroke-dasharray:50;
  }
  to {
    stroke-dasharray:15;
    stroke-dashoffset: -50;
  }
}

#line_data3_2
{
}

.lines
{
  stroke-opacity: 1;
  fill-opacity: 0.2;
  fill:rgb(237,121,107);
  stroke:rgb(237,121,107);
  stroke-width:4;
  stroke-dasharray:15;		
}


.bloc_annee
{
	position: absolute;
	font-size: 0.8vw;
	background-color: #2f4767;
	width: 3.5%;
    height: auto;
    padding: 0.3%;
	color: white;
	display: block;
	vertical-align: middle;
	text-align: center;
}

#annee2008_3
{
    top: 76%;
    left: 14.6%;
}

#annee2011_3
{
    top: 76%;
    left: 30.2%;
}

#annee2014_3
{
    top: 76%;
    left: 44.5%;
}

#annee2022_3
{
    top: 76%;
    left: 59.5%;
}

#annee2030_3
{
    top: 76%;
    left: 74.3%;
}

.animAnnee
{
	animation: flipInX 1s linear forwards;	
}

.animValeur
{
	animation: fadeIn 1s linear forwards;	
}

.animPale_3
{
	animation: rotatePale 5s linear infinite;	
}

@keyframes rotatePale {
  from {
  	transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bloc_valeur
{
	position: absolute;
	font-size: 1.4vw;
	width: 11.5%;
    height: 4%;
    padding: 0.3%;
	color: rgb(237,121,107);
	font-weight: bolder;
	display: block;
	vertical-align: middle;
	text-align: center;
	z-index: 4;
	text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
}

#H1_3
{
	top: 19%;
    left: 10%;
}



#valeur2008_3
{
    top: 48%;
    left: 14%;
}

#valeur2011_3
{
    top: 39%;
    left: 29.6%;
}

#valeur2014_3
{
    top: 30.2%;
    left: 43.6%;
}

#valeur2022_3
{
    top: 20%;
    left: 59%;
}

#valeur2_2022_3
{
    top: 34%;
    left: 59%;
    color: rgb(174,219,222);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
}

#valeur2030_3
{
    top: 14%;
    left: 74%;
}

#valeur2_2030_3
{
    top: 29.5%;
    left: 74%;
    color: rgb(174,219,222);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
}

#bloc_data3
{
	display: block;
	width: 47%;
	padding :9px 48px 0px 39px;
	height: auto;
	left: 40%;
	top: 30vw;
	border-radius: 2vw;
	font-size: 1vw;
}

#titre_concl
{
	width: 100%;
}


#titre_i3
{
	width: 100%;
	top:48.5%;
	z-index: 3;
	font-size: 1.5vw;
}

#pan1_i3
{
	width: 100%;
	top:13%;
	z-index: 3;
	font-size: 1vw;
}

#pan2_i3
{
	width: 100%;
	top:20%;
	z-index: 3;
	font-size: 1vw;
}

#pan3_i3
{
	width: 100%;
	top:27%;
	z-index: 3;
	font-size: 1vw;
}

#pan4_i3
{
	width: 100%;
	top: 33.5%;
	z-index: 3;
	font-size: 1vw;
}

/*bénéfices*/

#emploi
{
    position: absolute;
    width: 20%;
    height: 25%;
    left: 18%;
    top: 30%;
    font-size: 1vw;
    color: #002266;	
}

#emploi>b
{
    font-size: 1.25vw;
}

#propre
{
    position: absolute;
    width: 20%;
    height: 25%;
    left: 41%;
    top: 30%;
    font-size: 1vw;
    color: #002266;
   
}

#propre>b
{
    font-size: 1.25vw;
}

#eco
{
    position: absolute;
    width: 20%;
    height: 25%;
    left: 65%;
    top: 30%;
    font-size: 1vw;
    color: #002266;

    
}

#eco>b
{
    font-size: 1.25vw;
}

#benefice_pale1
{
    position: absolute;
    width: 7%;
    top : 77%;
    left: 86.7%;
}

#benefice_pale2
{
    position: absolute;
    width: 5%;
    top : 81%;
    left: 81.8%;
}


.animConcl
{
	animation: fadeInDown 2s linear forwards;
}

.image_concl
{
	width: 35%;
	padding: 2% 0 2% 0;
}

#logo_univ_nantes
{
    position: absolute;
    width: 8%;
    top: 85%;
    left: 45.5%;
}