/* Infos déjà intégrées dans le template
=====================================================================
*   Ceevee v1.0 Layout Stylesheet
*   url: styleshout.com
*   03-18-2014
=====================================================================

Plan de la feuille de style (modifié en conséquences) :
  a. Style général
  b. Style du Header
  c. Section "À propos" (#about)
  d. Section "Formation" (#education)
  e. Section "Expériences" (#work)
  f. Section "Compétences" (#skills)
  g. Section "Centres d'intérêt" (#hobbies)
  h. Section "Recommandations" (#recommandations)
  i. Section "Contact" (#contact)
  j. Footer

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. Style général (couleur du fond)
/* ------------------------------------------------------------------ */

body { 
  background: #0f0f0f; 
}

/* ------------------------------------------------------------------ */
/* b. Style du Header
/* ------------------------------------------------------------------ */

/* style général de la bannière image */
header {
  position: relative;
  height: 800px;
  min-height: 500px;
  width: 100%;
  background: #161415 url(../images/thelongroom.jpg) no-repeat top center;
  background-size: cover !important;
	-webkit-background-size: cover !important;
  text-align: center;
  overflow: hidden;
}

header:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

header .banner {
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  width: 85%;
  padding-bottom: 30px;s
  text-align: center;
}

/* Texte de la bannière */
header .banner-text { 
  width: 100%; 
}

/* h1 (Nom) */
header .banner-text h1 {
  font: 90px/1.1em 'opensans-bold', sans-serif;
  color: #fff;
  letter-spacing: -2px;
  margin: 0 auto 18px auto;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}

/* h3 (présentation rapide) */
header .banner-text h3 {
  background-color: rgba(0,0,0,0.4);
  font: 18px/1.9em 'librebaskerville-regular', serif;
  color: #A8A8A8;
  margin: 0 auto;
  width: 70%;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
}

/* éléments mis en avant dans la présentation */
header .banner-text h3 span,
header .banner-text h3 a {
  color: #fff;
}

header .banner-text hr {
  width: 60%;
  margin: 18px auto 24px auto;
  border-color: #2F2D2E;
  border-color: rgba(150, 150, 150, .1);
}

/* liens réseaux sociaux */
header .social {
  margin: 24px 0;
  padding: 0;
  font-size: 30px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, .8);
}

header .social li {
  display: inline-block;
  margin: 0 15px;
  padding: 0;
}

header .social li a { 
  color: #fff; 
}

header .social li a:hover { 
  color: #11ABB0; 
}

/* Renvoi vers section "À propos" */
header .scrolldown a {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -29px;
  color: #fff;
  display: block;
  height: 42px;
  width: 42px;
  font-size: 42px;
  line-height: 42px;
  color: #fff;
  border-radius: 100%;

  /* transition "ease in/out" adaptée pour chaque moteur de recherches */
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

header .scrolldown a:hover { 
  color: #11ABB0; 
}

/* Volet de Navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* nav-wrap, barre de menu */
#nav-wrap {
  font: 12px 'opensans-bold', sans-serif;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin: 0 auto;
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
}

.opaque { 
  background-color: #333; 
}

/* cacher le bouton de navigation (sur mobile) */
#nav-wrap > a.mobile-btn { 
  display: none; 
}

/* contenu de la barre */
ul#nav {
  min-height: 48px;
  width: auto;

  /* alignement centré du menu */
  text-align: center;
}

ul#nav li {
  position: relative;
  list-style: none;
  height: 48px;
  display: inline-block;
}

/* liens vers catégories correspondantes */
ul#nav li a {

/* 8px padding top + 8px padding bottom + 32px line-height = 48px */

  display: inline-block;
  padding: 8px 13px;
  line-height: 32px;
	text-decoration: none;
  text-align: left;
  color: #fff;

	/* adapté pour chaque moteur de recherches */
  -webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

/* Changement de couleur au passage de la souris 
  J'ai préféré désactivé les éléments inutiles plutôt que de les supprimer puisque 
  j'ai recopié cette partie à partir de celle juste au dessus pour créer le hover. */
ul#nav li a:hover {
  /*display: inline-block;
  padding: 8px 13px;
  line-height: 32px;
  text-decoration: none;
  text-align: left; */
  color: #11ABB0;

  /*-webkit-transition: color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out;
  -o-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;*/
}

/* Style de la catégorie active */
ul#nav li a:active { 
  background-color: transparent !important; 
}

