#MainPage{
	background-repeat: no-repeat;
	background-size:100%;
         }
h1 {
	text-align: center; 
    color: green; 20px;
	margin:0px auto;
	margin-bottom: 80px;
	margin-top:0px;
	width:510px;
	background-color:#d7f1b4;
	border:3px solid #98FB98;
	}
#Retour
{
	color: green; 20px;
}
	
section{
    width:585px;
    /*height:697px;*/
	height:785px;
    overflow:hidden;
    font-family:"Helvetica Neue","Trebuchet MS",sans-serif;
    font-size:0.9em;
	/*margin:60px auto;*/
	margin:0px auto;
	border:3px solid #1f323a;
	}

/*wrapper*/
section #demoWrap{
	/*position:absolute;*/
	position:relative;
	top:-380px;
	width:585px;
	overflow:hidden;}
		
 
/*background gradient*/
section #background{
    width:585px;
    height:380px;
    padding-top:403px;
    background-color:#b99c08;
    background-image:-webkit-linear-gradient(white,white 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0));
    background-image:-moz-linear-gradient(white,white 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0));
    background-image:-o-linear-gradient(white,white 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0));
    background-image:linear-gradient(white,white 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0));
    /*transitions background*/
    -webkit-transition:background-color 1s ease-out;
       -moz-transition:background-color 1s ease-out;
         -o-transition:background-color 1s ease-out;
            transition:background-color 1s ease-out;
}

 
/*ul li*/
section #demoWrap ul{
    height:130px;
    padding-top:60px;
    padding-left:95px;
}
section #demoWrap ul li{
    position:relative;
    float:left;
    width: 100px;
    height: 58px;
    list-style:none;
    margin: 0px 10px;
    padding:6px 5px 6px 5px;
    background:#353A40;
    background:-webkit-linear-gradient(#464c54,#22272b);
    background:-moz-linear-gradient(#464c54,#22272b);
    background:-o-linear-gradient(#464c54,#22272b);
    background:linear-gradient(#464c54,#22272b);
    -webkit-border-radius:5px;
       -moz-border-radius:5px;
            border-radius:5px;
    -webkit-box-shadow:0px 0px 4px #1b1e22;
       -moz-box-shadow:0px 0px 4px #1b1e22;
            box-shadow:0px 0px 4px #1b1e22;
}
/* init lights : off */
/*
PLUS: lors de chaque :target sur lien 2,3,4
remise par défaut de light 1
*/
section #demoWrap ul li::after,
section #demoWrap #wrap2:target ul li:nth-child(1)::after,
/*section #demoWrap #wrap3:target ul li:nth-child(1)::after,*/
section #demoWrap #wrap3:target ul li:nth-child(1)::after{
    content:"";
    position:absolute;
	top:160px;
	left:48px;
    width: 4px;
    height: 4px;
    background:black;
    -webkit-border-radius:2px;
       -moz-border-radius:2px;
            border-radius:2px;
    -webkit-box-shadow:none;
       -moz-box-shadow:none;
            box-shadow:none;
}
 
/* init lien */
/*
PLUS: lors de chaque :target sur lien 2,3,4
remise par défaut du lien 1
*/
section #demoWrap ul li a,
section #demoWrap #wrap2:target ul li:nth-child(1) a,
/*section #demoWrap #wrap3:target ul li:nth-child(1) a,*/
section #demoWrap #wrap3:target ul li:nth-child(1) a{
    display: block;
    height: 58px;
    width: 100px;
    /*color:#111;*/
	color:rgb(255 255 255 / 68%);
    font-size:1.4em;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    text-shadow:1px 1px 0px rgba(0,0,0,0.5);
    background:#888;
    background:-webkit-linear-gradient(right top,#575a5c,#757575 15%,#888 35%,#555a63);	
    background:-moz-linear-gradient(right top,#575a5c,#757575 15%,#888 35%,#555a63);
    background:-o-linear-gradient(right top,#575a5c,#757575 15%,#888 35%,#555a63);
    background:linear-gradient(to bottom left,#fbfbfb,#fffafa 15%,#cbc7c7 35%,#000000);*/
	/*background:linear-gradient(to bottom left,#575a5c,#757575 15%,#888 35%,#555a63);*/
    /*shadows top et bottom*/
    -webkit-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
				   0px 1px 0px rgba(255,255,255,0.5),                       
                       0px 2px 0px rgba(0,0,0,1);
       -moz-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
				   0px 1px 0px rgba(255,255,255,0.5),                       
                       0px 2px 0px rgba(0,0,0,1);
            box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
				   0px 1px 0px rgba(255,255,255,0.5),                       
                       0px 2px 0px rgba(0,0,0,1);
    /* hover sur couleur*/
    -webkit-transition:color 0.25s ease;
       -moz-transition:color 0.25s ease; 
         -o-transition:color 0.25s ease;
            transition:color 0.25s ease;                    
}
 
/* hover lien */
/*
PLUS: lors de chaque :target sur lien 2,3,4
remise par défaut du lien 1
*/
section #demoWrap ul li a:hover,
section #demoWrap #wrap2:target ul li:nth-child(1) a:hover,
/*section #demoWrap #wrap3:target ul li:nth-child(1) a:hover,*/
section #demoWrap #wrap3:target ul li:nth-child(1) a:hover{
    color:white;
}
/* span */
section #demoWrap ul li a span{
display:block;
position:absolute;
top:19px;
left:10px;
height: 28px;
width: 35px;
padding-top:5px;
background:rgba(255,255,255,0.4);
    -webkit-border-radius:18px;
       -moz-border-radius:18px;
            border-radius:18px;
    -webkit-box-shadow:0px -1px 0px rgba(0,0,0,0.5);
       -moz-box-shadow:0px -1px 0px rgba(0,0,0,0.5);
            box-shadow:0px -1px 0px rgba(0,0,0,0.5);
}
 
/* fleche */
section #demoWrap #fleche{
	width: 0px;
	height: 0px;
	border-bottom:15px solid #1b1e22;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
	margin-left: 145px;
	/*deplacement*/
    -webkit-transition:margin-left 0.1s ease-in;
       -moz-transition:margin-left 0.1s ease-in;
         -o-transition:margin-left 0.1s ease-in;
            transition:margin-left 0.1s ease-in;
}
 
/* :target Couleur d'arrivée du dégradé apres click */
/* lien1 */
section #demoWrap #wrap1:target #textes{margin-left:0px;}
section #demoWrap #wrap1:target #background{background-color:#b5760a;}
section #demoWrap #wrap1:target #fleche{margin-left:145px;}
/* lien2 */
section #demoWrap #wrap2:target #textes{margin-left:-585px;}
section #demoWrap #wrap2:target #background{background-color :#0869b9;}
section #demoWrap #wrap2:target #fleche{margin-left:275px;}
/* lien3 */
section #demoWrap #wrap3:target #textes{margin-left:-1170px;}
section #demoWrap #wrap3:target #background{background-color:#148a34;}
section #demoWrap #wrap3:target #fleche{margin-left:405px;}
/* lien4 */
section #demoWrap #wrap4:target #textes{margin-left:-1755px;}
section #demoWrap #wrap4:target #background{background-color:#90c;}
section #demoWrap #wrap4:target #fleche{margin-left:415px;}

/* liens modifiés par :target */
/* PLUS: init lien1 */
section #demoWrap ul li:nth-child(1) a,
/*section #demoWrap #wrap1:target ul li a[href="#wrap1"],
section #demoWrap #wrap2:target ul li a[href="#wrap2"],
section #demoWrap #wrap3:target ul li a[href="#wrap3"],*/
section #demoWrap #wrap1:target ul li a[href="#wrap1"]{
	/*couleur texte bouton après click*/
    /*color:white;*/
	/*color:#ffc61e;*/
	/*color:#ffff00;*/
	color:#ff9e00;
    background:#282C2F;
    background:-webkit-linear-gradient(#585c61,#1a1e20);
    background:-moz-linear-gradient(#585c61,#1a1e20);
    background:-o-linear-gradient(#585c61,#1a1e20);
	/*Fond de bouton sur dégradé après click*/
    /*background:linear-gradient(#4CFF7C,#358519);*/
	background:linear-gradient(to bottom left,#e57e10,#e89900 15%,#f9d50d 35%,#49300f);
	-webkit-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
                       0px 1px 0px rgba(0,0,0,0.9),
                       0px 2px 0px rgba(255,255,255,0.4);
       -moz-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
                       0px 1px 0px rgba(0,0,0,0.9),
                       0px 2px 0px rgba(255,255,255,0.4);
            box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
                       0px 1px 0px rgba(0,0,0,0.9),
                       0px 2px 0px rgba(255,255,255,0.4);
    border-left:1px solid rgba(0,0,0,0.1);
    border-right:1px solid rgba(0,0,0,0.1);
    margin-left:-1px;
}
 
 section #demoWrap #wrap2:target ul li a[href="#wrap2"]{
	/*couleur texte bouton après click*/
    /*color:white;*/
	color:#03e7fb;
    background:#282C2F;
    background:-webkit-linear-gradient(#585c61,#1a1e20);
    background:-moz-linear-gradient(#585c61,#1a1e20);
    background:-o-linear-gradient(#585c61,#1a1e20);
	/*Fond de bouton sur dégradé après click*/
    /*background:linear-gradient(#4CFF7C,#358519);*/
	background:linear-gradient(to bottom left,#9de5f5,#0cede5 15%,#29b0bf 35%,#202f33);
	-webkit-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
                       0px 1px 0px rgba(0,0,0,0.9),
                       0px 2px 0px rgba(255,255,255,0.4);
       -moz-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
                       0px 1px 0px rgba(0,0,0,0.9),
                       0px 2px 0px rgba(255,255,255,0.4);
            box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
                       0px 1px 0px rgba(0,0,0,0.9),
                       0px 2px 0px rgba(255,255,255,0.4);
    border-left:1px solid rgba(0,0,0,0.1);
    border-right:1px solid rgba(0,0,0,0.1);
    margin-left:-1px;
}
 section #demoWrap #wrap3:target ul li a[href="#wrap3"]{
	/*couleur texte bouton après click*/
    /*color:white;*/
	/*color:#a6ff00;*/
	color:#b6ef6f;
    background:#282C2F;
    background:-webkit-linear-gradient(#585c61,#1a1e20);
    background:-moz-linear-gradient(#585c61,#1a1e20);
    background:-o-linear-gradient(#585c61,#1a1e20);
	/*Fond de bouton sur dégradé après click*/
    /*background:linear-gradient(#4CFF7C,#358519);*/
	background:linear-gradient(to bottom left,#d8eed7,#8ef088 15%,#1bbf1f 35%,#000000);
	-webkit-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
                       0px 1px 0px rgba(0,0,0,0.9),
                       0px 2px 0px rgba(255,255,255,0.4);
       -moz-box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
                       0px 1px 0px rgba(0,0,0,0.9),
                       0px 2px 0px rgba(255,255,255,0.4);
            box-shadow:0px -1px 0px rgba(255,255,255,0.5),
                       0px -2px 0px rgba(0,0,0,0.3),
                       0px 1px 0px rgba(0,0,0,0.9),
                       0px 2px 0px rgba(255,255,255,0.4);
    border-left:1px solid rgba(0,0,0,0.1);
    border-right:1px solid rgba(0,0,0,0.1);
    margin-left:-1px;
}
 
/* lights modif */
/* PLUS: init light 1 */
section #demoWrap ul li:nth-child(1)::after,
section #demoWrap #wrap1:target ul li:nth-child(1)::after,
section #demoWrap #wrap2:target ul li:nth-child(2)::after,
section #demoWrap #wrap3:target ul li:nth-child(3)::after{
    background:white;
    -webkit-box-shadow:0px 0px 4px #fff;
       -moz-box-shadow:0px 0px 4px #fff;
            box-shadow:0px 0px 4px #fff;
}
 
 
/* couleur du rond dans lien*/
section #demoWrap #wrap1:target ul li a[href="#wrap1"] span,
section #demoWrap #wrap2:target ul li a[href="#wrap2"] span,
section #demoWrap #wrap3:target ul li a[href="#wrap3"] span{
    background:rgba(151,151,151,0.7);
}
 
/* div textes */
section #textes{
	clear:left;
	width:2340px;
	height:590px;
	margin-top:6px;
	background:#292E34;
    background:-webkit-linear-gradient(#333941,#21262a);
    background:-moz-linear-gradient(#333941,#21262a);
    background:-o-linear-gradient(#333941,#21262a);
    background:linear-gradient(#333941,#21262a);
    border-top:1px solid rgba(255,255,255,0.4);
    -webkit-box-shadow:0px -6px 0px #1b1e22,0 -7px 3px rgba(0,0,0,0.5);
       -moz-box-shadow:0px -6px 0px #1b1e22,0 -7px 3px rgba(0,0,0,0.5);
            box-shadow:0px -6px 0px #1b1e22,0 -7px 3px rgba(0,0,0,0.5);
    -webkit-transition:margin-left 1s ease-out;
       -moz-transition:margin-left 1s ease-out;
         -o-transition:margin-left 1s ease-out;
            transition:margin-left 1s ease-out;
}
/*texte*/
section #demoWrap p{
    width:585px;
    /*height:443px;*/
	height:490px;
    float:left;
    /*padding-top:30px;*/
    text-align:center;
    font-size:1.2em;
    color:#ddd;
    text-shadow:0px -1px 0px rgba(0,0,0,0.5);
}
/*titre*/
section #demoWrap p strong{
    display: block;
    /*font-size:3.4em;*/
    line-height:1.2em;

.image{
	max-width:585px;
	max-height:440px;
}