@font-face {
  font-family: 'Arista 2.0';
  src: url(../font/Arista2.0.ttf);
}
@font-face {
  font-family: 'Arista2.0 light';
  src: url(../font/Arista2.0_light.ttf);
}

.rounded {
  -webkit-border-radius: 120px;
  -moz-border-radius: 120px;
  -ms-border-radius: 120px;
  -o-border-radius: 120px;
  border-radius: 120px;
}

body {
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 16px;
  position:fixed;
  width:100%;
  height:100%;
  /*height: 100vh;*/
}
.flex-wrapper{
  background-color:#fcfbfc;
  width: 100%;
  height: 100%;
  display:flex;
  justify-content: center;
  align-items: baseline;
  overflow: hidden;
  position: fixed;
  top: 0;
}
.dark.flex-wrapper{
  background-color: #030203
}

.wrapper{
  background-color:#fcfbfc;
  position:fixed;
  width:100vw;
  width:100%;
  height: 100vh;
  height:100%;
}

.dark .wrapper{
  background-color: #030203
}

button.mode{
  position: absolute;
  right: 1%;
  top: 0.5%;
  background:url('../images/dark-mode.png') no-repeat ;
  background-size: 35px 35px;
  border: none;
  width: 35px;
  height: 35px;
}


.dark button.mode{
  background:url('../images/light-mode.png') no-repeat;
  background-size: 35px 35px;
}


.mode img{
  width: 35px;
}

.wrapper .section {
  box-sizing: border-box;
  border: 10px solid #fcfbfc;
  cursor: pointer;
  height: 50%;
  position: absolute;
  opacity: 1;
  text-align: center;
  width: 50%;
  -webkit-transition: 1000ms;
  -moz-transition: 1000ms;
  -ms-transition: 1000ms;
  -o-transition: 1000ms;
  transition: 1000ms;
  overflow:hidden;
}

.dark .wrapper .section{
  border: 10px solid #030203;
}


.wrapper .section.on {
  -webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
  filter:brightness(1.3);
}
.wrapper .section h2 {
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: uppercase;
  opacity:0;
  /*text-shadow: 2px 1px 4px #222;*/
  font-family: 'Arista 2.0';
  color:#fff;
  margin:0 0 0 10%;
  position: absolute;
  left: 30%;
  top: 15%
}
.wrapper .section.active h2 {
  opacity:1;
}
.wrapper .section.blue {
  background-color: #8bc0d0;;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top-left-radius: 100%;
}
.dark .wrapper .section.blue {
  background-color: #2f6474
}

.wrapper .section.blue {
  cursor: url('../images/projets.png'), pointer;	
}
.dark .wrapper .section.blue {
  cursor: url('../images/projets-dark.png'), pointer;	
}
.wrapper .section.blue.active {
  cursor: auto;	
  border-top-left-radius: 0%;
}

.wrapper .section.active.blue h2 {
  color: #999;
}
.wrapper .section.blue.active, .wrapper .section.blue.active:hover {
  background-color: #fcfbfc;
  opacity: 1;
}
.dark .wrapper .section.blue.active, .dark .wrapper .section.blue.active:hover {
  background-color: #030203;
}
.wrapper .section.blue .blue-projects {
  color: #999;
  opacity: 0;
  /*overflow: hidden;*/
  position: relative;
  display:none;
  height:100%
}
.wrapper .section.blue .blue-projects.visible {
  opacity: 1;
  display:block;
}
.wrapper .section.blue .blue-projects .arrows {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 80px;
  position: absolute;
  top: 84%;
  width: 80px;
  z-index: 2;
  opacity:0.5;
  cursor:pointer;
}
.wrapper .section.blue .blue-projects .arrows:hover {
  opacity:1;
}
.wrapper .section.blue .blue-projects .previous {
  background: url(../images/arrow-left.png) no-repeat;
  left: 21%;
}
.wrapper .section.blue .blue-projects .next {
  background: url(../images/arrow-right.png) no-repeat;
  right: 21%;
}

.wrapper .section.blue .wrap {
  margin: 0 auto;
  width: 100%;
  overflow:hidden;
  padding: 10% 0 0 0;
}

