html {
  scroll-behavior: smooth !important;
}

.header {
  display: ;
  z-index: 999;
  position: fixed;
  float: left;
  width: 100%;
  line-height: 30px;
  top: 0;
  background: #FAF8FB;
  opacity: 1;
  filter: drop-shadow(0 0 1rem gray);
  font-weight: bold;
}

.header a p {
  color: #000000;
  font-size: 14pt;
  margin-left: 30pt;
  float: left;
}

.header a:hover {
  color: #3498db;
}

.header .menu {
  margin-top: 30px;
  float: right;
  margin-right: 70px;
}

.header .logo {
  width: 150px;
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  filter: drop-shadow(0 0 5rem white);
}

.hero .hero-body .black {
  color: black;
}

.arrow {
  width: 32px;
  margin-left: 48%;
  margin-bottom: 10pt;
}

.move-down {
  transition: transform 250ms;
}

.move-down:hover {
  transform: translateY(5px);
}

/* ---- */

p {
  text-align: justify;
}

.padding {
  margin-top: 70pt;
}

.header-image {
    background-image: url("img/bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #999;
}

.hero-body .title {
  color: white;
}

.hero-body .subtitle {
  color: white;
}

.left {
  float: left;
}
.right {
  float: right;
}
.center {
  float: center;
}


/* TUILES */

#Expertise .columns {
  padding-left: 5%;
  padding-right: 5%;
}

#Expertise .box {
  width: 100%;
  height: 50%;
  vertical-align:
}
#Expertise .box p {
  text-align: center;
  font-weight: bold;
}
#Expertise .image {
  margin: 0 auto;
}
.move {
  transition: transform 250ms;
}
.move:hover {
  transform: translateY(-7px);
}

/*bandeau foot*/

.foot-icons {
  float: left;
  margin-right: 20pt;
  margin-bottom: 30pt;
}

.foot-icons a {
  margin-left: 10pt;
  margin-top: 2pt;
}

.copyright {
  position: absolute;
  right: 0;
  font-size: 8pt;
}


/*---------------------------------------------*/
/*PAGE FORMATIONS*/

#Formations .box {
  height: 100%; /*tous la même taille : celle de la plus grande*/
  display: flex;
  flex-wrap: wrap;
  align-content: space-between
}
#Formations .box p {
  margin-bottom: 10pt;
}

.message {
  box-shadow: 0 0.5em 1em -0.125em #DDDDDD;
}

/*---------------------------------------------*/
/*About*/

#Experience .message-body {
  text-align: justify;
}

/*---------------------------------------------*/
/*Contact*/

.contact-field {
  padding-top: 100pt;
  width: 80%;
  padding-left: 10%;
}

/*---------------------------------------------*/
/*SLIDER*/

.mySlides {
  display: none;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 4s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}