/***********************************************************/
/*********************** Généralités ***********************/
/***********************************************************/

	@import url('https://fonts.googleapis.com/css?family=Martel:200,300,400,600,700,800,900|Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i');

body {font-size: 1rem; font-style: normal; font-weight: normal; margin: 0; padding: 0; overflow-x: hidden; font-family: 'Martel', serif;color: #FFFFFF;}
h1 {font-size:4rem; font-family: 'Roboto Mono', monospace;text-transform: Uppercase; color: #FFFFFF;text-decoration: underline;}
h2 {font-size: 3rem; font-family: 'Roboto Mono', monospace;color: #FFFFFF;text-decoration: underline;}
h3 {font-size: 2rem; font-family: 'Roboto Mono', monospace;color: #FFFFFF;}
section.container.motif{max-width: 100%; background-image: url("../img/pattern.png"); z-index: -10; background-color: rgba(0, 0, 0, 0.7);}
.separation {padding: 1rem;border-bottom: 0.05rem solid #FFFFFF;}
.FinSection {padding: 1rem;}
.btn.SavoirPlus {background-color: #E6E6E5; color: #2F2A84; border: 1px solid #2F2A84; margin: 5px;}
.btn.SavoirPlus:hover {background-color: #000000; color:  #FFFFFF; border: 1px solid #000000;}
li.active > a.SavoirPlus{background-color: #000000; color:  #FFFFFF; border: 1px solid #000000;cursor: not-allowed;}
li.active > a.SavoirPlus:hover{cursor: default;}
.PlusRub {font-size: 2rem;font-family: 'Roboto Mono', monospace;}
.fa-link {font-size: 0.8rem; margin-left: 5px;}
.PlusRub .fa-link {font-size: 1.6rem; margin-left: 5px;}
.ecart {margin-top: 5rem;}
.remonter {bottom: 60px;}
.btn {white-space: normal;}
a:link {color: #FFFFFF;}
a:hover {color: #646464;text-decoration: none;}
a .active {color: #2F2A84;}

.spip-admin-bloc, .spip-admin-float {
	z-index: 2000 !important;
	position: fixed;
	right: 20%;
	top: 0;
	white-space: nowrap;
}

/****************************************************************/
/*********************** GRILLE BOOTSTRAP ***********************/
/****************************************************************/

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs, .col-xs-auto {position: relative;width: 100%;min-height: 1px;padding-right: 15px;padding-left: 15px;}
@media (max-width: 575px) {
  .col-xs {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xs-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-xs-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xs-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xs-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xs-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xs-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xs-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xs-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xs-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xs-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xs-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xs-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xs-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xs-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xs-last {
    -webkit-box-ordinal-group: 14;
    -ms-flex-order: 13;
    order: 13;
  }
  .order-xs-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  .order-xs-1 {-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;}
  .order-xs-2 {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;}
  .order-xs-3 {-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3;}
  .order-xs-4 {-webkit-box-ordinal-group: 5;-ms-flex-order: 4;order: 4; }
  .order-xs-5 {-webkit-box-ordinal-group: 6;-ms-flex-order: 5;order: 5;}
  .order-xs-6 {-webkit-box-ordinal-group: 7;-ms-flex-order: 6;order: 6;}
  .order-xs-7 {-webkit-box-ordinal-group: 8;-ms-flex-order: 7;order: 7;}
  .order-xs-8 {-webkit-box-ordinal-group: 9;-ms-flex-order: 8;order: 8;}
  .order-xs-9 {-webkit-box-ordinal-group: 10;-ms-flex-order: 9;order: 9;}
  .order-xs-10 {-webkit-box-ordinal-group: 11;-ms-flex-order: 10;order: 10;}
  .order-xs-11 {-webkit-box-ordinal-group: 12;-ms-flex-order: 11;order: 11;}
  .order-xs-12 {-webkit-box-ordinal-group: 13;-ms-flex-order: 12;order: 12;}
  .offset-xs-0 {margin-left: 0;}
  .offset-xs-1 {margin-left: 8.333333%;}
  .offset-xs-2 {margin-left: 16.666667%;}
  .offset-xs-3 {margin-left: 25%;}
  .offset-xs-4 {margin-left: 33.333333%;}
  .offset-xs-5 {margin-left: 41.666667%;}
  .offset-xs-6 {margin-left: 50%;}
  .offset-xs-7 {margin-left: 58.333333%;}
  .offset-xs-8 {margin-left: 66.666667%;}
  .offset-xs-9 {margin-left: 75%;}
  .offset-xs-10 {margin-left: 83.333333%;}
  .offset-xs-11 {margin-left: 91.666667%;}
}

/******************************************************/
/*********************** Loader ***********************/
/******************************************************/

#loader-wrapper {position: fixed;top: 0;left: 0;width: 100vw; height: 100vh;z-index: 2000;}
#loader {display: block;position: relative;left: 50%;top: 50%;width: 150px;height: 150px;margin: -75px 0 0 -75px;border-radius: 50%;border: 3px solid transparent;border-top-color: #2F2A84;-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite;z-index: 1001;background:url("../img/loader.png") no-repeat center;}
#loader:before {content: "";position: absolute;top: 5px;left: 5px;right: 5px;bottom: 5px;border-radius: 50%;border: 3px solid transparent;border-top-color: #E6E6E5;-webkit-animation: spin 3s linear infinite;animation: spin 3s linear infinite;}
#loader:after {content: "";position: absolute;top: 15px;left: 15px;right: 15px;bottom: 15px;border-radius: 50%;border: 3px solid transparent;border-top-color: #646464;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite;}
@-webkit-keyframes spin {0%   {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes spin {0%   {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}
#loader-wrapper .loader-section {position: fixed;top: 0;width: 51%;height: 100%;background: rgba(0,0,0,1);z-index: 1000;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
#loader-wrapper .loader-section.section-left {left: 0;}
#loader-wrapper .loader-section.section-right {right: 0;}
.loaded #loader-wrapper .loader-section.section-left {-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #loader-wrapper .loader-section.section-right {-webkit-transform: translateX(100%);-ms-transform: translateX(100%);transform: translateX(100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #loader {opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.loaded #loader-wrapper {visibility: hidden;-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 0.3s 1s ease-out;transition: all 0.3s 1s ease-out;}
.no-js #loader-wrapper {display: none;}

/****************************************************************/
/*********************** Slider d'accueil ***********************/
/****************************************************************/

canvas.animation {background-color: rgba(117, 190, 218, 0.0); z-index: 10;}
#background-effect {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -10; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("../img/background.jpg");}
.overlay {text-align: center; position: absolute; width: 100%; height: 100%; background-image: url("../img/pattern.png"); z-index: -10; background-color: rgba(0, 0, 0, 0.7);}
.overlay h1 {font-size: 5rem;line-height: 1.219;margin: 0;letter-spacing: 0;color: #FFFFFF;}
.overlay span.slogan {font-family: 'Roboto Mono', monospace; font-size: 2rem;line-height: 1.219;margin: 0;letter-spacing: 0;color: #FFFFFF;}
.TitreOverlay {position:relative; height: 100%; width: 100%;}
.SousTitreOverlay{text-align: center; width: 100%; position:absolute; bottom:25px;}

/*****************************************************/
/************************ Menu ***********************/
/*****************************************************/

.navbar {background-color: #E6E6E5!important; margin-top: -18px; color: #2F2A84!important; font-size: 1rem;}
.navbar .dropdown-menu div[class*="col"] {margin-bottom:1rem;}
.navbar .dropdown-menu {border:none; background-color:#E6E6E5!important;}
@media screen and (min-width: 992px) {
	.navbar {padding-top:0px; padding-bottom:0px;}
	.navbar .nav-item {padding:.5rem .5rem; margin:0 .25rem; line-height: 1.2rem;}
	.navbar .dropdown {position:static;}
	.navbar .dropdown-menu {width:100%; left:0; right:0; top:45px;}
	.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {display:block!important;}
	.navbar .dropdown-menu {border: 1px solid rgba(0,0,0,.15); background-color: #fff;}
}
.navbar-dark .navbar-nav .nav-link {color: #2F2A84;}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {color: #646464;}
.navbar-dark .navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(47,42,132, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");}
.navbar-dark .navbar-toggler {color: rgba(47,42,132,.5); border-color: rgba(47,42,132,.1);}
.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {color: #646464;}
.navbar .dropdown-menu {top: 70px;}
.nav-item p {text-transform: Uppercase;}
.navbar .nav-link .fa {color:#2F2A84;}
.navbar a.nav-link.active > .fa {color:#646464;}

/**********************************************************************/
/*********************** PRESENTATION FORMATION ***********************/
/**********************************************************************/

.folded-corner h3 {font-size: 1rem;}
.text{color: #E6E6E5; text-align: center;}
.folded-corner:hover .text{visibility: visible; color: #000000;}
.Services-tab{margin-top:20px;}
.folded-corner{padding: 25px 25px; position: relative; font-size: 90%; text-decoration: none; color: #999; background: transparent; transition: all ease .5s; border: 1px solid rgba(230,230,229,.9);}
.folded-corner:hover{background-color: rgba(230,230,229,.9);}
.folded-corner:hover h3{color: #2F2A84;}
.folded-corner:before {content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 0px 0px 0; border-color: #ddd #000; transition: all ease .3s;}
.folded-corner:hover:before {background-color: #D00003; border-width: 0 50px 50px 0; border-color: #eee #000;}
.service_tab_1{background-color: #000;}
.service_tab_1:hover .fa-icon-image{color: #000; transform: rotate(360deg) scale(1.5);}
.fa-icon-image{color: #E6E6E5; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-size-adjust: none; font-stretch: normal; -moz-font-feature-settings: normal; -moz-font-language-override: normal; text-rendering: auto; transition: all .65s linear 0s; text-align: center; transition: all 1s cubic-bezier(.99,.82,.11,1.41);}

/***********************************************************************/
/*********************** PRESENTATION ACTUALITES ***********************/
/***********************************************************************/
.actu p {padding: 0.5rem;}
.actu h3 small {font-size: 1rem; font-style: italic;}
.gauche img {float: left;}
.gauche h3 {text-align: left;}
.gauche p, .droite p {text-align: left;}
.droite img{float: right;}
.droite h3 {text-align: right;}

/*******************************************************/
/*********************** CLIENTS ***********************/
/*******************************************************/

article.actu {padding: 1rem;border-bottom: 0.05rem solid #FFFFFF;}
.clients{padding-top: 15px;}
.SliderTemoignages {margin: 2rem 0rem;}

/********************************************************************/
/*********************** HEADER RUBRIQUE / ARTICLE ******************/
/********************************************************************/

.page-header {background-repeat: no-repeat;background-position: center;background-size: cover;}
.page-caption {padding-top: 200px;padding-bottom: 204px;text-align: center;}
.page-caption {float: left;width: 150px;padding-bottom: 150px;}
.section-title {margin-bottom: 60px;}
div.HeaderTitre {padding: 40px; bottom: 150px;text-align: center; background-image: url("../img/pattern.png"); background-color: rgba(255, 255, 255, 0.7);}
div.HeaderTitre h1 {font-size: 2rem}
div.HeaderTitre a i {margin: 10px;color: #FFFFFF;}
.pagination > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}
.pagination, .nav-pills {text-align:center;}

/************************************************************/
/*********************** PAGE ARTICLE ***********************/
/************************************************************/

.TitreArticle {font-size: 2rem; padding-bottom: 25px;}
img.ImgInfo {float: left; padding: 5px;}
img.ImgArticle {float: left; margin: 5px;}

/************************************************************/
/*********************** ONGLET FORMATION *******************/
/************************************************************/

nav#NavOngletFormation > .nav.nav-tabs{border: none;color:##FFFFFF;background:#E6E6E5;border-radius:0;}
nav#NavOngletFormation > div a.nav-item.nav-link{border: none;background: #E6E6E5;color:#2F2A84;border-radius:0;transition:background 0.20s linear;}
nav#NavOngletFormation > div a.nav-item.nav-link, nav#NavOngletFormation > div a.nav-item.nav-link.active{border: none;padding: 18px 25px;color:#2F2A84;background:#E6E6E5;border-radius:0;}
nav#NavOngletFormation > div a.nav-item.nav-link.active:after{content: "";position: relative;bottom: -60px;left: -10%;border: 15px solid transparent;border-top-color: #E6E6E5 ;}
div#OngletFormation.tab-content {/*background-color: rgba(255, 255, 255, 0.7)*/;line-height: 25px;border: 1px solid #E6E6E5;border-top: 5px solid #E6E6E5;border-bottom: 5px solid #E6E6E5;color: #fff;background-image: url("../img/pattern.png");}
div#OngletFormation.tab-content h2 {font-size: 1.5rem;}
div#OngletFormation.tab-content h3 {font-size: 1.2rem;}
nav#NavOngletFormation > div a.nav-item.nav-link:hover, nav#NavOngletFormation > div a.nav-item.nav-link:focus{border: none;background: #E6E6E5;color:#646464;border-radius:0;transition:background 0.20s linear;}

/************************************************************/
/*********************** PORTFOLIO **************************/
/************************************************************/

section.portfolio {padding: 0px 0px 60px 0px;}
section.portfolio div.row {padding-bottom: 15px;}
div.portfolio-image {background-repeat: no-repeat!important;background-position: center!important;background-size: cover!important; border: 1px solid #FFFFFF;}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url("../img/loading.gif") no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url("../img/prev.png") left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url("../img/next.png") right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url("../img/close.png") top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/*************************************************************/
/*********************** PAGE RUBRIQUE ***********************/
/*************************************************************/

.EncartCarRub {
	padding: 15px;
}
.CardRub {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-clip: border-box;
	line-height: 25px;
	border: 1px solid #E6E6E5;
	border-top: 5px solid #E6E6E5;
	border-bottom: 5px solid #E6E6E5;
	color: #fff;
	background-image: url("../img/pattern.png");
	border-radius: .25rem;
	background-color: rgba(255, 255, 255, 0.7);
}

/********************************************************************/
/*********************** PRESENTATION EQUIPE ************************/
/********************************************************************/

#team .card {
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid #E6E6E5;
	border-top: 5px solid #E6E6E5;
	border-bottom: 5px solid #E6E6E5;
	color: #fff;
	background-image: url("../img/pattern.png");
}

.image-flip:hover .FaceArriere,
.image-flip.hover .FaceArriere {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: .25rem;
}

.image-flip:hover .FaceAvant,
.image-flip.hover .FaceAvant {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.FaceAvant {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}

.FaceArriere {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    /*-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);*/
}

.FaceAvant,
.FaceArriere {
	background-color: rgba(255, 255, 255, 0.7);
	/*border: 1px solid #E6E6E5;
	border-top: 5px solid #E6E6E5;
	border-bottom: 5px solid #E6E6E5;*/
	color: #fff;
	background-image: url("../img/pattern.png");
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
}

.FaceAvant .card,
.FaceArriere .card {
    min-height: 312px;
}

.FaceArriere .card a {
    font-size: 18px;
    color: rgb(255,255,255) !important;
}

.FaceAvant .card .card-title,
.FaceArriere .card .card-title {
    color: #FFFFFF !important;
}

.FaceAvant .card .card-body img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

/********************************************************************/
/*********************** PRESENTATION CLIENTS ***********************/
/********************************************************************/

#clients .tab_in_sec {
	/* max-width: 775px;
	width: 100%; */
	margin:66px auto;
}

#clients .tab_in_sec .panel-default>.panel-heading {
	padding: 0;
}

#clients .tab_in_sec .panel-default>.panel-heading a {
	display: block;
	padding: 20px 15px;
	font-size: 17px;
	color: #4f4f4f;
	text-transform: uppercase;
	background: #fff;
	border: solid 1px #ccc;
	margin:10px 0;
}

#clients .collapse.in {}

#clients .panel {
	background: none;
	border: none;
}

#clients .panel-body {
	/* background: #fff; */
	margin-top: 7px;
	/* border: solid 1px #ccc; */
	padding: 40px 35px 25px 35px;
	

	background-color: rgba(255, 255, 255, 0.7);
	line-height: 25px;
	border: 1px solid #E6E6E5;
	border-top: 5px solid #E6E6E5;
	border-bottom: 5px solid #E6E6E5;
	color: #fff;
	background-image: url("../img/pattern.png");
	
}

#clients .tab_in_sec h3 {
	color: #228697;
	font-family: 'TimesNewRomanPS-BoldMT';
	text-transform: inherit;
	position: relative;
	margin: 0 25px 35px 25px;
}

#clients .in++.panel-title {
	color: #228697;
}

#clients .tab_in_sec h3 span {
	position: absolute;
	left: 0;
	top: 50%;
	height: 1px;
	display: block;
	width: 100%;
	background: #228697;
	z-index: 0;
}

#clients .tab_in_sec h3 strong {
    display: inline-block;
    background: #f2f1f1;
    position: relative;
    z-index: 1;
    padding: 10px 15px;
    font-family: raleway;
    border-radius: 15px;
    box-shadow: inset 1px 1px 1px 0px #000;
    border: 5px solid #d82029;
    color: #000;
    font-size: 27px;
    font-weight: bold;
}

{
	margin: 0px;
	position: relative;
	top: 14px;
	border-color: #bfbfbf;
}

#clients .tab_in_sec .panel-default>.panel-heading a {
	background:#E6E6E5;
	color:#2F2A84;
}

#clients .tab_in_sec .panel-default>.panel-heading a.active {
	background:#E6E6E5;
	color: #646464;
}

#clients .tab_first {
	background: none;
	position: absolute;
	top: 66px;
	left: 320px;
	width: 100%;
}

#clients .tab_first .panel-heading {
	background: none;
	border-bottom: none;
	box-shadow: none;
	padding: 0px;
}

#clients .tab_first .panel-heading {}

#clients .tab_sec {
	position: relative;
}

#clients .tab_first .panel-heading ul li {
	display: inline-block;
	text-align: center;
}

#clients .tab_first .panel-heading ul li a {
	padding: 15px 35px;
	font-weight: bold;
	background: #fff;
	color: #000000;
	text-transform: uppercase;
}

#clients .tab_first .panel-primary {
	box-shadow: none;
	padding-left: 30px;
}

#clients .actives {
	background: #d82028 !important;
	color: #fff !important;
}

#clients .panel-body p {
	margin-bottom: 15px;
}

#clients h3.panel-title img {
	height: 61px !important;
	float: left;
	margin-right: 10px;
}

#clients .tab_in_sec .panel-default>.panel-heading a::after {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: .255em;
	vertical-align: .255em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}

@media (min-width:1681px) and (max-width:1920px){
   #clients .tab_first {
    left: 600px;
} 

}
@media (min-width:1599px) and (max-width:1680px){
   #clients .tab_first {
    left: 476px;
} 
}
@media (min-width:1439px) and (max-width:1600px){
   #clients .tab_first {
    left:430px;
} 
}
@media (min-width:1367px) and (max-width:1440px){
   #clients .tab_first {
    left:342px;
} 
}
@media only screen and (max-width:1280px){
   #clients .tab_first {
    left: 270px;
} 
}
@media only screen and (max-width:1024px){
   #clients .tab_first {
    left: 135px;
} 
}

@media only screen and (max-width: 992px) {
	#clients .tab_first .panel-primary {
		padding-left: 0px;
	}
	#clients .tab_first .panel-heading ul li a {
		padding: 12px 20px;
	}
	#clients .tab_first {
		top: -38px;
	}
}

@media only screen and (max-width: 767px) {
	#clients .tab_first {
		display: none;
	}
	#clients .top_appy {
		width: 192px;
		margin-top: 5px;
		position: relative;
		z-index: 101;
		float: none;
		margin: 5px auto 0 auto;
	}
	#clients .top_appy a {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
	}
	#clients .tab_sec {
		background: none;
	}
}

@media only screen and (max-width: 480px) {
	#clients .top_appy {
		margin-top: 0px;
	}
	#clients .tab_in_sec h3 span {
		display: none;
	}
	#clients .tab_in_sec h3 strong {
		background: none;
	}
	#clients .tab_sec {
		padding: 25px 0 25px 0px;
	}
	#clients .tab_in_sec h3 {
		margin: 0px;
		margin-bottom: 15px;
	}
}

