/************************************************************
 * Corp de la page
 ***********************************************************/

html{
  scroll-behavior: smooth;
}

body{
  background: white;
  font-family : LaoUI;
  font-size:14px;
  color: #242423;
  margin:80px 0 0 0 !important;
  padding:0 !important;
}

.center{
  text-align:center;
}

a:hover{
  text-decoration: none!important;
  color:white;
}

/************************************************************
 * Police d'écriture
 ***********************************************************/
 
 @font-face {
  font-family: LaoUI;
  src: url("font/Lao UI.woff");
}


h1{
  font-family:"Playfair Display";
  font-size: 30px;
  color: #A58E65;
}

h2{
  font-family:"Playfair Display";
  font-size: 25px;
}


h3{
  font-family:Montserrat;
  font-size:22px;
}

h4{
  font-family:Montserrat;
  font-size: 20px;
  
}

h5{
  font-family:Montserrat;
  font-size: 17px;
  
}


/************************************************************
 * Menu
 ***********************************************************/

#btnTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

nav{
  background-color: #343a40;
  padding: 20px 20px !important;
  margin: 0 !important;
}

nav ul{
  padding: 0;
  margin: 0;
}

nav ul li{
  display      : table-cell;
  padding-left :5px;
  padding-right:5px;
  font-size    :16px;
}

nav ul li a{
  display        : block;
  text-align     : center;
  padding        : 5px 10px !important;
  text-decoration: none;
  color          : #FFFFFF!important;
  opacity        : 1;
}

.dropdown-item{
  padding        : 5px 10px !important;
}

nav ul li a:focus{
  background-color: #343a40;
}

nav ul li a:hover{
  background-color: #4f5963!important;
}

nav ul li ul li a{
	width: 150px;
}

nav ul li ul{
  display : none;
  position: absolute;
}

.nav-item{
  font-family:"Playfair Display";
  font-size: 20px;
  margin-right:20px;
}

.navbar-brand{
  font-family:"Playfair Display";
  font-size: 20px;
  color:white;
}

.bg-dark{
  background:#343a40!important;
}

li:hover ul {
  display: block;
}

#affichageavoc{
  display:block;
}


.list-group{
  width:100%;
}

.list-group-item{
  background-color: #343a40;
  border:0;
  width: 100%;
}

ul.list-inline {
  text-align: center
}

.close {
  color: #fff; 
  opacity: 1;
}


/************************************************************
 * Méga-Menu
 ***********************************************************/

 .mega-dropdown{
  position: relative;
}

.dropdown-menu.mega-dropdown-content{
  width: 600px !important;
  height:200px;
}

.mega-dropdown-content{
  right:0;
  width: 100%;
  padding:0;
  margin-top:0;
  overflow-y:auto!important;
  overflow-x: hidden;
  max-height: 300px;
  display:none;
  background-color: #343a40;
}

.mega.jumbotron{
  background-image: url(/static/Images/cabinet/AdobeStock_298230770.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
  height:100%;
  width:100%;
}

.mega a:hover{
  background-color: transparent!important;
}

@media (min-width:1200px){
  .mega-dropdown-content {
    width:55%;
  }
}

@media (max-width:600px){
    .dropdown-menu.mega-dropdown-content{
      width:300px!important;
      margin: auto;
    }
}

@media (max-width:1200px){
  .specialite.carousel-indicators li{
    display:none!important;
  }
  #carousel-bottom{
    top:96%!important;

  }
}



.dissapear{
  display:none !important;
}



/************************************************************
 * Carousel - Spécialités
 ***********************************************************/

 #carousel-bottom{
  position:absolute;
  top:92%;
  text-align:center;
  left:0;
  right:0;
}
.specialite.carousel-control-prev,
.specialite.carousel-control-next {
    height:0;
    top:98%;
}

.specialite.carousel-indicators{
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
  height:30px;
  right:10px; left:auto;
  width:auto;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.specialite.carousel-indicators li{
  display:block; margin-bottom:5px; border:1px solid black; 
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

.specialite.carousel-indicators li.active{
  margin-bottom:5px; background:black;
  
}

.specialite.carousel-control-next-icon{
  color: black;
}

.carousel-control-prev,
.carousel-control-next {
  height:0;
  top:50%;
}


/***************************************************************
 * Corps de l'article
 **************************************************************/

article{
  margin    : 10px;
  text-align: justify;
}

article header{
    border-bottom: solid 1px #A58E65;
    color        : #A58E65;
    padding      : 5px;
    margin       : 5px;
    font         : 22px/20px bold Arial, Hevetica;
}


#carte{}

#infosAct{
  margin-top: 20px;
}

#infosAct ul{
  width:550px;
  margin:0 auto;
  padding:0;
}

