* {
  margin: 0;
  box-sizing: border-box;
}

@font-face {
    font-family: "Pole Emploi PRO";
    src: url("fonts/PoleEmploiPro-Regular.otf") format('opentype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Pole Emploi PRO";
    src: url("fonts/PoleEmploiPro-Light.otf") format('opentype');
    font-weight: 200;
}
@font-face {
    font-family: "Pole Emploi PRO";
    src: url("fonts/PoleEmploiPro-Bol-Cn.otf") format('opentype');
    font-weight: bold;
}

@font-face {
    font-family: "icons";
    src: url("iconsPE.ttf") format('TrueType');
}

.container {
/*   display: flex; */
  position:inherit;
  justify-content: center;
  align-items: center;
/*   background: grey; */
/*   min-height: 100vh; */
  margin: auto;
}

.artboard {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(12, 1fr);
  border: 5px solid #fff;
  /*   Yes this is not responsive */
  height: 870px;
  width: 100%;
  margin: auto;
}

body{
  font-family: "Pole Emploi PRO Condensed",'Antonio', 'Arial', sans-serif;
}

h2{
  text-align: center;
  font-weight: normal;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
  margin-bottom : 20px;
}

h3{
  font-family: "Pole Emploi PRO Condensed",'Antonio', 'Arial', sans-serif;
}

p.description{
  font-weight: 200;
  text-align: center;
  width:80%;
  margin:0px auto;
  padding: 0 25px;
}


a{
  text-decoration:none;
  color:inherit;
  width:100%;
  height:50%;
/*   margin:auto 0; */
}

.icon{
  font-family: "icons";
  font-size: 2em;
  font-weight: 100;
  line-height: 1.3em;
  text-align: center;
}
.fas, .far, .fal, .fab{
  line-height: 1em;
  font-size: 1.5em;
  margin-top: 0.2em;
}

.item {
  border: 8px solid #fff;
  transition: 0.3s;
  opacity:1;
}

.item:hover {
  border: 0px solid #fff;
  opacity:0.7;
}

.item1 {
   position: relative;
  grid-column: 1/8;
  grid-row: 1/6;
  background:none!important;
  z-index:0;
}
.item1:hover{
  opacity:1!important;
}
.centered1{
  position: absolute;
  text-align:center;
  width:100%;
  height:100%;
  top:0;
  padding:40%;
  color: white;
  z-index:8;
  /* background:rgba(0,70,135,0.5); */
  /* opacity:1; */
  transition: 0.3s;
  -webkit-transform: translate3d(0, 0, 200px);
  transform: translate3d(0, 0, 200px);  
}
.centered1:hover{
  opacity:0;
}

.video {
  position: relative; 
/*   padding-top: 30px;  */
  height:100%;
  overflow: hidden;
  z-index:-1;
  transition: 0.3s;
  
}

.video video{
  font-family: 'Antonio', 'Arial', sans-serif;
  position: relative; 
  top: 0; 
  left: 0; 
  z-index: 1;
  /* overflow: hidden; */
  height: 100%; 
  width: 100%;

object-fit: cover;
      
 /*transform:translateX(-21.8%);   décalage 16/9 video centre crop 1:1 */
  
}

video::-webkit-media-controls-enclosure {

  position: inherit;
  /* width: 66%; */
  /* transform: scale(.66) */
}

video::-webkit-media-controls-fullscreen-button {
  display: none!important;
  width: 0!important;
  -webkit-appearance: none!important;
  background-color: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0!important;
}

.item2 {
  
  grid-column: 8/13;
  grid-row: 1/6;
}
.centered2{
  padding: 20% 0;
  height:100%;
}

.item3 {
  grid-column: 13/20;
  grid-row: 1/9;
}
.centered3{
  padding: 40% 0;
  height:100%;
}

.item4 {
  grid-column: 20/25;
  grid-row: 1/9;
}
.centered4{
  padding-top: 50%;
  height:100%;
}

.item5 {
/*   grid-column: 1/9; masquage évènement*/
  grid-column: 1/13;
  grid-row: 6/13;
}
.centered5{
  padding: 30% 0;
  height:100%;
/*   color:white; */
  
  background-color:#DAE7F2dd
}

.centered5:hover{
    transition: 0.3s;
    background-color:#4C505488;
    color:white;
}

.item6 {
  grid-column: 9/13;
  grid-row: 6/13;
  display: flex;
}
.centered6{
  padding: 12% 0;
  margin: 0 auto;
  width: 10px;
  line-height:calc(100%*1.7);
  word-break: break-word;
  height:100%;
  font-variant: small-caps;
}
.visible{
    opacity:0;
  }

.item7 {
  grid-column: 13/18;
  grid-row: 9/13;
}
.centered7{
  padding: 20% 0;
  height:100%;
}

.item8 {
  grid-column: 18/25;
  grid-row: 9/13;
}
.centered8{
  padding: 15% 0;
  height:100%;
}

.map_object{
  height: 100%;
  width: 100%;
}


video::cue {
  position: relative;
  background: rgba(33, 28, 61, 0.33);
  /* transform: scale(100%, 80%); */
  font-family: "Pole Emploi PRO Condensed";
  color: white;
  font-size: 1.2em;
  text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.8);
  /* -webkit-transform: translate3d(0, 0, -19px); */
  /* transform: translate3d(0, 0, -19px);   */
  /* transform:translateX(-21.8%); décalage 16/9 video centre crop 1:1 */
  /* z-index: 1; */
}



