@font-face {
  font-family: 'Orchidea Pro';
  src: url("../FONT/Orchidea/OrchideaPro-Medium.otf");
  font-weight: normal;
  font-style: normal; }
body {
  margin: 0px;
  background: #ebebf0;
  font-family: "Orchidea Pro";
  color: #464646;
  overflow: hidden; }

li {
  list-style: none;
  margin: 0px;
  padding: 0px; }

ul {
  margin: 0px;
  padding: 0px; }

#volet_projet {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #ebebf0;
  z-index: 999;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
  left: 0px;
  top: 0px; }
  #volet_projet object {
    width: 33%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

#volet_projet.disable {
  animation: volet 1s ease;
  transform: translate(-100%, 0); }

@-webkit-keyframes volet {
  from {
    transform: translate(0, 0);
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.4); }
  to {
    transform: translate(-100%, 0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4); } }
#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 60px;
  background: #ebebf0;
  z-index: 10;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.4);
  transition: all .5s ease; }
  #header * {
    cursor: pointer; }
  #header h1 {
    margin: 0px;
    font-size: 34px;
    margin: 15px;
    color: #407cca; }
  #header #focus_box {
    height: 60px;
    width: 180px;
    left: 60px;
    display: inline-block;
    position: absolute;
    top: 0px;
    background: #ebebf0;
    transition: all .3s ease; }
    #header #focus_box:hover {
      filter: brightness(0.9); }
  #header .focus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  #header .focus {
    width: 20px;
    height: 20px;
    border: 2px solid #407cca;
    border-radius: 100%;
    cursor: pointer;
    transition: all .3s ease; }
  #header .focus::after {
    content: '';
    border-top: 2px solid #407cca;
    width: 14px;
    position: absolute;
    bottom: 1px;
    right: -11px;
    transform: rotate(45deg);
    transform-origin: left; }
  #header #buttons_box {
    height: 60px;
    position: absolute;
    left: 50%;
    width: 300px;
    top: 0px;
    transform: translate(-50%, 0); }
  #header #home {
    width: 60px;
    height: 60px;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    background: #ebebf0;
    transition: .3s; }
    #header #home div {
      border-top: 2px solid #407cca;
      border-left: 2px solid #407cca;
      width: 20px;
      height: 20px;
      box-sizing: border-box;
      position: absolute;
      left: 20px;
      top: 10px;
      transition: all .3s ease; }
      #header #home div.first {
        transform: rotate(225deg); }
      #header #home div.second {
        transform: rotate(45deg) translate(18px, 18px); }
  #header #home:hover .first {
    transform: rotate(-45deg); }
  #header #home:hover .second {
    transform: rotate(-45deg) translate(10px, 10px); }
  #header #home:hover div {
    top: 20px; }
  #header #home:hover {
    filter: brightness(0.9); }
  #header .proj {
    width: 60px;
    height: 60px;
    background: #ebebf0;
    position: absolute;
    top: 0px;
    display: inline-block;
    transition: all .3s ease; }
    #header .proj:hover {
      filter: brightness(0.9); }
    #header .proj div {
      border-top: 2px solid #407cca;
      border-left: 2px solid #407cca;
      width: 20px;
      height: 20px;
      box-sizing: border-box;
      position: absolute;
      top: 20px;
      left: 20px; }
    #header .proj.next {
      right: 0px; }
      #header .proj.next div {
        transform: rotate(135deg); }
        #header .proj.next div.second {
          transform: rotate(135deg) translate(10px, 10px); }
    #header .proj.prev div {
      transform: rotate(-45deg); }
      #header .proj.prev div.second {
        transform: rotate(-45deg) translate(10px, 10px); }

#selector {
  padding: 10px;
  box-sizing: border-box;
  background: #ebebf0;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.4); }
  #selector li {
    width: 15px;
    height: 15px;
    display: inline-block;
    margin: 10px;
    position: relative; }
    #selector li div {
      border: 2px solid #407cca;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      position: absolute;
      top: 0px;
      left: 0px;
      border-bottom: 0px;
      border-right: 0px;
      transition: all .3s ease; }
      #selector li div.first {
        transform: rotate(0deg); }
      #selector li div.second {
        transform: rotate(180deg); }

#selector ul li.selected div.first {
  transform: rotate(405deg);
  top: 9px; }

#selector ul li.selected div.second {
  transform: rotate(585deg);
  top: -9px; }

.switch {
  width: 60px;
  height: 60px;
  background: #ebebf0;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: 0px;
  padding: 20px;
  box-sizing: border-box;
  transition: all .2s ease;
  cursor: pointer; }
  .switch.prev {
    left: 0px; }
    .switch.prev .arrow {
      transform: rotate(-45deg); }
  .switch.next {
    right: 0px; }
    .switch.next .arrow {
      transform: rotate(135deg) translate(2px, 2px); }
  .switch .arrow {
    border-left: 2px solid #407cca;
    border-top: 2px solid #407cca;
    width: 20px;
    height: 20px; }
  .switch:hover {
    filter: brightness(0.9); }

#images {
  border: 1px solid red; }
  #images img {
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.4); }
    #images img.out {
      animation: imgOut 1s ease;
      animation-fill-mode: forwards; }
    #images img.first {
      animation: imgOut 1s ease;
      animation-fill-mode: normal;
      animation-direction: reverse; }
    #images img.outed {
      transform: translate(-100%, 0);
      box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4); }

@-webkit-keyframes imgOut {
  0% {
    transform: translate(0, 0);
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.4); }
  90% {
    box-shadow: 0px 50px 0px rgba(0, 0, 0, 0.4); }
  100% {
    transform: translate(-100%, 0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4); } }
#header.activ {
  top: 50%; }

#infos {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 0%;
  width: 100%;
  background: #ebebf0;
  z-index: 999;
  overflow: hidden;
  transition: all .5s ease; }
  #infos p {
    max-width: 500px;
    max-height: 100%;
    line-height: 1.4rem;
    font-style: italic;
    margin: 0px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    overflow-y: scroll;
    padding: 10px;
    padding-top: 50px;
    box-sizing: border-box; }
  #infos.activ {
    height: 50%; }

#prev_volet {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #ebebf0;
  width: 100%;
  height: 100%;
  z-index: 999;
  transform: translate(-100%, 0); }
  #prev_volet.activ {
    animation: 1s prev_volet ease;
    transform: translate(0, 0); }
  #prev_volet object {
    width: 33%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

@-webkit-keyframes prev_volet {
  from {
    transform: translate(-100%, 0); }
  to {
    transform: translate(0, 0); } }
#next_volet {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #ebebf0;
  width: 100%;
  height: 100%;
  z-index: 999;
  transform: translate(100%, 0); }
  #next_volet.activ {
    animation: 1s next_volet ease;
    transform: translate(0, 0); }
  #next_volet object {
    width: 33%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

@-webkit-keyframes next_volet {
  from {
    transform: translate(100%, 0); }
  to {
    transform: translate(0, 0); } }
#infos a {
  text-decoration: none; }

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