body{
    margin: 0;
    font-family: 'Raleway', sans-serif;
    position: relative;
    background-color: #050505;
    color: #FCF4E9;
}

body a{
    color: #FCF4E9;
}

/*   _ __   __ ___   __   */
/*  | '_ \ / _` \ \ / /   */
/*  | | | | (_| |\ V /    */
/*  |_| |_|\__,_| \_/     */

header{
    /* color: white; */
    display: flex;
    justify-content: space-between;
    padding: 2% 10%;
    width: 100%;
    box-sizing: border-box;
    top: 0;
    left: 0;
    /* background: linear-gradient(180deg, rgba(255,255,255,0.4) 10%, rgba(255,255,255,0) 100%); */ */
}

header:hover{
    /* background-color: rgba(255,255,255,0.5); */
    /* background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); */
}

header .panel{
    z-index: 2;
}

header #logo{
    height: 68px;
    /* filter: invert(); */
    filter: invert(98%) sepia(87%) saturate(394%) hue-rotate(299deg) brightness(105%) contrast(98%);
}

header div{
    display: flex;
    align-items: flex-end;
}

header div p{
    margin: 0;
    font-size: 0.6em;
    z-index: 2;
}

header nav{
    width: 50%;
    /* margin-right: 5%; */
    max-width: 350px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
}

header nav p{
    z-index: 2;
}

header nav a{
    text-decoration: none;
    /* color: white; */
    font-weight: 300;
}

header nav a:hover{
    color: lightblue;
}

header nav .selected{
    color: #ff9999;
}

i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.left, .right{
    position: absolute;
    box-sizing: border-box;
    height: 100vh;
    width: 8vw;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3;
    /*opacity: 0.5;*/
}

.left{
    left: 0;
}

.right{
    right: 0;
}

.arrow-left, .arrow-right{
    width: 50%;
    opacity: 0.5;
    display: none;
}

.left:hover, .right:hover{
    background-color: rgba(212,212,212,0.2);
}

.left:hover .arrow-left{
    display: block;
}

.right:hover .arrow-right{
    display: block;
}

.arrow-right{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

/*                  _ _
 _ __ ___   ___  __| (_) __ _
| '_ ` _ \ / _ \/ _` | |/ _` |
| | | | | |  __/ (_| | | (_| |
|_| |_| |_|\___|\__,_|_|\__,_|
*/

.media {
    display: inline-block;
    position:absolute;
    bottom: 0%;
    left: 10%;
    /*-ms-transform:translate(-50%,-50%);*/
    /*-webkit-transform:translate(-50%,-50%);*/
    /*transform:translate(-50%,-50%);*/
}

/* Icons */

.media a {
    /*color:black;*/
    /*background: #DB6E82;*/
    /*border-radius:4px;*/
    text-align:center;
    text-decoration:none;
    font-size: 2em;
    position: relative;
    display: inline-block;
    width:50px;
    height:40px;
    padding: 7px 0 3px 0;
    margin:0 2px;
    -o-transition:all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    -webkit-font-smoothing: antialiased;
    /* color: white; */
    border-bottom: solid white 5px;
    vertical-align: bottom;
}

.media a:nth-of-type(1) span {
    color: #833ab4;
}

.media a:nth-of-type(2) span {
    color: #3b5998;
}

.media a:nth-of-type(3) span {
    color: #bd081c;
}

.media a:nth-of-type(4) span {
    color: #0057ff;
}

.media a:hover:nth-of-type(1) {
    color: #833ab4;
    border-bottom: solid 10px #833ab4;
}

.media a:hover:nth-of-type(2) {
    color: #3b5998;
    border-bottom: solid 10px #3b5998;
}

.media a:hover:nth-of-type(3) {
    color: #bd081c;
    border-bottom: solid 10px #bd081c;
}

.media a:hover:nth-of-type(4) {
    color: #0057ff;
    border-bottom: solid 10px #0057ff;
}

/*.media a:hover:nth-of-type(1) {*/
    /*color:white;*/
    /*background-color:#3b5998;*/
/*}*/

/*.media a:hover:nth-of-type(2) {*/
    /*color:white;*/
    /*background-color:#833ab4;*/
/*}*/

/*.media a:hover:nth-of-type(3) {*/
    /*color:white;*/
    /*background-color:#bd081c;*/
/*}*/

/* pop-up text */

.media a span {
    position:absolute;
    font-family:sans-serif;
    bottom:0;
    left:-25px;
    right:-25px;
    padding:5px 7px;
    z-index:-1;
    font-size:14px;
    border-radius:2px;
    background:#fff;
    visibility:hidden;
    opacity:0;
    -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* pop-up text arrow */

.media a span:before {
    content:'';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    position:absolute;
    bottom:-5px;
    left:40px;
}

/* text pops up when icon is in hover state */

.media a:hover span {
    bottom:50px;
    visibility:visible;
    opacity:1;
}

/* font awesome icons */

.media a:nth-of-type(1):before {
    font-family: "Font Awesome 5 Brands";
    /*font-weight: 900;*/
    content: "\f16d";
}
.media a:nth-of-type(2):before {
    font-family: "Font Awesome 5 Brands";
    content:'\f39e';
}
.media a:nth-of-type(3):before {
    font-family: "Font Awesome 5 Brands";
    content:'\f231';
}

.media a:nth-of-type(4):before {
    font-family: "Font Awesome 5 Brands";
    content:'\f1b4';
}

/*               _             _
  ___ ___  _ __ | |_ ___ _ __ | |_
 / __/ _ \| '_ \| __/ _ \ '_ \| __|
| (_| (_) | | | | ||  __/ | | | |_
 \___\___/|_| |_|\__\___|_| |_|\__|
 */

.content{
    padding: 120px 10% 0 10%;
    box-sizing: border-box;
    width: 100vw;
    min-height: 100vh;
    overflow: scroll;
    display: flex;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
}

@media only screen and (min-width: 1024px){
    .content{
        padding: 150px 10% 0 10%;
    }
}

.over{
    max-width: 1200px;
}

/*                  _ _
 ___  ___ _ __ ___ | | |
/ __|/ __| '__/ _ \| | |
\__ \ (__| | | (_) | | |
|___/\___|_|  \___/|_|_|
*/

#wrapper {
    width:100vw;
    height:100vh;
    position:absolute;
    top:0;left:0;
    overflow:hidden;
}

#mask {
    width:500%;
    height:100%;
}