.white {
  background: #e5e9ec;
  color: #1E3B75;
  
  -webkit-box-shadow: inset 8px 8px 24px 1px rgba(0,0,0,0.2); 
box-shadow: inset 8px 8px 24px 1px rgba(0,0,0,0.1);
}

.yellow {
  background: gold;
}

.red {
  background: #E52623;
  color: white;
  -webkit-box-shadow: inset 8px 8px 24px 1px rgba(0,0,0,0.2); 
box-shadow: inset 8px 8px 24px 1px rgba(0,0,0,0.2);
}

.blue {
  background: #1E3B75;/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #004687, #1E3B75);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #004687, #1E3B75); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: white;
}

.grey {
  background: #49494B;
  color: white;
}

/* Ripple magic */
.ripple {
  position: relative;
  overflow: hidden;
  z-index:1;
}

.ripple:after {
  content: '';
  position: absolute;
  z-index:-10;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(233, 177, 114, 0.65);
  opacity: 0;
  border-radius: 50%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: scale(200, 200);
  }
}

.ripple::after {
  animation: ripple 1.5s ease-out infinite;
}

.regions{
  background-image: url("https://www.remyfioretti.com/pole-emploi/creative-factory/btp-interface/assets/regions2018.svg");
  background-repeat:no-repeat;
  background-position: center;
/*   opacity:0.1; */
  
}
.regions:after{
  content:"";
  width:100%;
  height:100%;
  background-color:red;
}

