/*
    Auteur : Léo
    Date : 18.12.2019
    Description : Page des styles
*/
/*style pour le body de la page d'accueil*/
.body1 {
  background-image:url(../images/velofond2.jpg);
  background-size:cover;
  font-family: arial, sans-serif;
}
/*style pour le body des pages de contenu*/
.body2 {
  background-color: white;
  background-size:cover;
  font-family: arial, sans-serif;
}
/*style pour le body de la page des sources*/
.body3 {
  background-image:url(../images/velofond.jpg);
  background-size:100%;
  font-family: arial, sans-serif;
}
/*style pour l'en-têtes de la page d'accueil*/
.header {
    font-size: 3.7em;
    font-family: Courier New, monospace;
    color: black;
    text-align:center;
    border:solid white 8px;
    margin: auto;
    padding: 1%;
    margin-top: 0%;
    width: 25%;
    min-width:400px;
    border-radius: 30px;
    font-weight:bold;
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
}
/*style pour l'en-têtes des pages 2 et 3*/
.headerpage {
    font-size: 315%;
    font-family: Courier New, monospace;
    color: black;
    text-align:center;
    border:solid red 7px;
    margin: auto;
    padding: 1%;
    margin-top: 0%;
    width: 25%;
    border-radius: 30px;
    font-weight:bold;
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
}
/*style pour l'en-têtes de la page sources*/
.headerpagesource {
    font-size: 3em;
    font-family: Courier New, monospace;
    color: black;
    text-align:center;
    border:solid red 7px;
    margin: auto;
    padding: 1%;
    margin-top: 0%;
    width: 5em;
    border-radius: 30px;
    font-weight:bold;
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
}
/*style pour l'en-têtes des pages 4 et 5*/
.headerpagevideo {
    font-size: 310%;
    font-family: Courier New, monospace;
    color: black;
    text-align:center;
    border:solid red 7px;
    margin: auto;
    padding: 1%;
    margin-top: 0%;
    width: 37%;
    border-radius: 30px;
    font-weight:bold;
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, purple);
}
/*style pour le titre des textes*/
.h2 {
  padding: 1%;
}
/*style pour les textes*/
.p {
  padding: 1%;
  font-size: 1.2em;
}
/*style pour les textes des sources*/
.p2 {
  padding: 1%;
  font-size: 1.2em;
  color: white;
}
/*style de container qui englobe d'autres container*/
.containerprincipale {
  display:flex;
  width:80%;
}
/*style pour container de texte*/
.containertext {
  display: flex;
  flex-direction: column;
  border: solid red 5px;
  margin-top: 4%;
  width: 37%;
}
/*style pour container de texte des sources*/
.containertext2 {
  display: flex;
  flex-direction: column;
  border: solid yellow 5px;
  margin-top: 2.5%;
  margin-left: 25%;
  width: 50%;
  background-color:black;
  text-align:center;
}
/*style pour container à 1 image*/
.containerimage {
  margin-top:4%;
  margin-right:1%;
  width:37%;
}
/*style pour container à 2 image*/
.containerimage2 {
  margin-top:4%;
  margin-right:1%;
  width:37%;
  flex-direction:column;
}
/*style pour container d'espace vide entre le contenu et le média*/
.containervide {
  display:flex;
  margin-top: 4%;
  width:5%;
}
/*style pour le logo*/
.logo {
  float:left;
}
/*Style pour la zone de menu de la page d'accueil*/
.menuAccueil {
  width:15%;
  float: left;
  margin-top:0%;
}
/*style pour la bannière de gauche de chaque page*/
.menulesVelos {
  width:18%;
  float: left;
  margin-top:2.5%;
  margin-right:2%;
  background-color: #000000;
  padding-bottom: 20px;
}
.menulesDisciplines {
  width:18%;
  float: left;
  margin-top:2.5%;
  margin-right:2%;
  background-color: #000000;
  padding-bottom: 20px;
}
.menudivers {
  width:18%;
  float: left;
  margin-top:2.5%;
  margin-right:2%;
  background-color: #000000;
  padding-bottom: 20px;
}
.menulescompetitions {
  width:18%;
  float: left;
  margin-top:2.5%;
  background-color: #000000;
  padding-bottom: 20px;
}
.menusources {
  width:18%;
  float: left;
  margin-top:2.5%;
  margin-right:2%;
  background-color: #000000;
  padding-bottom: 20px;
}
/*style pour le titre du menu de la page d'accueil*/
.menuTitre {
  margin-top:0%;
  color: white;
  font-size: 2.3em;
  font-family: Stencil Std, fantasy;
  background-color: #000000; 
  border: 1px solid white;
  color: white;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius:30px;
  margin-right: 10%;
  margin-left: 10%;
}
/*style pour le titre du menu des pages de contenu*/
.menuTitrepage {
  margin-top:10%;
  color: white;
  font-size: 2.3em; 
  font-family: Stencil Std, fantasy;
  background-color: red; 
  border: 1px solid white;
  color: white;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius:30px;
  margin-right: 10%;
  margin-left: 10%;
}
/*style de titre des vidéos*/
.titrepagefinal {
  margin-left:26%;
  margin-top:3%;
  border: solid 6px #ffd700;
  border-radius:20px;
  padding:1%;
  text-align:center;
  width:20%;
}
/*Style pour les vidéos*/
.video {
  margin-top:4%;
  width:40%;
  margin-left:17%;
}
/*Style pour les boutons*/
.button {
  background-color: red; 
  border: 1px solid white;
  color: #ffd700;
  padding: 2% 5%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  margin-top: 7%;
  border-radius:30px;
  margin-right: 5%;
  margin-left:10%;
  cursor: pointer;
  outline: none;
  color: #fff;
  box-shadow: 0 0.5em #ffd700;
  float:left;
}
/*effet noir quand la souris passe dessus*/
.button:hover {background-color: #000000}
/*effet de pression sur le bouton*/
.button:active {
  background-color: #000000;
  box-shadow: 0 5px #666;
  transform: translateY(10%);
}
#activelesVelos {
  background-color:  #000000;
}
#activedisciplines{
  background-color:  #000000;
}
#activedivers{
  background-color:  #000000;
}
#activecompetitions {
  background-color:  #000000;
}
#activesources {
  background-color:  #000000;
}
.imagedisciplines {
  width:700px;
}
@media screen and (max-width:1335px){
  .headerpage {
    font-size: 2em;
  }
  .headerpagevideo {
    font-size: 2em;
  }
}
@media screen and (max-width:1015px){
  .button {
    font-size: 0.7em;
  }
}