/* Animation Logo et background - DÉBUT */
@-webkit-keyframes logo {
    0% { 
      transform: translateY(140px);
      opacity:0
    }
    70% { 
      transform: translatey(0);
    }
    100% { 
      opacity:1;
    }
}

@keyframes logo {
  0% { 
    transform: translateY(140px);
    opacity:0
  }
  70% {
    opacity : 0.5;
  }
  100% {
    transform: translatey(0);
    opacity:1;
  }
}

@-webkit-keyframes fond {
  0% {
    background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
    url(images/header_Background.jpg); background-size: cover; 
  }
  25% {
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
    url(images/header_Background.jpg);background-size: cover;
  }
  50% {
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
    url(images/header_Background.jpg);background-size: cover;
  }
  75% {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    url(images/header_Background.jpg);background-size: cover;
  }
    100%  {
      background: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)),
      url(images/header_Background.jpg);background-size: cover;
    }
}

@keyframes fond {
  0% {
    background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
    url(images/header_Background.jpg); background-size: cover;
  }
  25%{
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
    url(images/header_Background.jpg);background-size: cover;
  }
  50% {
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
    url(images/header_Background.jpg);background-size: cover;
  }
  75% {
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    url(images/header_Background.jpg);background-size: cover;
  }
    100%  {
      background: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)),
      url(images/header_Background.jpg);background-size: cover;
    }
  }
/* Animation Logo et background - FIN */

/* Style parties communes - DÉBUT */
section{
  max-width: 65%;
  margin: 210px auto 0 auto;
}

@font-face {
  font-family: 'Titre';
  src: url('fonts/Comfortaa-Regular.ttf') format('truetype');
}

@font-face {
   font-family: 'Texte';
  src: url('fonts/Cinzel-Regular.ttf') format('truetype')
 }

h1 {
  font-family: "Titre";
  font-size: 250%;
  font-weight: lighter;
}

p, h2, li{
  font-family: 'Open Sans', sans-serif;
  color: #A9A9A9;
}

h3, h4, h5, label, button{
  font-family: 'Open Sans', sans-serif;
}

hr{
    border: 2.5px solid #B22222;
}
/* Style parties communes - FIN */

/* Style Header - DÉBUT */
header nav ul{
  display:flex;
  float:right;
  margin-right:15%;
}

/*Elements of the navigation block
(About, Team, Events, Contact form)*/
header nav ul li{
  color: white;
  padding-left: 10px;
  padding-right: 20px;
  list-style-type: none;
}

header nav ul li a, header nav ul li a:visited {
  color: white;
  text-decoration: none;
}

header nav ul li a:hover {
  background-color: #B22222;
  color: white;
  padding: 5px 15px;
  font-size: 110%;
}

/*Header of the page
contains the navigation block and the logo*/
header {
  height: 480px;
  background:
  /*transparent black covering the background image*/
  linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)),
  /*background image*/
  url(images/header_Background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 150px;
  animation: fond 0.7s;
  -webkit-animation: fond 0.7s;
}

/*Div of the header containing the logo
Width and Height are set to correspong to the size of
  the image it contains i.e. the logo
Paddings top and bottom are set as to correspond to the height of the
  height of the header [padding=(height of header/4]*/
#logo {
  width: 284px;
  height: 214px;
  padding-top: 120px;
  padding-bottom: 120px;
  margin: auto;
}

/*Logo contained in header
Specify size here*/
#logo img {
  -webkit-animation: logo 3s;
  animation: logo 3s;
}
/* Style Header - FIN */

/* Style section Who We Are - DÉBUT */
/* Container Reda*/
#Presentation {
  position: relative;
  left: 170px;
}

#blocphoto{
  float:left;
  margin-right: 20px;
}

#bloc-titre{
  float:left;
  position: relative;
  top:30px;
}

 /* Titre */
#whoweare {
  padding-top: 5%;
}
/* Barre en dessous du titre */
#bloc-titre hr {
  width: 235px;
  position:absolute;
  bottom:5px;
}

/* Case à coté de l'image */
#best {
  background-color: #B22222;
  border-style: solid;
  border-color: white;
  position: absolute;
  left: -80px;
  top: 30px;
  color: white;
  padding: 5px;
}

/* Paragraph 1 et 2 */
#par1 {
  padding-top: 250px;
  width: 70% ;
}

#par2 {
  padding-top: 10px;
  width : 70%;
}

/* Style section Who We Are - FIN */

/* Style section Our Team - DÉBUT */
/*Section BODY starts now*/
.block1 {
  display: flex;
  padding-bottom: 20px;
  padding-top: 20px;
}