.item {
    width:20%;
    height:100%;
    float:left;
    display: flex;
    justify-content: center;
}

/*
 _       _
(_)_ __ | |_ _ __ ___
| | '_ \| __| '__/ _ \
| | | | | |_| | | (_) |
|_|_| |_|\__|_|  \___/
*/

#intro{
    /* background-image: url("../images/walking.gif");
    background-origin: content-box;
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: 90% bottom; */
    position: relative;
}

#intro .content #videoBG {
    object-fit: cover;
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    top: 0px;
}

#intro .content .welcome{
    position: absolute;
    top: 40%;
    left: 15%;
    font-size: 5em;
    font-weight: 200;
    text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
    /* color: white; */
}

#intro .content .welcome p{
    margin: 0;
}

#intro .content .welcome p:nth-child(2){
    padding-left: 15%;
    white-space: pre;
}

@media only screen and (max-width: 426px){
    #intro .content .welcome{
        left: 5%;
    }

    #intro .content .welcome p:nth-child(2){
        padding-left: 5%;
    }
}

@media only screen and (max-width: 375px){
    #intro .content .welcome{
        font-size: 3em;
    }
}

/*               _      _
 _ __  _ __ ___ (_) ___| |_ ___
| '_ \| '__/ _ \| |/ _ \ __/ __|
| |_) | | | (_) | |  __/ |_\__ \
| .__/|_|  \___// |\___|\__|___/
|_|           |__/
*/

#projets .over{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.categories{
    width: 100%;
    justify-content: right;
    display: flex;
    align-items: center;
    position: absolute;
    top: -35px;
}

/* .categories div{
    justify-content: center;
    display: flex;
    align-items: center;
    margin: auto;
} */

.categories a{
    padding-bottom: 0px !important;
    width: auto !important;
    text-align: center;
    margin: 0px 10px;
    font-size: 0.8em;
    font-weight: 300;
}

.categories a:hover{
    border-bottom: solid white 1px;
    /* color: #ff9999; */
}

.categories .selected{
    border-bottom: solid white 1px;
    /* color: lightblue; */
}

/* #projets .over #highlight{
    width: 100%;
    max-width: 1920px;
    padding-bottom: 5%;
    margin: auto;
    text-decoration: none;
    color: black;
    display: inline-block;
} */

#projets .over a{
    width: 49%;
    max-width: 500px;
    padding-bottom: 5%;
    text-decoration: none;
    /* color: black; */
}

#projets .over div h1{
    font-size: 1.5em;
    font-weight: 400;
    max-height: 3.5vh;
}

#projets .over div h1::after{
    content: ".";
}

#projets .over div h2{
    font-size: 1em;
    font-weight: 300;
}

#projets .over div h3{
    font-size: 0.8em;
    font-weight: 200;
}

#projets .over div img{
    width: 100%;
}

#projets .over div video{
    width: 100%;
}

@media only screen and (max-width: 426px){
    #projets .over div h1{
        font-size: 1em;
        max-height: 2vh;
    }

    #projets .over div h2{
        font-size: 0.8em;
    }

    #projets .over div h3{
        font-size: 0.5em;
    }
}

/*
       _           _
 _ __ | |__   ___ | |_ ___  ___
| '_ \| '_ \ / _ \| __/ _ \/ __|
| |_) | | | | (_) | || (_) \__ \
| .__/|_| |_|\___/ \__\___/|___/
|_|
*/

#photos .over{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

/*#photos .over img{*/
    /*max-width: 36vw;*/
    /*max-height: 40vh;*/
    /*padding-bottom: 10%;*/
/*}*/

/*@media only screen and (max-width: 770px){*/
    /*#photos .over img{*/
        /*max-width: 90vw;*/
        /*max-height: none;*/
        /*padding-bottom: 10%;*/
    /*}*/
/*}*/


.grid {
    /*background: #EEE;*/
    max-width: 1200px;
    width: 100%;
}

/* clearfix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
    width: 33%;
    box-sizing: border-box;
}

.grid-item {
    float: left;
    padding: 1vw;
}

.grid-item img {
    display: block;
    width: 100%;
}

/*               _             _
  ___ ___  _ __ | |_ __ _  ___| |_
 / __/ _ \| '_ \| __/ _` |/ __| __|
| (_| (_) | | | | || (_| | (__| |_
 \___\___/|_| |_|\__\__,_|\___|\__|
 */

#contact {
    position: relative;
}

#contact a {
    position: absolute;
    top: 50%;
    transform:translateY(-50%);
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    color: #5f8ae1;
}

#contact a:hover {
    color: #ff9999;
}

/*
  __             _
 / _| ___   ___ | |_ ___ _ __
| |_ / _ \ / _ \| __/ _ \ '__|
|  _| (_) | (_) | ||  __/ |
|_|  \___/ \___/ \__\___|_|
*/

footer{
    position: absolute;
    width: 100vw;
    top: 50%;
    display: flex;
    justify-content: flex-end;
    z-index: -1;
}

footer p{
    font-size: 10px;
    transform: rotateZ(-90deg) translateY(500%);
}