ul#nav li.current a { 
  color: #F06000; 
}

/* Style du dropdown */
.dropdown-menu {
  background-color: #11ABB0;
}

/* ------------------------------------------------------------------ */
/* c. Section "À propos" (#about)
/* ------------------------------------------------------------------ */

/* Style général de la section */
#about {
  background: #484848;
  padding-top: 96px;
  padding-bottom: 66px;
  overflow: hidden;
}

#about a, #about a:visited { 
  color: #fff; 
}

#about a:hover, #about a:focus { 
  color: #11ABB0; 
}

/* Style du texte */
#about h2 {
  font: 22px/30px 'opensans-bold', sans-serif;
  color: #fff;
  margin-bottom: 12px;
}

#about p {
  line-height: 30px;
  color: #BFBFBF;
  text-align: justify;
}

/* photo */
#about .profile-pic {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 100%;
}

/* contact */
#about .contact-details { 
  width: 41.66667%; 
}

/* Bouton de téléchargement CV en PDF */
#about .download {
  width: 58.33333%;
  padding-top: 6px;
}

#about .download .button {
  margin-top: 6px;
  background: #11ABB0;
}

#about .download .button:hover {
  background: #fff;
  color: #2B2B2B;
}

#about .download .button i {
  margin-right: 15px;
  font-size: 20px;
}

/* padding de la div .main-col (paragraphe de présentation et contact) */
#about .main-col { 
  padding-right: 5%; 
}

/* ------------------------------------------------------------------ */
/* d. Section "Formation" (#education)
/* ------------------------------------------------------------------ */

/* général */
#education {
  background: #fff;
  padding-top: 90px;
  padding-bottom: 72px;
  overflow: hidden;
}

#education a, #education a:visited  { 
  color: #11ABB0;
}

#education a:hover, #education a:focus {
  color: #313131; 
}

/* Titre */
#education h1 {
  font: 18px/24px 'opensans-bold', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* soulignement */
#education h1 span {
  border-bottom: 3px solid #11ABB0;
  padding-bottom: 6px;
}

/* Nom de la formation */
#education h3 {
  font: 25px/30px 'opensans-bold', sans-serif;
}

/* infos */
#education .header-col { 
  padding-top: 9px; 
}

#education .main-col { 
  padding-right: 10%; 
}

/* Retiré car les noms des catégories ont été modifiées et celle-ci ne correspond à rien. 
"work" déplacé dans une autre section.
.education, .work {
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E8E8E8;
}*/

#education .info {
  font: 16px/24px 'librebaskerville-italic', serif;
  color: #6E7881;
  margin-bottom: 18px;
  margin-top: 9px;
}

#education .info span {
  margin-right: 5px;
  margin-left: 5px;
}

/* justifier le texte */
#education p {
  text-align: justify;
}

/* dates */
#education .date {
  font: 15px/24px 'opensans-regular', sans-serif;
  margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* e. Section "Expériences" (#work)
/* ------------------------------------------------------------------ */

/* général */
#work {
  background: #ebeeee;
  padding-top: 90px;
  padding-bottom: 60px;
}

/* Titre */
#work h1 {
  font: 18px/24px 'opensans-bold', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 48px;
  color: #505050;
}

/* soulignement */
#work h1 span {
  border-bottom: 3px solid #11ABB0;
  padding-bottom: 6px;
}

/* intitulés */
#work h3 {
  font: 25px/30px 'opensans-bold', sans-serif;
}

/* infos */
#work .header-col { 
  padding-top: 9px; 
}

#work .main-col { 
  padding-right: 10%; 
}

#work .info {
  font: 16px/24px 'librebaskerville-italic', serif;
  color: #6E7881;
  margin-bottom: 18px;
  margin-top: 9px;
}

#work .info span {
  margin-right: 5px;
  margin-left: 5px;
}

/* justifier le texte */
#work p {
  text-align: justify;
}

/* dates */
#work .date {
  font: 15px/24px 'opensans-regular', sans-serif;
  margin-top: 6px;
}

/* ------------------------------------------------------------------ */
/* f. Section "Compétences" (#skills)
/* ------------------------------------------------------------------ */

/* général */
#skills {
  background: #fff;
  padding-top: 90px;
  padding-bottom: 72px;
  overflow: hidden;
}

/* Titre */
#skills h1 {
  font: 18px/24px 'opensans-bold', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 48px;
  color: #505050;
}

