/* ------------ Fonts ------------ */

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 1, 2014 */

@font-face {
    font-family: 'source_sans_problack';
    src: url('../font/SourceSansPro/sourcesanspro-black-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-black-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-black-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-black-webfont.svg#source_sans_problack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_problack_italic';
    src: url('../font/SourceSansPro/sourcesanspro-blackit-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-blackit-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-blackit-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-blackit-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-blackit-webfont.svg#source_sans_problack_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_probold';
    src: url('../font/SourceSansPro/sourcesanspro-bold-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-bold-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-bold-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_probold_italic';
    src: url('../font/SourceSansPro/sourcesanspro-boldit-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-boldit-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-boldit-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-boldit-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-boldit-webfont.svg#source_sans_probold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_proextralight';
    src: url('../font/SourceSansPro/sourcesanspro-extralight-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-extralight-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-extralight-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-extralight-webfont.svg#source_sans_proextralight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_proXLtIt';
    src: url('../font/SourceSansPro/sourcesanspro-extralightit-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-extralightit-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-extralightit-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-extralightit-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-extralightit-webfont.svg#source_sans_proXLtIt') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_proitalic';
    src: url('../font/SourceSansPro/sourcesanspro-it-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-it-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-it-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-it-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-it-webfont.svg#source_sans_proitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prolight';
    src: url('../font/SourceSansPro/sourcesanspro-light-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-light-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-light-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prolight_italic';
    src: url('../font/SourceSansPro/sourcesanspro-lightit-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-lightit-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-lightit-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-lightit-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-lightit-webfont.svg#source_sans_prolight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_proregular';
    src: url('../font/SourceSansPro/sourcesanspro-regular-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-regular-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prosemibold';
    src: url('../font/SourceSansPro/sourcesanspro-semibold-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-semibold-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-semibold-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_proSBdIt';
    src: url('../font/SourceSansPro/sourcesanspro-semiboldit-webfont.eot');
    src: url('../font/SourceSansPro/sourcesanspro-semiboldit-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/SourceSansPro/sourcesanspro-semiboldit-webfont.woff') format('woff'),
         url('../font/SourceSansPro/sourcesanspro-semiboldit-webfont.ttf') format('truetype'),
         url('../font/SourceSansPro/sourcesanspro-semiboldit-webfont.svg#source_sans_proSBdIt') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'love_ya_like_a_sisterregular';
    src: url('../font/LoveYaLikeASister/loveyalikeasister-webfont.eot');
    src: url('../font/LoveYaLikeASister/loveyalikeasister-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/LoveYaLikeASister/loveyalikeasister-webfont.woff') format('woff'),
         url('../font/LoveYaLikeASister/loveyalikeasister-webfont.ttf') format('truetype'),
         url('../font/LoveYaLikeASister/loveyalikeasister-webfont.svg#love_ya_like_a_sisterregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cabin_sketchregular';
    src: url('../font/cabinsketch/cabinsketch-regular-webfont.eot');
    src: url('../font/cabinsketch/cabinsketch-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/cabinsketch/cabinsketch-regular-webfont.woff') format('woff'),
         url('../font/cabinsketch/cabinsketch-regular-webfont.ttf') format('truetype'),
         url('../font/cabinsketch/cabinsketch-regular-webfont.svg#cabin_sketchregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cabinsketchbold';
    src: url('../font/cabinsketch/cabinsketch-bold-webfont.eot');
    src: url('../font/cabinsketch/cabinsketch-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/cabinsketch/cabinsketch-bold-webfont.woff') format('woff'),
         url('../font/cabinsketch/cabinsketch-bold-webfont.ttf') format('truetype'),
         url('../font/cabinsketch/cabinsketch-bold-webfont.svg#cabinsketchbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'barrioregular';
    src: url('../font/barrio/barrio-regular-webfont.eot');
    src: url('../font/barrio/barrio-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/barrio/barrio-regular-webfont.woff') format('woff'),
         url('../font/barrio/barrio-regular-webfont.ttf') format('truetype'),
         url('../font/barrio/barrio-regular-webfont.svg#barrioregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bahianaregular';
    src: url('../font/bahiana/bahiana-regular-webfont.eot');
    src: url('../font/bahiana/bahiana-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/bahiana/bahiana-regular-webfont.woff') format('woff'),
         url('../font/bahiana/bahiana-regular-webfont.ttf') format('truetype'),
         url('../font/bahiana/bahiana-regular-webfont.svg#bahianaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
	font-size: 62.5%;
	font-family: Times, serif;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #fff;
	font-family: 'source_sans_proregular', sans-serif;
	font-size: 1.4rem;
}

/*#content {
	height: 100%;
}*./

.container {
	max-width: 1000px;
	margin: 0 auto;
	height: 100%
}

/* ------------ Liens ------------ */

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

body a:hover, body a:focus, body a:active {
	color: #aaa;
	text-decoration: none;
}

#retourmentions a {
	position: fixed;
	top: 0;
	display: inline-block;
	float: right;
	background: white;
	opacity: 0.7;
	text-decoration: underline;
	line-height: 3rem;
	vertical-align: middle;
}

/* ------------ Titres ------------ */

body h1, body h2 {
	font-family: 'source_sans_prosemibold', sans-serif;
    color: #502F53; /* #9E3F4D; /*rouge*/
}

body h1 {
	margin: 0;
	line-height: 3.5rem;
}

body h2 {
	font-size: 3rem;
	margin-bottom: 3rem;
}

body h3 {
	font-family: 'source_sans_prosemibold', sans-serif;
	/*text-transform: uppercase;*/
	clear: both;
	font-size: 2rem;
	font-weight: normal;
	color: #4E7078; /* bleu */
}

body h4 {
	margin: 0;
	font-family: 'source_sans_proregular', sans-serif;
	font-size: 2rem;
}

/* ------------ Classes formation & expérience ------------ */

.specialite {
	font-family: 'source_sans_prosemibold', sans-serif;
	font-size: 1.5rem;
}

.date, .dateform, .lieu, .comment {
	display: inline-block;
	border-radius: 1rem;
	font-family: 'source_sans_proregular', sans-serif;
	font-size: 1.2rem;
	text-align: center;
}

.date {
	background-color: #4E7078;
	margin: 0 0.3rem 0.3rem 0;
	min-width: 7.5rem;
	color: white;
	vertical-align: bottom;
}

#competences .dateform, #formation .dateform {
	background-color: #fff;
	margin: 0 0.3rem 0.5rem 0;
	min-width: 7.5rem;
	color: black;
	vertical-align: bottom;	
}

.diplome {
	font-family: 'source_sans_prosemibold', sans-serif;
	font-size: 1.6rem;
}

.lieu {
	/*border: 1px solid #C3E4E6;
	margin:  0 0.3rem 0.3rem 0;
	vertical-align: middle;
	min-width: 7.5rem;*/
}

.poste {
	border-bottom: 1px solid #000000;
	font-family: 'source_sans_prosemibold', sans-serif;
	font-size: 2rem;
	color: black;
}

.etablissement, .entr {
	font-family: 'source_sans_prosemibold', sans-serif;
	font-size: 1.6rem;
	color: #7D6E79;
}

.etablissement:visited {
	color: #7D6E79;
}

.langue {
	position: absolute;
	z-index: 1;
	height: 2rem;
	width: auto;
	margin-left: 1rem;
}

.comment {
	position: relative;
	left: 1rem;
	vertical-align: middle;
	background-color: #eee;
	padding: 0 1rem 0 1rem;
	font-family: 'source_sans_proregular', sans-serif;
	color: #7D6E7;
}

.bouton {
	padding: 0;
	border: 0;
	background: none;
	font-family: 'source_sans_proitalic';
	color: #7D6E79;
	font-size: 1.3rem;
}

.bouton:hover {
	color: #00AABC;
}

.simpleButton {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	font-family: 'source_sans_proitalic';
	color: #7D6E79;
	font-size: 1.3rem;
}

.simpleButton:hover {
	color: #00AABC;	
}


/* ------------ #header ------------ */

#header {
	background: #FFF;
	/* opacity: 0.9; */
	z-index: 1000;
	width: 100%;
	height: 8rem;
	padding: 1.5rem 0;
}

#header h1 span {
	position: absolute;
	left: -2000px;
}

#header button {
	border: 0px;
	background: #F3FAF9;
}

#header button:hover {
	background: #FFFDF7;
}

#header button>span.icon-bookmark {
	color: #502F53;
	font-size: 2rem;
}

#header button>span {
	color: #502F53;
	font-family: 'source_sans_prosemibold', Arial Narrow, sans-serif;
}

#header ul {
	margin: 0;
	padding: 0;
}

#header li {
	display: inline;
}

#header li a{
	display: inline-block;
	font-family: 'source_sans_proregular', sans-serif;
	color: #6A595B;
	line-height: 2.5rem;
	text-align: center;
	padding: 0 10px;
	font-size: 1.6rem;
}

#header li:first-child a{
	line-height: 2.45rem;
}

#header li a.active {
	color: #502F53;
}

#header li a:hover, #header li a:active, #header li a.active {
	color: #502F53;
}

#header li span.select {
	display: none;
}