.image-fancy{
  position:relative;
  display: block;
  width:246px;
  height:196px;
  background: url(../images/masque-ordi.png) no-repeat;
}
.image-fancy:focus{
  outline: none
}
.image-fancy img{
  width:222px;
  position: absolute;
  left: 7px;
  top: 20px;
}

.wrapper .section.blue ul {
  list-style-type: none;
  padding: 0;
  text-align: left;
  width: 100%;
  height:100%;
  overflow:hidden;
  margin:0;
  display: flex;
  align-items: center;
}
.wrapper .section.blue ul li {
  visibility: visible;
  top:27%;
}
.wrapper .section.blue ul li img {
  /*border: 1px solid #8bc0d0;;*/
  display: block;
  visibility: visible;
  padding-left: 5px;
}
.wrapper .section.blue ul li img:hover {
  opacity:0.8;
}
.wrapper .section.blue ul li p {
  font-size: 0.9rem;
  text-align: center;
}
.wrapper .section.blue ul h3 {
  /* color: #8bc0d0;; */
  font-size: 0.9rem;
  text-align: center;
  text-transform: uppercase;
  margin:0;
}
.wrapper .section.blue ul.bullets {
  margin: 0 auto;
  display:flex;
  justify-content:space-between;

}
.wrapper .section.blue ul.bullets li {
  background: #8bc0d0;;
  float: left;
  height: 20px;
  margin: 0;
  padding:0;
  width: 20px;
  opacity:0.4;
  cursor:pointer;
}
.rounded10, .wrapper .section.blue ul.bullets li {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px; 
  border-radius: 10px;
}
@media screen and (max-width: 375px) {
  .wrapper .section.blue .wrap {
    margin: 0 auto;
  }
  .wrapper .section.blue ul h3{
    text-align:center;
  }
 /*  .wrapper .section.blue ul li img{
    width:90%;
  } */
  .wrapper .section.blue ul li p{
    font-size:0.9rem;
  }
  .wrapper .section.blue .blue-projects .arrows{
    background-size: 60%;
  }
}

@media screen and (max-width: 375px) {
  .wrapper .section.blue ul.bullets li{
    width: 15px;
    height: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
  }
}

.wrapper .section.blue ul.bullets li.on, .wrapper .section.blue ul.bullets li:hover {
  /*background: #999;*/
  opacity:1;
}
.wrapper .section.green {
  background-color: #d12600;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom-right-radius: 100%;
}
.wrapper .section.green {
  background-color: #ff542e;
}

.dark .wrapper .section.green {
  background-color: #ff542e;
}
.wrapper .section.green {
  cursor: url('../images/contact.png'), pointer;	
}
.dark .wrapper .section.green {
  cursor: url('../images/contact-dark.png'), pointer;	
}
.wrapper .section.green.active {
  cursor: auto;
  border-bottom-right-radius: 0%;	
}
.wrapper .section.active.green h2 {
  color: #999;
  ;
}
.wrapper .section.green.active, .wrapper .section.green.active:hover {
  background-color: #fcfbfc;
  color: #d12600;
  opacity:1;
}

.dark .wrapper .section.green.active, .dark .wrapper .section.green.active:hover {
  background-color: #030203;
}

.wrapper .section.green .green-contact {
  color: #999;
  font-size: 1rem;
  margin: 0 auto;
  opacity: 0;
  overflow: hidden;
  position: relative;
  width: 75%;
  display:none;
}
@media screen and (max-width: 375px) {
  .wrapper .section.green .green-contact{
    font-size: 0.9rem;
    width: 100%; 
  }
}
.wrapper .section.green .green-contact.visible {
  opacity: 1;
  display:block;
}
.wrapper .section.red {
  background-color: #ff6d4d;
  left: 50%;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top-right-radius: 100%;
  overflow:visible
}
.dark .wrapper .section.red {
  background-color: #b32100
}

.wrapper .section.red {
  cursor: url('../images/cv.png'), pointer;	
}
.dark .wrapper .section.red {
  cursor: url('../images/cv-dark.png'), pointer;	
}
.wrapper .section.red.active {
  cursor: auto;
  border-top-right-radius: 100%;	
}
.wrapper .section.red h2 {
  position:static
}
.wrapper .section.red.active h2 {
  color: #999;
}
.wrapper .section.red.active, .wrapper .section.red.active:hover {
  background-color: #fcfbfc;
  color: #8bc0d0;;
  opacity: 1;
}

