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

body { padding: 0; margin: 0;}
.clear { clear:both;}
.none {display:none;}

#page { opacity:0;}

#back { position:fixed; width:100%; height:100%; top:0; left:0; background:url(img/background.jpg); background-size:cover; }

#infos { width:420px; height:320px; position:absolute; top:40%; left:50%; margin-top:-160px; margin-left:-210px; text-align:center;}
#l { font-size: 140px; text-transform:uppercase; color:#999999; font-family: 'Playfair Display', serif;}
#separ { width:84px; height:2px; background-color:black; margin:0 auto; display:block; }
#name { font-family: 'Open Sans', sans-serif; font-weight: bold; font-size:16px; line-height: 0px;}
#baseline { font-family: 'Playfair Display', serif; font-style:italic; font-weight: bold; font-size:12px; color: #999999;}
#expertise { text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-size:12px; letter-spacing: 2px;}
#mail {float:left;}
#linkedin {float:right;}
.url {font-family: 'Open Sans', sans-serif; font-size:12px; font-weight: 600;}
.grey {color:#999999;}

#clients {width:100%; height: 636px; background-color:#161616; position:absolute; top:75%;}
#grille { width:800px; margin:0 auto;}
.logo { width:266px; height:155px; float: left;opacity:0.5; }

#end { width:100%; height:136px; background: black;}
#texte{ width:800px; display:block; margin:0 auto; font-size:10px; font-family: 'Open Sans', sans-serif; color: white; text-align:center; letter-spacing: 1px; }


@media only screen and (max-width:810px) {
#grille { width:540px;}
#clients { height: 775px;}
#texte { width: 80%;}
.logo{ opacity:1 !important;}
}

@media only screen and (max-width:600px) {
.none {display: block;}
#infos {width: 100%; left:inherit; margin-left:0; height: 450px; top:0; margin-top: 0;}
#grille { width:270px;}
.logo { margin-bottom: -40px;}
#clients { height: 1035px; top:450px;}
#mail { float: inherit;}
#linkedin { float: inherit;}
}