/* @font-face {
  font-family: "Robotto";
  src: url("fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 100; }

@font-face {
  font-family: "Robotto";
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 200; }

body {
  padding: 0;
  margin: 0;
  background: url("bg/triangles.png"); }

h3 {
  font-family: "Robotto";
  font-weight: 200;
  font-size: 14;
  text-align: center;
  text-transform: uppercase;
  color: #999;
  margin: 20px -20px; }
 */
/*  ---------------------

    bouton slide

-------------------------*/
.button_slide {
  margin: 60px auto 10px;
  width: 110px;
  height: 38px;
  border-radius: 29px;
  background: #333;
  background: -webkit-linear-gradient(top, #111 0%, #222 80%);
  position: relative;
  -webkit-box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.8), 0px 0px 6px 2px #555555;
  box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.8), 0px 0px 6px 2px #555555; }
  .button_slide.xl {
    width: 160px; }

.slide_1 {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: -webkit-gradient(linear, left top, left bottom, from(#111), to(#404040));
  background: -webkit-linear-gradient(top, #111 0%, #404040 100%);
  background: -o-linear-gradient(top, #111 0%, #404040 100%);
  background: linear-gradient(top, #111 0%, #404040 100%);
  -webkit-box-shadow: inset 0px 2px 3px -2px white, inset 0px -2px 3px -2px black, 1px 6px 7px rgba(0, 0, 0, 0.5), 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px 2px 3px -2px white, inset 0px -2px 3px -2px black, 1px 6px 7px rgba(0, 0, 0, 0.5), 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
  position: relative;
  top: -3px;
  left: -2px;
  z-index: 99; }

  .lightrdm {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #444;
      color: #fff;
    -webkit-box-shadow: inset 0px 2px 3px -2px rgba(204, 204, 204, 0.5), 0px 0px 10px 4px rgba(51, 255, 0, 0);
    box-shadow: inset 0px 2px 3px -2px rgba(204, 204, 204, 0.5), 0px 0px 10px 4px rgba(51, 255, 0, 0);
    position: absolute;
    z-index: 99; }

    .lightrdm2 {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #444;
        color: #fff;
      -webkit-box-shadow: inset 0px 2px 3px -2px rgba(204, 204, 204, 0.5), 0px 0px 10px 4px rgba(51, 255, 0, 0);
      box-shadow: inset 0px 2px 3px -2px rgba(204, 204, 204, 0.5), 0px 0px 10px 4px rgba(51, 255, 0, 0);
      position: absolute;
      z-index: 99; }


.slide_2 {
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -4px; }

.slide_xl {
  display: inline-block;
  width: 85px;
  height: 44px;
  border-radius: 100px;
  background: -webkit-gradient(linear, left top, left bottom, from(#111), to(#404040));
  background: -webkit-linear-gradient(top, #111 0%, #404040 100%);
  background: -o-linear-gradient(top, #111 0%, #404040 100%);
  background: linear-gradient(top, #111 0%, #404040 100%);
  -webkit-box-shadow: inset 0px 2px 3px -2px white, inset 0px -2px 3px -2px black, 1px 6px 7px rgba(0, 0, 0, 0.5), 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px 2px 3px -2px white, inset 0px -2px 3px -2px black, 1px 6px 7px rgba(0, 0, 0, 0.5), 0px 5px 20px 0px rgba(0, 0, 0, 0.5);
  position: relative;
  top: -3px;
  left: -2px;
  z-index: 99; }

.button_slide:active {
  background: #33aa33;
  -webkit-box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8), 0px -4px 4px 0px rgba(0, 0, 0, 0.8), 0px 0px 3px 3px #505050;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8), 0px -4px 4px 0px rgba(0, 0, 0, 0.8), 0px 0px 3px 3px #505050; }
  .button_slide:active .slide_1 {
    left: 72px;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
  .button_slide:active .s2 {
    display: none; }
  .button_slide:active .s1 {
    display: inline-block; }
  .button_slide:active .slide_2 {
    background: #3f0;
    -webkit-box-shadow: inset 0px 2px 3px -2px rgba(204, 204, 204, 0), 0px 0px 10px 2px #33ff00;
    box-shadow: inset 0px 2px 3px -2px rgba(204, 204, 204, 0), 0px 0px 10px 2px #33ff00; }
  .button_slide:active .slide_xl {
    left: 80px;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }

.txt {
  display: inline-block;
  font-family: "Roboto";
  font-weight: 100;
  color: #fff;
  position: absolute;
  text-transform: uppercase;
  right: 20px;
  top: 8px;
  z-index: 90;
  font-size: 18; }

.s1 {
  left: 20px;
  right: inherit;
  display: none; }

/*  ---------------------

    bouton simple

-------------------------*/
.button_simple {
  position: relative;
  display: inline-block;

  cursor: pointer;
  width: 160px;
  height: 44px;
  left: -20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#222), color-stop(75%, #111), to(#222));
  background: -webkit-linear-gradient(top, #222 0%, #111 75%, #222 100%);
  background: -o-linear-gradient(top, #222 0%, #111 75%, #222 100%);
  background: linear-gradient(top, #222 0%, #111 75%, #222 100%);
  margin: 0px auto 0px;
  border-radius: 999px;
  font-family: sans-serif;
  -webkit-box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
  box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
  -webkit-transition: 0.1s ease-out;
  -o-transition: 0.1s ease-out;
  transition: 0.1s ease-out; }
  .button_simple:hover {
    -webkit-box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.3), inset 0px 15px 45px rgba(0, 0, 0, 0.2), inset 0px -1px 2px rgba(0, 0, 0, 0.5), inset 0px -15px 45px rgba(255, 255, 255, 0.1), 0px 5px 10px -4px black;
    box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.3), inset 0px 15px 45px rgba(0, 0, 0, 0.2), inset 0px -1px 2px rgba(0, 0, 0, 0.5), inset 0px -15px 45px rgba(255, 255, 255, 0.1), 0px 5px 10px -4px black;
      }

.button_simple_Activ_Cmd{
  position: relative;
  display: inline-block;

  cursor: pointer;
  width: 160px;
  height: 44px;
  left: 0px;
  background: -webkit-gradient(linear, left top, left bottom, from(#222), color-stop(75%, #111), to(#222));
  background: -webkit-linear-gradient(top, #222 0%, #111 75%, #222 100%);
  background: -o-linear-gradient(top, #222 0%, #111 75%, #222 100%);
  background: linear-gradient(top, #222 0%, #111 75%, #222 100%);
  margin: 0px auto 0px;
  border-radius: 999px;
  font-family: sans-serif;
  -webkit-box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
  box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
  -webkit-transition: 0.1s ease-out;
  -o-transition: 0.1s ease-out;
  transition: 0.1s ease-out; }
  .button_simple_Activ_Cmd:hover {
    -webkit-box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.3), inset 0px 15px 45px rgba(0, 0, 0, 0.2), inset 0px -1px 2px rgba(0, 0, 0, 0.5), inset 0px -15px 45px rgba(255, 255, 255, 0.1), 0px 5px 10px -4px black;
    box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.3), inset 0px 15px 45px rgba(0, 0, 0, 0.2), inset 0px -1px 2px rgba(0, 0, 0, 0.5), inset 0px -15px 45px rgba(255, 255, 255, 0.1), 0px 5px 10px -4px black;
      }

      }
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.button_simple_rond {
  position: center;
  display: inline-block;

  cursor: pointer;
  width: 50px;
  height: 50px;
  left: -20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#222), color-stop(75%, #111), to(#222));
  background: -webkit-linear-gradient(top, #222 0%, #111 75%, #222 100%);
  background: -o-linear-gradient(top, #222 0%, #111 75%, #222 100%);
  background: linear-gradient(top, #222 0%, #111 75%, #222 100%);
  margin: 0px auto 0px;
  border-radius: 999px;
  font-family: sans-serif;
  -webkit-box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
  box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
  -webkit-transition: 0.1s ease-out;
  -o-transition: 0.1s ease-out;
  transition: 0.1s ease-out; }
  .button_simple_rond:hover {
    -webkit-box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.3), inset 0px 15px 45px rgba(0, 0, 0, 0.2), inset 0px -1px 2px rgba(0, 0, 0, 0.5), inset 0px -15px 45px rgba(255, 255, 255, 0.1), 0px 5px 10px -4px black;
    box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.3), inset 0px 15px 45px rgba(0, 0, 0, 0.2), inset 0px -1px 2px rgba(0, 0, 0, 0.5), inset 0px -15px 45px rgba(255, 255, 255, 0.1), 0px 5px 10px -4px black;
      }

.button_simple_rond_Activ_Cmd{
  position: relative;
  display: inline-block;

  cursor: pointer;
  width: 50px;
  height: 50px;
  left: 0px;
  background: -webkit-gradient(linear, left top, left bottom, from(#222), color-stop(75%, #111), to(#222));
  background: -webkit-linear-gradient(top, #222 0%, #111 75%, #222 100%);
  background: -o-linear-gradient(top, #222 0%, #111 75%, #222 100%);
  background: linear-gradient(top, #222 0%, #111 75%, #222 100%);
  margin: 0px auto 0px;
  border-radius: 999px;
  font-family: sans-serif;
  -webkit-box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
  box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
  -webkit-transition: 0.1s ease-out;
  -o-transition: 0.1s ease-out;
  transition: 0.1s ease-out; }
  .button_simple_rond_Activ_Cmd:hover {
    -webkit-box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.3), inset 0px 15px 45px rgba(0, 0, 0, 0.2), inset 0px -1px 2px rgba(0, 0, 0, 0.5), inset 0px -15px 45px rgba(255, 255, 255, 0.1), 0px 5px 10px -4px black;
    box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.3), inset 0px 15px 45px rgba(0, 0, 0, 0.2), inset 0px -1px 2px rgba(0, 0, 0, 0.5), inset 0px -15px 45px rgba(255, 255, 255, 0.1), 0px 5px 10px -4px black;
      }

      }

      /* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */






  /* .button_simple:active .l_btn {
    background: #3f0;
    -webkit-box-shadow: inset 0px 2px 3px -2px rgba(204, 204, 204, 0), 0px 0px 10px 2px #33ff00;
    box-shadow: inset 0px 2px 3px -2px rgba(204, 204, 204, 0), 0px 0px 10px 2px #33ff00; }
  .button_simple:active .ss {
    color: #3f0;
    text-shadow: 0px 0px 4px #33ff00;
    font-weight: 100; } */

.ss {
  left: 45px;
  right: inherit;
  top: 14px;
  font-size: 14px;
  color: #666;
  font-weight: 200; }

.l_btn {
  top: 50%;
  left: 20px;
  color: #fff;
  margin-top: -4px; }

/*  ---------------------

    Voyant

-------------------------*/
.voyant {
  position: relative;
  cursor: pointer;
  width: 160px;
  height: 44px;
  margin: 0px auto 0px;
  border-radius: 999px;
  font-family: sans-serif; }
  .voyant:active .l_btn {
    background: #3f0;
    -webkit-box-shadow: inset 0px 2px 3px -2px rgba(204, 204, 204, 0), 0px 0px 10px 2px #33ff00;
    box-shadow: inset 0px 2px 3px -2px rgba(204, 204, 204, 0), 0px 0px 10px 2px #33ff00; }
  .voyant:active .ss {
    color: #3f0;
    text-shadow: 0px 0px 4px #3f0;
    font-weight: 100; }

.ss {
  left: 45px;
  right: inherit;
  top: 14px;
  font-size: 14px;
  color: #666;
  font-weight: 200; }

.l_btn {
  top: 50%;
  left: 20px;
  margin-top: -4px; }

/*  ---------------------

    bouton multiple

-------------------------*/
.button_multi {
  margin: 8px auto 10px;
  width: 220px; }
  .button_multi .button_simple {
    border-radius: 0;
    margin: 0;
    display: inline-block;
    width: 70px; }
    .button_multi .button_simple.first {
      border-radius: 100px 0 0 100px; }
    .button_multi .button_simple.last {
      border-radius: 0 100px 100px 0; }
    .button_multi .button_simple.active {
      background: #33aa33;
      -webkit-box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8), 0px -4px 4px 0px rgba(0, 0, 0, 0.8), 0px 0px 3px 3px #505050;
      box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8), 0px -4px 4px 0px rgba(0, 0, 0, 0.8), 0px 0px 3px 3px #505050; }
      .button_multi .button_simple.active .ss {
        color: #fff; }
    .button_multi .button_simple .ss {
      left: 32px;
      font-size: 16px;
      color: #fff; }

/*  ---------------------

    bouton triangle

-------------------------*/
.button_triangle .button_up {
  position: relative;
  cursor: pointer;
  background: -webkit-gradient(linear, left top, left bottom, from(#222), color-stop(75%, #111), to(#222));
  background: -webkit-linear-gradient(top, #222 0%, #111 75%, #222 100%);
  background: -o-linear-gradient(top, #222 0%, #111 75%, #222 100%);
  background: linear-gradient(top, #222 0%, #111 75%, #222 100%);
  margin: 60px auto 10px;
  font-family: sans-serif;
  -webkit-box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
  box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
  -webkit-transition: 0.1s ease-out;
  -o-transition: 0.1s ease-out;
  transition: 0.1s ease-out;
  height: 0;
  width: 0;
  border-right: 50px solid transparent;
  border-bottom: 80px solid red;
  border-left: 50px solid transparent; }

.button_up_2 {
  height: 100px;
  width: 150px;
  overflow: hidden;
  text-align: left;
  margin: 60px auto 10px; }
  .button_up_2 p {
    -webkit-transform: rotate(45deg) skew(10deg, 10deg);
    -ms-transform: rotate(45deg) skew(10deg, 10deg);
    transform: rotate(45deg) skew(10deg, 10deg);
    -webkit-transform-origin: 26px 95px;
    -ms-transform-origin: 26px 95px;
    transform-origin: 26px 95px;
    height: 150%;
    background: -webkit-gradient(linear, left top, left bottom, from(#222), color-stop(75%, #111), to(#222));
    background: -webkit-linear-gradient(top, #222 0%, #111 75%, #222 100%);
    background: -o-linear-gradient(top, #222 0%, #111 75%, #222 100%);
    background: linear-gradient(top, #222 0%, #111 75%, #222 100%);
    -webkit-box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black;
    box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.4), inset 0px 15px 45px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5), 1px 5px 30px -4px black; }
  .button_up_2 span {
    display: block;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    width: 120px; }


    .BTN_UP_Flaps{
      margin-top: -150px;

    }
    .BTN_Down_Flaps{
      margin-top: -70px;

    }


    .BTN_UP_Guindeau{
      margin-top: -150px;

    }
    .BTN_Down_Guindeau{
      margin-top: 15px;

    }

    .BTN_simple_Guindeau{
      margin-left: -8px;

    }
    .txt_btn_Guindeau{
      margin-left: 17px;

    }


    .Klaxon_Nav1{
      margin-top: -40px;

    }


.Klaxon_Nav2{
  margin-top: -70px;

}


    .Retour_ETAT {
      left: 20px;
}
.Retour_ETAT_Voyant {
  left: -2px;
}