@font-face {
  font-family: "MyFont";
  src: url('font/BodoniBook.ttf');
}
@font-face{
  font-family: "helvetica neue";
  src: url('font/HelveticaLight.ttf');

  font-family: "helvetica neue bold";
  src: url('font/HelveticaBold.ttf');
  }

* {
  box-sizing: border-box;
  margin: 0;
}

body { background-color: #f7fbfe; }

body a {
  color: black;
  text-decoration: none;
  background-color: #f7fbfe;
  font-family: "helvetica neue bold";
}

sub {
  font-family: "helvetica neue bold";
}



h2{
  font-family: "helvetica neue";
  /* margin: 0; */
}
h3{
  font-family: "helvetica neue";
}

.section {
    padding-left: 7vw;
}
section{
  background:#f7fbfe;
  width: 100vw;
  height: 100vh;
  position: relative;
}

p {
  font-family: "MyFont", serif;
}
nav {
    position: fixed;
    width: 100vh;
    text-align: center;
    height: 70px;
    padding: 10px;
    padding-right: 450px;
    top:50vh;
    width: 300%;
    margin-left: -248%;
  border: 10px solid black;
      border-bottom:none;
      border-right: none;
      border-left: none;
  border-image-source: url(http://www.amicollege.com/maths/sequence/_acts/31/regle0.gif);
  border-image-slice: 20 22;
  border-image-repeat: round;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background: #f7fbfe;
    color: black;
    overflow:hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 999;
}

nav a {
    text-decoration: none;
    color: black !important ;
    left: -400px;
    height: 100vh;
    top:50vh;
    font-size: 0.8em;
    font-weight: bolder;
    /* font-family: "helvetica neue"; */
    padding: 0 100px;
    margin: 0 10px;
    display: inline-block;
    right: 20px; }

.scrolled {
    margin-left: -148%;
}

nav #copyright {
  left: 100px;
  margin-right: -10vh;
  padding: 0 20px;
  display: inline-block;
  }

 nav #plus {
  font-size: 2em;
  /* font-family: helvetica ; */
  font-weight: lighter;
  margin-left: 100px;

  }

  .panel { z-index:1000000;}

#h-lang  {
   font-size: 0.8em;
   font-weight: bolder;
   /* font-family: "helvetica"; */
   position: absolute;
   transform: translate(-50%,-50%);
   top: 50%;
   right: 3%;
}

@media screen and (max-width: 800px) {
 #h-lang  {
  }
}


#panel{
  width :100vw;
  height: 80vh;
  display: block;
  transform: rotateX(0) rotateY(0);
background-position: 50% 50%;
}
#logo_grand  {
  width: 15%;
  height: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

#header{
  width:100vw;
  height:20vh;
  display: block;
  position: relative;
}
#crossContainer{
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
#header img {
              height: 100px;
              width: auto;
              transform-origin: center center;
              }
#header img {
  -webkit-transition: -webkit-transform .3s ease-in-out;
          transition: transform .3s ease-in-out;
}

#header img:hover {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}




#logo_petit { width: 100px;
              position: absolute;
              top:50%;
              height: auto; }

@media screen and (max-width: 800px) {
  #logo_petit {
    opacity: 0;
  }
}


.header{
  height: 10vh;
  position: relative;
}
.tableaux {
  height:10vh;
  display: block;
}
.center{
  height:55vh;
}
.row {
  height: 25vh;
      padding-top: 5%;
}

.center p {
    font-weight: lighter;
    font-size: calc(100vw/40);
    width:60vw;
    position: relative;
    text-align: center;
    /* transform: translate(-50%, -50%); */
    top: 15vh;
    /* left: 50%; */
    margin:auto;
    color: black;
}

.bottom{
  right: 0;
    text-align: right;
bottom: 0;
position: absolute;
height: 40vh;
width:100%;
}


.tableauxinfo2 { color: black;
                 margin-left: 10%; }

table {
  border-collapse: collapse;
}

.tableMid {
  margin: auto;
  border-collapse: collapse;
}

td, th {
  font-size: 0.5em;
  font-weight: bolder;
  font-family: "helvetica neue";
  text-align: left;
  padding: 1.5vh;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 10vh;
}

.tabletee td, th {
  font-size: 0.5em;
  font-weight: bolder;
  font-family: "helvetica neue";
  text-align: left;
  padding: 1vh;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 10vh;
}

.table1 td, th{
  font-size: 0.3em;
  font-weight: bolder;
  font-family: "helvetica neue";
  text-align: left;
  /* padding-right: 2vh; */
  padding: 1.5vh;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 15vh;
}

