@import url(//fonts.googleapis.com/css?family=Lato:300:400);
 
/* PAGE */
/* ---------------------------------------------------------------------------------------------- */
  body, html{ 
    height: 100% !important;
    margin: 0 !important;
  }
  
/* ---------------------------------------------------------------------------------------------- */

/* AFFICHAGE GESTIONNAIRE*/
/* ---------------------------------------------------------------------------------------------- */
.gestionnaire{
    margin-top: 10em;
}
.gestionnaire-affichage {
  cursor:pointer;
  width: 300px;
}
.form-check-input{
  margin-left: -2.25rem !important;
}

/* competences */
#gestionnaire_competences:checked+div{
  opacity:0;
  width:0;
  height:0;
  overflow:hidden;
  box-sizing:border-box;
  position:relative;    
  transition: all 0.7s;
}
#gestionnaire_competences{
  display:block;
  opacity:1;
  width:auto;
  height:auto;
}

/* formations */
#gestionnaire_formations:checked+div{
  opacity:0;
  width:0;
  height:0;
  overflow:hidden;
  box-sizing:border-box;
  position:relative;    
  transition: all 0.7s;
}
#gestionnaire_formations{
  display:block;
  opacity:1;
  width:auto;
  height:auto;
}

.block-img{
	height: 360px !important;
	overflow: hidden;
}

/* realisations */
#gestionnaire_realisations:checked+div{
  opacity:0;
  width:0;
  height:0;
  overflow:hidden;
  box-sizing:border-box;
  position:relative;    
  transition: all 0.7s;
}
#gestionnaire_realisations{
  display:block;
  opacity:1;
  width:auto;
  height:auto;
}
/* ---------------------------------------------------------------------------------------------- */


/* HR */
/* ---------------------------------------------------------------------------------------------- */
hr{
  border : 0 !important;
  height: 5px !important; 
  background-image: linear-gradient(to right, #bd1a1a00, rgb(0, 98, 178), #bd1a1a00) !important;
}
.hr{
  width: 80% !important;
}

/* ---------------------------------------------------------------------------------------------- */


/* FONT */
/* ---------------------------------------------------------------------------------------------- */
  h2, h3{
    font-weight:400 !important;
    letter-spacing: 2px !important;
  }
  h2{
    font-family: 'Lato', sans-serif !important;
    font-size:48px !important;
  }
  h3{
    font-size:36px !important;
  }
/* ---------------------------------------------------------------------------------------------- */


/* COULEUR */
/* ---------------------------------------------------------------------------------------------- */

/* internaute */
  .color-A{
    color: #0063B2FF;
    background-color: #ffffff
  }
  .bg-blue{ 
    background-color: rgb(28, 85, 131) !important;
  }
  .header-A {
    background: linear-gradient(60deg, #0063B2FF 0%, #9CC3D5FF 100%);
  }
  .button-A{
    background-color: #0063B2FF !important;
  }
  .button-A:hover{
    border-color: #9eb3c4 !important;
  }

/* admin */
  .header-B {
    background: linear-gradient(60deg, #CBCE91FF 0%, #76528BFF 100%);
  }
  .color-B{
    background-color: #76528BFF;
    color: #101820FF
  }
  .button-B{
    background-color: #76528BFF !important;
  } 
  .button-B:hover{
    border-color: #76528BFF;
  }

 /* autres */ 
  .color-C{
    color: #76528BFF;
  }

  .progress-bar{
    background-color: rgb(14, 130, 225) !important;
  }
  .progress-bar-striped {
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.22) 50%,rgba(255, 255, 255, 0.22) 75%,transparent 75%,transparent) !important;
  }
/* ---------------------------------------------------------------------------------------------- */

    
/* HEADER */
/* ---------------------------------------------------------------------------------------------- */
  #data-navbar .nav-item a.active{
    background-color: #0063B2FF !important;
    color: #ffffff !important;
    border-radius: 12px !important;
  }

  #top-menu-nav .menu-item a.active{ 
    background-color: #0063B2FF !important;
    color: #339933 !important;
    border-radius: 12px !important;
  }

  .header {
      position:relative;
      text-align:center;
      color:#ffffff;
    }
  /* .logo {
      width:50px;
      fill:white;
      padding-right:15px;
      display:inline-block;
      vertical-align: middle;
    } */

  .inner-header {
      height:65vh;
      width:100%;
      margin: 0;
      padding: 0;
  }
    .flex { /*Flexbox for containers*/
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    
    .bg-img{
      background: url('../img/background_1.webp') center top;
      background-size: 100% auto;
      background-size: cover !important;
      width: 100%;
      height: 100%;
    }
    .waves {
      position:relative;
      width: 100%;
      height:15vh;
      margin-bottom:-7px; /*Fix for safari gap*/
      min-height:100px;
      max-height:150px;
    }
    .content {
      position:relative;
      height:20vh;
      text-align:center;
      background-color: white;
    }
    .parallax > use {
      animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
    }
    .parallax > use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
    }
    .parallax > use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
    }
    .parallax > use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
    }
    .parallax > use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
    }
    @keyframes move-forever {
      0% {
       transform: translate3d(-90px,0,0);
      }
      100% { 
        transform: translate3d(85px,0,0);
      }
    }
    @media (max-width: 768px) { /*for mobile*/
      .waves {
        height:40px;
        min-height:40px;
      }
      .content {
        height:10vh;
      }
      h2 {
        font-size:24px;
      }
    }
/* ---------------------------------------------------------------------------------------------- */


/* BOUTTON TOP */
/* ---------------------------------------------------------------------------------------------- */
    #back-to-top {
      position: fixed;
      bottom: 100px;
      right: 75px;
      width: 50px;
      height: 50px;
      line-height: 53px;
      text-align: center;
      font-size: 30px;
      border-radius: 50%;
      color: white;
      display: none;
      opacity: 75%;
    }
    a#back-to-top i.line{
      line-height: 1.5 !important;
    }
/* ---------------------------------------------------------------------------------------------- */


/* IFRAME */
/* ---------------------------------------------------------------------------------------------- */
.full{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0
}
.full iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.md-pills .nav-link.active {
  color: #fff;
  background-color: #616161
}
button.close {
  position: absolute;
  right: 0;
  z-index: 2;
  padding-right: 1rem;
  padding-top: .6rem
}
/* ---------------------------------------------------------------------------------------------- */