/* Eric Meyer's Reset Reloaded *//* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {border-collapse: collapse;border-spacing: 0;}

body {
	background: #021f2d url(data:image/png);
	color:#222;
}

a, a:visited {
	color:#e51e56;
	text-decoration: none;
}

a:hover, a:focus {
	color: #e51e56;
}

.container {
	background: #fff;
	width: 300px;
	margin: 4em auto 4em auto;
	box-shadow: 0px 0px 7px #000;
	padding: 0 0 2em 0;
	overflow: hidden;
}

.masthead {
	text-align: center;
}

.masthead .profil-pix {
	width: 100%;
	margin-top: -25px;
}

.masthead .logo {
	    width: 140px;
    position: relative;
    margin: -50px auto 0 auto;
    border: solid 5px #fff;
    border-radius: 20px;
    background-color: white;
}

.masthead h3 {
	display: inline-block;
	width: 100%;
	position: relative;
}

.masthead .h3-us {
	text-align: center;
	padding-right: 10px;
}

.masthead .h3-cc {
	text-align: center;
	padding-left: 10px;
}

.masthead .h3-us:after {
	content: "";
	position: absolute;
	display: block;
	height: 19px;
	width: 1px;
	background: #000;
	top:8px;
	right: -1px;
	opacity: 0.5;
}/**/

article {
	text-align: center;
	margin-top: 2em;
	color: #666;
}

article a, article a:visited {
	color:#e51e56;
}

.contact-linkedin, .contact-viadeo, .contact-twitter, .contact-vcf, .heart {
	background:  url('../sprite.png') no-repeat;
	display: inline-block;
}

.contact-linkedin, .contact-viadeo, .contact-twitter, .contact-vcf {
	width: 32px;
	height: 32px;
	margin:0.5em 0.3em;
	font-size: 1em;
	text-indent: 999px;
	overflow: hidden;
}

.contact-linkedin { background-position: -42px 0;}
.contact-viadeo { background-position: -82px 0;}
.contact-twitter { background-position: -127px 1px;}
.contact-vcf { background-position: -80px -75px;}
.contact-linkedin:hover, .contact-linkedin:focus { background-position: -42px -36px;}
.contact-viadeo:hover, .contact-viadeo:focus { background-position: -82px -36px;}
.contact-twitter:hover, .contact-twitter:focus { background-position: -127px -37px;}
.contact-vcf:hover, .contact-vcf:focus { background-position: -45px -75px;}

.contact-linkedin:hover, .contact-viadeo:hover, .contact-twitter:hover, .contact-linkedin:focus, .contact-viadeo:focus, .contact-twitter:focus, .contact-vcf:hover, .contact-vcf:focus {
	background-color: #e51e56;
}

footer {
	width: 140px;
	display: block;
	margin:4em auto 0 auto;
	position: relative;
	text-align: center;
	color:#666;
}

.heart {
	width: 20px;
	height: 17px;
	background-position: -7px -6px;
	text-indent: 99px;
	overflow: hidden;	
	margin-top: 2px;
}



/* typo */
body {
	font-family: 'Roboto', sans-serif;
	font-size: 10px;
}

.masthead {
	font-size: 1.1em;
}

h1 {
	font-size: 3em;
	line-height: 1.0em;    margin-top: 20px;
}

h2 {
	font-size: 2.0em;
	line-height: 1.1em;
	font-weight: normal;
	letter-spacing: 1px;
}

h3 {
	font-size: 1.5em;
	line-height: 2em;
	font-weight: normal;
	font-style: italic;
}

article {
	font-size: 1.3em;
	line-height: 1.1em;
}

footer {
	font-size: 1em;
	line-height: 1.2em;
}