#header li a:hover>span.select, #header li a:active>span.select, #header li a.active>span.select {
	display:inline;	
}

@media(max-width:1000px) {
	#navigation li>a {
		font-size: 1.4rem;
	}
	
	#header img {
		max-width: 90%;
	}
}

@media(max-width:768px) {
	#header.container {
		padding: 0;
	}
	
	#header a>img {
		max-width: 80%;
	}
	
	#header ul {
		float: right;
	}
	
	#header li {
		display: block;
		background: #fff;
		color: #6A595B;
		text-align: center;
		padding: 0 5px;
		font-size: 1.8rem;
		border-bottom: 3px solid #F3FAF9;
	}
	
	#header li:last-child {
		margin-bottom: 2.2rem;
	}
	
	#header li a {
		width: 100%;
		padding: 0;
		text-align: right;
	}
	
	
	
	#header li>a>span.icon-bookmark-empty {
		display: none;
	}
}

/* ------------ toutes sections ------------ */

section{
	min-height: 100%;
	padding: 8rem 0;
	background: #fff;
}

/* ------------ #presentation ------------ */

/*#presentation {
	background: #D4ECD8;
}*/

#presentation {
	background: url("./images/parati.jpg") no-repeat top left fixed;
	background-size: cover;
	min-height:100%;
}