#infosAct ul li{
  display: inline-block;
  width:180px;
  padding:0;
  margin:0;
  list-style-type: none;
}


#infos{
  display:block;
  margin-top:120px;
}

#infos ul{
  width:550px;
  margin:0 auto;
  padding:0;
}

#infos ul li{
  display: inline-block;
  width:180px;
  padding:0;
  margin:0;
  list-style-type: none;
}

/***************************************************************
 * Video
 **************************************************************/

#video{
  padding-left: 0px;
  padding-right: 0px;
}

.videoslide{
  height: 80vh;
}

.videoslide.jumbotron{
  background-image: url(/static/Images/avocat.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
  height: 80vh;
  width:100vw;
}

.videoslide .row{
  height:80vh;
}

.videoslide a {
  margin: auto;
}

.video-fluid{
  padding:0;
  margin:0;
  position: relative;
}


video {
  object-fit: fill;
}




/***************************************************************
 * Specialite du cabinet
 **************************************************************/

#specialite{
  background-color: transparent;
  padding-top: 50px;
}

#cabinets .row{
  margin-bottom: 50px;
}

#cabinets .image{
  height: 400px;
  padding: 0;
  display:flex;
  align-items: center;
}

#cabinets .text{
  height: 400px;
  background-color: #242423;
}

.lire{
  background: #A58E65;
  border: 3px solid #A58E65;
  color: #FFFFFF;
}

/***************************************************************
 * Droit des familles
 **************************************************************/

 
#droit_famille .jumbotron{
  background-image: url(/static/Images/droit_famille/AdobeStock_310448197_Preview.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

#droit_famille h1{
  font-size: 50px;
  padding-top: 250px;
  padding-bottom: 200px;
}

#droit_famille .list-inline{
  display: flex;
}
#droit_famille .list-inline li{
  flex: 1;
  text-align: center;
  border: 1px solid #FFFFFF;
}

#droit_famille .list-inline li:hover{
  background-color: rgba(30, 30, 163, 0.7);
}

#droit_famille a{
  width: 100%;
  height: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  display: block;
  text-decoration: none;
}



#droit_famille .img-fluid {
  height: 70vh;
  object-fit: cover;
  overflow:hidden !important;
  padding:0;
  margin:0;
}

#droit_famille .col-lg-12 {
  padding:0;
  margin:0;
}

#droit_famille .icon{
  border-color:#A58E65;
  background-color: #A58E65;
  border-radius:50%;
  padding:20px;
}

#negative{
  margin-bottom: -50px !important;
  position: relative;
  z-index: 10;
  background-color: white;
  padding: 0px 75px 25px 75px
}

#droit_famille h2{
  font-size: 25px!important;
  font-family:"Playfair Display";
  font-weight:normal!important;
}

#droit_famille .parallax {
  /* The image used */
  background-image: url("/static/Images/droit_famille/signature.png");

  /* Set a specific height */
  height: 50vh;
  width:100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/***************************************************************
 * Droit des mineurs
 **************************************************************/
#droit_mineur .jumbotron{
  background-image: url(/static/Images/droit_mineur/droit_des_mineurs.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

#droit_mineur .header{
  font-size: 50px;
  padding-top: 250px;
  padding-bottom: 200px;
}

#droit_mineur .list-inline{
  display: flex;
}
#droit_mineur .list-inline li{
  flex: 1;
  text-align: center;
  border: 1px solid #FFFFFF;
}

#droit_mineur .list-inline li:hover{
  background-color: rgba(255, 206, 115, 0.7);
}

#droit_mineur a{
  width: 100%;
  height: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  display: block;
  text-decoration: none;
}


.border-left {
  border-width:3px !important;
}

.border-right {
  border-width:3px !important;
}

#droit_mineur .icon{
  border-color:rgb(0, 0, 0);
  background-color: rgb(0, 0, 0);
  border-radius:50%;
  padding:15px;
  box-shadow: 5px 1px 1px grey;
}

#droit_mineur h1::first-letter {
  font-size: 50px;
}




/***************************************************************
 * Droit mineur Timelines
 **************************************************************/
