/* dimension de la page 1 */
#global {
position:absolute;
width: 100%;
height:100%;
margin: auto;
background-color: #fff; 

}

/* logo */
#atelier {  
position: absolute;
margin: auto;
top: 15%;
right: 0;
bottom: 0;
left: 0;
z-index:10;
}
#logo { 
width: 30%; 
height: auto;
}

/* menu */
.menu{  
width: 100%;
}
li {
display:inline;
}
li.chrono {
left:10%;
position: absolute;
top: 90%;
z-index:10;
}
li.prog {
right:10%;
position: absolute;
top: 90%;
z-index:10;
}
a {
font-family: 'Helvetica', sans-serif; 
color: #333;
font-size: 150%;
font-weight:bold;
text-decoration: line-through;
text-decoration-style: bold;
text-decoration-color: #333;
text-decoration-thickness: 0.125em;
}
a:hover {
text-decoration: none;
}

h3 {
    position:relative;
    top:35%; 
    color:#333;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:200%;
	left:0;
	right:0;
	text-align:center;
	  }


 
/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media screen and (max-width: 1024px)
{
#logo {  
width:50%; 
height: auto; 
position: absolute;
object-fit: cover;
margin-left: 1;
top: 10%;
right: 25%; 
}

.menu{  
top: 90%;
width: 100%;
}


#global {
position:absolute;
width: 100%;
height:100%;
margin: auto;
background-color: #fff;    
}
h3 {
    position:relative;
    top:950px; 
    color:#333;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:200%;
	left:0;
	right:0;
	text-align:center;
	z-index:50;
	  }
}
@media screen and (max-width: 600px)
{
#logo {  
width:50%; 
height: auto; 
position: absolute;
object-fit: cover;
margin-left: 1;
top: 10%;
right: 25%; 
}

.menu{  
top: 90%;
width: 100%;
}
li.chrono {
left:5%;
position: absolute;
top: 85%;
z-index:10;
}
li.prog {
right:5%;
position: absolute;
top: 85%;
z-index:10;
}

#global {
position:absolute;
width: 100%;
height:100%;
margin: auto;
background-color: #fff;    
}
/* dimension de la page 2 */
#global2 {
position:absolute;
width: 100%;
/*modifier longueur de la page*/
height:250%;
margin: auto;
background-color: #fff;   
opacity:1; 
z-index:1;
}

h3 {
    position:relative;
    top:950px; 
    color:#333;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	font-size:200%;
	left:0;
	right:0;
	text-align:center;
	z-index:50;
	  }
}
@media screen and (max-width: 340px)
{
li.chrono {
left:2%;
position: absolute;
top: 85%;
z-index:10;
}
li.prog {
right:2%;
position: absolute;
top: 85%;
z-index:10;
}

a {
font-size: 120%;
}
}
@media screen and (orientation: landscape) {
  #logo {  
width:30%; 
height: auto; 
position: absolute;
object-fit: cover;
margin-left: 1;
top: 0%;
right: 35%; 
}

.menu{  
top: 50%;
width: 100%;
}
}