@charset "UTF-8";
/* media queries */
body {
  font-size: 15px !important;
  min-height: 100%;
}

h1 {
  margin: 0;
  padding: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s,
 box-shadow 5000s ease-in-out 0s !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(55, 59, 92, 0.28) inset !important;
  -webkit-text-fill-color: #fff !important;
}

/* Popup modale de récupération d'identifiants */
#modalRecupId {
  display: none;
  width: 600px;
  font-family: 'SohoStd',"Arial", sans-serif;
}

#modalRecupId .modal-content {
  padding: 0;
}

#modalRecupId iframe {
  border: none;
  width: 100%;
  height: 280px;
}

.alertbox {
  font-family: "Arial", sans-serif !important;
}

.alertbox .titre {
  height: 40px;
  font-weight: normal;
  line-height: 31px;
  text-transform: none;
  padding-left: 15px;
}

.alertbox .bouton {
  width: 50%;
  font-weight: normal;
}

.alertbox ul {
  padding: 0;
}

.alertbox A.bouton:hover {
  background-color: #717171 !important;
}

.alertbox .pied {
  margin-bottom: 20px;
}

.flex {
  min-height: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
}

.flex section#content {
  width: 100vw;
  min-height: 100vh;
  padding: 0;
}

@media (min-width: 600px) {
  .flex section#content {
    width: 50vw;
  }
}

@media (min-width: 992px) {
  .flex section#content {
    width: 40vw;
  }
}

@media (min-width: 1500px) {
  .flex section#content {
    width: 32vw;
  }
}

.flex section#content #baseline {
  height: 30.5vh;
  position: relative;
  overflow: hidden;
  background: #fff url("../images/logo-formation.png") no-repeat center center;
  background-size: 100% auto;
}

@media (min-width: 1200px) {
  .flex section#content #baseline {
    background-size: auto 266px;
  }
}

.flex section#content .form {
  min-height: 57.5vh;
  background: url("../images/bg-form.jpg") no-repeat center center;
  background-size: cover;
  font-family: Teko;
  font-size: 1.5em;
  color: #fff;
  padding: 0 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 600px) {
  .flex section#content .form {
    min-height: 69.5vh;
  }
}

.flex section#content .form .form-content header {
  padding: 0;
}

.flex section#content .form .form-content header h1 {
  text-transform: uppercase;
  font-size: 3.5em;
  line-height: 0.7em;
}

@media (max-width: 429px) {
  .flex section#content .form .form-content header h1 {
    font-size: 2.5em;
    padding-top: 30px;
  }
}

@media screen and (orientation: landscape) and (max-height: 600px) {
  .flex section#content .form .form-content header h1 {
    padding-top: 30px;
    font-size: 2.5em;
  }
}

.flex section#content .form .form-content header div span {
  color: #f6894b;
}

.flex section#content .form .form-content main {
  padding: 20px 0 40px;
}

@media (max-width: 429px) {
  .flex section#content .form .form-content main {
    padding: 0;
  }
}

.flex section#content .form .form-content main .input-field {
  position: relative;
}

.flex section#content .form .form-content main .input-field::before {
  content: ' ';
  position: absolute;
  display: block;
  background: url("../images/user.png") no-repeat center center;
  background-size: 90%;
  width: 70px;
  height: 3.5rem;
}

.flex section#content .form .form-content main .input-field.password::before {
  background: url("../images/password.png") no-repeat center center;
  background-size: 90%;
}

.flex section#content .form .form-content main .input-field input {
  padding-left: 70px;
  width: calc(100% - 70px);
  font-family: 'roboto_lightregular', Arial, sans-serif;
  background-color: rgba(55, 59, 92, 0.28);
  border: none;
  border-bottom: 1px solid rgba(55, 59, 92, 0.28);
  border-radius: 0;
  color: #fff;
  outline: none;
  height: 3.5rem;
  font-size: 16px;
  margin: 0 0 8px 0;
  box-shadow: none;
  box-sizing: content-box;
  transition: box-shadow .3s, border .3s;
}

.flex section#content .form .form-content main .input-field #oubli_form a {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-22px);
  transform: translateY(-22px);
  width: 36px;
  height: 36px;
  line-height: 36px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #2c2c3e;
  color: #fff;
  text-align: center;
}

.flex section#content .form .form-content footer {
  height: 75px;
  padding: 5px 0 0 5px;
  overflow: hidden;
}

.flex section#content .form .form-content footer a {
  position: relative;
  padding-left: 80px;
  text-transform: uppercase;
  color: #fff;
  transition: all 0.3s;
  line-height: 61px;
}

.flex section#content .form .form-content footer a::before {
  content: ' ';
  position: absolute;
  left: 0;
  width: 61px;
  height: 61px;
  background: url("../images/connexion.png") no-repeat center center;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.flex section#content .form .form-content footer a:hover {
  font-size: 1.2em;
}

.flex section#content .form .form-content footer a:hover::before {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

.flex section#content .logos {
  display: flex;
  height: 12%;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