.table2 td, th{
  font-size: 0.3em;
  font-weight: bolder;
  font-family: "helvetica neue";
  text-align: left;
  padding: 1vh;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 25vh;
}

#section1 td, th {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.timer {
  top:6.2vh;
  font-size: 0.8em;
  font-weight: bolder;
  /* font-family: "helvetica"; */
}

.blink {
animation: blink 700ms ease infinite;
  }

@keyframes blink{
  0%{opacity: 0;}

  100%{opacity: 1;}
}



.blink2 {
 font-size: 1.5em; 
 font-weight: lighter;
animation: blink 700ms ease infinite;
  }

@keyframes blink2{
  0%{opacity: 0;}

  100%{opacity: 1;}
}

.column h3 { font-size: 0.6em;
  font-weight: bolder;
  color: black;
  line-height: 20px;
  /* font-family: "helvetica"; */
}

 @media screen and (max-width: 800px) {
.column h3 {
  font-size: 0.4em;
  line-height: 10px;
  }
.column h2 {
    font-size: 10px;
    }
.center p {
      font-size: 4vw;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 30%;
    }
}
.column h2 { font-size: 10px;
  font-weight: bolder;
  /* font-family: "helvetica"; */
}


.column {
  text-align: left;
  float: left;
  width: 25%;
  padding: 10px;
  font-family: "atapoc";
}

.column p {
  font-size: 13px;
  /* margin-left: 10%; */
  margin-right: 10%;
  /* font-family: "helvetica"; */
}



@media screen and (max-width: 800px) {
.column p {
  font-size: 10px;
  margin-right: 0%;
  }
}


#row:after {

  content: "";
  display: table;
  clear: both;
}

/* NAV */



.Tee-Big {
  text-align: right;
  font-size: 17vw;
  font-weight: lighter;
  color: black;
  margin:0;
  position: absolute;
  right: 0;
}

.open-Big {
  text-align: right;
  font-size: 25vw;
  font-weight: lighter;
  color: black;
  margin:0;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: all 0.3s ease;
  padding-right: 5px;
}

.italic{
  transform: skewX(-10deg);
}

.italic:hover {
  transform: skewX(0deg);
}



#tdimg{margin-top:-10px;
       margin-bottom:-10px;
       /* margin-left:-10px; */
     }

#donotimg{
  height: 6%;
  width: auto;
}

 .tabletee {
   position: absolute;
   width: auto;
   width:90%;
   left: 52%;
   top: 50vh;
   transform: translate(-50%, -50%);
}

.tabletee tr{
  height: 30px;
}


/*PANEL*/
.panel {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  transition: transform 0.9s ease-in-out;
  width: 100%;
  height: 100vh;
    background-color:#f7fbfe;
}

/* PANEL CONTENT */
.panel-content {
  color: black;
  will-change: margin-top;
  transition: all 1.2s;
  transition-delay: 600ms;
  width: 100vw;
  height: 100vh;
  background-color: #f7fbfe;
}

/*  PANEL */
/* •••••••••••••••••••••••••••••••• */
.panel#slice {
  z-index: 1000;
  color: white;
  transition: all 1.2s;
  -webkit-transform: translate3d(100%,0, 0);
          transform: translate3d(100%,0, 0);
}
.panel#slice:target {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.panel#slice-one {
  z-index: 1000;
  transition: all 1.2s;
  -webkit-transform: translate3d(100%,0, 0);
          transform: translate3d(100%,0, 0);
}
.panel#slice-one:target {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.panel#slice-two {
  z-index: 1000;
  color: white;
  transition: all 1.2s;
  -webkit-transform: translate3d(100%,0, 0);
          transform: translate3d(100%,0, 0);
}
.panel#slice-two:target {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}


.panel#slice-three {
  z-index: 1000;
  color: white;
  transition: all 1.2s;
  -webkit-transform: translate3d(100%,0, 0);
          transform: translate3d(100%,0, 0);
}
.panel#slice-three:target {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.panel#slice-four {
  z-index: 1000;
  color: white;
  transition: all 1.2s;
  -webkit-transform: translate3d(100%,0, 0);
          transform: translate3d(100%,0, 0);
}
.panel#slice-four:target {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

/* PANNEL CONTENT */
/* •••••••••••••••••••••••••••••••• */
#N { background-color: yellow;
     z-index: 0; }


#yellow {background-color: yellow;}


.panel-right { float: right;
               overflow:scroll;
               display: block;
               height: 100vh;
               color: black;
               background-color:#f7fbfe;
               width: 40%; }


.panel-right h2 {
  /* font-family: "helvetica"; */
                  letter-spacing: 2vw;
                  font-weight: lighter;}

