/* style by Valentin Dewez */

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,500,600,700');
@font-face { font-family: freddy;  src: url('../Fonts/Freddy-Light.otf');}
@font-face { font-family: baio;  src: url('../Fonts/Yo-Regular.otf');}
@font-face { font-family: baio2;  src: url('../Fonts/Yo-Italic.otf');}     

html { 
    font-family: 'IBM Plex Mono', monospace; 
    font-weight: lighter; 
    font-style: normal; 
    font-size: 14px;
    background-color: black; 
	color: white; 
	width:95%;
	margin: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}


::selection {
  background: #878787;
}
::-moz-selection {
  background: #878787;
}

em {
    font-family: 'IBM Plex Mono', monospace;
    font-style: normal;
}

/* Burger */

.hamburger {
  display: none;
      position: fixed;
    margin-top: -0.5em;
    z-index: 9999;
    cursor: pointer;
    webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.line {
      width: 50px;
    height: 6px;
    background: #ffff;
    border: solid white 1px;
    margin-bottom: 5px;
}
.line:active {
      width: 50px;
    height: 6px;
    background: #ffff;
    border: solid white 1px;
    margin-bottom: 5px;
}

.menu {
        width: 320px;
    height: 100%;
    z-index: 998;
    background-color: #FFF;
    opacity: 90%;
    position: fixed;
    top: 0;
    left: -320px;
    transition: left .1s;
}

.menu-item:first-child {
  margin-top: 180px;
}

.menu--open {
  left: 0;
}

.menu-item {
  color: #000;
    width: 100%;
    padding: 1rem 3rem;
    box-sizing: border-box;
}

.menu-item:hover {
  background: #fff;
  cursor: pointer;
}

/* GENERAL */
figure {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
}

* , * :before, * :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a /* Liens par défaut (non survolés) */{
	text-decoration: none;
	color: white;
	font-style: normal;
}

a:hover /* Apparence au survol des liens */{
	text-decoration: underline;
	color: #878787;
	cursor: url('cursor.cur');
}


   

/*------------------*/
main {
    z-index: 2;
    position: relative;
    max-width: 1000px;
    width: 70%;
    margin-left: 40%;

}

.project {
    margin-right: 20px;
}

main figure img {
    margin-bottom: 10px;
    width: 100%;
    height: auto;
    max-width: 1000px;
}

main figure span {
    float: right;
    padding: 10px;
}

main figcaption {
    margin-bottom: 20px;
}

.cycle-slideshow {
  display: flex;
  max-width: 100%;
  height: auto;
  cursor: url(/files/cursor-next.png), ew-resize;
}

.cycle-next {
  flex-shrink: 0;
  height: 100%; 
  margin-bottom: 1%;
}

.cycle-caption { 
  z-index: 700;
}

.figcaption-title {
	font-variant: small-caps;
	cursor: text; 
    color: #878787;
}

.figcaption-txt {
	width: 100%;
	font-size: small;
	cursor: text; 
	margin-bottom: 5%;
}

/*------------------*/
aside {
    z-index: 999;
    width: 35%;
    position: fixed;
    font-size: 2vw;
    left: 0;
    top: 0;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 10px;
    cursor: text;	
}

p {
    margin-top: 9px;
    margin-bottom: 9px;
    font-size: 1em;
}

.follow{

  margin-top: 1em;
}

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

.tempHover{
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;

}

.title {
	font-size: x-large;
	}

.comm2 {
	z-index: 1;
	cursor: pointer;
	bottom: 1%;
	position: fixed;
	float:left;
	}

 /*------------------*/   
.grid {
    display: grid;
    grid-gap: ;
    grid-template-columns:  1fr 1fr 1fr 1fr 1fr  ;
    background-color: white;
    color: black;
    
    }



img{
  width:100%;
;
}

    .box {
        position: relative;
        background-color: white;
        color: #FFF;
        border-radius: 0px;
        padding:0px;
        padding-bottom: ;
        text-align: left;
        color: black;
        font-size:13px;
        background-color: white;
        margin:7px;
    }

.box .info{
    
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding-bottom: 0;
    margin: "auto";
    border-bottom: solid 1px #000;
    bottom:0;
    
}

grid{
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr;
}

.cv {

    max-width: 1000px;
    width: 70%;
    height: 50%;
    display: block;
    cursor: pointer;
    position: fixed;
    top: 0;
    margin-left: 60%;
    padding-right: 2em;
    padding-left: 2em;
    padding-top: 2em;
    }

/*Type-design*/

.typebox {
  display: block;
  margin-top: 0.15em;
  margin-bottom: 1em;
  margin-left: 2em;
  margin-right: 2em;
  max-width: 100%;
  padding: 0.3em 0 0.2em 0;
  border: 0.005em solid grey;
  border-right: none;
  border-left: none;
  word-wrap: normal;
  overflow: hidden;
  background: none;
      }

textarea {
  border: none;
  font-size: 100%;
  width: 100%
  line-height:10em;
  outline: none;
  color: white;
  resize: none;
  overflow: auto;
  background: none;
  outline: 0px solid transparent;
}


p11 {

  text-align: left;
  margin-left: 2em;
  margin-bottom: 0.20em;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

p10{
  margin-top: 0.020em;
  margin-left: 2em;
  display: block;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


.freddy  {
  font-family: 'freddy';

  font-size: 3.75vw;}

.baio {
  font-family: 'baio';
  font-weight: normal;
     font-size: 3.75vw;
     line-height: 1.2em;
  

}

.baio-talic {
  font-family: 'baio2';
  font-weight: normal;
     font-size: 3.75vw;
     line-height: 1.2em;
  

}
.freddy:hover, .baio:hover, .baio-talic:hover 
{outline: 0;
color:#878787;}

.freddy:focus, .baio:focus, .baio-talic:focus    
{outline: 0;
color:#878787;}


::selection {
  background-color:#CCC;

}
::-moz-selection {
  background-color:#CCC;
}

/*Slider*/

input[type=range] {
  height: 10px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 10%;
  margin-left: 75%;
  margin-top: -2em;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: black;
  border-radius: 0px;
  border: 0.025em solid #878787 ;
}
input[type=range]::-webkit-slider-thumb {
  border: 1px solid #000000;
  height: 20px;
  width: 10px;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #fd7e0f;
  background: #FFFFFF;
  border-radius: 0px;
  border: 1px solid #878787;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 50px;
  background: #FDFDFD;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #FFFFFF;
  border: 1px solid #fd7e0f;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #878787;
}
input[type=range]::-ms-fill-upper {
  background: #FFFFFF;
  border: 1px solid #fd7e0f;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #878787;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 50px;
 cursor: pointer;
}


/*------------------*/
nav{
	color: white;
    font-family: 'IBM Plex Mono', monospace;
	font-size: x-small; 
	font-weight: lighter;
	text-align: left;
	position: fixed;
	top: 500px;
	margin-left: 1000px;
	width: auto;
	}

.dropdown {
  	position: relative;
  	display: block;
	}

.dropdown-content {
   display: none;
   position: static;
   min-width: 100px;
   z-index: auto;
   }


/*------------------*/
.cv{
	width: 600px;
	font-size: 0.8vw;
	cursor: text; 	
}

/*------------------*/
footer
{
	color: white;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px; 
	font-weight: lighter;
	position: fixed;
	bottom: 1%;
    left: 0;
	z-index: 1;
    width: 30%;
    position: fixed;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 10px;
    cursor: text;

}

iframe{

border: none;
height: 667px;
width: 1000px;



}

/* Media queries */
@media only screen and (max-width: 1040px) {
/*------------------*/
main {
    z-index: 2;
    position: relative;
    width: 70%;
    margin-left: 0%;
    

}
iframe{

display: none;
}

.iframep5{

  display: none;
}

.project {
    margin-right: 0px;
}

main figure img {
    margin-bottom: 10px;
    width: 100%;
    height: auto;
    max-width: 1000px;
}

main figure span {
    float: right;
    padding: 10px;
}

main figcaption {
    margin-bottom: 20px;
}

.cycle-slideshow {
  display: flex;
  max-width: 100%;
  height: auto;
  cursor: url(/files/cursor-next.png), ew-resize;
}

.cycle-next {
  flex-shrink: 0;
  height: 100%; 
  margin-bottom: 1%;
}

.cycle-caption { 
  z-index: 700;
}

.figcaption-title {
  font-variant: small-caps;
  cursor: text; 
    color: #878787;
    margin-bottom: 5%;
    

}

.figcaption-txt {
  width: 100%;
  font-size: small;
  cursor: text; 
  margin-bottom: 20%;
}



      body header span {
        display: block;
        margin-right: auto;
        line-height: 18px;
         width: 50%;
    }

    body header span#bloglink {
        position: absolute;
        top: 0;
        right: 0;
        float: none;
    }

     .drawing {
     	display: none;
}

.index {
float:left;
line-height: 5px;
margin: 5px;
width: 5%;
height: 10%;
}

canvas{

  display: none;
}

	 footer {
	     	display: none;
	}

@media only screen and (max-width: 1040px) {
    body header {
        width: 100%;
    }

    .cv{
      margin-top: 10em;
      margin-left: -3em;
    width: 100%;
    font-size: 1.5vw;
    cursor: text;   
}

    body main {
        width: 100%;
    }

    body aside {

       display: none;

    }

    

    .bioindex{

display: contents;
      width: 100%;
        max-width: 100%;
        position: inherit;
        padding-left: 0;
        font-size: 5vw;
    }

    section{


      max-width: 100%;
    }

        /* Burger */

.hamburger {
  display: contents;
      position: fixed;
    margin-top: -0.5em;
    z-index: 9999;
    cursor: pointer;
}

}

@media only screen and (min-width: 1468px) {
   body header {
        width: 100%;
    }


    body aside {
        right: inherit;
        left: 1020px;
        padding-left: 20px;
    }




}