.block2 {
  display: flex;
  padding-top: 20px;
}

.text-uppercase {
  text-align: center;
}

.title{
  position: relative;
  width:260px;
  margin-left: auto;
  margin-right: auto;
}

#team .title hr {
  width: 180px;
  position: absolute;
  left:30px;
  bottom:-15px;
}

.team-member1 h2, .team-member2 h2, .team-member3 h2, .team-member4 h2 {
  float: left;
  text-transform: uppercase;
  color: rgb(239, 247, 241);
  font-size: 12px;
  font-weight: 50;
  padding-right: 15px;
  padding-bottom: 2px;
  padding-left: 8px;
  padding-top: 3px;
  width: 30px;
  background-color: #B22222;
}

.title{
  margin-bottom: 70px;
}

#team p {
  display: run-in;
}

.team-member1 {
  display: left;
  float: right;
  padding-right: 40px;
  padding-left: 80px;
}

.team-member2 {
  padding-right: 40px;
  padding-left: 80px;
}

.team-member3 {
  display: left;
  padding-right: 40px;
  padding-left: 80px;
}

.team-member4 {
  padding-right: 40px;
  padding-left: 80px;
}

.img-team{
  float: left;
}
/* Style section Our Team - FIN */

/* Style section Our Events - DÉBUT */
#ligne-un {
  display:flex;
  justify-content: center;
}

#our {
  position: relative;
  width: 250px;
  margin-right: auto;
  margin-left: auto;
}

#our hr {
  position: absolute;
  bottom:55%;
  left: 8%;
  width: 185px;
  margin-left: auto;
  margin-right: auto;
}

#ligne-deux{
  clear:both;
  margin:auto;
  height: 375px;
  background-color: #0000;
  display: flex;
}

#ligne-deux aside {
  width: 25%;
  height: 350px;
  margin: 20px auto 0px auto;
  box-shadow: 0px 3px 8px 1.5px #D8D8D8;
  text-align: center;
}

.titre {
width: 100%;
height: 10%;
background-color: #B22222;
margin: 0 0;
border-color: #B22222;
color: white;
padding-top: 8px;
}

.mois {
  color: #81DAF5;
  font-size:20px;
}

.jour {
  margin-top: -5px;
}

.theme {
  font-size:15px;
  margin-top: -5px;
  font-weight: lighter;
}

.corps{
  margin : 0px 25px;
  color: #A9A9A9;
}
/* Style section Our Events - FIN */


/* Style section Need an Event? - DÉBUT */
/*div containing title and underscore of the section 'form-section'*/
#form-title{
  position:relative;
}

/*hr is used as an underscore of the title of the form.
This allows to position it according to the maquette*/
#form-title hr{
  width: 295px;
  position: absolute;
  top:35px;
  left:3px;
}

form{
  max-width:70%;
  height:400px;
  margin: 60px auto 0px auto;
}

/*The form contains a div for each label element and its input box
(Name, Firstname, E-mail and Description)*/
form div{
  margin-bottom: 25px;
  width:40%;
  float:left;
}

form div label{
  float:left;
  top:0px;
  width:100%;
  margin-bottom:10px;
}

form div input, form div textarea{
  width:70%;
  top:40px;
}

form div input, form div textarea, form div button{
  border-radius: 10px;
  border: 1px solid #B22222;
}

form #form-description{
  width:100%;
  height:40%;
}

#form-description textarea{
  height:70%;
}

#form-mail, #form-description, #form-button{
  clear:both;
}

form #form-button{
  width:100%;
  margin-left:28%;
}

#form-button button{
  background-color: white;
  color:#B22222;
  width:90px;
  height:30px;
  text-transform: uppercase;
}

#form-button button:hover{
  background-color:#B22222;
  color:white;
}

.form-star{
  position:relative;
  top:5px;
}

/* Style section Need an Event? - FIN */

/* Style FOOTER - DÉBUT */
footer h1{
  text-align:center;
  text-transform:uppercase;
}

footer {
  background-image: url(images/swirl_pattern.png);
  padding-top: 20px;
  padding-bottom: 55px;
}

/*Div contained by footer
This Dic contains the icons for external links (LinkedIn, Instagram, Twitter, Facebook)
*/
.footer-icons {
  display: flex;
  justify-content: center;
  padding-top: 15px;
}

/*Images representing the external links of the div (.footer-icons)
contained in the footer*/
.footer-icons img {
  height: 33px;
  width: 33px;
  border-radius: 50%;
  padding-left: 20px;
  padding-right: 20px;
}

footer h1 {
  text-align: center;
}
/* Style FOOTER - FIN */