.panel-left {
  display: block;
  float: left;
  color: black;
  background-color:#f7fbfe;
  height: 100vh;
   width: 60%;
 }

 .panel-left1 {
  display: block;
  float: left;
  color: black;
  background-color:black;
  height: 100vh;
  width: 100%;
 }

 .panel-full{
   display: block;
   float: left;
   color: black;
   background-color:#f7fbfe;
   height: 100vh;
    width: 100%;
 }
 .panel-full img {
   width: 7vw;
   height: auto;
   top: 4vh;
   position: absolute;
 }


 .title h3 {
   font-size: 0.8em;
   font-weight: bolder;
   position: relative;
   text-align: left;
   top: 3%;
 }

.panel-left img {
  width: 7vw;
  height: auto;
  top: 4vh;
  position: absolute;
}




.panel-right img {
  float: right;
  height: 100%;
  width: 100%;
}


.tableaux2 {margin-top: 2vh;
            width: 100vw;
            
            }

.tableaux2 .table1 td th {
  border-left:0px;
            }


.tableaux3 {
            padding-top: 32vh
          }

.panel-left p {
  font-weight: lighter;
  font-size: 20px;
  padding-top:10%;
    padding-left: 10%;
      padding-right: 20%;
  height: 100vh;
  float: left;
  text-align: left;
}

.closed img {
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
.closed img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

.big{
  margin-top: 2%;
    padding-left: 3%;
    width: 100%;
}

.biggy{
  padding-right: 10%;
  display: inline-block;
  width: 49%;
}

.big h2{
  text-align:left;
  font-size: 13vw;
  font-weight: lighter;
  position: relative;
  color: black;
}





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



.panel { overflow:scroll; }
.panel-left { width: 100%;
               height: auto; }
           
.panel-right { width: 100%;
               height: auto; }              


 .panel-left img {
  width: 12vw;
  height: auto;
  top: 2vh;
}

 .panel-left .javaimg img {
  width: 12vw;
  height: auto;
  top: 2vh;
  border-radius: 50%;
   filter: invert(1);
        -webkit-filter: invert(1);
        -moz-filter: invert(1);
        -o-filter: invert(1);
        -ms-filter: invert(1);
  border: 1px black solid ;

}

  .biggy{
    display: block;
    padding-top: 10%;
  }
  .big h2{
    font-size: 26vw;
  }
  .big{
    padding-left: 15%;
  }

.panel-full {overflow: scroll;}

  .panel-full img {
    width: 13vw;
    height: auto;
    top: 4vh;
    position: absolute;
  }
  .flex-container {
    width: 25%;
  }
}

.panel-right p {
  top: 3vh;
  font-size: 2.5vw;
  line-height: 2vw;
  text-align: left;
  font-weight: lighter;
  position: relative;
  padding-top: 5vh;
}




.panel-right img {
  float: right;
  height: auto;
  width: 100%;
}

.panel-left h1 {
              width: 100%;
              font-family: "helvetica";
              line-height: 0.9em;
              padding-top: -40px;
              text-align:left;
              font-size: 2vw;
              font-weight: lighter;
              color: black;
            }



.panel-left h2 {
              width: 100%;
              padding-top: 20%;
              text-align:left;
              font-size: 23vw;
              font-weight: lighter;
              color: black;
            }

 .panel-left h3 {
              font-size: 15vw;
            }           

.textContainer{
  float: left;
  padding-top: 0%;
  width: 85%;
  height: 100%;
}

.textContainer2{
  float: left;
  padding-top: 0%;
  width: 85%;
  height: 100vh;
}



.textContainer h1 {
              width: 100%;
              font-family: "helvetica";
              line-height: 0.9em;
              padding-top: 2%;
              text-align:left;
              font-size: 2vw;
              font-weight: lighter;
              color: black;
            }



.textContainer h3{
  text-align: left;
  font-size: 0.6em;
  margin-top: 10px;
  margin-left: 20px;
}

.textContainer2 h3{
  text-align: left;
  width: 50%;
  font-size: 0.6em;
}

.panelColonne{
  display: inline-block;
left: 10vh;
width: 70%;
float: left;
}

.flex-container {
  display: flex;
  align-items: stretch;
  padding: 2%;
  width: 15%;
  height: 100vh;
  margin: 0px;
  float: left;
}

.panel .flex-container > div {
  color: black;
  font-weight: lighter;
  width: 100px;
  text-align: left;
  font-size: 17vw;
}


.tableauxinfo1 {
  position: absolute;
  top: 80vh;
  left: 60%;
}

.tableauxinfo2 {
   position: absolute;
   top: 90vh;
 }


 .tableauxinfo3 .table1{
    margin: none;
  }

.tableauxinfo {
top: 90vh;
position: absolute;
left: 60%;
}