/* soulignement */
#skills h1 span {
  border-bottom: 3px solid #11ABB0;
  padding-bottom: 6px;
}

/* sous-titres */
#skills h3 {
  font: 25px/30px 'opensans-bold', sans-serif;
}

#skills .header-col { 
  padding-top: 9px; 
}

/* noms des compétences */
#skills .main-col { 
  padding-right: 10%; 
}

#skills .skills {
  font: 16px/24px 'librebaskerville-italic', serif;
  color: #6E7881;
  margin-bottom: 18px;
  margin-top: 40px;
}

  /*----------------------------------------------*/
  /*	Barres de niveaux langues + informatique
  /*----------------------------------------------*/

/* Style des barres */
.bars {
	width: 95%;
	float: left;
	padding: 1;
	text-align: left;
}

/* barres de niveaux de langues */
.bars .language-skills {
  margin-top: 36px;
  list-style: none;
}

/* barres de niveaux informatiques */
.bars .computer-skills {
  margin-top: 36px;
  list-style: none;
}

/* Il n'y avait à la base qu'une seule class de barres de niveaux, 
j'ai ajusté le code en duplicant la première (langues) 
avant de la modifier pour en faire la seconde (informatique) 
dont j'ai changé la couleur afin de les différencier. */

.bars li {
  position: relative;
  margin-bottom: 60px;
  background: #ccc;
  height: 42px;
  border-radius: 3px;
}

.bars li em {
	font: 15px 'opensans-bold', sans-serif;
  color: #313131;
	text-transform: uppercase;
  letter-spacing: 2px;
	font-weight: normal;
  position: relative;
	top: -36px;
}

/* style des barres de niveaux de langues (en bleu) */
.language-skills .bar-expand {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding-right: 24px;
  background: #11ABB0;
  display: inline-block;
  height: 42px;
  line-height: 42px;
  border-radius: 3px 0 0 3px;
}

/* style des barres de niveaux informatiques (en orange) */
.computer-skills .bar-expand {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding-right: 24px;
  background: #F06000;
  display: inline-block;
  height: 42px;
  line-height: 42px;
  border-radius: 3px 0 0 3px;
}

/* Niveaux de langues adaptés selon les moteurs de recherches : 
  -moz- pour Gecko (Mozilla), 
  -webkit- pour Webkit (Chrome, Safari, Android) */

.français {
  width: 100%;
  -moz-animation: français 2s ease;
  -webkit-animation: français 2s ease;
}

.anglais {
  width: 95%;
  -moz-animation: anglais 2s ease;
  -webkit-animation: anglais 2s ease;
}

.espagnol {
  width: 60%;
  -moz-animation: espagnol 2s ease;
  -webkit-animation: espagnol 2s ease;
}

/* Niveaux d'informatique'*/
.microsoft {
  width: 90%;
  -moz-animation: microsoft 2s ease;
  -webkit-animation: microsoft 2s ease;
}

.adobe {
  width: 75%;
  -moz-animation: adobe 2s ease;
  -webkit-animation: adobe 2s ease;
}

.web {
  width: 60%;
  -moz-animation: web 2s ease;
  -webkit-animation: web 2s ease;
}

.socials {
  width: 85%;
  -moz-animation: socials 2s ease;
  -webkit-animation: socials 2s ease;
}

/* effet de remplissage des barres 
  L'effet rend plutôt bien, mais il n'est visible 
  que si l'on recharge la page en étant déjà sur les barres.

  -moz- pour Gecko (Mozilla)*/
@-moz-keyframes français {
  0%   { width: 0px;  }
  100% { width: 100%; }
}

@-moz-keyframes anglais {
  0%   { width: 0px;  }
  100% { width: 95%;  }
}

@-moz-keyframes espagnol {
  0%   { width: 0px;  }
  100% { width: 60%;  }
}

@-moz-keyframes microsoft {
  0%   { width: 0px;  }
  100% { width: 90%;  }
}

@-moz-keyframes adobe {
  0%   { width: 0px;  }
  100% { width: 75%;  }
}

@-moz-keyframes web {
  0%   { width: 0px;  }
  100% { width: 60%;  }
}

@-moz-keyframes socials {
  0%   { width: 0px;  }
  100% { width: 85%;  }
}

/* -webkit- pour Webkit (Chrome, Safari, Android)*/
@-webkit-keyframes français {
  0%   { width: 0px;  }
  100% { width: 100%; }
}

