html, body{
  font-family: 'euclid', sans-serif;
  font-size: 1rem;
  margin:0;
  padding:0;
  max-width: 2400px;
  position: relative;
  color:#35393C;

}



/*Container*/

.container{
  margin:0 4rem 0rem 4rem;
  
}

.content_container{
  margin:3rem 4rem 0rem 4rem;
  
}

.content_container_pres{
  margin:8rem 4rem 0rem 4rem;
  
}


@media (max-width: 48em) {
.content_container_pres{
  margin:8rem 4rem 0rem 4rem;
   
  }
}

.content_container_post{
  margin:8rem 4rem 0rem 4rem;
  
}

.nom_page{
  margin:0rem 0rem 2rem 0rem;
  text-transform: uppercase;
  text-align: start;
  font-family: 'euclid_medium';
  font-size: 1.7rem;
}

@media (max-width: 48em) {
  .nom_page{
    font-size: 1.3rem;
    margin:0rem 0rem 1rem 0rem;
     
    }
  }

/* header */

.header {
background: linear-gradient(110deg, #f4f4f4 40%, #42858c 40%);    margin: 0;
    padding: 0;
    top:0;
  position: fixed;
    overflow: hidden;
  width: 100%;
  z-index: 3;
  transition:top 0.5s ease;
  border-bottom: 1px solid white; 


}

.scrolled{
  opacity: 80%;
}


.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;

}

.header li a {
  display: block;
  text-decoration: none;

  
}


.header .logo {
  margin:1rem 4rem 1rem 4rem;
  display: block;
  float: left;
  font-size: 1em;
  text-decoration: none;
    text-transform: uppercase;
width: 20rem;
height: 3rem;
background-image: url(https://jordanmokou.ch/hrselection/img/logo_web_1.svg);
background-repeat: no-repeat;

    
}


@media (max-width: 48em) {
  .header .logo{
    width: 10rem;
    height: 2rem;
    margin:1rem 1rem 0rem 1rem;
   
  }
}

/* menu */

.header .main-navigation{
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
    font-family: "euclid_medium", Arial, sans-serif;
    font-size: 1em;
    margin:0rem 4rem 1rem 1rem;
    padding-top: 1rem;
    
   
}

.main-navigation li a{
    color: #F5F1ED;
    text-transform: uppercase;
    padding: 0rem 0rem 1rem 0rem;
}

@media (max-width: 48em) {
.main-navigation li a{
font-size: 1rem;
padding: 1rem 0rem 0rem 0rem;
color: #35393C;

   
  }
}


.main-navigation li a:hover{
    color: white;
}

.main-navigation li a:active{
    color: white;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: white;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: white;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .main-navigation {
  max-height: 100%;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
   
  }
  
  
  .header li a {
    margin:1rem 0rem 0 1rem;
  }
  .header .main-navigation {
    clear: none;
    float: right;
    max-height: 100%;
      
  }
  .header .menu-icon {
    display: none;
  }
}

/*CONTENU*/
.fixe{
  font-size: 3rem;
  font-family: 'euclid_medium';
  margin:2rem 0rem 1rem 0rem;
}

@media (max-width: 48em) {
  .fixe{
font-size: 2rem;
  }
}

.recherche{
  margin:0;
  font-size: 1.3rem;
  margin:0rem 0rem 4rem 0rem;
}
  .offre{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #f4f4f4;
  }
  
  .col_offre{
    position: relative;
    padding: 5rem 0rem 5rem 0rem;
    margin:0 4rem 0rem 4rem;
  }
 
  .bloc_offre{
    position: relative;
    padding: 1rem 0rem 1rem 0rem;
    background-color: white;
    border-radius: 30px;
  }
  
  @media (max-width: 48em) {
    .bloc_offre{
margin: 0rem 0rem 1rem 0rem;
    }
  }
  
  .liste_offre ul{
list-style-type: none;
margin: 0;
padding: 0; 
    
  }
  
  .desc_offre{
    padding: 0rem 1rem 0rem 1rem;
  }
  .metier{
    font-size: 1.1rem;
    font-family: 'euclid_medium';
    text-transform: uppercase;
    padding: 0rem 1rem 0rem 1rem;
  }
.is-style-fill{
  padding: 0rem 1rem 0rem 1rem;
  width: 100%;

  
}

/*POSTULATION*/

.postcoord{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #f4f4f4;
  padding: 2rem 0rem 2rem 0rem;
}
.postulation{

}

/*Presentation*/
.bloc_pres{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #f4f4f4;
  padding: 2rem 0rem 2rem 0rem;
}
.presentation{
  margin: 0;
  padding: 0;
}

@media (max-width: 48em) {
  .presentation{
    margin:0rem 4rem 0rem 4rem;
     
    }
  }
/*FOOTER*/
.footer {
  position: fixed;
     display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 0.6rem;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #35393C;;
  color: black;
    height: 2rem;
    z-index: 5000;
    margin: 0;
height: 1.5rem;
}

.footer a{
  text-decoration: none;
  color: white;
}