.main-timeline{
  padding: 20px 0;
}
.main-timeline:before{
  content: '';
  background-color: black;
  height: 100%;
  width: 1px;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: 0;
}
.main-timeline:after{
  content: '';
  display: block;
  clear: both;
}
.main-timeline .timeline{
  width: 50%;
  padding: 0 20px 0 60px;
  margin: 0 0 30px 10px;
  float: right;
  position: relative;
}
.main-timeline .timeline-content{
  color: #000;
  background-color: #fff;
  text-align: center;
  display: block;
  position: relative;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-icon{
  background: white;
  font-size: 45px;
  line-height: 85px;
  height: 100px;
  width: 100px;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -110px;
  z-index: 1;
}
.main-timeline .inner-content{
  background-color: #FFF;
  padding: 50px 10px 50px 20px;
}
.main-timeline .description{
  font-size: 14px;
  letter-spacing: 1px;
  margin: 0;
}
.main-timeline .timeline:nth-child(even){
  padding: 0 60px 0 20px;
  margin: 0 10px 30px 0;
  float: left;
}
.main-timeline .timeline:nth-child(even):after{
  right: auto;
  left: 0;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
  border-left: none;
  left: auto;
  right: -110px;
}

/***************************************************************
 * Droit des victimes
 **************************************************************/


#droit_victime .jumbotron{
  background-image: url(/static/Images/droit_victime/Droit_des_victimes.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

#droit_victime .header{
  font-size: 50px;
  padding-top: 250px;
  padding-bottom: 200px;
}

#droit_victime .list-inline{
  display: flex;
}
#droit_victime .list-inline li{
  flex: 1;
  text-align: center;
  border: 1px solid #FFFFFF;
}

#droit_victime .list-inline li:hover{
  background-color: rgba(39, 35, 61, 0.7);
}

#droit_victime a{
  width: 100%;
  height: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  display: block;
  text-decoration: none;
}

#droit_victime .link{
  all:initial;
  text-decoration: none;
  font-family : LaoUI;
  font-size:14px;
  cursor: pointer;
}


#droit_victime .border{
  border-width:5px !important;
  border-color:black!important;
}

#droit_victime .icon{
  border-color:rgb(0, 0, 0);
  background-color: rgb(0, 0, 0);
  border-radius:50%;
  padding:15px;
  box-shadow: 5px 1px 1px grey;
}

#droit_victime h1::first-letter {
  font-size: 50px;
}

.parallax {
  /* The image used */
  background-image: url("/static/Images/droit_victime/right-4944555_1920.jpg");

  /* Set a specific height */
  height: 50vh;
  width:100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/***************************************************************
 * Médiation
 **************************************************************/

#mediation .jumbotron{
  background-image: url(/static/Images/mediation/mediation.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

#mediation .header{
  font-size: 50px;
  padding-top: 250px;
}

#mediation .header2{
  font-size: 50px;
  padding-bottom: 200px;
}

#mediation .list-inline{
  display: flex;
}

#mediation .list-inline li{
  flex: 1;
  text-align: center;
  border: 1px solid #FFFFFF;
}

#mediation .list-inline li:hover{
  background-color: rgba(39, 35, 61, 0.7);
}

#mediation a{
  width: 100%;
  height: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  display: block;
  text-decoration: none;
}


#mediation .icon{
  border-color:rgb(0, 0, 0);
  background-color: rgb(0, 0, 0);
  border-radius:50%;
  padding:15px;
  box-shadow: 5px 1px 1px grey;
}

#mediation h1::first-letter {
  font-size: 50px;
}



#mediation .list-group {
  margin-left:20px;
  list-style-image: url(/static/Images/mediation/fleche.jpg);
  list-style-position: outside
}


#mediation .border{
  border-width: 5px !important;
  border-color: black !important;
}

/***************************************************************
 * Droit des personnes
 **************************************************************/
 
 #droit_personne .jumbotron{
  background-image: url(/static/Images/droit_personne/droit_des_personnes.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

#droit_personne h1{
  font-size: 50px;
  padding-top: 250px;
  padding-bottom: 200px;
}

#droit_personne .list-inline{
  display: flex;
}
#droit_personne .list-inline li{
  flex: 1;
  text-align: center;
  border: 1px solid #FFFFFF;
}

#droit_personne .list-inline li:hover{
  background-color: rgba(30, 30, 163, 0.7);
}

#droit_personne a{
  width: 100%;
  height: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  display: block;
  text-decoration: none;
}