@-webkit-keyframes anglais {
  0%   { width: 0px;  }
  100% { width: 95%;  }
}

@-webkit-keyframes espagnol {
  0%   { width: 0px;  }
  100% { width: 60%;  }
}

@-webkit-keyframes .microsoft {
  0%   { width: 0px;  }
  100% { width: 90%;  }
}

@-webkit-keyframes adobe {
  0%   { width: 0px;  }
  100% { width: 75%;  }
}

@-webkit-keyframes web {
  0%   { width: 0px;  }
  100% { width: 60%;  }
}

@-webkit-keyframes socials {
  0%   { width: 0px;  }
  100% { width: 85%;  }
}

/* ------------------------------------------------------------------ */
/* g. Section "Centres d'intérêt" (#hobbies)
/* ------------------------------------------------------------------ */

/* D'origine, cette section était un portfolio, 
mais je l'ai modifiée pour rendre mes centres d'intérêts 
plus visuels et donner plus de légèreté à la page 
par rapport à une simple liste */

/* général */
#hobbies {
  background: #ebeeee;
  padding-top: 90px;
  padding-bottom: 60px;
}

/* Titre de la section */
#hobbies h1 {
  font: 15px/24px 'opensans-semibold', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 48px;
  color: #95A3A3;
}

/* Contenu de la section */
#hobbies-wrapper .columns { 
  margin-bottom: 40px; 
}

/* développement des items adaptés pour chaque moteur de recherches */
.hobbies-item .item-wrap {
  background: #fff;
  overflow: hidden;
  position: relative;

  -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.hobbies-item .item-wrap a {
  display: block;
  cursor: pointer;
}

/* overlay = carré gris quand la souris est sur l'image */
.hobbies-item .item-wrap .overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

  -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

  background: url(../images/overlay-bg.png) repeat;
}

/* icon "+" pour indiquer que l'item est cliquable */
.hobbies-item .item-wrap .link-icon {
  display: block;
  color: #fff;
  height: 30px;
  width: 30px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;

  opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

  -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -15px;
}

/* style des images, textes et métas */
.hobbies-item .item-wrap img {
  vertical-align: bottom;
}

.hobbies-item .hobbies-item-meta { 
  padding: 18px 
}

.hobbies-item .hobbies-item-meta h5 {
  font: 14px/21px 'opensans-bold', sans-serif;
  color: #fff;
}

.hobbies-item .hobbies-item-meta p {
  font: 12px/18px 'opensans-light', sans-serif;
  color: #c6c7c7;
  margin-bottom: 0;
}

/* on hover */
.hobbies-item:hover .overlay {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

.hobbies-item:hover .link-icon {
  opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

/* popup modal (développement dans une petite fenêtre)*/
.popup-modal {
	max-width: 550px;
	background: #fff;
	position: relative;
	margin: 0 auto;
}

/* style des decriptifs */
.popup-modal .description-box { 
  padding: 12px 36px 18px 36px; 
}

.popup-modal .description-box h4 {
  font: 15px/24px 'opensans-bold', sans-serif;
	margin-bottom: 12px;
  color: #111;
}

.popup-modal .description-box p {
	font: 14px/24px 'opensans-regular', sans-serif;
  color: #A1A1A1;
  margin-bottom: 12px;
  text-align: justify;
}

/* Avant de transformer cette partie, le portfolio
comportait des étiquettes de catégories que je n'ai 
pas choisi de conserver. 

.popup-modal .description-box .categories {
  font: 11px/21px 'opensans-light', sans-serif;
  color: #A1A1A1;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  text-align: left;
}

.popup-modal .description-box .categories i {
   margin-right: 8px;
}
*/

/* liens détails et fermer */
.popup-modal .link-box {
  padding: 18px 36px;
  background: #111;
  text-align: left;
}

.popup-modal .link-box a {
  color: #fff;
	font: 11px/21px 'opensans-bold', sans-serif;
	text-transform: uppercase;
  letter-spacing: 3px;
  cursor: pointer;
}

.popup-modal a:hover {	
  color: #00CCCC; 
}

.popup-modal a.popup-modal-dismiss { 
  margin-left: 24px; 
}


/* effet "fadein/fadeout" (fondu lorsque la fenêtre
apparaît ou disparaît)
/* ------------------------------------------------------------------ */

/* contenu de départ */
.mfp-fade.mfp-wrap .mfp-content .popup-modal {
  opacity: 0;
  -webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
   transition: all 200ms ease-in-out;
}

/* fadein */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-modal {
   opacity: 1;
}
/* fadeout */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-modal {
   opacity: 0;
}

/* ------------------------------------------------------------------
/* h. Recommandations
/* ------------------------------------------------------------------ */

/* général */
#recommandations {
  background: #1F1F1F url(../images/dublinbynight.jpg) no-repeat center center;
  background-size: cover !important;
	-webkit-background-size: cover !important;
  background-attachment: fixed;
  /* l'image d'arrière plan reste fixe lorsque l'on scroll */

  position: relative;
  min-height: 200px;
  width: 100%;
  overflow: hidden;
}

#recommandations .text-container {
  padding-top: 96px;
  padding-bottom: 66px;
}

