/* CSS Document */

/* Setup */

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

  border: 0;

  font-size: 100%;

  font: inherit;

  margin: 0;

  padding: 0; }



article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

  display: block; }



body {

  line-height: 1; }


  


ol, ul {

  list-style: none; }



blockquote, q {

  quotes: none; }



blockquote:before, blockquote:after, q:before, q:after {

  content: none; }



table {

  border-collapse: collapse;

  border-spacing: 0; }



/* Border Radius */

/* Border Radius */

/* Radial Gradient */

/* Radial Gradient */

/* Box Shadow */

/* Box Shadow Parametre */

/* Transition */

/* Transition Global */

/* Transition Global 2 */

/* Transition Global 3 */

/* Transform */

/* Transform Origin */

/* Transform Style */

/* Perspective */

/* Hyphens */

/* Animation */

/* Animation Play State */

/* Animation Delay */

/* Import */

/* Color */

/* Font Family */

html {

  font-size: 100%; }



body {

  -webkit-font-smoothing: antialiased;

  position: relative;

  overflow-x: hidden;

  width: 100%; }



* {

  box-sizing: border-box; }



/* float clearing for IE6 */

* html .clearfix {

  height: 1%;

  overflow: visible; }



/* float clearing for IE7 */

* + html .clearfix {

  min-height: 1%; }



/* float clearing for everyone else */

.clearfix:after {

  clear: both;

  content: ".";

  display: block;

  height: 0;

  visibility: hidden;

  font-size: 0; }



a {

  text-decoration: none;

  cursor: pointer; }



a:hover {

  text-decoration: none; }



.clr {

  clear: both; }



.col-contenu {

  float: left;

  height: auto;

  width: 100%; }



@-webkit-keyframes pulse {

  0% {

    box-shadow: 0 0 0 0 var(--hover); } }

@keyframes pulse {

  0% {

    box-shadow: 0 0 0 0 var(--hover); } }

/* parts */

/* Slider */

.slider {

  height: 100vh;

  left: 0;

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 1; }

  .slider .item {

    height: 100vh;

    width: 100%; }

    .slider .item img {

      height: 100vh;

      -webkit-object-fit: cover;

      -moz-object-fit: cover;

      -ms-object-fit: cover;

      -o-object-fit: cover;

      object-fit: cover;

      width: 100%; }

  .slider .owl-dots {

    right: 20px;

    position: fixed;

    top: 50%;

    -moz-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    width: 12px;

    z-index: 2; }

    .slider .owl-dots .owl-dot {

      border: 1px solid #ffffff;

      border-radius: 2px;

      -webkit-border-radius: 2px;

      -moz-border-radius: 2px;

      float: left;

      height: 12px;

      margin-top: 8px;

      width: 12px; }

      .slider .owl-dots .owl-dot:nth-child(1) {

        margin-top: 0; }

      .slider .owl-dots .owl-dot.active {

        background-color: #ffffff; }

      .slider .owl-dots .owl-dot:focus {

        outline: 0 none !important; }



@media screen and (max-width: 994px) {

  .slider .owl-dots {

    right: 16px;

    width: 10px; }

    .slider .owl-dots .owl-dot {

      height: 10px;

      margin-top: 5px;

      width: 10px; } }

@media screen and (max-width: 738px) {

  .slider .owl-dots {

    right: 8px; }

    .slider .owl-dots .owl-dot {

      margin-top: 4px; } }

/* End Slider */

/* Header */

header {

  height: auto;

  position: relative;

  width: 100%;

  z-index: 3; }

  header .logo {

    display: block;

    float: left;

    margin: 35px 0 0 30px; }

    header .logo img {
      filter: brightness(0) invert(1);
      width: 100px; }

  header .logo-onmt {

    left: 0;

    right: 0;

    margin: 0 auto;

    position: absolute;

    top: 0;

    width: 100px; }

  header .login {

    background-color: rgba(3, 145, 199, 0.7);  

    background-image: url("../../img/img_login/account.png");

    background-repeat: no-repeat;

    background-size: 24px 24px;

    background-position: 13px center;

    border-radius: 7px;

    -webkit-border-radius: 7px;

    -moz-border-radius: 7px;

    color: #ffffff;

    cursor: pointer;

    float: right;

    font-family: "Roboto", sans-serif;

    font-size: 18px;

    font-weight: 700;

    height: 39px;

    line-height: 39px;

    padding: 0 25px 0 50px;

    margin: 49px 30px 0 0;

    text-transform: capitalize;

    width: auto;

    --hover: rgba(3, 145, 199, 0.5); }

    header .login:hover {

      -webkit-animation: pulse 1s;

      animation: pulse 1s;

      -webkit-box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);

      -moz-box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);

      box-shadow: 0 0 0 2em rgba(255, 255, 255, 0); }

    header .login-2 {

      background-color: rgba(242, 126, 0, 0.7);  
      background-image: url("../../img/img_login/add-user.png");
      --hover: rgba(242, 126, 0, 0.5);
    }

    header .br {
      display: none;
    }