#presentation h2 {
	text-indent: -5000px;
	line-height: 0;
}

.presentation h3.fixe {
	opacity:0;
    -webkit-animation: anim 1s linear forwards 0.5s;
    -o-animation: anim 1s linear forwards 0.5s;
    -ms-animation: anim 1s linear forwards 0.5s;
    animation: anim 1s linear forwards 0.5s;
    font-family: 'bahianaregular';
	font-size: 8rem;
	color: #502F53;/*#fff;*/
	position: static;
	top:200px;
	font-weight:bold;
	line-height:8rem;
}

@-webkit-keyframes anim {
   0%  {opacity:0;}
   100% {opacity:1;}
}
@-o-keyframes anim {
   0%  {opacity:0;}
   100% {opacity:1;}
}
@-ms-keyframes anim {
   0%  {opacity:0;}
   100% {opacity:1;}
}
@keyframes anim {
   0%  {opacity:0;}
   100% {opacity:1;}
}

#presentation p {
	font-family: 'source_sans_proregular', sans-serif;
	font-size: 1.8rem;	
	color: #502F53;
	vertical-align: middle;
}

#presentation .encadre{
	opacity:0;
    -webkit-animation: anima 1s linear forwards 1.5s;
    -o-animation: anima 1s linear forwards 1.5s;
    -ms-animation: anima 1s linear forwards 1.5s;
    animation: anima 1s linear forwards 1.5s;
	position: absolute;
	bottom: 5rem;
	background-color: rgba(249, 243, 245,0.8);
	border: 4px dotted #502F53;
	border-radius: 5px;
	padding: 1.5rem;
	font-family: 'source_sans_proregular', sans-serif;
	font-size: 1.6rem;	
}

@-webkit-keyframes anima {
   0%  {opacity:0;}
   100% {opacity:1;}
}
@-o-keyframes anima {
   0%  {opacity:0;}
   100% {opacity:1;}
}
@-ms-keyframes anima {
   0%  {opacity:0;}
   100% {opacity:1;}
}
@keyframes anima {
   0%  {opacity:0;}
   100% {opacity:1;}
}

#presentation ul{
	margin: 10px 0 0 0;
	list-style-type: circle;
}

@media only screen and (max-device-width:480px) {
 	.presentation h3.fixe {
 		font-size:5rem;
 	}
 }