/* titre de la section */
#recommandations h1 {
  font: 18px/24px 'opensans-semibold', sans-serif;   
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 3px;
  color: #fff;
}

#recommandations h1 span { 
  display: center; 
}

#recommandations .header-col { 
  padding-top: 9px; 
}

#recommandations .header-col h1:before {
  font-family: 'FontAwesome';
  content: "\f10d";
	padding-right: 10px;
	font-size: 72px;
  line-height: 72px;
  text-align: left;
  float: left;
  color: #fff;
}

/*	Blockquotes (citations) */
#recommandations blockquote {
  margin: 0 0px 30px 0px;
  padding-left: 0;
  position: relative;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
}

#recommandations blockquote:before { 
  content: none; 
}

#recommandations blockquote p {
  font-family: 'librebaskerville-italic', serif;
  padding: 0;
  font-size: 24px;
  line-height: 48px;
  color: #fff;
  text-align: justify;
}

/* personne citée */
#recommandations blockquote cite {
  display: block;
  font-size: 18px;
  font-style: normal;
  line-height: 18px;
  color: #fff;
}

#recommandations blockquote cite:before { 
  content: "\2014 \0020"; 
}

#recommandations blockquote cite a,
#recommandations blockquote cite a:visited { 
  color: #8B9798; border: none 
}

/* Flex Slider 
  = adapativité de la section, n'est utile qu'avec 
  plusieurs éléments de slides. Je n'ai pas touché à
  cette partie à part pour l'indenter correctement.
  Cela donne également une idée de la façon dont le 
  code était déjà commenté à la base, avant d'ajouter 
  mes propres commentaires.
/* ------------------------------------------------------------------ */

/* Reset */
.flexslider a:active,
.flexslider a:focus  { 
  outline: none; 
}

.slides,
.flex-control-nav,
.flex-direction-nav {
 margin: 0; padding: 0; 
 list-style: none; 
}

.slides li { 
  margin: 0; 
  padding: 0;
}

/* Necessary Styles */
.flexslider {
   position: relative;
   zoom: 1;
   margin: 0;
   padding: 0;
}

.flexslider .slides { 
  zoom: 1; 
}

.flexslider .slides > li { 
  position: relative; 
}

/* Hide the slides before the JS is loaded. 
Avoids image jumping */
.flexslider .slides > li { 
  display: none; 
  -webkit-backface-visibility: hidden; 
}

/* Suggested container for slide animation setups. 
Can replace this with your own */
.flex-container { 
  zoom: 1; 
  position: relative; 
}

/* Clearfix for .slides */
.slides:before,
.slides:after {
   content: " ";
   display: table;
}
.slides:after {
   clear: both;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child { 
  display: block; 
}

/* Slider Styles */
.slides { 
  zoom: 1; 
}

.slides > li {
  /*margin-right: 5px; */
  overflow: hidden;
}

/* Control Nav */
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -20px;
  text-align: left;
}

.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.flex-control-paging li a {
  width: 12px;
  height: 12px;
  display: block;
  background: #ddd;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  box-shadow: inset 0 0 3px rgba(255, 255, 255, .3);
}

.flex-control-paging li a:hover {
  background: #CCC;
  background: rgba(255, 255, 255, .7);
}

.flex-control-paging li a.flex-active {
  background: #fff;
  background: rgba(255, 255, 255, .9);
  cursor: default;
}

/* ------------------------------------------------------------------ */
/* i. Section "Contact"
/* ------------------------------------------------------------------ */

/* général */
#contact {
  background: #191919;
  padding-top: 96px;
  padding-bottom: 102px;
  color: #636363;
}

