/**Ile navigable**/
#ile{height:100%;height:100vh;}
#conteneur{width:70%;margin:0 auto;padding-top:20px;}
#bg1{width:29.85%;float:left;}
#bg2{width:20.85%;float:left;}
#bg3{width:22.2%;float:left;}
#bg4{width:27.1%;float:left;}
#conteneur img{width:100%;height:auto;cursor:pointer;}
.bg{position:absolute;height:80px;opacity:0.8;top:36px;left:26%;display:none;width:29.65%;}
#jaune p,#rouge p,#bleu p, #vert p{display:table-cell;vertical-align:middle;text-align:right;
font-size: 21px;font-weight: bold;padding-right:10px;z-index:9999;font-family:'Open Sans Condensed',sans-serif;}
#jaune{background: url('../images/ile/jaune.png')top left no-repeat;background-size:cover;}
#rouge{background: url('../images/ile/rouge.png')top left no-repeat;background-size:cover;}
#bleu{background: url('../images/ile/bleu.png')top left no-repeat;background-size:cover;}
#vert{background: url('../images/ile/vert.png')top left no-repeat;background-size:cover;}
#top{width:100%;align-self: flex-start;}
#top img{width:100%;height:auto;}
#jaune p,#rouge p,#bleu p,#vert p{padding-top:24px;text-align:center;}
#jaune a,#rouge a,#bleu a,#vert a{color:#FFFFFF;text-decoration:none;}
#jaune a:hover,#rouge a:hover,#bleu a:hover,#vert a:hover{font-size:23px;}

/**Positionnement centré dans la page**/
.flex {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;
-webkit-box-direction: normal;-moz-box-direction: normal;-webkit-box-orient: horizontal;-moz-box-orient: horizontal;
-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-moz-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;
justify-content: center;-webkit-align-content: center;-ms-flex-line-pack: center;align-content: center;-webkit-box-align: center;-moz-box-align: center;-webkit-align-items: center;-ms-flex-align: center;
align-items: center;}

#header-ile {position:fixed;left:25%;bottom:45px;font-size:32px;width:50%;text-align:center;}
#texte-ile {color:#FFFFFF;text-align:center;font-size: 19px;font-family: 'Open Sans Condensed', sans-serif; font-weight: 400!important;}
#texte-ile span{background:#343434;padding: 5px;}

/*
    Legacy Firefox implementation treats all flex containers
    as inline-block elements.
*/

@-moz-document url-prefix() {
.flex {
    width: 100%;
    -moz-box-sizing: border-box;
    }
}
@media screen and (max-width:1000px) {
	.bg{display:none;}
}
@media screen and (max-width:1024px) { 
	.bg{height:58px;}
	#jaune p,#rouge p,#bleu p, #vert p{font-size: 17px;}
}
@media screen and (max-width:1100px) { 
	.bg{height:64px;}
}
@media screen and (max-width:1200px) { 
	.bg{height:74px;}
}
@media screen and (min-width:1380px) { 
	#conteneur{width:80%;margin:0 auto;padding-top:20px;}
	.bg{position:absolute;height:104px;opacity:0.8;top:40px;left:22.5%;display:none;width:29.65%;}
}
@media screen and (min-width:1500px) { 
	.bg{top:50px;}
}
@media screen and (min-width:1800px) { 
	.bg{height:124px;top:58px;}
}
@media screen and (min-width:2100px) { 
	.bg {height: 160px;top: 80px;width: 26%;}
}
@media screen and (min-width:2750px) { 
	.bg {height: 220px;top: 140px;width: 25%;}
}