/* ------------ #competences ------------ */



#competences {
	min-height: 100%;
	background: #F9F3F5;
	border-top: 3px dotted #52555A;
	font-family: 'source_sans_proregular', sans-serif;	
}

#competences h2 {
	margin-top: 0;
	margin-bottom: 1rem;
	font-family: 'source_sans_prosemibold', sans-serif;
	font-size: 3rem;
}

#competences span.soustitre {
	color: #4E7078;
}

/* --- #competences .container {
	padding: 0;
} --- */

#competences .row {
	margin-top: 3rem;
	margin-bottom: 1rem;
}

#competences .comptech {
	margin-top: 0;!important
}

#competences h3.titrespace {
	margin-bottom: 1rem;
}

.titrecomp p {
	font-variant: small-caps;
	font-size: 1.6rem;
}

#domaines ul {
	padding: 0;
	margin: 0;
}

#domaines li {
	list-style-type: none;
	margin: 0 0 1.5rem 0;
}

#competences li>ul>li {
	margin: 0;
	padding: 0;
}

#competences h3 {
	margin-bottom: 0;
	text-align: left;
	font-size:1.5rem;
	color: #502F53;
}

#competences p {
	margin: 0;
}

#comp1, #comp2, #comp3,#comp4 {
	min-height: 25rem;
}

#comp5,#comp6 {
	min-height: 14rem;
}

.competence h3 {
	margin-top: 0;
	letter-spacing: 3px;
	text-align: left;
	/*border-bottom: 3px dotted #502F53;*/
}

.comptech h3 {
	margin-bottom: 0.5rem;
}

.comptech p {
	margin: 0;
}

#comp1 h3, #comp2 h3, #comp3 h3, #comp4 h3 {
	color: #502F53; /* rouge */
}

.competence ul {
	padding: 0;
	color: #52555A;
}

.competence li {
	list-style-type: none;	
}

.competence p {
	margin-top: 0.5rem;
	line-height: 1.8rem;
}

@media (min-width: @screen-md-max){
	
	#comp3,#comp4 {
	min-height: 15rem;
	}
	
	.formations {
		margin-top: 1rem;
	}
	
}

/* ------------ #formation ------------ */

#formation {
	min-height: 100%;
	background: #F9F3F5;
	border-top: 3px dotted #52555A;
	font-family: 'source_sans_proregular', sans-serif;	
}

.formations {
	/** position: relative;
	top: -5rem;
	background: #EEEBF1;**/
	padding: 1rem;
	border: 0.2rem solid #EEEBF1;
	border-radius: 5px;
}

.formations h3 {
	margin-top: 0;
}

.formation .date {
	margin-top: 1rem;
}

.formation .diplome {
	color: #502F53;
}

.formation .specialite {
	font-size: 1.2rem;
}

.formation p {
	line-height: 1.8rem;
	margin-bottom: 0;
}

.formation .intitule {
	font-family: 'source_sans_prosemibold', Arial Narrow, sans-serif;
	font-size: 1.5rem;
	color: black;
}

.formation button{
	margin-top: 0;
}


/* ------------ #galerie ------------ */

#galerie {
	background: #EAD3DE;
	border-top: 3px dotted #52555A;
}

#galerie .view {
    width: 250px;
    height: 200px;
    margin: 15px;
    float: left;
    border: 5px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #000;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}

#galerie .projet ul {
	font-family: 'source_sans_prosemibold', Arial Narrow, sans-serif;
	font-size: 1.7rem;
	text-align: left;
	list-style-type: none;
}

#galerie .projet ul>li>ul {
	font-family: 'source_sans_proregular', sans-serif;	
	font-size: 1.5rem;
	list-style-type: circle;
}

#galerie .view .mask, #galerie .view .content {
    width: 250px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
