@font-face {
    font-family: 'caviar_dreamsregular';
    src: url('https://samueltisserand.com/fonts/caviar_dreams/caviardreams-webfont.eot');
    src: url('https://samueltisserand.com/fonts/caviar_dreams/caviardreams-webfont.eot#iefix') format('embedded-opentype'), local('caviar_dreamsregular'), url('https://samueltisserand.com/fonts/caviar_dreams/caviardreams-webfont.woff') format('woff'), url('https://samueltisserand.com/fonts/caviar_dreams/caviardreams-webfont.ttf') format('truetype'), url('https://samueltisserand.com/fonts/caviar_dreams/caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

html,
body {
    height: 100%;
    width: 100%;
    min-height: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'caviar_dreamsregular', 'Open Sans', 'Helvetica Neue', Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: rgb(51, 51, 51);
    line-height: normal;
    background: #FFF;
    -webkit-background-size: cover;
    /* pour Chrome et Safari */
    -moz-background-size: cover;
    /* pour Firefox */
    -o-background-size: cover;
    /* pour Opera */
    background-size: cover;
    /* version standardisée */
    background-color:#000000;
}

img {
    max-width: 100%;
    height: auto;
}

#wrapper1 {
    width: 100%;
    height: 100%;
    padding: 0px;
    top: 0px;
    left: 0px;
}

#wrapper2 {
    width: 100%;
    height: 100%;
    padding: 0px;
    overflow: hidden;
}

#entry {
    top: 25%;
    left: 38%;
    width: 30%;
    height: 30%;
    position: absolute;
    z-index: 1;
}

#header {
    width: 100%;
    height: 10%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}

#content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0;
    -webkit-background-size: cover;
    /* pour anciens Chrome et Safari */
    background-size: cover;
}



 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
#content {
        background: url(https://samueltisserand.com/images/backgrounds/2016/background_2016-HD.jpg) no-repeat center fixed;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
#content {
        background: url(https://samueltisserand.com/images/backgrounds/2016/background_2016-HD.jpg) no-repeat center fixed;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
#content {
        background: url(https://samueltisserand.com/images/backgrounds/2016/background_2016-HD.jpg) no-repeat center fixed;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

#content {
        background: url(https://samueltisserand.com/images/backgrounds/2016/background_2016-HD.jpg) no-repeat center fixed;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  #content {
        background: url(https://samueltisserand.com/images/backgrounds/2016/background_2016-HD.jpg) no-repeat center fixed;
    }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  #content {
        background: url(https://samueltisserand.com/images/backgrounds/2016/background_2016-XL.jpg) no-repeat center fixed;
    }
} 






#footer {
    width: 100%;
    height: 3%;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

    position: absolute;
    left: 0px;
    bottom: 0px;
}

#navbar {
    bottom: 0%;
    position: absolute;
    height: 40%;
    width: 100%;
    z-index: +2;
    /*background-color: #000000;*/

}

.navbar_element {
    position: relative;
    float: left;
    height: 100%;
    width: 20%;
    z-index: 3;
    font-size: 2.2vh;
    font-family: 'caviar_dreamsregular', 'Open Sans', 'Helvetica Neue', 'caviar_dreamsregular';
    text-align: center;

}

/*#home {
  background-color: #f4ece5;
}

#portfolio {
    background-color: #c5c5d3;
}

#biography {
    background-color: #7f99b8;
}

#work {
    background-color: #3c5581;
}

#contact {
    background: rgba(3, 3, 3, 1.00);
    line-height:100%;
}
*/
h1 {
    color: #333;
    font-size: 3em;
    font-family: 'caviar_dreamsregular', 'Open Sans', 'Helvetica Neue';
}

#name {
    position: absolute;
    left: 2%;
    top: 10%;
    width: 50%;
    color: #333;
    z-index: 2;
    font-size: 3.8vh;
    text-align: left;
}

#fname {
    position: absolute;
    left: 0px;
    top: 20%;
    height: 60px;
    width: 400px;
    z-index: 2;
    text-align: right;
    padding-right: 100px;
    padding-top: 10px;
}

#lname {
    position: absolute;
    right: 0px;
    bottom: 25%;
    height: 60px;
    width: 400px;
    z-index: 2;
    text-align: left;
    padding-left: 100px;
    padding-top: 10px;
}

A:link {
    text-decoration: none;
    line-height: normal;
    color: #FFFFFF;
}

A:visited {
    text-decoration: none;
    line-height: normal;
    color: #FFFFFF;
}

A:active {
    text-decoration: none;
    line-height: normal;
    color: #333366;
}

A:hover {
    text-decoration: none;
    line-height: normal;
    color: #D1D1D1;
}

#copyright {
    position: relative;
    float: right;
    margin-right: 1%;
    top: 0.2vh;
    height: 95%;
    width: 90%;
    color: #999;
    font-size: 1.3vh;
    z-index: 150;
    text-align: right;
}