@media screen and (max-width: 994px) {

  header .logo {

    margin: 25px 0 0 20px; }

    header .logo img {

      width: 150px; }

  header .logo-onmt {

    width: 80px; }

  header .login {

    background-size: 20px 20px;

    background-position: 11px center;

    border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    /*font-size: 16px;*/
    font-size: 0;

    height: 29px;

    line-height: 29px;

    padding: 0 16px 0 25px;

    margin: 23px 20px 0 0; } }

    header .br {
      display: block;
    }

@media screen and (max-width: 738px) {

  header .logo {

    margin: 15px 0 0 10px; }

    header .logo img {

      width: 100px; }

  header .logo-onmt {

    width: 50px; }

  header .login {

    background-size: 16px 16px;

    background-position: 8px center;

    border-radius: 3px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    /*font-size: 12px;*/

    font-size: 0;

    height: 22px;

    line-height: 22px;

    padding: 0 16px 0 17px;

    margin: 13px 10px 0 0; } }

/* End Header */

/* Authentification */

.authentification {

  background-color: #ffffff;

  border-radius: 4px;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  bottom: 0;

  height: 400px;

  left: 100%;

  right: 0;

  margin: auto;

  position: fixed;

  overflow: hidden;

  -webkit-transition: all 0.6s linear;

  -moz-transition: all 0.6s linear;

  -o-transition: all 0.6s linear;

  transition: all 0.6s linear;

  top: 0;

  width: 768px;

  z-index: 4; }

  .authentification.active {

    left: 0; }

  .authentification .left {

    float: left;

    height: 100%;

    width: 50%; }

    .authentification .left img {

      height: 100%;

      -webkit-object-fit: cover;

      -moz-object-fit: cover;

      -ms-object-fit: cover;

      -o-object-fit: cover;

      object-fit: cover;

      width: 100%; }

    .authentification .left h1 {

      color: #333333;

      font-family: "Roboto", sans-serif;

      font-size: 20px;

      font-weight: 700;

      line-height: 20px;

      margin: 25px 0 20px;

      text-align: center;

      text-transform: capitalize; }

    .authentification .left h2 {

      color: rgba(0, 0, 0, 0.5);
      direction: rtl;
      font-family: "Roboto", sans-serif;

      font-size: 14px;

      font-weight: 500;

      line-height: 14px;
      text-align: right;

      margin: 8px 6% 0; }

    .authentification .left .form-control {

      background-color: transparent;

      border: 1px solid #ced0d4;

      border-radius: 2px;

      -webkit-border-radius: 2px;

      -moz-border-radius: 2px;

      -webkit-box-shadow: none;

      -moz-box-shadow: none;

      box-shadow: none;

      display: inline-block;

      color: #000000;

      font-family: "Roboto", sans-serif;

      font-size: 14px;

      font-weight: 400;

      height: 38px;

      line-height: 38px;

      margin: 5px 6% 0;

      padding: 0 0 0 15px;

      width: 88%; }

      .authentification .left .form-control::-webkit-input-placeholder {

        color: rgba(0, 0, 0, 0.6); }

      .authentification .left .form-control::-moz-placeholder {

        color: rgba(0, 0, 0, 0.6); }

      .authentification .left .form-control:-ms-input-placeholder {

        color: rgba(0, 0, 0, 0.6); }

      .authentification .left .form-control:-moz-placeholder {

        color: rgba(0, 0, 0, 0.6); }

      .authentification .left .form-control.email {

        background-image: url("../../img/img_login/envelope.png");

        background-repeat: no-repeat;

        background-size: 16px 14px;

        background-position: right 10px center;

        /*margin-bottom: 14px;*/ }

      .authentification .left .form-control.key {

        background-image: url("../../img/img_login/key.png");

        background-repeat: no-repeat;

        background-size: 16px 16px;

        background-position: right 10px center; }

        .authentification .left .form-control.key.key-I {

          /*margin-bottom: 14px;*/ }

    .authentification .left .containercheckbox {

      color: #000000;

      display: inline-block;

      position: relative;

      padding-left: 30px;

      cursor: pointer;

      font-size: 14px;

      font-family: "Roboto", sans-serif;

      font-weight: 700;

      line-height: 20px;

      margin: 10px 0 0 6%;

      -webkit-user-select: none;

      -moz-user-select: none;

      -ms-user-select: none;

      user-select: none; }

      .authentification .left .containercheckbox input {

        position: absolute;

        opacity: 0;

        cursor: pointer;

        height: 0;

        width: 0; }

      .authentification .left .containercheckbox .checkmark {

        position: absolute;

        top: 0;

        left: 0;

        height: 20px;

        width: 20px;

        background-color: transparent;

        border-radius: 2px;

        -webkit-border-radius: 2px;

        -moz-border-radius: 2px;

        border: 1px solid #ced0d4; }

      .authentification .left .containercheckbox .checkmark:after {

        content: "";

        position: absolute;

        display: none; }

      .authentification .left .containercheckbox input:checked ~ .checkmark:after {

        display: block;

        height: 14px;

        width: 14px; }

      .authentification .left .containercheckbox .checkmark:after {

        background-color: #f68927;

        border-radius: 2px;

        -webkit-border-radius: 2px;

        -moz-border-radius: 2px;

        left: 0;

        top: 0;

        width: 0;

        height: 0;

        right: 0;

        bottom: 0;

        margin: auto; }

    .authentification .left .password {

      color: #333333;

      cursor: pointer;

      display: block;

      font-family: "Roboto", sans-serif;

      font-size: 12px;

      font-weight: 700;

      line-height: 12px;

      margin: 15px 6% 0;

      text-align: center;

      width: 88%; }

    .authentification .left .Invalide {

      color: #d6180b;

      display: block;

      font-family: "Roboto", sans-serif;

      font-size: 11px;

      font-weight: 500;

      line-height: 11px;

      margin: 0 6%;

      position: relative;

      top: -10px;

      width: 88%; }

      .authentification .left .Invalide.valide {

        color: #12822b;

        text-align: center; }

    .authentification .left button {

      background-color: #0099d3;

      border: 0 none;

      border-radius: 2px;

      -webkit-border-radius: 2px;

      -moz-border-radius: 2px;

      color: #ffffff;

      cursor: pointer;

      font-family: "Roboto", sans-serif;

      font-weight: 700;

      font-size: 18px;

      height: 38px;

      line-height: 38px;

      margin: 10px 6% 0;

      width: 88%;

      --hover: rgba(0, 153, 111, 0.5); }

      .authentification .left button:hover {

        -webkit-animation: pulse 1s;

        animation: pulse 1s;

        -webkit-box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);

        -moz-box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);

        box-shadow: 0 0 0 2em rgba(255, 255, 255, 0); }

  .authentification.authentification-I {

    bottom: auto;

    height: auto;

    padding-bottom: 25px;

    -moz-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    top: 50%;

    width: 384px; }

    .authentification.authentification-I .left {

      height: auto;

      width: 100%; }



