:root {
  /* --main-color : rgb(215, 17, 17);*/
  --main-color: rgba(97, 2, 2, 1);
 
 }
 
 * {
   margin: 0;
   padding: 0;
   font-family: 'Open Sans Condensed', sans-serif;
 }


body {
  background-color: #f5efef;
}
ul {
  margin-left: 12px;
}

h1, h2 {
  padding-top: 20px;
}


.titresite {
  font-weight: 500;
  color: var(--main-color)

}

.laurent  {
  font-size: 1.8rem;
  color:#150c01;
}

 #mediation-texte {
   background-color : var(--main-color);
 }


.jumbotron {
  background-color: black;
  background: url(images/banniere.jpg) no-repeat;
  background-position: center center;
  background-size: cover;
  height: 33vh;
  display: flex;
  border-radius: 0;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
  justify-content: flex-end;
}

.jumbotron .message {
  //border:3px solid white;
  display:flex;
  align-items: center;
  justify-content: center;
  height:8vh;
  background-color:rgba(255, 255, 255, 0.8);
  border-radius: 3px;

}

.jumbotron h1 {
  color: var(--main-color);
  padding:10px;
  margin:40px;
  font-size: 1.5rem;

}




#mediation-image {
  display: none;
  width:50%;
}

.solution {
  background-color: #644c2a;
  color: white;
  padding: 20px;
}


.mediation {
  
  color:black;
}



@media (min-width: 980px) {

  .jumbotron .message {
    //border:3px solid white;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:rgba(255, 255, 255, 0.8);
    border-radius: 5px;
  }

  .jumbotron h1 {
    color: var(--main-color);
    padding:0px;
    margin:130px;
    font-size: 2.2rem;
  
  }



  #mediation-image {
    display:block;
    width:50%;
  }

  #mediation-texte {
    display:block;
    width:50%;
  }

}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 600;
  bottom:10px;
  padding:10px;
  color:rgba(255, 255, 255, 0.932);
  border: 3px solid white;

}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.btn-primary {
  background-color: #a91414;
  border-color: #a70404;
}


.btn-primary:hover , .btn-primary.focus, .btn-primary:focus{
  color: #fff;
  background-color: rgb(255, 24, 24);
  border-color: #a70404;
}

.btn-primary.focus, .btn-primary:focus {
  box-shadow: 0 0 0 .1rem  rgb(255, 24, 24);
}

.small {
  color:white
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }


.flex-centre {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
  margin: 0;
}

.flex-item {
  width:60%;
}

#mediation{
  background-color:  var(--main-color);
  margin-top:50px;

  color:white;
  font-size: 1.2rem;
  text-align: justify;
}


#mediation-image {
padding-right: 0px;
margin-right: 0px;
}

.bas {
  background-color:#002134;
  color:white;
}

.bas h3, .bas p {
  color:white
}

.bas a, .bas a:visited, .bas i {
  color:white;
}


.citation {
  padding-top:20px
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1.5s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}