.page-header {
    background-color: #45526e;
    margin-bottom: 50px;
}

section.page-header .container {
    padding: 20px 20px;
    position: relative;
}

.page-header-services {
    background-size: cover; 
    background-position: center center;

}

.page-header-title {
    color:white;
    font-weight: 700;
}

/** UPLOAD **/
input[type="file" i] {
    -webkit-appearance: initial;
    background-color: initial;
    cursor: default;
    align-items: baseline;
    color: inherit;
    text-align: start !important;
    padding: initial;
    border: initial;
}

.file-upload {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: 200px;
    padding: 5px 10px;
    font-size: 1rem;
    text-align: center;
    color: #ccc
  }

  .file-upload-wrapper .card.card-body.has-error .file-upload-message .file-upload-error,
  .file-upload-wrapper .card.card-body.has-preview .btn.btn-sm.btn-danger {
    display: block
  }

  .file-upload i {
    font-size: 3rem
  }

  .file-upload .mask.rgba-stylish-slight {
    opacity: 0;
    -webkit-transition: all .15s linear;
    -o-transition: all .15s linear;
    transition: all .15s linear
  }

  .file-upload:hover .mask.rgba-stylish-slight {
    opacity: .8
  }

  .file-upload-wrapper .card.card-body.has-error {
    border-color: #f34141
  }

  .file-upload-wrapper .card.card-body.has-error:hover .file-upload-errors-container {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s
  }

  .file-upload-wrapper .card.card-body.disabled input {
    cursor: not-allowed
  }

  .file-upload-wrapper .card.card-body.disabled:hover {
    background-image: none;
    -webkit-animation: none;
    animation: none
  }

  .file-upload-wrapper .card.card-body.disabled .file-upload-message {
    opacity: .5;
    text-decoration: line-through
  }

  .file-upload-wrapper .card.card-body.disabled .file-upload-infos-message {
    display: none
  }

  .file-upload-wrapper .card.card-body input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5
  }

  .file-upload-wrapper .card.card-body .file-upload-message {
    position: relative;
    top: 50px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  .file-upload-wrapper .card.card-body .file-upload-message span.file-icon {
    font-size: 50px;
    color: #ccc
  }

  .file-upload-wrapper .card.card-body .file-upload-message p {
    margin: 5px 0 0
  }

  .file-upload-wrapper .card.card-body .file-upload-message p.file-upload-error {
    color: #f34141;
    font-weight: 700;
    display: none
  }

  .file-upload-wrapper .card.card-body .btn.btn-sm.btn-danger {
    display: none;
    position: absolute;
    opacity: 0;
    z-index: 7;
    top: 10px;
    right: 10px;
    -webkit-transition: all .15s linear;
    -o-transition: all .15s linear;
    transition: all .15s linear
  }

  .file-upload-wrapper .card.card-body .file-upload-preview {
    display: none;
    position: absolute;
    z-index: 1;
    background-color: #fff;
    padding: 5px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    text-align: center
  }

  .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-render .file-upload-preview-img {
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-transition: border-color .15s linear;
    -o-transition: border-color .15s linear;
    transition: border-color .15s linear;
    -o-object-fit: cover;
    object-fit: cover
  }

  .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-render i {
    font-size: 80px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    color: #777
  }

  .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-render .file-upload-extension {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -.03em;
    font-size: 1rem;
    color: #fff;
    width: 42px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
  }

  .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-infos {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: rgba(0, 0, 0, .7);
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear
  }

  .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-infos .file-upload-infos-inner {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -40%);
    -ms-transform: translate(0, -40%);
    transform: translate(0, -40%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    padding: 0 20px;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease
  }

  .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-infos .file-upload-infos-inner p {
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    color: #fff;
    text-align: center;
    line-height: 25px;
    font-weight: 700
  }

  .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-infos .file-upload-infos-inner p.file-upload-infos-message {
    margin-top: 15px;
    padding-top: 15px;
    font-size: 12px;
    position: relative;
    opacity: .5
  }

  .file-upload-wrapper .card.card-body .file-upload-preview .file-upload-infos .file-upload-infos-inner p.file-upload-infos-message::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    background: #fff;
    width: 30px;
    height: 2px
  }

  .file-upload-wrapper .card.card-body:hover .btn.btn-sm.btn-danger,
  .file-upload-wrapper .card.card-body:hover .file-upload-preview .file-upload-infos {
    opacity: 1
  }

  .file-upload-wrapper .card.card-body:hover .file-upload-preview .file-upload-infos .file-upload-infos-inner {
    margin-top: -5px
  }

  .file-upload-wrapper .card.card-body.touch-fallback {
    height: auto !important
  }

  .file-upload-wrapper .card.card-body.touch-fallback:hover {
    background-image: none;
    -webkit-animation: none;
    animation: none
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview {
    position: relative;
    padding: 0
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-render {
    display: block;
    position: relative
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-infos .file-upload-infos-inner p.file-upload-infos-message::before,
  .file-upload-wrapper .card.card-body.touch-fallback.has-preview .file-upload-message {
    display: none
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-render .file-upload-font-file {
    position: relative;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    top: 0;
    left: 0
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-render .file-upload-font-file::before {
    margin-top: 30px;
    margin-bottom: 30px
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-render img {
    position: relative;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-infos {
    position: relative;
    opacity: 1;
    background: 0 0
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-infos .file-upload-infos-inner {
    position: relative;
    top: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    padding: 5px 90px 5px 0
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-infos .file-upload-infos-inner p {
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    color: #777;
    text-align: left;
    line-height: 25px
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-preview .file-upload-infos .file-upload-infos-inner p.file-upload-infos-message {
    margin-top: 0;
    padding-top: 0;
    font-size: 18px;
    position: relative;
    opacity: 1
  }

  .file-upload-wrapper .card.card-body.touch-fallback .file-upload-message {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    padding: 40px 0
  }

  .file-upload-wrapper .card.card-body.touch-fallback .btn.btn-sm.btn-danger {
    top: auto;
    bottom: 23px;
    opacity: 1
  }

  .file-upload-wrapper .card.card-body.touch-fallback:hover .file-upload-preview .file-upload-infos .file-upload-infos-inner {
    margin-top: 5rem
  }

  .file-upload-wrapper .card.card-body .file-upload-loader {
    position: absolute;
    top: 15px;
    right: 15px;
    display: none;
    z-index: 9
  }

  .file-upload-wrapper .card.card-body .file-upload-loader::after {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    -webkit-animation: rotate .6s linear infinite;
    animation: rotate .6s linear infinite;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #777;
    border-left: 1px solid #ccc;
    border-right: 1px solid #777;
    content: ""
  }

  .file-upload-wrapper .card.card-body .file-upload-errors-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: rgba(243, 65, 65, .8);
    text-align: left;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s linear .15s, opacity .15s linear;
    -o-transition: visibility 0s linear .15s, opacity .15s linear;
    transition: visibility 0s linear .15s, opacity .15s linear
  }

  .file-upload-wrapper .card.card-body .file-upload-errors-container ul {
    padding: 10px 20px;
    margin: 0;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  .file-upload-wrapper .card.card-body .file-upload-errors-container ul li {
    margin-left: 20px;
    color: #fff;
    font-weight: 700
  }

  .file-upload-wrapper .card.card-body .file-upload-errors-container.visible {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s
  }

  .file-upload-wrapper .card.card-body~.file-upload-errors-container ul {
    padding: 0;
    margin: 15px 0
  }

  .file-upload-wrapper .card.card-body~.file-upload-errors-container ul li {
    margin-left: 20px;
    color: #f34141;
    font-weight: 700
  }

  @-webkit-keyframes rotate {
    0% {
      -webkit-transform: rotateZ(-360deg);
      transform: rotateZ(-360deg)
    }

    100% {
      -webkit-transform: rotateZ(0);
      transform: rotateZ(0)
    }
  }

  @keyframes rotate {
    0% {
      -webkit-transform: rotateZ(-360deg);
      transform: rotateZ(-360deg)
    }

    100% {
      -webkit-transform: rotateZ(0);
      transform: rotateZ(0)
    }
  }


  /** realisation **/
.image-wrapper {
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    border: none;
    z-index: -10000;
}

.image-wrapper .slide {
    position: relative;
    background-color: teal;
    height: 100%;
    flex:1;
    border-right: 2px solid #000;
    overflow: hidden;
    transition: 0.5s ease-in-out;

}

.image-wrapper .slide:last-child {
    border-right: none;
}

.image-wrapper .slide:nth-child(1) {
    background-color: #f34141;
    background: url('../img/site/r01.jpg');
    background-position: center center;
    background-size: cover;
}
.image-wrapper .slide:nth-child(2) {
    background-color: #777;
    background: url('../img/site/r02.jpg');
    background-position: center center;
    background-size: cover;
}
.image-wrapper .slide:nth-child(3) {
    background-color: aquamarine;
    background: url('../img/site/r03.jpg');
    background-position: center center;
    background-size: cover;
}
.image-wrapper .slide:nth-child(4) {
    background-color: darkgoldenrod;
    background: url('../img/site/r04.jpg');
    background-position: center center;
    background-size: cover;
}
.image-wrapper .slide:nth-child(5) {
    background-color:mediumseagreen;
    background: url('../img/site/r05.jpg');
    background-position: center center;
    background-size: cover;
}

.image-wrapper .slide:hover {
    flex-grow:5;
}

.image-wrapper .slide .content {
    position: absolute;
    bottom: 0;
    margin: 40px;
    padding: 30px;
    background: #000;
    color:#fff;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    transform: translateY(100px);
}

.image-wrapper .slide:hover .content {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    transition-delay: 0.5s;
    transform: translateY(0);
}

/** HOME **/
.home-nav {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-item-home {
  color:white;
  font-weight: 700;
  /* font-size: 15px; */
}

.navbar.navbar-light .navbar-nav .nav-item .nav-link-home {
  color: #fff;
}

#home {
  background: none;
  height: 100%;
}

#home-bg-video {
  position: fixed;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  min-width:100%;
  min-height:100%;
  width: auto;
  height: auto;
  z-index: -2;
  
}

#home-overlay {
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left:0;
  z-index: -1;
}

#home-content {
  width: 100%;
  height: 100%;
  display: table;
  margin-top: 20%;
}

#home-content-inner {
  display: table-cell;
  vertical-align: middle;
}

#home-heading h1 {
  color: white;
  font-size: 65px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

#home-heading h1 span {
  color: #f4c613;
  font-weight: 700;
}

#home-text p {
  color:white;
  font-size: 30px;
  font-weight: 700;
  margin: 8px 0 30px 0;
  
}

.btn-general {
  border-radius: 28px;
  font-size: 13px;
  text-transform: uppercase;
  margin: 0 6px;
  padding: 12px 46px 12px 46px;
  transition: all 0.4s;
  background-color: #f4c613;
  color:white;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: rgba(110, 0, 15,0.09); Black background with opacity */
   background:
      linear-gradient(rgba(0, 0, 0, 0.5), rgba(110, 0, 15,0.1)); 
  z-index: -1; /* Specify a stack order in case you're using a different order for other elements */
}


div.disabled {
  pointer-events: none;

  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

/********************************************************************************/
/*        GRID      */
/********************************************************************************/

.image-gallery-container {
  width: 100%;
  max-width: 120rem;
  margin: auto;
  /*padding: 0 1.5rem;*/
  background-color: #eee;
}

.image-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 1.5rem;
  grid-template-areas: 
    'img-1 img-1 img-2 img-3 img-4'
    'img-5 img-6 img-7 img-7 img-8'
    'img-9 img-10 img-11 img-12 img-13'
    'img-9 img-14 img-15 img-16 img-13'
    ;
    
}

.image-gallery a {
  width: 100%;
  height: 25rem;
  background-position:  center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.image-gallery a i {
  color: rgba(255,255,255,.6);
  font-size: 3rem;
  position: relative;
  z-index: 100;
  padding: 1rem 3rem;
  border: 2px solid rgba(255,255,255,.6);
  border-radius: .4rem;
  opacity: 0;
  transition: opacity 0.5s;
}

.image-gallery a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.5s;
}

.image-gallery a:hover i,
.image-gallery a:hover::before {
  opacity: 1;
}

.img-1 {
  grid-area: img-1;
  background-image: url("../img/r/img-1.jpg");
}

.img-2 {
  grid-area: img-2;
  background-image: url("../img/r/img-2.jpg");
}

.img-3 {
  grid-area: img-3;
  background-image: url("../img/r/img-3.jpg");
}

.img-4 {
  grid-area: img-4;
  background-image: url("../img/r/img-4.jpg");
}

.img-5 {
  grid-area: img-5;
  background-image: url("../img/r/img-5.jpg");
}

.img-6 {
  grid-area: img-6;
  background-image: url("../img/r/img-6.jpg");
}

.img-7 {
  grid-area: img-7;
  background-image: url("../img/r/img-7.jpg");
}

.img-8 {
  grid-area: img-8;
  background-image: url("../img/r/img-8.jpg");
}
.img-9 {
  grid-area: img-9;
  min-height: 51.5rem;
  background-image: url("../img/r/img-9.jpg");
}

.img-10 {
  grid-area: img-10;
  background-image: url("../img/r/img-10.jpg");
}

.img-11 {
  grid-area: img-11;
  background-image: url("../img/r/img-11.jpg");
}

.img-12 {
  grid-area: img-12;
  background-image: url("../img/r/img-12.jpg");
}

.img-13 {
  grid-area: img-13;
  min-height: 51.5rem;
  background-image: url("../img/r/img-13.jpg");
}

.img-14 {
  grid-area: img-14;
  background-image: url("../img/r/img-14.jpg");
}

.img-15 {
  grid-area: img-15;
  background-image: url("../img/r/img-15.jpg");
}

.img-16 {
  grid-area: img-16;
  background-image: url("../img/r/img-16.jpg");
}


@media screen and (max-width: 900px) {
  .image-gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
      'img-1 img-1 img-2 img-3'
      'img-4 img-5 img-6 img-6'
      'img-7 img-8 img-9 img-10'
      'img-11 img-12 img-13 img-14'
      'img-11 img-15 img-15 img-16'
      ;
      
  }

  .image-gallery a {
    height: 20rem;
  }

  .img-9, .img-13 {
    min-height: auto;
  }

  .img-11 {
    min-height: 41.5rem;
  }
}

@media screen and (max-width: 650px) {
  .image-gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
      'img-1 img-1 img-2 img-3'
      'img-4 img-5 img-6 img-6'
      'img-7 img-8 img-9 img-10'
      'img-11 img-12 img-13 img-14'
      'img-11 img-15 img-15 img-16'
      ;
      
  }

  .image-gallery a {
    height: 15rem;
  }

  .img-11 {
    min-height: 31.5rem;
  }
}

@media screen and (max-width: 450px) {
  .image-gallery {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
    grid-template-areas: 
      'img-1 img-2'
      'img-3 img-4'
      'img-5 img-6'
      'img-7 img-8'
      'img-9 img-10'
      'img-11 img-12'
      'img-13 img-14'
      'img-15 img-16'
      ;
      
  }

  .image-gallery a {
    height: 10rem;
  }

  .img-1, .img-11, .img-15, .img-6 {
    min-height: auto;
  }

  #home-heading h1 {
    color: white;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
  }

  
  #home-text p {
    color:white;
    font-size: 20px;
    font-weight: 700;
    margin: 8px 0 30px 0;
  }
}