a:link
{
text-decoration:none;
}
body
{
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
}
a:hover
{
color : rgb(255, 50, 50);
text-decoration:underline;
}
html { height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#sous-entete2 {
display:none;
}

#corps ol li, #corps ol li ul li{
box-sizing:border-box;
width: 200px;
border: 5px solid white;
text-align: center; background-color: rgb(102, 0, 0);
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
font-size: 16pt;
color: white;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 5px 2px 3px 2px #bbb, 10px 10px 8px 2px rgba(12,34,56,0.5);
-moz-box-shadow: 5px 2px 3px 2px #bbb, 10px 10px 8px 2px rgba(12,34,56,0.5);
box-shadow: 5px 2px 3px 2px #bbb, 10px 10px 8px 2px rgba(12,34,56,0.5);
padding: 5px;
}
#corps ol li { margin-left: 60%; list-style-type:none; text-align:center; }
#corps li { float:none; }
#corps li a { color:white; text-decoration:none; padding:5px; }
#corps li a:hover { color:#FFD700; text-decoration:underline;}
#corps ol li ul { display:none; }
#corps ol li:hover ul { display:block; margin-top: -50px;}
#corps ol li:hover { float:none; }
#corps ol li ul { position:absolute; }
#corps {
width: 100%;
height: 100%;
}

#logo {
position: absolute; top: 0%; left: 0%;
}
#logo1 {
width: 35%;
height: 35%;
}
#entete {
position: absolute; top:2%; left: 30%;
margin-left: 0px;
font-size: 36pt;
font-family: Helvetica,Arial,sans-serif; font-weight: bold;
text-shadow: 8px 8px 5px rgba(6,17,23,0.5);
}
#sous-entete {
display:block;
position: absolute; top: 17%; left: 30%;
margin-left: 0px;
font-size: 16pt;
font-family: Helvetica,Arial,sans-serif; font-weight: bold;
}
#corps {
position: absolute; top: 35%; left: 18%;
width: 30%;
height: 65%;
}

@media all and (max-device-width: 480px)
{
#logo1 {
width: 35%;
height: 35%;
}
.saut {
height: 10px;
}
#entete {
position: absolute; top: 10%; left: 25%;
font-size: 42pt;
margin-left: 0px;
font-family: Helvetica,Arial,sans-serif; font-weight: bold;
text-shadow: 8px 8px 5px rgba(6,17,23,0.5);
}
#sous-entete {
position: absolute; top: 22%; left: 25%;
font-size: 28pt;
margin-left: 0px;
font-family: Helvetica,Arial,sans-serif; font-weight: bold;
}
#corps {
position: absolute; top: 37%; left: 20%;
width: 30%;
height: 40%;
}
#corps ol { height: 10%; }
#corps ol li, #corps ol li ul li{
width: 250px;
}

a:link
{
text-decoration:none;
font-size: 32pt;
}
#corps ol li ul li{
font-size: 32pt;
}

}
@media only screen and (max-height: 500px) and (orientation:landscape) {

#entete {
position: absolute; top: -23px; left: 25%;
}
#sous-entete {
display:none;
}
#sous-entete2 {
display:block;
position: absolute; top: 20%; left: 25%;
font-size: 16pt;
margin-left: 0px;
font-family: Helvetica,Arial,sans-serif; font-weight: bold;
}
#corps {
position: absolute; top: 33%; left: 15%;
width: 30%;
height: 50%;
}
#corps ol { height: 6%; }

}
@keyframes bienvenue {
0% {
right: 0px;
top: 0px;
}
50% {
right: 30px;
top: 30px;
}
75% {
right: 30px;
top: 30px;
}
100% {
right: 0px;
top: 0px;
}
}
#ovni {
position:absolute; top: 0px; right: 0px;
animation-name: bienvenue;
animation-duration: 7s;
animation-iteration-count: infinite;
}