/***************************************************************
 * Droit du travail
 **************************************************************/

 #droit_travail .jumbotron{
  background-image: url(/static/Images/page_accueil/caroussel/droit_travail.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

#droit_travail .header{
  font-size: 50px;
  padding-top: 250px;
  padding-bottom: 200px;
}

/***************************************************************
 * Droit commercial
 **************************************************************/


 #droit_commercial .jumbotron{
  background-image: url(/static/Images/droit_commercial/droit_commercial.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

#droit_commercial .header{
  font-size: 50px;
  padding-top: 250px;
  padding-bottom: 200px;
}

#droit_commercial .list-inline{
  display: flex;
}
#droit_commercial .list-inline li{
  flex: 1;
  text-align: center;
  border: 1px solid #FFFFFF;
}

#droit_commercial .list-inline li:hover{
  background-color: rgba(39, 35, 61, 0.7);
}

#droit_commercial a{
  width: 100%;
  height: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  display: block;
  text-decoration: none;
}

#droit_commercial .link{
  all:initial;
  text-decoration: none;
  font-family : LaoUI;
  font-size:14px;
  cursor: pointer;
}


#droit_commercial .border{
  border-width:5px !important;
  border-color:black!important;
}

#droit_commercial .icon{
  border-color:rgb(0, 0, 0);
  background-color: rgb(0, 0, 0);
  border-radius:50%;
  padding:15px;
  box-shadow: 5px 1px 1px grey;
}

#droit_commercial h1::first-letter {
  font-size: 50px;
}

.block-formulaire {
  height: 300px;
  display: flex;
}

.formulaire{
  margin: auto;
  padding: 30px 50px;
  color: #FFF;
  background-color: #A58E65;
  border-radius: 60px;
  text-decoration: none !important;
}


/***************************************************************
 * Cabinet AMC
 **************************************************************/

#cabinetAMC{
  padding-top: 50px;
}

#cabinetAMC #text_amc{
  margin-bottom: 50px;
}

#cabinetAMC .image{
  height: 500px;
  background-color: grey;
}

#droit_commercial h1{
  font-size: 50px;
  padding-top: 250px;
  padding-bottom: 250px;
}



/***************************************************************
 * Citation
 **************************************************************/

#citation{
  padding: 150px 15px 150px 15px;
  background-color: black;
}

#citation blockquote{
  quotes: "\201C""\201D""\2018""\2019";
}

#citation blockquote h2:before { 
  content: open-quote;
  font-weight: bold;
  font-size:100px;
} 

#citation blockquote h2:after { 
  content: close-quote;
  font-weight: bold;
  font-size:100px;  
}

/***************************************************************
 * Nos Valeurs
 **************************************************************/

#valeur .jumbotron {
  background-image: url(/static/Images/cabinet/AdobeStock_298230770.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

#valeur #title{
  padding-top: 250px;
  padding-bottom: 300px;
}

#valeur .texte{
  margin-top: -50px;
  background-color: #FFFFFF;
  padding: 50px;
  text-align: left;
  box-shadow: 3px 3px 3px black;
  margin-bottom: 30px;
}

#valeur .parallax {
  /* The image used */
  background-image: url("/static/Images/cabinet/document-428338_1920.jpg");

  /* Set a specific height */
  height: 50vh;
  width:100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#valeur .list-group {
  margin-left:20px;
  list-style-image: url(/static/Images/mediation/fleche.jpg);
  list-style-position: outside
}

/***************************************************************
 * Avocats
 **************************************************************/

#avocats {
  padding-top: 50px;
}

#avocats .row{
  padding-bottom: 50px;
}

#avocats #image1{
  background-color: grey;
  box-shadow: 30px 30px #A58E65;
  height: 600px;
  margin-top: 20px;
}

#avocats #image2{
  background-color: grey;
  box-shadow: -30px 30px #A58E65;
  height: 600px;
  margin-bottom: 50px;
}

/* Johann Verhaest */
#verhaest {
  margin-bottom: 50px;
}

#verhaest img{
  border-radius: 50%;
  width: 40%;
  height:auto;
}

#verhaest #formation{
  border: 5px solid #A58E65;
  border-left: none;
  border-right: none;
  padding-bottom: 50px;
}

#verhaest .container{
  padding-top: 50px;
}

