/* custom page Pro */ 

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900');
/* font-family: 'Maven Pro', sans-serif; */

.brown-dark { color: #3d2e28; }
.brown-medium-dark { color: #A2755F; }
.brown-medium-light { color: #C59580; }
.brown-light { color: #bf927f; }
.orange { color: #ff5e4d; }
.bg-orange { background-color: #ff5e4d; }
.yellow { color: #f68e54; }
.bg-yellow { background-color: #f68e54; }
.red { color: #ee3e39; }
.bg-red { background-color: #ee3e39; }
.red-dark { color: #d33633; }

.bg-red-dark { background-color: #d33633; }
.bg-brown-medium-dark { background-color: #A2755F; }
.bg-brown-medium-light { background-color: #C59580; }
.bg-brown-dark { background-color: #3d2e28; }

body { 
	font-size: 16px; line-height: 22px;
	color: #3d2e28;
	font-family: 'Maven Pro', sans-serif;
	font-weight: 400;
	margin: 0;
	padding: 0;
	cursor: default;
	background-color: white;
	background-image: repeating-linear-gradient(135deg, white, white 15px, #dbb7ab 5px, #dbb7ab 20px);
	background-attachment: fixed;
}
a { text-decoration: none; } 
a:hover { color: #bf927f !important; }
h1 { font-size: 28px; line-height: 30px; font-weight: normal; margin: 0; }
h2 { font-size: 20px; line-height: 22px; font-weight: normal; margin: 0; }
h3 { font-size: 28px; line-height: 30px; font-weight: 500; margin-top: 40px; margin-bottom: 10px; }  
h4 { font-size: 20px; line-height: 23px; font-weight: 500; margin-bottom: 5px; }
strong { font-weight: 500; }
.big { font-size: 20px; font-weight: bold; }
.divider-line { 
	width: 100px; 
	height: 5px; 
	border-bottom: 1px solid #bf927f; 
	margin: 40px auto 40px auto; 
}
.clear { clear: both; }

#page {
	width: 100%;
    position: relative;
	margin: 0;
}

#header { text-align: center; }

#top {
	padding-bottom: 10px;
	box-shadow: 2px 0px 10px #9b7362;
	z-index: 5; 
	background-color: white;
}
#top img { max-width: 80%; }
#title { padding: 20px; }

#etiquettes {
	display: flex;
    justify-content: center;
	z-index:-1;
	position: relative; /* pour shadow de la div top au-dessus */
}
#etiquettes div { 
	margin: 0 10px;	
	padding: 5px 0;
	width: 100px;
}
#etiquettes h2 { color: white; }

#content { 
	max-width: 650px; 
	margin: 30px auto 0 auto; 
	padding: 15px;
	background: rgba(255,255,255,0.8);
	padding: 30px; 	
}
#content-text #intro { text-align: center; font-size: 18px; line-height: 22px; margin-top: 20px; }
#content-text #intro h3 { text-align: center; font-weight: normal; font-style: italic; margin-top: 0; }
#content-text h3 .big { font-size: 30px; } 
#content-text p { margin-top: 0; margin-bottom: 10px; }
#content-text p:first-child { margin-top: 10px; }
#content-text p:last-child { margin-bottom: 0; }
#content-text a { color: #ff5e4d; }
#content-text a:hover { text-decoration: underline #ff5e4d; text-underline-position: under; }
#content-text ul { margin-top: 0; padding-left: 15px; }

#competences { 
	color: white;
	margin-top: 20px; margin-bottom: 30px;
}
#competences .domaine#bloc-5 { margin-top: 15px; margin-bottom: 20px; }
#competences .domaine.specialite,
#competences .domaine#bloc-6 .texte { 
	display: flex;
	align-items: top;
	justify-content: left; 
}
#competences .domaine.specialite > div { 
	background-repeat: no-repeat; 
	background-position: top 25px center; 
	padding: 10px 10px 30px 10px;
	margin: 5px;
	width: 50%; 
}
#competences .domaine#bloc-5,
#competences .domaine#bloc-6 { padding : 0 10px 20px 10px; }
#competences .domaine#bloc-6 .sous-domaine { width: 33%; padding: 0 10px 0 10px; }
#competences .domaine.specialite div:first-child { margin-left: 0; } 
#competences .domaine.specialite div:last-child { margin-right: 0; } 
#competences .domaine.specialite .bloc-1 { background-image: url('images/icon-graphisme-identite-white.png'); }
#competences .domaine.specialite .bloc-2 { background-image: url('images/icon-print-white.png'); }
#competences .domaine.specialite .bloc-3 { background-image: url('images/icon-web-white.png'); }
#competences .domaine.specialite .bloc-4 { background-image: url('images/icon-video-white.png'); }
#competences .domaine#bloc-5 .titre,
#competences .domaine#bloc-6 .titre { 
	width: 100%; 
	margin: 0;
	padding-top: 10px;
	padding-bottom: 0;	
	text-align: center; 
}
#competences .domaine h4 { 
	font-size: 24px; line-height: 27px; font-weight: 500; 
	text-align: center; 
	margin-top: 0; margin-bottom: 15px; 
	padding-top: 70px;
}
#competences .domaine#bloc-5 h4,
#competences .domaine#bloc-6 h4 { padding-top: 10px; }
#competences .domaine h5 { 
	text-transform: uppercase; 
	font-weight: 500; 
	font-size: 14px; 
	background-color: rgba(255, 255, 255, 0.2);
	text-align: center; 
	padding: 5px 0; 
	margin-top: 10px; margin-bottom: 5px;
}
#competences .domaine#bloc-6 h5 { margin-top: 0; margin-bottom: 5px; }
#competences ul { margin: 0; padding: 0; list-style: none; text-align: center; }
#competences ul li { margin-bottom: 8px; }
#competences ul li:last-child { margin-bottom: 0; }

#contact { text-align: center; font-size: 28px; line-height : 35px; margin-top: 60px; }
#contact i { font-style: normal; }
#contact strong { font-style: italic; }

#links { 
	margin: 50px 0; 
	display: flex;
    justify-content: center;
}
#links .icon { 
	width: 60px; 
	height: 60px; 
	border-radius: 50%; 
	text-align: center; 
	margin: 10px;	
	background: #9b7362;
}
#links .icon:first-child { margin-left: 0; }
#links .icon:hover { background: #bf927f; }
#links .icon .btn-text { 
	padding-top: 18px; 
	line-height: 15px;
}
#links a { 
	color: white; 
	font-size: 15px; line-height: 1px;
	font-weight: 600; 
}
#links a:hover { color: white !important; }
#links a small { font-weight: normal; font-style: normal; }
#links img { width: 100%; }

#menu { margin-top: 50px; text-align: center; color: #9b7362; }
#menu ul { padding: 0; margin: 0; }
#menu ul li { display: inline; padding: 0 5px; border-left: 1px solid black; }
#menu ul li:first-child { padding-left: 0; border-left: 0; }
#menu a { color: #9b7362 !important; text-decoration: none; }
#menu a:hover { text-decoration: underline; text-underline-position: under; }

#footer { padding: 20px; text-align: center; color: black; font-size: 14px; }

/* RESPONSIVE */
@media (max-width: 400px) {
	h1 { font-size: 22px; line-height: 25px; }
	h2 { font-size: 18px; line-height: 21px; }
	h4 { font-size: 22px; line-height: 24px; }
	#content { padding: 10px !important; }  
	#content-text h3 .big { font-size: 26px; }
	#competences .domaine.specialite,
	#competences .domaine#bloc-6 .texte { display: block; }
	#competences .domaine.specialite > div,
	#competences .domaine#bloc-6 .sous-domaine { width: 100%; }
	#competences .domaine.specialite > div { margin: 0 0 10px 0; padding: 0 0 25px 0; }
	#competences .domaine#bloc-6 .sous-domaine { margin: 0 0 15px 0; padding: 0; }
	#competences .domaine#bloc-6 .sous-domaine:last-child { margin-bottom: 0; }
	#competences .domaine.specialite > div { background-position: top 15px center; }
	#competences .domaine  h4 { margin-bottom: 15px; }
	#links .icon { width: 50px; height: 50px; margin: 5px; }
	#links .icon .btn-text { padding-top: 12px; }
	#menu ul li { display: block; border-left: none; padding: 0 !important; }
}