@charset "UTF-8";
/* CSS Document */

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

@font-face {
    font-family: 'Amble'; /*a name to be used later*/
    src: url('Amble-Regular.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'BEBAS'; /*a name to be used later*/
    src: url('BEBAS.ttf'); /*URL to font*/
}

body {
    max-width:1200px;
	padding:0px;
	margin:0px;
    position:center;
    align-items:center;
	/*font-family: 'Roboto Condensed', sans-serif;*/
}

h1 {
    text-align:center;
    font-size: 10vmin;
    max-width:1200px;
}

article {
    margin:0px;
}



.wrapper{
	position:relative;
	margin-top:0%;
	vertical-align:bottom;
	width:100%;

}
.full_width_img{
	vertical-align: bottom;
    margin: 0% 0%;
    width: 100%;

}
.full_width_img img {
    width: 100%;
}



article{
    position:center;
    vertical-align:top;
    margin-top:50px;
    max-width: 1920px;
    padding-top:50px;
}

.main-menu {
    position:fixed;
    width:100%;
    bottom:0%;
    padding-left: 15px;
    list-style: none;
    
    border-width: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    border: 1px solid #111;
   
    opacity: 0.95;
    bottom: 0;
    /*background: #464646;*/
    background:rgba(10, 104, 194, 0.60);
	box-shadow: 0px 3px 0px #888888;
	text-align: center;
    padding: 0% 0%;
    font-size: 3.0vmin;
}

    .main-menu li {
        display: inline-block;
        margin: 0 10px 0 0;
    }

        .main-menu li a {
            font-family: BEBAS, sans-serif;
	        /*color: #d1d1d1;*/
            color:lightblue;
            display: inline-block;
            padding: .8em .2em;
            font-size: 3.0vmin;
            letter-spacing: 1.0vmin;
            font-weight: 400;
            text-shadow: 0px 1px 0px #2d2d2d;
            text-decoration: none;
            font-family: BEBAS, sans-serif;
	        text-transform: uppercase;

        }


main-menu a span:hover,
main-menu a span:focus {
	outline: none;
}

.main-menu a span::before,
.main-menu a span::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.main-menu a span::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.main-menu a span::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.main-menu a span:hover::before,
.main-menu a span:hover::after,
.main-menu a span:focus::before,
.main-menu a span:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

/* A corrigé*/
.navi-menu figure:hover {
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	transform: translateY(20px);
}
/*---------*/

.main-menu a figure {
    margin:auto;
    background-repeat: no-repeat;
    background-size: 100px 100px;
    height: 100px;
    width: 100px;
}

.main-menu a figure.projet{
    background-image: url(gear-grey.gif);
}

.main-menu a figure.CV{
    background-image: url(icon-cv-grey.png);
}

.main-menu a figure.contact{
    background-image: url(icon-mail-grey.png);
}

.main-menu a figure.about{
    background-image: url(icon-About-grey.png);
}
.background-image{
  
}

.background-image img {
    margin:0;
    padding:0;
    width:100%;
    top:0;
    z-index:-1;
    position:fixed;
    
}
.frontpage-name{
    top:25%;
    position:fixed;
    align-items:center;
    margin:auto;
    font-family:BEBAS,sans-serif;
    
    color:floralwhite;
    z-index:1;
    font-size:15vmin;
    font-weight:bolder;
}