#contact .section-head { 
  margin-bottom: 42px; 
}

#contact a, #contact a:visited  { 
  color: #11ABB0; 
}

#contact a:hover, #contact a:focus { 
  color: #fff; 
}

/* titre de section */
#contact h1 {
  font: 18px/24px 'opensans-bold', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #EBEEEE;
  margin-bottom: 6px;
}

/*#contact h1 span { 
  display: none; 
}*/

#contact h1:before {
  font-family: 'FontAwesome';
  content: "\f0e0";
	padding-right: 10px;
	font-size: 72px;
  line-height: 72px;
  text-align: bottom;
  float: bottom;
  color: #ebeeee;
}

/* infos contact (titre) */
#contact h4 {
  font: 16px/24px 'opensans-bold', sans-serif;
  color: #EBEEEE;
  margin-bottom: 6px;
}

/* texte */
#contact p.lead {
   font: 18px/36px 'opensans-light', sans-serif;
   padding-right: 3%;
   color: #ebeeee;
}

#contact .header-col { 
  padding-top: 6px; 
}


/* formulaire de contact */
#contact form { 
  margin-bottom: 30px; 
}

/* rubriques du formulaire */
#contact label {
   font: 15px/24px 'opensans-bold', sans-serif;
   margin: 12px 0;
   color: #EBEEEE;
	display: inline-block;
	float: left;
   width: 26%;
}

/* espace de réponse */
#contact input,
#contact textarea,
#contact select {
  padding: 18px 20px;
	color: #eee;
	background: #373233;
	margin-bottom: 42px;
	border: 0;
	outline: none;
  font-size: 15px;
  line-height: 24px;
  width: 65%;
}

#contact input:focus,
#contact textarea:focus,
#contact select:focus {
	color: #fff;
	background-color: #11ABB0;
}

/* bouton "Envoyer" */
#contact button.submit {
	text-transform: uppercase;
	letter-spacing: 3px;
	color:#fff;
  background: #0D0D0D;
	border: none;
  cursor: pointer;
  height: auto;
  display: inline-block;
	border-radius: 3px;
  margin-left: 26%;
}

#contact button.submit:hover {
	color: #0D0D0D;
	background: #fff;
}

/* informations obligatoires */
#contact span.required {
	color: #11ABB0;
	font-size: 13px;
}

/* en cas d'échec ou réussite de l'envoi */
#message-warning, #message-success {
  display: none;
	background: #0F0F0F;
	padding: 24px 24px;
	margin-bottom: 36px;
  width: 65%;
  margin-left: 26%;
}

#message-warning { 
  color: #D72828; 
}

#message-success { 
  color: #11ABB0; 
}

#message-warning i,
#message-success i {
   margin-right: 10px;
}

/* image de chargement en cours */
#image-loader {
  display: none;
  position: relative;
  left: 18px;
  top: 17px;
}


/* ------------------------------------------------------------------ */
/* j. Footer
/* ------------------------------------------------------------------ */


/* général */
footer {
  padding-top: 48px;
  margin-bottom: 48px;
  color: #303030;
  font-size: 14px;
  text-align: center;
  position: relative;
}

footer a, footer a:visited { 
  color: #525252; 
}

footer a:hover, footer a:focus { 
  color: #fff; 
}

/* copyright */
footer .copyright {
  margin: 0;
  padding: 0;
}

footer .copyright li {
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 24px;
}

.ie footer .copyright li {
  display: inline;
}

footer .copyright li:before {
  content: "\2022";
  padding-left: 10px;
  padding-right: 10px;
  color: #095153;
}

footer .copyright li span {
  color: #fff;
}

/* réseaux sociaux */
footer .social-links {
  margin: 18px 0 30px 0;
  padding: 0;
  font-size: 30px;
}

footer .social-links li {
  display: inline-block;
  margin: 0;
  padding: 0;
  margin-left: 42px;
  color: #F06000;
}


/* Bouton de retour en haut */
#go-top {
	position: absolute;
	top: -24px;
  left: 50%;
  margin-left: -30px;
}

#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	width: 60px;
	height: 60px;
	background-color: #525252;

	-webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

  color: #fff;
  font-size: 21px;
  line-height: 60px;
 	border-radius: 100%;
}

#go-top a:hover { 
  background-color: #0F9095; 
}

/* Fin de la feuille de style principale ! */