.dark .wrapper .section.red.active, .dark .wrapper .section.red.active:hover {
  background-color: #030203;
}
.wrapper .section.red .red-cv {
  color: #999;
  font-size: 1rem;
  margin: 0 auto;
  opacity: 0;
  overflow: hidden;
  position: relative;
  /* width: 75%; */
  display:none;
}

.wrapper .section.red .red-cv .stack {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  opacity:0.6

}

.wrapper .section.red .red-cv .stack > div {
  width: 35px;
  height:35px;
  position:relative;
  
  -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
 }

 .wrapper .section.red .red-cv .stack > div.end-theme {
  margin-right: 20px
}

.wrapper .section.red .red-cv .stack > div span {
  opacity: 0;
  width: 66px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 35px;
  left: -12px;
  font-size: 10px;
 }
.dark .wrapper .section.red .red-cv .stack > div span {
  color: black;
  background-color: #fff;
 }

 .wrapper .section.red .red-cv .stack > div span::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.wrapper .section.red .red-cv .stack > div:hover span {
  opacity: 1;
}


.wrapper .section.red .red-cv .stack img {
  width: 30px;
  margin: 0 0 10px 0;
  transition: transform .1s;
}

.wrapper .section.red .red-cv .stack img:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
}


@-webkit-keyframes fadeInFromNone {
  0% {
      display: none;
      opacity: 0;
  }

  50% {
      display: block;
      opacity: 0.5;
  }

  100% {
      display: block;
      opacity: 1;
  }
}

@-moz-keyframes fadeInFromNone {
  0% {
      display: none;
      opacity: 0;
  }

  50% {
      display: block;
      opacity: 0.5;
  }

  100% {
      display: block;
      opacity: 1;
  }
}

@-o-keyframes fadeInFromNone {
  0% {
      display: none;
      opacity: 0;
  }

  50% {
      display: block;
      opacity: 0.5;
  }

  100% {
      display: block;
      opacity: 1;
  }
}

@keyframes fadeInFromNone {
  0% {
      display: none;
      opacity: 0;
  }

  50% {
      display: block;
      opacity: 0.5;
  }

  100% {
      display: block;
      opacity: 1;
  }
}



@media screen and (max-width: 375px) {
  .wrapper .section.red .red-cv {
    font-size: 0.9rem;
    width: 100%; 
  }
}
.wrapper .section.red .red-cv.visible {
  opacity: 1;
  display:block;
}
.wrapper .section.red .red-cv span {
  text-transform: uppercase;
}
.wrapper .section.red .red-cv a, .wrapper .section.red .red-cv .linkRoot {
  border-bottom: 1px dotted #ff6d4d;
  color: #ff6d4d;
  padding: 2px 1px 2px 1px;
  text-decoration: none;
  cursor:pointer;
}
.wrapper .section.red .red-cv .linkRoot#projects {
  border-bottom: 2px groove #8bc0d0;;
  color: #8bc0d0;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: #fff;
}
.wrapper .section.red .red-cv .linkRoot#projects:hover {
  background-color: #8bc0d0;
  -webkit-text-stroke-width: 1.5px;
  color: #fff;
}
.dark .wrapper .section.red .red-cv .linkRoot#projects {
  border-bottom: 2px groove #2F6474;;
  color: #2F6474;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: #fff;
}
.dark .wrapper .section.red .red-cv .linkRoot#projects:hover {
  background-color: #2F6474;
  color: #fff;
}
.wrapper .section.red .red-cv .linkRoot#lab {
  border-bottom: 2px groove #fee0da;
  filter:saturate(4.5);
  color: #fee0da;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: #fff;
}
.wrapper .section.red .red-cv .linkRoot#lab:hover {
  background-color: #fee0da;
  -webkit-text-stroke-width: 1.5px;
  color: #fff;
}
.dark .wrapper .section.red .red-cv .linkRoot#lab {
  border: 1px solid #FEE0D6;

}
.dark .wrapper .section.red .red-cv .linkRoot#lab:hover {
  background-color: #fee0da;
  color: #fff;
}
.wrapper .section.red .red-cv .linkRoot#contact {
  border-bottom: 2px groove #d12600;
  color: #d12600;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: #fff;
}
.wrapper .section.red .red-cv .linkRoot#contact:hover {
  background-color: #d12600;
  color: #fff;
}
.wrapper .section.red .red-cv a#profil-linkedin{
  border-bottom: 1px dotted #d12600;
  color: #d12600;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: #fff;
}
.wrapper .section.red .red-cv a#profil-linkedin:hover {
  background-color: #d12600;
  color: #fff;
}
.dark .wrapper .section.red .red-cv a#profil-linkedin:hover {
  background-color: #d12600;
  color: #fff;
}
.dark .wrapper .section.red .red-cv .linkRoot#contact:hover {
  background-color: #d12600;
  color: #fff;
}
.dark .wrapper .section.red .red-cv a#profil-linkedin{
  border-bottom: 2px groove #d12600;
  color: #d12660;
}
.wrapper .section.red .red-cv #encart-formats {
  margin: 40px 0 0 0;
}
.wrapper .section.red .red-cv #encart-formats a {
  border: none;
}
.wrapper .section.red .red-cv #encart-formats a:hover {
  background: none;
}
.wrapper .section.orange {
  background-color: #fee0da;
  left: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom-left-radius: 100%;
}
.dark .wrapper .section.orange {
  background-color: #270804;
}
.dark .wrapper .section.orange:hover:not(.active) {
  background-color: #270804;
  filter: brightness(2);
  opacity:1
}