#verhaest .activite{
  position: relative;
  background-color: rgb(218, 201, 172);
}
#verhaest .activite::after{
  content:'';
  display:block;
  padding-bottom: 100%;
}
#verhaest .content{
  background-color: #FFF;
  color: #A58E65;
  position: absolute;
  width: 350px;
  height: 70px;
  top:50%;
  left:50%;
  margin-top: -35px;
  margin-left: -175px;
  display: flex;
}
#verhaest .content h2{
  margin: auto;
}
#verhaest .detail{
  background-color: #FFF;
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.5s ease;
  padding:20px;
  text-align: left;
  display: flex;
}
#verhaest .detail:hover, #verhaest .detail:active{
  opacity: 1;
}
#verhaest .text{
  margin: auto;
}

#verhaest #contrat{
  background-image: url("/static/Images/presentation_avocats/laptop-3196481_1920.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}
#verhaest #personne{
  background-image: url("/static/Images/presentation_avocats/droit_des_personnes.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}
#verhaest #commercial{
  background-image: url("/static/Images/presentation_avocats/droit_commercial.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

/* Anne-Béatrice Malet */
#malet{
  margin-bottom: 50px;
}

#malet img{
  border-radius: 50%;
  width: 40%;
  height:auto;
}

#malet #formation{
  border: 5px solid #A58E65;
  border-left: none;
  border-right: none;
  padding-bottom: 50px;
}

#malet .container{
  padding-top: 50px;
}

#malet .activite{
  position: relative;
  background-color: rgb(218, 201, 172);
}
#malet .activite::after{
  content:'';
  display:block;
  padding-bottom: 100%;
}
#malet .content{
  background-color: #FFF;
  color: #A58E65;
  position: absolute;
  width: 350px;
  height: 70px;
  top:50%;
  left:50%;
  margin-top: -35px;
  margin-left: -175px;
  display: flex;
}
#malet .content h2{
  margin: auto;
}
#malet .detail{
  background-color: #FFF;
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.5s ease;
  padding:20px;
  text-align: left;
  display: flex;
}
#malet .detail:hover, #malet .detail:active{
  opacity: 1;
}
#malet .text{
  margin:auto;
}

#malet #victime{
  background-image: url("/static/Images/presentation_avocats/Droit_des_victimes.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}
#malet #mineur{
  background-image: url("/static/Images/presentation_avocats/brothers-2107264_1920.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}
#malet #famille{
  background-image: url("/static/Images/presentation_avocats/beach-1867271_1920.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

/***************************************************************
 * Journal
 **************************************************************/

 #journal{
   padding-top: 50px;
   padding-bottom: 50px;
 }

 #journal .image{
   height: 300px;
   background-color: grey;
 }

/***************************************************************
 * Contact
 **************************************************************/
#contact_title{
  margin-top: 56px;
  padding-top: 20px;
  position: relative;
}

#contact_title #contact_text{
  position: absolute;
  padding-top: 50px;
  top: 0px;
  left: 0px;
}

.titrecontact1{
  font-size:7vw;
  color:black;
  font-family:"Playfair Display";
  font-weight: 900;
  text-shadow: 2px 0 black;
 }

.titrecontact2{
  font-size:7vw;
  color:white;
  font-family:"Playfair Display";
  font-weight: 900;
  text-shadow: 2px 0 white;
}

#form_contact{
  width:70%;
}

#form_contact .select{
  border:none;
  border-radius: 0;
}

#form_contact h2{
  padding-bottom: 50px;
}

#form_contact .row{
  margin-bottom: 50px;
}

#form_contact input{
  background: transparent;
  border: none;
  border-bottom: 2px solid #343a40;
  color: black;
  border-radius: 0;
}

#form_contact textarea{
  margin-bottom: 50px;
}

#form_contact button{
  background-color: #A58E65;
  border-color: #A58E65;
}

#form_contact_content{
  padding: 20px 20px 150px 20px;
}

#distance{
  position: relative;
  margin-top: -100px;
}

#distance h2{
  margin-top: -50px;
}

#distance img{
  width: 100%;
}

#contact_radio{
  padding-bottom: 50px;
}

#letter {
  margin-top: -150px;
  width:100%;
  height: auto;
}

select {
  background-image:
    linear-gradient(45deg, transparent 50%, black 60%),
    linear-gradient(135deg, black 40%, transparent 50%) !important;
  background-position:
    calc(100% - 30px) 14px,
    calc(100% - 20px) 14px,
    100% 0;
  background-size:
    10px 10px,
    10px 10px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:0;
  outline:0px;
}

#selectbottom{
  border-bottom: 2px #343a40;
}

/***************************************************************
 * Formulaire
 **************************************************************/

#form{
  background-color:#343a40;
  padding: 20px 100px 20px 100px;
  margin-bottom: 50px;
}