@media (min-width: 600px) {
  .flex section#content .logos {
    display: none;
  }
}

.flex section#content .logos div {
  position: relative;
  height: 100%;
}

.flex section#content .logos div img {
  width: auto;
  display: block;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.flex section#content .logos div#logo-bfc {
  width: 35%;
  background: #fff url("../images/logo-bfc.png") no-repeat center center;
  background-size: auto 85%;
}

.flex section#content .logos div#logo-olf {
  width: 65%;
  background: #fff url("../images/logo-olf.png") no-repeat center center;
  background-size: auto 50%;
}

.flex section#image-bg {
  display: none;
  overflow: hidden;
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
}

@media (min-width: 600px) {
  .flex section#image-bg {
    display: block;
    width: 50vw;
  }
}

@media (min-width: 992px) {
  .flex section#image-bg {
    width: 60vw;
  }
}

@media (min-width: 1500px) {
  .flex section#image-bg {
    width: 68vw;
  }
}

.flex section#image-bg .grid-sizer,
.flex section#image-bg .grid-item {
  width: 50%;
  height: 20%;
}

.flex section#image-bg .grid-sizer.width2,
.flex section#image-bg .grid-item.width2 {
  width: 100%;
}

.flex section#image-bg .grid-sizer.height2,
.flex section#image-bg .grid-item.height2 {
  height: 40%;
}

.flex section#image-bg .grid-sizer#item1,
.flex section#image-bg .grid-item#item1 {
  display: none;
  background: url("../images/grid/perso1.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item2,
.flex section#image-bg .grid-item#item2 {
  display: none;
  background: url("../images/grid/perso2.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item3,
.flex section#image-bg .grid-item#item3 {
  display: none;
  background: url("../images/grid/perso3.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item4,
.flex section#image-bg .grid-item#item4 {
  display: none;
  background: url("../images/grid/perso4.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item5,
.flex section#image-bg .grid-item#item5 {
  display: none;
  background: url("../images/grid/perso5.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item6,
.flex section#image-bg .grid-item#item6 {
  display: none;
  background: url("../images/grid/perso6.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item7,
.flex section#image-bg .grid-item#item7 {
  display: none;
  background: url("../images/grid/perso7.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item8,
.flex section#image-bg .grid-item#item8 {
  display: none;
  background: url("../images/grid/perso8.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item9,
.flex section#image-bg .grid-item#item9 {
  display: none;
  background: url("../images/grid/perso9.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item10,
.flex section#image-bg .grid-item#item10 {
  display: none;
  background: url("../images/grid/perso10.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item11,
.flex section#image-bg .grid-item#item11 {
  display: none;
  background: url("../images/grid/perso11.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item12,
.flex section#image-bg .grid-item#item12 {
  display: none;
  background: url("../images/grid/perso12.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item13,
.flex section#image-bg .grid-item#item13 {
  display: none;
  background: url("../images/grid/perso13.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item14,
.flex section#image-bg .grid-item#item14 {
  display: none;
  background: url("../images/grid/perso14.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item15,
.flex section#image-bg .grid-item#item15 {
  display: none;
  background: url("../images/grid/perso15.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item16,
.flex section#image-bg .grid-item#item16 {
  display: none;
  background: url("../images/grid/perso16.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item17,
.flex section#image-bg .grid-item#item17 {
  display: none;
  background: url("../images/grid/perso17.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item18,
.flex section#image-bg .grid-item#item18 {
  display: none;
  background: url("../images/grid/perso18.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item19,
.flex section#image-bg .grid-item#item19 {
  display: none;
  background: url("../images/grid/perso19.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item20,
.flex section#image-bg .grid-item#item20 {
  display: none;
  background: url("../images/grid/perso20.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item21,
.flex section#image-bg .grid-item#item21 {
  display: none;
  background: url("../images/grid/perso21.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item22,
.flex section#image-bg .grid-item#item22 {
  display: none;
  background: url("../images/grid/perso22.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.flex section#image-bg .grid-sizer#item1,
.flex section#image-bg .grid-item#item1 {
  display: block;
}

.flex section#image-bg .grid-sizer#item2,
.flex section#image-bg .grid-item#item2 {
  display: block;
}

.flex section#image-bg .grid-sizer#item3,
.flex section#image-bg .grid-item#item3 {
  display: block;
}

.flex section#image-bg .grid-sizer#item4,
.flex section#image-bg .grid-item#item4 {
  display: block;
}

.flex section#image-bg .grid-sizer#item5,
.flex section#image-bg .grid-item#item5 {
  display: block;
}

.flex section#image-bg .grid-sizer#item19,
.flex section#image-bg .grid-item#item19 {
  display: block;
}

.flex section#image-bg .grid-sizer#item20,
.flex section#image-bg .grid-item#item20 {
  display: block;
}

.flex section#image-bg .grid-sizer#item21,
.flex section#image-bg .grid-item#item21 {
  display: block;
}

.flex section#image-bg .grid-sizer#item8, .flex section#image-bg .grid-sizer#item10,
.flex section#image-bg .grid-item#item8,
.flex section#image-bg .grid-item#item10 {
  background-position: top left;
}

.flex section#image-bg .grid-sizer#item21,
.flex section#image-bg .grid-item#item21 {
  background-position: center right;
}

.flex section#image-bg .grid-sizer#item2,
.flex section#image-bg .grid-item#item2 {
  background: url("../images/grid/logo-bfc.png") no-repeat center center;
  background-color: #fff;
  background-size: contain;
  z-index: 2;
}

.flex section#image-bg .grid-sizer#item19,
.flex section#image-bg .grid-item#item19 {
  background: url("../images/grid/logo-olf.png") no-repeat center center;
  background-color: #fff;
  background-size: contain;
  z-index: 2;
}

@media (min-width: 992px) {
  .flex section#image-bg .grid-sizer,
  .flex section#image-bg .grid-item {
    width: 25%;
    height: 20%;
  }
  .flex section#image-bg .grid-sizer.width2,
  .flex section#image-bg .grid-item.width2 {
    width: 50%;
  }
  .flex section#image-bg .grid-sizer.height2,
  .flex section#image-bg .grid-item.height2 {
    height: 40%;
  }
  .flex section#image-bg .grid-sizer#item1,
  .flex section#image-bg .grid-item#item1 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item2,
  .flex section#image-bg .grid-item#item2 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item3,
  .flex section#image-bg .grid-item#item3 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item4,
  .flex section#image-bg .grid-item#item4 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item5,
  .flex section#image-bg .grid-item#item5 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item6,
  .flex section#image-bg .grid-item#item6 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item7,
  .flex section#image-bg .grid-item#item7 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item8,
  .flex section#image-bg .grid-item#item8 {
    display: none;
  }
  .flex section#image-bg .grid-sizer#item9,
  .flex section#image-bg .grid-item#item9 {
    display: none;
  }
  .flex section#image-bg .grid-sizer#item10,
  .flex section#image-bg .grid-item#item10 {
    display: none;
  }
  .flex section#image-bg .grid-sizer#item11,
  .flex section#image-bg .grid-item#item11 {
    display: none;
  }
  .flex section#image-bg .grid-sizer#item12,
  .flex section#image-bg .grid-item#item12 {
    display: none;
  }
  .flex section#image-bg .grid-sizer#item13,
  .flex section#image-bg .grid-item#item13 {
    display: none;
  }
  .flex section#image-bg .grid-sizer#item14,
  .flex section#image-bg .grid-item#item14 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item15,
  .flex section#image-bg .grid-item#item15 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item16,
  .flex section#image-bg .grid-item#item16 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item17,
  .flex section#image-bg .grid-item#item17 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item18,
  .flex section#image-bg .grid-item#item18 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item19,
  .flex section#image-bg .grid-item#item19 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item20,
  .flex section#image-bg .grid-item#item20 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item21,
  .flex section#image-bg .grid-item#item21 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item22,
  .flex section#image-bg .grid-item#item22 {
    display: block;
  }
}