.wrapper .section.orange {
  cursor: url('../images/lab.png'), pointer;	
}
.dark .wrapper .section.orange {
  cursor: url('../images/lab-dark.png'), pointer ;	
}
.wrapper .section.orange.active {
  cursor: auto;
  border-bottom-left-radius: 0%;
}

.wrapper .section.orange.active a:hover{
  cursor: auto;
  opacity:0.7;
}
.wrapper .section.orange h2 {
  position: static
}
.wrapper .section.orange.active h2 {
  color: #999;
}
.wrapper .section.orange.active p {
  padding: 5% 0 0 25%;
}
@media screen and (max-width: 375px) {
  .wrapper .section.orange.active p {
    font-size: 0.9rem;
    padding:0 0 0 25%;
  }
}
.wrapper .section.orange.active, .wrapper .section.orange.active:hover {
  background-color: #fcfbfc;
  color: #fee0da;
  opacity:1;
}

.dark .wrapper .section.orange.active, .dark .wrapper .section.orange.active:hover {
  background-color: #030203;
  color: #fee0da;
  opacity:1;
}

.wrapper .section.orange .orange-lab {
  color: #999;
  font-size: 1rem;
  margin: 0 auto;
  opacity: 0;
  overflow: hidden;
  position: relative;
  width: 75%;
  display:none;
  background: url(../images/extraterrestre.png) no-repeat center left;
  background-size: initial;
}

.dark .section.orange .orange-lab {
  background: url(../images/extraterrestre-dark.png) no-repeat center left;
}


.dark .wrapper .section.orange .orange-lab {

  background-size: initial;
}

.list-pocs  a{
  display:inline-block;
  width:25%;
  cursor: pointer;
}

.list-pocs a img{
  width:100%;
  border:1px solid #ccc;
  cursor: pointer;
}

@media screen and (max-width: 375px) {
  .wrapper .section.orange .orange-lab  {
    font-size: 0.9rem;
    width: 100%; 
  }
}

.wrapper .section.orange .orange-lab.visible {
  opacity: 1;
  display:block;
}
.wrapper .section.orange .orange-lab span {
  text-transform: uppercase;
}
.wrapper .section.orange .orange-lab span .external-link {
  border-bottom: 2px groove #fee0da;
  color:#fee0da;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: #fff;
  padding: 2px 1px 2px 1px;
  text-decoration: none;
  cursor: pointer;
}
.wrapper .section.orange.active .orange-lab a#link-lab:hover {
  background-color: #fee0da;
  -webkit-text-stroke-width: 1.5px;
  color: #fff;
}
.wrapper .section:hover {
  opacity: 0.3; 
}
.wrapper .logo:hover, .wrapper .logo.active:hover {
  opacity: 0.3;
  /* cursor: url('../images/avatar.png'), pointer;	 */
}
.dark .wrapper .logo:hover, .wrapper .logo.active:hover  {
  opacity: 0.3;
  /* cursor: url('../images/avatar-dark.png'), pointer;	 */
}

