@charset "UTF-8";
/**********************************************************************************************************************
Pour toutes les tailles d'écran
**********************************************************************************************************************/
.illu_enseignement {
  width: 100vw;
  padding-right: 47px;
}

.makerHubEDU {
  overflow: hidden;
  background-color: #F06250;
  min-height: 25em;
  position: relative;
}

.image_makerhub {
  width: 100%;
}

.makerHubEDU h2 {
  color: #BBD8D9;
}

.catalogueETS {
  overflow: hidden;
  background-color: #F1951C;
  min-height: 25em;
  position: relative;
}

.catalogueETS h2 {
  color: #0C3C56;
}

#carouselETS {
  height: 40em;
  margin-bottom: 0.5em;
}
#carouselETS > .carousel-inner {
  height: 34em;
}

.makerHubEDU > div > img {
  width: 7em;
}

.catalogueETS > div > img {
  width: 10em;
  transform: scaleX(-1);
}

@media (max-width: 575.99px) {
  .makerHubEDU > div > img, .catalogueETS > div > img {
    margin-right: -2em;
  }

  .makerHubEDU > div:nth-child(2), .catalogueETS > div:nth-child(2) {
    text-align: right;
  }
}
/**********************************************************************************************************************
Pour tout les écrans de plus de 576px (mobile)
**********************************************************************************************************************/
@media (min-width: 576px) {
  .makerHubEDU > div > img {
    width: 10em;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .catalogueETS > div > img {
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
/**********************************************************************************************************************
Pour tout les écrans de plus de 768px (tablette)
**********************************************************************************************************************/
@media (min-width: 768px) {
  #carouselETS > .carousel-inner {
    height: 32em;
  }
}
/**********************************************************************************************************************
Pour tout les écrans de plus de 992px (ordinateur)
**********************************************************************************************************************/
@media (min-width: 992px) {
  .illu_enseignement {
    float: right;
    max-width: 812px;
    width: 100%;
    padding: 0;
  }
}
/**********************************************************************************************************************
Pour tout les écrans de plus de 1200px (grand écrans)
**********************************************************************************************************************/
@media (min-width: 1200px) {
  .makerHubEDU > div > img {
    width: 15em;
    position: absolute;
    left: -10vw;
    bottom: 0;
  }

  .catalogueETS > div > img {
    width: 15em;
    position: absolute;
    left: -5em;
    bottom: 0;
  }

  #carouselETS {
    height: 100%;
  }
  #carouselETS > .carousel-inner {
    height: 45em;
  }

  .catalogueETS .textCatalogueETS {
    margin-left: -70vw;
  }

  .makerHubEDU {
    min-height: 30em;
  }

  .catalogueETSHover > div > img {
    animation: backgroundCatalogueETS 1s;
    animation-delay: 550ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    left: -5em;
  }

  @keyframes backgroundCatalogueETS {
    100% {
      left: 0;
    }
  }
  .catalogueETSHover .textCatalogueETS {
    animation: textCatalogue 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    margin-left: -70vw;
    opacity: 0;
  }

  @keyframes textCatalogue {
    100% {
      margin-left: 0;
      opacity: 1;
    }
  }
  .makerHubEDUHover > div > img {
    animation: backgroundMakerHubEDU 1s;
    animation-delay: 550ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    left: -10vw;
  }

  @keyframes backgroundMakerHubEDU {
    100% {
      left: 0;
    }
  }
  .makerHubEDUHover .textMakerHubEDU {
    animation: textMakerHubEDU 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    margin-left: -70vw;
    opacity: 0;
  }

  @keyframes textMakerHubEDU {
    100% {
      margin-left: 0;
      opacity: 1;
    }
  }
  .catalogueETSNotHover .textCatalogueETS {
    animation: textCatalogueETSNotHover 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    margin-left: 0;
    opacity: 1;
  }

  @keyframes textCatalogueETSNotHover {
    100% {
      margin-left: -70vw;
      opacity: 0;
    }
  }
  .catalogueETSNotHover > div > img {
    animation: backgroundCatalogueETSNotHover 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    left: 0;
  }

  @keyframes backgroundCatalogueETSNotHover {
    100% {
      left: -5em;
    }
  }
  .makerHubEDUNotHover > div > img {
    animation: backgroundMakerHubEDUNotHover 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    left: 0;
  }

  @keyframes backgroundMakerHubEDUNotHover {
    100% {
      left: -10vw;
    }
  }
  .makerHubEDUNotHover .textMakerHubEDU {
    animation: textMakerHubEDUNotHover 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    margin-left: 0;
    opacity: 1;
  }

  @keyframes textMakerHubEDUNotHover {
    100% {
      margin-left: -70vw;
      opacity: 0;
    }
  }
}
/**********************************************************************************************************************
Pour tout les écrans de plus de 1900px (grand écrans)
**********************************************************************************************************************/
@media (min-width: 1900px) {
  .makerHubEDU > div > img, .catalogueETS > div > img {
    width: 20em;
  }

  .makerHubEDU {
    min-height: 25em;
  }

  #carouselETS > .carousel-inner {
    height: 32em;
  }
}

/*# sourceMappingURL=enseignement.css.map */