#galerie .view img {
    display: block;
    position: relative
}
#galerie .view h4 {
    /*text-transform: uppercase;*/
	color: #4E7078;
    text-align: center;
    position: relative;
	font-family: 'source_sans_prosemibold', Arial Narrow, sans-serif;
    font-size: 2rem;
    line-height: 2.1rem;
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    margin: 20px 0 10px 0;
    border-top: 3px dotted #4E7078;
    border-bottom: 3px dotted #4E7078;
}
#galerie .view p {
	margin: 0;
	font-family: 'source_sans_proregular', sans-serif;
    font-size: 1.6rem;
    line-height: 1.7rem;
    position: relative;
    color: #000;
    text-align: center;
}
#galerie .modal-body p {
	margin-top: 0.5rem;
	font-family: 'source_sans_prosemibold', Arial Narrow, sans-serif;
    font-size: 1.7rem;
}
#galerie .view a.info {
	margin-top: 10px;
	display: inline-block;
    text-decoration: none;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    border: 1px solid #4E7078;
    font-family: 'source_sans_proregular', sans-serif;
    font-size: 2rem;
	color: #000;
    /*text-transform: uppercase;*/
    /*box-shadow: 0 0 1px #000;*/
}
#galerie .view button.info {
	margin-top: 10px;
	display: inline-block;
    text-decoration: none;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    border: 1px solid #4E7078;
    font-family: 'source_sans_proregular', sans-serif;
    font-size: 1.5rem;
	color: #000;
    /*text-transform: uppercase;*/
    /*box-shadow: 0 0 1px #000;*/
}
#galerie .view a.info:hover, #galerie .view button.info:hover {
    background: rgba(255, 255, 255, 1);
    /*box-shadow: 0 0 5px #000*/
}

#galerie .view-first img {
    transition: all 0.2s linear;
}

#galerie .view-first .mask {
    opacity: 0;
    background-color: rgba(249, 243, 245, 0.7);
    transition: all 0.4s ease-in-out;
}

#galerie .view-first h4 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
#galerie .view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
#galerie .view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

#galerie .view-first:hover img {
    transform: scale(1.1);
}
#galerie .view-first:hover .mask {
    opacity: 1;
}
#galerie .view-first:hover h4,
#galerie .view-first:hover p,
#galerie .view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
#galerie .view-first:hover p {
    transition-delay: 0.1s;
}
#galerie .view-first:hover a.info {
    transition-delay: 0.2s;
}

#galerie .modal-body {
    position: relative;
    overflow: auto;
    max-height: 1000px;
	width: auto;
    padding: 15px;
}

/* ------------ #experience ------------ */


#experience {
	min-height: 100%;
	background: #F2DFDC;
	border-top: 3px dotted #52555A;
}

/** #experience h2 {
	margin-bottom: 1rem;
}
**/

#experience ul {
	margin-left: 2rem;
	padding-left: 0;
	list-style: circle;
	clear: both;
}

#experience>ul>li {
	overflow: hidden;
	/*border: 1px dotted #C3E4E6;*/
	padding: 1rem;
	margin-bottom: 0.5rem;
}

#experience ul ul {
	margin-top: 0.5rem;
	margin-bottom: 0;
	list-style: none;
	color: #7D6E79;
	font-size: 1.2rem;
}

#experience li li span  {
	color: #000;
	font-family: 'source_sans_proregular', sans-serif;
	font-size: 1.4rem;
}

#experience h3 {
	clear: both;
	margin: 3rem 0 1rem;
	color: #4E7078;
}

#experience .view {
    width: 250px;
    height: 185px;
    margin: 5px 20px;
    float: left;
    border: 1px solid #4E7078;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    background-color: rgba(255, 255, 255, 1);
}

#experience .view .mask, #experience .view .content {
    width: 250px;
    height: 65px;
    position: absolute;
    overflow: hidden;
    bottom: 0;
    left: 0;
}

#experience .view img {
    display: block;
    position: relative
}

#experience .view h4 {
    /*text-transform: uppercase;*/
    color: #4E7078;
    text-align: center;
    position: relative;
	font-family: 'source_sans_prosemibold', Arial Narrow, sans-serif;
    font-size: 1.7rem;
    line-height: 1.8rem;
    padding: 3px;
    /*background: rgba(0, 0, 0, 0.7);*/
    margin: 3px 0 0 0;
}

#experience .view p {
    margin: 0;
	padding: 0px;
	font-family: 'source_sans_proregular', sans-serif;
    font-size: 1.3rem;
    line-height: 1.4rem;
    position: relative;
	color: #7D6E79;
    text-align: center
}

