form
{
  text-align: left;
}
input
{
  background-color: rgb(255,255,128);
}

#entête/*titre et second titre*/
{
background-image: url("terrain.jpg");
background-repeat: no-repeat;
width: auto;
height:200px;

}  

#entête form p
{
  text-align: left;
  padding-top: 20;
}

#entête a input
{
  font-size: 14px;
 
}

#facebook 
{
  text-align: right;
}


/* menu de mon compte  */
 ul ul {display: none; position: absolute; left: 144px; top: -1px; margin:0px; padding: 0px; border: 1px solid grey;}
  li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
  li:hover {background-color: #FFFF70;}
  li:hover ul.niveau2, li li:hover ul.niveau3 {display: block}
  li.plus {background-position:right; background-image: url(illustrations/fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid grey;}


body
{
     background-color:rgb(240,240,240);
}



section ul li 
{
    text-align: center;
    font-size: 35px;
    list-style-type:none;
}

nav
{
   text-align:center;
} 




    
footer ul
{
   display:block;
 list-style-type:none;
 text-align: center;
 color: black;
}

footer ul li a
{
   font-size:18px;
   list-style-type:none;
    text-align: center;
}

footer p
{
  font-size: 18px;
}

footer
{
      background-color:grey;
}


   

a
{
    font-size: 20px;
    text-align: center;
    color: black;
    text-decoration: none;
}

a:hover /*apparence passage de la souri*/
{
   text-decoration: 
   color: ;
}

h1
{
     margin-top:0;
     padding: 20px;
     font-size:50px;
     text-align: center;
     text-decoration:underline;
     color:rgb(17,17,17);
     text-shadow: 3px 3px 3px grey;
     display: flex;
     justify-content: center;
     align-items: center;
}

h2
{
     text-decoration:underline;
      text-align:center;
      font-size:30px;
      font-family: arial black;
      color: rgb(17,17,17);
}

#entête h1 h2 strong
{
  
  padding-top: 25px;
}

h3
{
      font-size:25px;
      text-align: center;
      text-decoration: underline;
}



h4
{
      font-size:20px;
      text-align: center;
      text-decoration: underline;
}

h5
{
      font-size:25px;
}


b
{  
    font-size: 15px;
}

p
{
      text-align: center;
      font-size: 18px;
      
}


em
{
   color: red;
background-color: yellow;
}

#parcour
{
  pa
}

#conteneur
{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 30px;
}

#conteneur1
{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 30px;

}

#conteneur1 h2
{
  text-align: center;
}

#conteneur2
{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 30px;
}

#conteneur3
{
    display:flex;
    flex-wrap: ;
    justify-content: space-between;
    padding-top: 30px;
}

#conteneur4
{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 30px;
}

#conteneur5
{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 30px;
}

#conteneur6
{
    display:flex;
    justify-content: space-between;
    padding-top: 30px;
}



#confrontation td/* confrontation contre les autres confédérations */

{
   width: 70px;
}

#confrontation
{
  padding-top: 0px;
}

#sectiongroupe/* groupe et programme des matchs */
{
  padding-top: 40px;
}

#sectiongroupe th
{
  width: 45px;
}

#section1
{
  padding-top: 50px;
}

#section2
{
    padding-top: 50px;

}

#section3
{
    padding-top: 50px;

}

#section4
{
    padding-top: 50px;

}

#section5
{
    padding-top: 50px;

}

#section6
{
    padding-top: 50px;

}

#section7
{
  padding-top: 50px;
}

#section8
{
    padding-top: 50px;

}

#quarts
{
    padding-top: 50px;
}

#quarts1
{
   padding-top: 50px;

}

#quarts2
{
   padding-top: 50px;

}

#quarts3
{
   padding-top: 50px;

}

#quarts4
{
   padding-top: 50px;

}

#quarts5
{
   padding-top: 50px;

}

#serie
{
   padding-top: 50px;

}

#serie td
{
  width: 60px;
}

#resultatsconf  td
{
  width: 100px;
}


.elementprogramme/* ne contient que le programme des matchs */
{
  margin-top: 40px;

}

.elementprogramme h2/* ne contient que le programme des matchs */
{
  text-align: center;
}

.elementprogramme p/* ne contient que le programme des matchs */
{
  font-size: 15px;
  font-weight: bold;
}

table
{
     border-collapse:collapse;
     border:4px solid black;
     font-size:16px;
     margin:auto;
     text-align:center;
     box-shadow: 4px 4px 4px;
}

td
{
     border:2px double black;
     text-align:center;
     background-color:rgb(255,255,255);
}

th
{
     background-color:rgb(255,255,128);
     text-align: center;
     border:2px double black;
     
}


#finale ul li
{
  font-size: 25px;
}

#finale
{
  padding-top: 50px;
}

#finale p
{
  font-size: 25px;
   font-weight: bold;
}

#programmefinale
{
  padding-top: 50px;
}

 #programmefinale p
 {
   text-decoration: underline;
    font-size: 25px;
    font-weight: bold;
 }

 #programmefinale ul li
 {
  font-size: 25px;
 }



#troisiemeplace
{
  padding-top: 50px;
}

#troisiemeprogramme p
{
  text-decoration: underline;
    font-size: 25px;
    font-weight: bold;
}

#troisiemeprogramme ul li
{
  font-size: 25px;
}
 
#troisiemeplace p
{
  font-size: 25px;
   font-weight: bold;
}

mark
{
     background-color:yellow;
}

em
{
    color:red;
}


@media all and (max-width: 1024px)/* pour les petites résplution */
{

      h1
     {
       font-size:auto;
       margin-top: 40px;
       text-align:center;
     }

     h2
     {
      font-size: 10px;
     }


     #section2 h2
     {
      font-size: 10px;
     }

     p
     {
      font-size: 10px;
     }
     
     h3
     {
      font-size: 10px;
     }

     
      
      .elementprogramme p/* ne contient que le programme des matchs */
      {
        font-size: 10px;
      }

     
     #conteneur
     {
        font-size:auto;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
      }

      #conteneurdemi {
        font-size:auto;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
      }


       #conteneur1 /* programme des matches*/
    {
       flex-direction: column;
       padding-left: 0px;
    }
  
    
    #conteneur2 /* paragraphe de la russie*/
    {
       flex-direction: column;
       padding-left: 0px;
    }
  
      #conteneur3 /*  statistiques premiere equipe*/
    {
       flex-direction: column;
       padding-left: 0px;
       margin-left: 0px;
    }


    #conteneur4 /*  statistiques deuxieme equipe*/
    {
       flex-direction: column;
       padding-left: 0px;
    }
  
      #conteneur5 /*  statistiques troisieme equipe*/
    {
       flex-direction: column;
       padding-left: 0px;
    }

      #conteneur6 /* statistiques qutrieme equipe*/
    {
      align-content: stretch;
       flex-direction: column;
       padding-left: 0px;
    }

    .elementrussie1
    {
       justify-content: center;
       
    }

   .elementrussie2
    {
        margin-right: auto;
       margin-left:auto;
        
       
    }
    .elementurss
    {

       margin-right: auto;
       margin-left:auto;
    }

    .element
    {

      padding-top: 0;
    }

     #sectiongroupe th
    {
       width: auto;
    }

    #confrontation td/* confrontation contre les autres confédérations */

    {
       width: auto;
    }

    #confrontation
{
  padding-top: 20px;
}

#sectiongroupe/* groupe et programme des matchs */
{
  padding-top: 0px;
}

#sectiongroupe th
{
  width: auto;
}

#section1 /* (titre)pragraphe et statistiques premiere equipe +confrontation contre d'autre confederation(containeur,2,3+confrontation) */
{
  padding-top: 0px;
}

#section2/* pragraphe(titre) et statistiques deuxieme equipe +confrontation contre d'autre confederation(containeur,4,+confrontation) */
{
    padding-top: 0px;

}

#section3/* pragraphe(titre) et statistiques troisieme equipe +confrontation contre d'autre confederation(containeur,5,+confrontation) */
{
    padding-top: 0px;

}

#section4/* pragraphe(titre) et statistiques qutrieme equipe +confrontation contre d'autre confederation(containeur,6,+confrontation) */
{
    padding-top: 0px;

}

.elementprogramme/* ne contient que le programme des matchs */
{
  padding-top: 0px;
}

footer ul li a
{
   font-size:auto;
   list-style-type:square;
    text-align: left;
}

footer p
{
  font-size: 11px;
}



   
    
    #galerie-menu1 /* navigation de toutes les compétitions*/
    {
      display: none;
      width: 120px;
    }

    #galerie-menu1 a img 
    {
      height:30px;
      width: 50px;
    }


    #galerie-menu2  /* navigation de la coupe du monde*/
{
  width:500px;
  margin:auto;
  border:solid;
  border-radius:5px;
  box-shadow:5px 5px 5px black;
  background:#ccc;
  text-align:center;
  }
#galerie-menu2 a img 
{
  height:5px;
  width:25px;
  border:none;
  vertical-align:top;
}
#galerie-menu2 a 
{
  border-radius:4px;
  display:inline-block;
  transform:scale(0.75);
  overflow:hidden;
  box-shadow: 0 0 4px gray;
  border:solid white;
  transition:1s;
  z-index:1;
}
#galerie-menu2 a:hover,#galerie-menu a:focus 
{
  transform:scale(1.07);
  transform-origin:top center;
  z-index:5;
  background:white;
  transition:1s;
}
#galerie-menu2 a:before 
{
  content:attr(title);
  position:absolute;
  color:white;
  bottom:0;
  box-shadow:0 0 3px white;
  display:block;
  width:100%;
  background:rgba(0,0,0,0.3);
}

#ancre 
{
  display: none;
}

#ancrehautdepage
{
  font-size:15px;
  text-align: center;
  text-decoration: underline;
}

#ancrehautdepage a
{
   font-size:10px;
}

}


 /* fin du responsive*/

#ancrehautdepage
{
  padding-top: 50px
  font-size:20px;
  text-align: right;
  text-decoration: underline;
}

#ancrehautdepage a
{
  background-image: url("boutonancre.png") repeat:  no-repeat;
 
}



#galerie-menu1 /* navigation de toutes les compétitions*/
{
  margin-top: 30px;
  display:none;
	width:1300px;
	margin:auto;
	border:solid;
	border-radius:5px;
	box-shadow:5px 5px 5px black;
	background:#ccc;
	text-align:center;
	}
#galerie-menu1 a img 
{
	height:70px;
	width:100px;
	border:none;
	vertical-align:top;
}
#galerie-menu1 a 
{
	border-radius:15px;
	display:inline-block;
	transform:scale(0.75);
	overflow:hidden;
	box-shadow: 0 0 15px gray;
	border:solid white;
	transition:1s;
	z-index:1;
}
#galerie-menu1 a:hover,#galerie-menu a:focus 
{
	transform:scale(1.3);
	transform-origin:top center;
	z-index:5;
	background:white;
	transition:1s;
       
}
#galerie-menu1 a:before 
{
	content:attr(title);
	position:absolute;
	color:white;
	bottom:0;
	box-shadow:0 0 3px white;
	display:block;
	width:100%;
	background:rgba(0,0,0,0.3);
}


#galerie-menu2 /* navigation coupe du monde */
{
	width:800px;
	margin:auto;
	border:solid;
	border-radius:5px;
	box-shadow:5px 5px 5px black;
	background:#ccc;
	text-align:center;
	}
#galerie-menu2 a img 
{
	height:22px;
	width:100px;
	border:none;
	vertical-align:top;
}
#galerie-menu2 a 
{
	border-radius:15px;
	display:inline-block;
	transform:scale(0.75);
	overflow:hidden;
	box-shadow: 0 0 15px gray;
	border:solid white;
	transition:1s;
	z-index:1;
}
#galerie-menu2 a:hover,#galerie-menu a:focus 
{
	transform:scale(1.07);
	transform-origin:top center;
	z-index:5;
	background:white;
	transition:1s;
}
#galerie-menu2 a:before 
{
	content:attr(title);
	position:absolute;
	color:white;
	bottom:0;
	box-shadow:0 0 3px white;
	display:block;
	width:100%;
	background:rgba(0,0,0,0.3);
}


#galerie-menu3 /* navigation coupe du monde */
{
  width:800px;
  margin:auto;
  border:solid;
  border-radius:5px;
  box-shadow:5px 5px 5px black;
  background:#ccc;
  text-align:center;
  }
#galerie-menu3 a img 
{
  height:22px;
  width:150px;
  border:none;
  vertical-align:top;
}
#galerie-menu3 a 
{
  border-radius:15px;
  text-decoration: none;
  display:inline-block;
  transform:scale(0.75);
  overflow:hidden;
  box-shadow: 0 0 15px gray;
  border:solid white;
  transition:1s;
  z-index:1;
}
#galerie-menu3 a:hover,#galerie-menu a:focus 
{
  transform:scale(1.07);
  transform-origin:top center;
  z-index:5;
  text-decoration: none;
  background:white;
  transition:1s;
}
#galerie-menu3 a:before 
{
  content:attr(title);
  text-decoration: none;
  position:absolute;
  color:white;
  bottom:0;
  box-shadow:0 0 3px white;
  display:block;
  width:100%;
  background:rgba(0,0,0,0.3);
}







.red
{
   background-color: red;
}


.green
{
   background-color:green;
}

.yellow
{
    background-color:yellow;
}

.blue
{
    background-color:blue;
}

.green2
{
    background-color: rgb(103,206,0);
}

.green3
{
    background-color: rgb(170,255,85);
}

.blue2
{
    background-color: rgb(81,168,255);
}

.red2
{
    background-color: rgb(255,128,128);
}

.red3
{
    background-color: rgb(255,150,45);
}
.grey
{
    background-color: rgb(240,240,240);
}

.black
{
    background-color: black;
}

.maroon
{
    background-color: maroon;
}

.olive
{
    background-color: olive;
}

.aqua
{
    background-color: aqua;
}

.white
{
    background-color: white;
}





#menu-demo2, #menu-demo2 ul{
  display: none;
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #729EBF;
background-image:-webkit-linear-gradient(top,  #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom,  #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #729EBF;
background-image:-webkit-linear-gradient(top,  #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom,  #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:last-child{
background-color: #729EBF;
background-image:-webkit-linear-gradient(top,  #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom,  #729EBF 0%, #333A40 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#333A40;
}
#menu-demo2 li:nth-child(2) li{
background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
background:#333A40;
}
#menu-demo2 li:last-child li{
background:#333A40;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#333A40;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#333A40;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#333A40;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#333A40;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}