/*****************************************************************/
/*********************** FORMULAIRE CONTACT **********************/
/*****************************************************************/

.form-control {
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	margin-bottom: 1rem;
}

/************************************************************/
/*********************** PIED DE PAGE ***********************/
/************************************************************/

section {padding: 60px 0;}
section .section-title {text-align: center;color: #2F2A84;margin-bottom: 50px;text-transform: uppercase;}
#footer {background: #E6E6E5 !important;}
#footer h5{padding-left: 10px;border-left: 3px solid #2F2A84;padding-bottom: 6px;margin-bottom: 20px;color:#2F2A84;}
#footer p.h6{color:#2F2A84;}
#footer a {color: #2F2A84;text-decoration: none !important;background-color: transparent;-webkit-text-decoration-skip: objects;}
#footer ul.social li{padding: 3px 0;}
#footer ul.social li a i {margin-right: 5px;font-size:25px;-webkit-transition: .5s all ease;-moz-transition: .5s all ease;transition: .5s all ease;}
#footer ul.social li:hover a i {font-size:30px;margin-top:-10px;}
#footer ul.social li a, #footer ul.quick-links li a{color:#2F2A84;}
#footer ul.social li a:hover{color:#646464;}
#footer ul.quick-links li{padding: 3px 0;-webkit-transition: .5s all ease;-moz-transition: .5s all ease;transition: .5s all ease;}
#footer ul.quick-links li:hover{padding: 3px 0;margin-left:5px;font-weight:700;}
#footer ul.quick-links li a i{margin-right: 5px;}
#footer ul.quick-links li:hover a i {font-weight: 700;}
#footer ul.quick-links li a.active {color: #646464;}
@media (max-width:767px){
	#footer h5 {padding-left: 0;border-left: transparent;padding-bottom: 0px;margin-bottom: 10px;}
}