#form .row{
  margin-bottom: 10px;
}

#form input{
  background: transparent;
  border: none;
  border-bottom: 2px solid #FFFFFF;
  color: #FFFFFF;
  border-radius: 0;
}

#form textarea{
  margin-bottom: 10px;
}

#form button{
  background-color: #A58E65;
  border-color: #A58E65;
}

/***************************************************************
 * Actualite
 **************************************************************/

#actualite .jumbotron{
  background-image: url(/static/Images/actualites/AdobeStock_261026578.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 0;
}

#actualite #titre{
  padding: 200px 0px 200px 0px;
  position: relative;
  z-index: 0;
}
#actualite #titre h1{
  font-size: 50px;
  color: black;
}
#actualite #titre p{
  font-size: 30px;
}

/* Cube Portfolio */
#portfolio-filter{
  position: relative;
  z-index: 10;
  padding-top:20px;
  padding-bottom:20px;
  margin-top: -30px;
  box-shadow: 5px 5px 5px black;
  background-color: #FFFFFF;
}

.s-portfolio__filter-v1-item {
  font-size: 0.8125rem;
  color: #000000 !important;
  margin-bottom: 0 !important;
  padding: 12px !important;
  font-family: "Playfair Display" !important;
  font-size: 15px !important;
}

.s-portfolio__filter-v1-item.cbp-filter-item-active {
  border: none;
  border-bottom: 2px solid #A58E65;
}

.s-portfolio__filter-v1.cbp-l-filters-text {
  margin-bottom: 0;
}

/* Image Effect
------------------------------ */
.s-portfolio__img-effect {
  position: relative;
  display: block;
}

.s-portfolio__img-effect:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #A58E65;
  content: " ";
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.s-portfolio__item:hover .s-portfolio__img-effect:after, .s-portfolio__item:active .s-portfolio__img-effect:after {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Position
------------------------------ */
.s-portfolio__caption-hover--cc {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: #FFF;
  text-align: center;
  padding: 1.875rem;
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  transition-duration: 400ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-portfolio__caption-hover--cc a{
  border: 2px solid #FFF;
  padding: 2px;
  color: #FFF;
  text-decoration: none;
}

.s-portfolio__item:hover .s-portfolio__caption-hover--cc, .s-portfolio__item:active .s-portfolio__caption-hover--cc {
  opacity: 1;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

/***************************************************************
 * Article Droit du travail 
 **************************************************************/

.dt_text{
  width:70%;
}

.dt_text h2:after {
  content: "";
  display: block;
  width: 30%;
  padding-top: 20px;
  border-bottom: 3px solid #A58E65;
}

#dt_article .list-group{
  margin-left:20px;
  list-style-image: url(/static/Images/mediation/fleche.jpg);
  list-style-position: outside
}
#dt_article #verahest{
  border-radius: 50%;
  height:auto;
  width:100%;
  margin:0;
  margin-top: 100%;
}
#dt_article .border{
  border-width: 5px !important;
  border-color: black !important;
}

.article_title{
  padding-top:50%;
  font-size:30px;
}

.article{
  width:75%;

}

#dt_article h2::first-letter{
  font-size:50px;
}


.lireArticle{
  background: #A58E65;
  border: 3px solid #A58E65;
  color: #FFFFFF;
  border-radius: 10px; 
  font-size:25px;
  padding-left:20px;
  padding-right:20px;
  font-family:"Playfair Display";
}


#commentaire h2::before,
#commentaire h2::after {
    display: inline-block;
    content: "";
    border-top: .3rem solid black;
    width: 10rem;
    margin: 0 3rem;
    transform: translateY(-0.4rem);
}

.firstletter{
  font-size: 50px;
}

#dt_article .textarticle{
  box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.5)!important;
}

#dt_article .commenter{
  background-color: rgb(179, 174, 174);
  height:20vh;
  width:50%;
}

/***************************************************************
 * Footer
 **************************************************************/

footer{
  background-color:#343a40;
}

#inputEmail{
  border: none;
  border-bottom: 1px solid #A58E65;
  background: transparent;
  color: #A58E65;
  margin-bottom: 10px;
}

#buttonEmail{
  padding:0.3em 1.2em;
  margin:0 0.3em 0.3em 0;
  border-radius:2em;
  background-color:#A58E65;
  border-color: #A58E65;
  border-style: solid;
  color: #ffffff;
  margin-bottom: 10px;
  text-align:center;
}