.container-wrapper .container {
    min-height: 500px;
    padding: 0 25px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.modal, div[class^=container] {
    font-size: 14px\9;
}

.ovrl_start{
  position: absolute;
  top:0;
  left:0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color:rgba(255, 255, 255, 0.733);
}

.overlay-start {
  position: fixed;
  z-index: 10;
  bottom: 60%;
  left: 50%;
  z-index: 100000;
  padding: 1em 2.5em;
  background: linear-gradient(to top, hsl(209, 64%, 44%), #4065ad);
  border: 1px solid #fff;
  border-radius: 4px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  transition: .2s ease-in-out;
  transform: translate(-50%, 50%);
}

.overlay-start:hover {
  background: linear-gradient(to top, #2e8ce4, #5e87d8);
  color: #fff;
  font-size:1.8em;
  border:solid 5px;
}

.overlay-close {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  padding: 1em 2.5em;
  background:rgb(78, 78, 78);
  border: 1px solid #fff;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease-in-out;
  transform: translate(-50%, -50%);
}

.overlay-close2 {
  position: absolute;
  top: 9%;
  left: 17%;
  z-index: 10;
  padding: 1em 2.5em;
  background:rgb(78, 78, 78);
  border: 1px solid #fff;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease-in-out;
  transform: translate(-50%, -50%);
}

.overlay-close.is-open, .overlay-close2.is-open {
  opacity: 1;
  visibility: visible;
}
.overlay-close:hover, .overlay-close2.is-open {
  background: linear-gradient(to top, #004687, #1E3B75);
  color: #fff;
  font-size:1.2em;
  border:solid 5px;
}

.overlay02 {
  position: fixed;
  z-index: 5;
  top:5%;
  left:5%;
  width: 90%;
  height: 90%;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transition: .3s ease-in-out;
  transform: scale(.2);
}
.overlay02.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

iframe{
  image-rendering: pixelated;
  transform: perspective(1px);
}

span.grid {
  background: #fff;
  padding: 1rem;
  border-radius: 7px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.13);
  height: 100%;
  display: grid;
  grid-gap: 0.5rem;
}

span b {
  background-color: #004687;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.5rem;
  transition: .2s ease-in-out;
  opacity:0.85;
}
span b:hover{
  opacity:1;
}

.alternate1{
  background: linear-gradient(-0.33turn, #004687, #1E3B75);
}

.alternate2{
  background: linear-gradient(0.33turn, #004687, #1E3B75);
}

.cd-title{
  transition: .2s ease-in-out;
  transform:scale(1);
  
}
.cd-title:hover{
  transform:scale(1.2);
}


  @media (min-width: 768px){
  .artboard,.ovrl {
/*       width: 750px; */
    height: calc(100vw * 0.56);
  }
  h2{
    transform:scale(1)
  }
    .centered6{
      line-height:calc(100%*1.33);
    }
}
  @media (min-width: 992px){
  .artboard,.ovrl {
      width: 970px;
    height:543px;
  }
    .centered6{
      line-height:calc(100%*1.7);
    }
    
}  
  @media (min-width: 1200px){
    .artboard, .ovrl {
        width: 1170px;
        height:700px;
    }
    h2{
      transform:scale(1.5)
    }
    .centered6{
    padding: 40% 0;
  }
}
  @media (min-width: 1600px){
    .artboard, .ovrl {
        width: 1570px;
        height:900px;
    }
    h2{
      transform:scale(1.6);
      z-index: -1;
    }
    .centered6{
    padding: 55% 0;
  }
}

  @media (orientation: portrait) {

    /* html{
      min-height: -webkit-fill-available;
    }
    body{
      min-height: 90vh;
      min-height: -webkit-fill-available;
    } */
  
  .container-wrapper .container,.ovrl {
    min-height: 550px;
    height: 90vh;
    /* height: 100%; */
  }
  
  .artboard {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(24, 1fr);
    height: 90vh;
    /* min-height: -webkit-fill-available; */
    /* min-height: 460px; */
  }
  h2{
     font-size:1.3em;
  }
  
  .icon{
  font-size: 1.3em;
  }
  .fas{
    font-size: 1.1em;
/*     color:red; */
  }
  
  .item1 {/*video*/
    grid-column: 1/8;
    grid-row: 1/8;
    opacity:1!important;
  }

  video::-webkit-media-controls-enclosure {
    position: inherit;
    width: calc(90vw*(8/12));
    /* transform: scale(.66) */
  }


  .item5 {/*Territoires*/
     grid-column: 8/13;
    grid-row: 1/8;
  }
  .item2 {/*Formations*/
    grid-column: 1/6;
    grid-row: 8/15;
  }
  .item3 {/*Offres d'emploi*/
    grid-column: 6/13;
    grid-row: 8/15;
  }
  .item8 {/*Témoignages*/
    grid-column: 1/8;
    grid-row: 15/20;
  }
  
  .item4 {/*Découvrir les métiers*/
    grid-column: 8/13;
    grid-row: 15/20;
  }

  .item6 {/*évenements*/
    grid-column: 1/6;
    grid-row: 20/25;
  }
  .item7 {/*simulations 360*/
    grid-column: 1/13;
    grid-row: 20/25;
  }
  .centered1{/*Video*/
    padding: 40% 0;
  }
  
  .centered2{/*Formations*/
    padding: 30% 0;
  }
  
  .centered3{/*Offres*/
    padding: 25% 0;
  }
  
  .centered4{/*Métiers*/
    font-size: 0.8em!important;
    padding: 5% 0;
  }
  
  .centered5{/*Territoires*/
    padding: 35% 0;
  }
  
  .centered6{/*Évenements*/
    padding: 15% 0;
    margin:auto;
    width: 100%;
    text-align:center;
    word-break: normal;
    font-variant: normal;
  }
  .visible{
    opacity:1;
  }
  
  .centered7{/*Simulations 360*/
    padding:7% 0;
  }
  
  .centered8{/*Témoignages*/
    padding: 5% 0;
  }

  .overlay-start {
    font-size: 24px;
  }
}