@media screen and (max-width: 994px) {

  .authentification {

    height: 340px;

    width: 640px; }

    .authentification .left h1 {

      font-size: 18px;

      line-height: 18px;

      margin: 14px 0 14px; }

    .authentification .left h2 {

      font-size: 12px;

      line-height: 12px;

      margin: 0 6%; }

    .authentification .left .form-control {

      font-size: 12px;

      height: 38px;

      line-height: 38px;

      margin: 5px 6% 0;

      padding: 0 0 0 10px;

      width: 88%; }

      .authentification .left .form-control.email {

        background-size: 16px 14px;

        background-position: right 10px center;

        margin-bottom: 14px; }

      .authentification .left .form-control.key {

        background-size: 16px 16px;

        background-position: right 10px center; }

    .authentification .left .containercheckbox {

      padding-left: 30px;

      font-size: 12px;

      line-height: 20px;

      margin: 10px 0 0 6%; }

      .authentification .left .containercheckbox .checkmark {

        height: 20px;

        width: 20px; }

      .authentification .left .containercheckbox input:checked ~ .checkmark:after {

        height: 14px;

        width: 14px; }

    .authentification .left .password {

      font-size: 12px;

      line-height: 12px;

      margin: 15px 6% 0; }

    .authentification .left .Invalide {

      font-size: 11px;

      line-height: 11px;

      margin: 0 6%;

      top: -10px;

      width: 88%; }

    .authentification .left button {

      font-size: 16px;

      height: 38px;

      line-height: 38px;

      margin: 10px 6% 0;

      width: 88%; }

    .authentification.authentification-I {

      padding-bottom: 25px;

      width: 320px; } }