.wrapper .logo.active {
  opacity: 1;
}
.wrapper .line {
  background-color: white;
  position: absolute;
  z-index: 2;
}
.wrapper .line.horizontal {
  height: 20px;
  left: 0;
  margin-top: -10px;
  top: 50%;
  width: 100%;
}
.wrapper .line.vertical {
  height: 100%;
  left: 50%;
  margin-left: -10px;
  top: 0;
  width: 20px;
}
.wrapper .logo {
  background-color: white;
  cursor: pointer;
  height: 120px;
  left: 50%;
  position: absolute;
  margin-left: -60px;
  margin-top: -60px;
  top: 50%;
  width: 120px;
  z-index: 3;
  -webkit-transition: 1000ms;
  -moz-transition: 1000ms;
  -ms-transition: 1000ms;
  -o-transition: 1000ms;
  transition: 1000ms;
  opacity:1;
}
/*.wrapper .logo{
  cursor: url('../images/home.png'), pointer;	
}*/
.wrapper .logo img, .wrapper .logo img:active, .wrapper .logo img:focus {
  margin: 10px 0 0 10px;
  opacity:1;
}
.wrapper .cell {
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: middle;
}
.wrapper .wp-cell:after {
  content: "";
  display: inline-block;
  zoom: 1;
  height: 100%;
  width: 0px;
  vertical-align: middle;
}

.wrapper .logo {
  background-color: #fcfbfc;
}

/* .lt-ie9 .wrapper .logo {
  background: url(../images/logo.png) transparent;
} */

.dark .wrapper .logo {
  background-color: #030203;
}

.external-link{}

#link-linkedin{
  color:#0274b3;
  border-bottom: 1px dotted #0274b3;
    padding: 2px 1px 2px 1px;
    text-decoration: none;
}
#link-linkedin:hover{
  background-color: #0274b3;
  color: #fff;
}
#link-linkedin span{
  padding:0 10px 0 0;
  background: url(../images/linkedIn.png) no-repeat;
  width:53px;
  height:53px;
  display:inline-block;
  vertical-align: middle;
  
}
@media screen and (max-width: 576px) and (orientation: landscape) {
 .wrapper {
    transform-origin: left top;
    -webkit-transform: rotate(-90deg) translate(-100%,0%);
    -moz-transform: rotate(-90deg) translate(-100%,0%);
    -o-transform: rotate(-90deg) translate(-100%,0%);
    -ms-transform: rotate(-90deg) translate(-100%,0%);
    transform: rotate(-90deg) translate(left,center);
  }
 
  .wrapper .section.orange.active p{
    margin:0 0.5rem 0.5rem; 
  }
  .wrapper .section.blue .blue-projects.visible,
  .wrapper .section.orange .orange-lab.visible,
  .wrapper .section.red .red-cv.visible {
    overflow-y: scroll;
  }

  .wrapper .section.blue ul li img, .image-fancy, .wrapper .section.blue ul h3 {
    margin: 0;
  }

  .wrapper .section.blue .wrap >ul li {
    margin: 0;
  }
  .wrapper .section.blue ul li img{
    margin: 0;
  }
  .wrapper .section.blue ul li p{
    font-size:0.7rem;
    margin:1rem 0 0;
  }

  .image-fancy{
    background-size: contain;
    height:116px;
    margin: 0 auto;
  }

  .image-fancy img{
    left:3px;
    top:10px
  }
  .wrapper .section.blue .wrap{
    margin:0;
  }
  .wrapper .section.red .red-cv, .wrapper .section.orange.active p, .wrapper .section.green .green-contact {
    font-size:0.9rem;
  }
  .wrapper .logo {
    width: 90px;
    height: 90px;
    margin-left: -40px;
    margin-top: -40px;
  }
  .wrapper .logo img, .wrapper .logo img:active, .wrapper .logo img:focus {
    margin: 5px 0 0 5px;
    width: 80px;
    height: 80px;
  }
  .wrapper .section {
    border: 5px solid #fcfbfc;
  }
  .list-pocs  a{
    display:inline-block;
    width:20%;
    cursor: pointer;
  }
}