@media (min-width: 1200px) {
  .flex section#image-bg .grid-sizer,
  .flex section#image-bg .grid-item {
    width: 20%;
    height: 16.6667%;
  }
  .flex section#image-bg .grid-sizer.width2,
  .flex section#image-bg .grid-item.width2 {
    width: 40%;
  }
  .flex section#image-bg .grid-sizer.height2,
  .flex section#image-bg .grid-item.height2 {
    height: 33.3334%;
  }
  .flex section#image-bg .grid-sizer#item1,
  .flex section#image-bg .grid-item#item1 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item2,
  .flex section#image-bg .grid-item#item2 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item3,
  .flex section#image-bg .grid-item#item3 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item4,
  .flex section#image-bg .grid-item#item4 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item5,
  .flex section#image-bg .grid-item#item5 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item6,
  .flex section#image-bg .grid-item#item6 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item7,
  .flex section#image-bg .grid-item#item7 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item8,
  .flex section#image-bg .grid-item#item8 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item9,
  .flex section#image-bg .grid-item#item9 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item10,
  .flex section#image-bg .grid-item#item10 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item11,
  .flex section#image-bg .grid-item#item11 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item12,
  .flex section#image-bg .grid-item#item12 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item13,
  .flex section#image-bg .grid-item#item13 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item14,
  .flex section#image-bg .grid-item#item14 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item15,
  .flex section#image-bg .grid-item#item15 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item16,
  .flex section#image-bg .grid-item#item16 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item17,
  .flex section#image-bg .grid-item#item17 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item18,
  .flex section#image-bg .grid-item#item18 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item19,
  .flex section#image-bg .grid-item#item19 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item20,
  .flex section#image-bg .grid-item#item20 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item21,
  .flex section#image-bg .grid-item#item21 {
    display: block;
  }
  .flex section#image-bg .grid-sizer#item22,
  .flex section#image-bg .grid-item#item22 {
    display: block;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  .form-content header {
    padding: 100px 0 0 !important;
  }
}