.energy header,
.infrastructures header,
.telecom header,
.it header {
  height: 90vh;
  overflow: hidden;
  -webkit-perspective: 3000px;
  -ms-perspective: 3000px;
  perspective: 3000px;
}

.sector-header {
  overflow: hidden;
  height: auto;

  -webkit-perspective: 3000px;
  -ms-perspective: 3000px;
  perspective: 3000px;
}

.sector-container {
  position: relative;
  display: block;
  top: 0px;
  margin-left: -5%;
  margin-top: -5%;
  min-height: 110%;
  height: 110%;
  width: 110%;

  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

  transform: rotateX(var(--rotateX, 0deg)) rotateY(var(--rotateY, 0deg));
  transition: transform 0.1s ease-out;
  will-change: transform;
}
.no-object-fit:not(.ie) .sector-container {
  position: absolute;
  left: -7.5%;
}
.no-object-fit:not(.ie) .sectors .sector-container {
  left: 0%;
}

.sector-container .block-bg-cover {
  overflow: initial;
}
.firefox .sector-container .block-bg-cover,
.ie .sector-container .block-bg-cover {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
.firefox .sectors .sector-container .block-bg-cover,
.ie .sectors .sector-container .block-bg-cover {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

.ie .sector-container .block-bg-cover {
  position: absolute;
}

.sector-container .block-bg-cover picture img.element-cover-sectors:after,
.sector-container .block-bg-cover picture source:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.1;
}
.sector-container .block-bg-cover img.element-cover-sectors,
.sector-container .block-bg-cover source {
  min-height: 115%;
  max-width: none;
  min-width: 115%;
  left: -7.5%;
  top: -7.5%;
}

.firefox .sector-container .block-bg-cover img.element-cover-sectors,
.firefox .sector-container .block-bg-cover source,
.ie .sector-container .block-bg-cover img.element-cover-sectors,
.ie .sector-container .block-bg-cover source {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  min-width: 60%;
  min-height: 60%;
  width: auto;
  height: auto;
}

/*@media (orientation:portrait) {
  .sector-container .block-bg-cover .element img, .sector-container .block-bg-cover .element source{ max-height: 105%; }
}
@media screen and (min-width: 1490px){
  .sector-container .block-bg-cover .element img, .sector-container .block-bg-cover .element source{ max-height: 135%; }
}
@media screen and (min-width: 1700px){
  .sector-container .block-bg-cover .element img, .sector-container .block-bg-cover .element source{ max-height: 110%; }
}
@media screen and (min-width: 1900px){
  .sector-container .block-bg-cover .element img, .sector-container .block-bg-cover .element source{ max-height: 120%; }
  .telecom .sector-container .block-bg-cover .element img, .sector-container .block-bg-cover .element source{ max-height: 110%; }
}*/

.sector-bg {
  width: 100%;
  height: 100%;

  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0px);
  -ms-transform: translateZ(0px);
  transform: translateZ(0px);
}

.sector-bg img {
  margin-top: -40px;
  margin-left: -10%;

  width: 120%;
  max-width: 120%;
}

.sector-shadow {
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;

  opacity: 0;
  -webkit-transition: opacity 0.7s ease-in-out;
  -ms-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;

  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  transform: translateZ(50px);
}
.sector-shadow.show {
  opacity: 1;
}
.sector-shadow img {
  position: absolute;
  top: 100%;
  left: 50%;

  display: inherit;
  width: 33%;
  height: auto;
  max-width: 670px;

  opacity: 0.8;

  -webkit-transform: translateZ(150px) translateX(-50%) translateY(-50%);
  -ms-transform: translateZ(150px) translateX(-50%) translateY(-50%);
  transform: translateZ(150px) translateX(-50%) translateY(-50%);
}

.energy .sector-shadow img {
  -webkit-transform: translateZ(150px) translateX(-50%) translateY(-100%);
  -ms-transform: translateZ(150px) translateX(-50%) translateY(-100%);
  transform: translateZ(150px) translateX(-50%) translateY(-100%);
}
@media (orientation: portrait) {
  .energy .sector-shadow img {
    -webkit-transform: translateZ(150px) translateX(-50%) translateY(-120%);
    -ms-transform: translateZ(150px) translateX(-50%) translateY(-120%);
    transform: translateZ(150px) translateX(-50%) translateY(-120%);
  }
}

.infrastructures .sector-shadow img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  width: 33%;
  height: auto;
  max-width: 670px;
  max-height: 670px;
  -webkit-transform: translateX(-50%) translateY(-45%);
  -ms-transform: translateX(-50%) translateY(-45%);
  transform: translateX(-50%) translateY(-45%);

  /*  -webkit-transform: translateZ(150px) translateX(-50%) translateY(-150%);
      -ms-transform: translateZ(150px) translateX(-50%) translateY(-150%);
          transform: translateZ(150px) translateX(-50%) translateY(-150%);*/
  opacity: 1;
}
.it .sector-shadow img {
  -webkit-transform: translateZ(150px) translateX(-50%) translateY(-120%);
  -ms-transform: translateZ(150px) translateX(-50%) translateY(-120%);
  transform: translateZ(150px) translateX(-50%) translateY(-120%);
}
@media (min-height: 1100px) {
  .infrastructures .sector-shadow img {
    /*    -webkit-transform: translateZ(150px) translateX(-50%) translateY(-180%);
        -ms-transform: translateZ(150px) translateX(-50%) translateY(-180%);
            transform: translateZ(150px) translateX(-50%) translateY(-180%);*/
    opacity: 1;
  }
}

/*
  Sets the style of the image slider wrapper <div> to be centered horizontally and vertically.
  It also sets its default dimensions and the overflowing hidden (to fix the IE image positioning bug).
*/
.sector-pictogram {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(150px);
  -ms-transform: translateZ(150px);
  transform: translateZ(150px);
}
.sectors-intro .sector-pictogram {
  -webkit-transform: translateZ(350px);
  -ms-transform: translateZ(350px);
  transform: translateZ(350px);
}
/*
  Makes the image slider invisible by default
*/
.sector-imgs {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sector-imgs li {
  display: inline-block;
}
/*
  Sets every image in the slider to be absolute positioned and dynamically sized.
*/
.sector-pictogram img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 33%;
  height: auto;
  max-width: 670px;
  max-height: 670px;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.no-object-fit:not(.ie) .sector-pictogram img {
  margin-left: 7.5%;
}
.no-object-fit:not(.ie) .sectors .sector-pictogram img {
  margin-left: 0%;
}
.single-sectors .sector-pictogram img {
  margin: 0 0 0 0;
}
/*.single-sectors .sector-pictogram img { margin: 0 0 0 2.5%; }*/

/*
  Sets the style of the visible current frame of the image slider animation
*/
.current-image {
  width: 100%;
  visibility: visible;
}
/*
  Sets the style of the visible "previous" frame of the image slider animation
*/
.previous-image {
  width: 0;
  visibility: hidden;
}
/*
  Sets the dimensions of the CanvasLoader placeholder <div>, it also centeres it horizontally and vertically inside the wrapper and makes it invisible by default
*/
#spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -45px;
  margin-top: -50px;
  display: none;
  width: 90px;
  height: 90px;
}
/*
  Sets the style of the percentage <span> of the preloader by setting its dimensions and centering it horizontally and vertically
*/
#spinner span {
  position: absolute;
  top: 50%;
  margin-top: -0.3em;
  width: 100%;
  color: #333;
  font:
    0.8em Arial,
    Verdana,
    sans;
  text-align: center;
  line-height: 0.6em;
}