#experience .view button.info {
	display: inline-block;
	float: right;
	position: relative;
	top: -1.7rem;
    text-decoration: none;
    padding: 4px;
    background: #4E7078;
    border-radius: 5px;
    font-family: 'source_sans_proregular', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    line-height: 2rem;
	color: #fff;
	
}
#experience .view button.info:hover {
    /*box-shadow: 0 0 5px #fff;*/
    background: rgba(110, 121, 125, 0.7);
}

#experience .view-first img {
    transition: all 0.2s linear;
}

#experience .view-first .mask {
    opacity: 1;
    background-color: #EEEBF1;
    transition: all 0.4s ease-in-out;
}

#experience .view-first h4 {
    /*transform: translateX(-100px);*/
    opacity: 1;
    transition: all 0.2s ease-in-out;
}
#experience .view-first p {
    /*transform: translateX(100px);*/
    opacity: 1;
    transition: all 0.2s linear;
}
#experience .view-first button.info{
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

#experience .view-first:hover img {
    /*transform: scale(1.1);*/
   /* box-shadow: 4px #fff;*/

}
#experience .view-first:hover .mask {
    opacity: 1;
}
#experience .view-first:hover h4,
#experience .view-first:hover p,
#experience .view-first:hover button.info {
    opacity: 1;
    /*transform: translateY(0px);*/
}
#experience .view-first:hover p {
    transition-delay: 0.1s;
}
#experience .view-first:hover button.info {
    transition-delay: 0.25s;
}

#experience .modal-dialog {
    text-align: left;
}

#experience .modal-body {
    position: relative;
    overflow: auto;
    max-height: 1000px;
	width: auto;
    padding: 15px;
}

/* ------------ #contact ------------ */

#contact {
	min-height: 100%;
	background: #E7DDEA;
	border-top: 3px dotted #52555A;

}

#contact form {
	padding-bottom: 6rem;
	font-family: 'source_sans_proregular', sans-serif;
}

form p:first-child {
	margin-top: 0;
}

#contact label {
	text-align: left;
}

#contact input, #contact textarea {
	background: #F9F3F5;
	border: none;
	/* 1px solid #C3E4E6;*/
	border-radius: 5px;
	padding: 5px;
}

#contact textarea {
	width: 98%;
	resize: none;
}

#contact button {
	float: right;
	position: relative;
	right: 1rem;
	border: none;
	border-radius: 10px;
	background: #4E7078;
	padding: 0.8rem;
	font-family: 'source_sans_proregular', sans-serif;
	line-height: 2rem;
	font-size: 1.5rem;
	color: white;
}

.antispam { 
	display:none;
}

#contact button:hover {
	background: white;
    box-shadow: 2px 2px 4px #AAA;
    color: black;
}

#contact .message p {
	font-family: 'source_sans_proregular', sans-serif;
	color: white;
}

#contact #intro {
	padding-left: 10px;
	border-left: 1px solid #bbb;
	font-family: 'source_sans_proregular', sans-serif;
	line-height: 2.2rem;
	font-size: 1.6rem;
	color: #555; 	
}

#contact>p {
	float: left;
	width: 35%;
	margin-left: 10%;
	font-size: 1.6rem;
	color: #555;
}

/** #intro p:first-child{
	margin-top: 0;
}**/

.vcard {
	/** float: left; **/
	margin-left: 2%;
	font-size: 1.6rem;
	color: #555; 
}

.vcard  .postal-code, .vcard .country-name {
	padding-left: 24px;
}

.fn {
	padding-bottom: 1rem;
}


/* ------------ #footer ------------ */

#footer {
	background: #F0EDF2;
	border-top: dotted 5px #7D6E79;
	position: fixed;
	z-index: 500;
	bottom: 0;
	width: 100%;
	height: 3rem;
}

#footer a{
	color: #555; 	
	line-height: 3rem;
	vertical-align: center;
	font-family: 'source_sans_proregular', sans-serif;
}

#footer a#goTop {
	position: fixed;
	bottom: 60px;
	right: 50px;
	font-size: 3rem;
	color: #666; 	
	opacity: 0.7;
} 

#footer a#hautPage {
	position: fixed;
	bottom: 35px;
	right: 32px;
	font-size: 1.4rem;
	color: #666; 	
	opacity: 0.7;
}

#footer a#goTop:hover, #footer a#hautPage:hover {
	color: #333;
}

/* ------------ #mentionlegale ------------ */

#mentionlegale {
	font-family: 'source_sans_proregular', sans-serif;
	color: #444;
}