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

/* = reset
**************************************************************************************************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1.3;
	font-size:16px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-family: 'Dosis', sans-serif;
	
}

li {
	list-style:none;}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-decoration:none;
	color:inherit;
}
a img{
	border:none;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
	
} 

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
	
}

/* Clearfix */

.clearfix:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
}

.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/*************************** = fin reset ************************/

.content-area {
	width:690px;
	position:absolute;
	height:400px;
	margin-left:-345px;
	left:50%;
	top:50%;
	margin-top:-200px;
	}
.logo {
	width:52%;
	display:inline-block;
	background:url(images/separateur-big.png) no-repeat right}
.content {
	margin-left:4.5%;
	padding-top:1em;
	width:43%;
	display:inline-block;
	vertical-align:top;
	color:#6A6A69;}
	
.name{
	font-size:3.875em;}
.fonction{
	font-size:2.563em;
	line-height:1;}
.comment {
    display: inline-block;
    font-size: 2.1em;
    line-height: 1.1;
    margin-top: 0.7em;
}
	
.domaines {
	display:inline-block;
	width:100%;
	text-align:justify;}
	
.domaines ul:after {
	content: "";
display: inline-block;
margin: 0;
width: 100%;}
	
.domaines li {
	color:#1c85ad;
	display:inline-block;
	font-size:2.3em;
	}
	
	
	
.domaines li:after {
	content:url(images/separateur-list.png);
	 position: absolute;
    text-align: center;
    width: 7%;
	}
	
.domaines li:last-child:after {
	content:"";
	}
	
	
	
.ribbon{
	background:#1C85ad;
	color:#FFF;
	position:absolute;
	height:110px;
		-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
font-size:2em;
-webkit-box-shadow: 4px 4px 9px 0 rgba(0,0,0,0.3);
box-shadow: 4px 4px 9px 0 rgba(0,0,0,0.3);}


.ribbon.left{
	width:630px;
padding:0.1em 4em 0.1em 0.5em;
left:2%;
top:-5px;
	}
	

	
.ribbon-right-area {
	width:505px;
	height:160px;
	position:absolute;
	bottom:0;
	right:3%;
	overflow:hidden;
	}
	
.ribbon.right{
	width:480px;
text-align:right;
padding:0.4em 0.5em 1em 4em;
	bottom:-30px;
	overflow:hidden;
	-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
	}
	
.email {
	font-size:0.9em;
	display:block;
	}
	
.ribbon.right:hover{
	width:490px;}
	
/*@media screen and (max-width:715px){
		
	.logo img {
		width:85%;
		height:inherit;}
		
	.content-area {
		width: 90%;
position: relative;
margin: 10em auto 0;
height: auto;
left: 0;
top: 0;}
	
	.logo {
		width:47%;}
		
	.content {
		width:48%;
		float:right}
		
	.comment {
		font-size:1.5em;
		}
		
	.name {
		font-size:3em;}
		
	.fonction {
		font-size:2em;}
		
	.domaines {
		margin-top:1em;
		}
		
	.domaines li {
		font-size:1.8em;}
		
	.domaines li:after {
		width:10%;}
		
		

	}
	
	@media screen and (max-width:615px){
	.logo {
		width:43%;}
		
	.content {
		width:52%;
	}
	
	.comment {
		font-size:1.2em;
		}
	
	.domaines li:after {
		width:8%;}
		
	.domaines li {
		font-size:1.6em;}
		
		.ribbon{
			font-size:1.8em;
			height:90px;}
		
			.ribbon.left{
	width:90%;
	top:-13px;
	
	}
	
	.ribbon-right-area{
		width:80%;}
	
	
	.ribbon.right{
		width:98%;}
	
		
	}
	@media screen and (max-width:515px){
	.domaines li:after{
		width:6%;
		}
	.name {
		font-size:2.5em;}
		
	.fonction {
		font-size:1.5em;}
		
	.ribbon{
			font-size:1.4em;
			height:70px;}
		.ribbon.left{
			top:-3px;}
		}
		
	@media screen and (max-width:485px){
			.domaines li:after{
		width:10%;
		}
	
		.domaines li{
			font-size:1.2em;}
			
		.content {
			padding-top:0;}
		}
		
	@media screen and (max-width:410px){
			.name {
		font-size:1.7em;}
		
	.fonction {
		font-size:1em;}
		
	.comment {
		font-size:0.8em;}
		
		.domaines li:after{
		display:none
		}
	
		.domaines li{
			font-size:1em;}
			
		.ribbon{
				-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
			font-size:1em;
			height:50px;}
			
		.content-area {
			margin-top:6.5em;}
			
		.ribbon.left {
top: -12px;
font-size: 0.8em;
padding-top: 0.5em;
}
		}*/