@media screen and (max-width: 738px) {

  .authentification {

    height: 346px;

    width: 88%; }

    .authentification .left {

      height: auto;

      padding-bottom: 20px;

      width: 100%; }

      .authentification .left:nth-child(2) {

        display: none; }

      .authentification .left h1 {

        font-size: 16px;

        line-height: 16px;

        margin: 20px 0 14px; }

      .authentification .left h2 {

        font-size: 12px;

        line-height: 12px;

        margin: 0 6%; }

      .authentification .left .form-control {

        font-size: 12px;

        height: 38px;

        line-height: 38px;

        margin: 5px 6% 0;

        padding: 0 0 0 10px;

        width: 88%; }

        .authentification .left .form-control.email {

          background-size: 16px 14px;

          background-position: right 10px center;

          margin-bottom: 14px; }

        .authentification .left .form-control.key {

          background-size: 16px 16px;

          background-position: right 10px center; }

      .authentification .left .containercheckbox {

        padding-left: 30px;

        font-size: 12px;

        line-height: 20px;

        margin: 10px 0 0 6%; }

        .authentification .left .containercheckbox .checkmark {

          height: 20px;

          width: 20px; }

        .authentification .left .containercheckbox input:checked ~ .checkmark:after {

          height: 14px;

          width: 14px; }

      .authentification .left .password {

        font-size: 11px;

        line-height: 11px;

        margin: 6px 6% 0; }

      .authentification .left .Invalide {

        font-size: 10px;

        line-height: 10px;

        margin: 0 6%;

        top: -10px;

        width: 88%; }

      .authentification .left button {

        font-size: 16px;

        height: 38px;

        line-height: 38px;

        margin: 10px 6% 0;

        width: 88%; }

    .authentification.authentification-I {

      padding-bottom: 20px;

      width: 88%; } }

/* End Authentification */


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