/* ====== CSS CUSTOM PROPERTIES ====== */
:root {
  --color-primary: #10589a;
  --color-accent: #9cbd5c;
  --color-dark: #222;
  --color-text: #555;
  --color-bg-light: #f1f1f1;
  --transition: all 0.25s ease;
  --radius: 4px;
}

html {font-family: 'Roboto', sans-serif}
body{background-color: #fff}
a:hover {text-decoration: none}
p {font-size: 1.2rem;line-height: 2}
.container {max-width: 1320px}
.container-fluid {max-width: 100%}
.imgslide {width: 100%}
/*
font-family: 'Lobster', cursive;
font-family: 'Roboto Condensed', sans-serif;

  0 - BASE
  1 - ACCUEIL
  2 - INFOS & SERVICES
  3 - LA BOUTIQUE
  4 - CONTACT
  
  /*
  =======================
  breakpoint-xs => 0
  breakpoint-sm => 768px
  breakpoint-md => 1024px
  breakpoint-lg => 1154px
  breakpoint-xl => 1366px
  =======================
  @media (max-width:1920px){}
  @media (max-width:1600px){}
  @media (max-width:1366px){}
  @media (max-width:1154px){}
  @media (max-width:1024px){}
  @media (max-width:768px){}
  @media (max-width:640px){}
  @media (max-width:360px){}
  */

/*

/*====================================
      MODAL
====================================*/
.modal {border: 0px;text-align: center}
.modal .modal-header{background-color: var(--color-primary);padding:10px 20px;color:#fff;border-radius: 0px;border: none}
.modal .modal-header button {color:#FFF}
/* Bootstrap 5: .btn-close uses a CSS filter for color */
.modal .modal-header .btn-close {filter: brightness(0) invert(1);opacity:.9}
.modal .modal-header .btn-close:hover {opacity:1}
.modal .modal-header strong {text-transform: uppercase}
.modal .modal-body {padding:0px}
.modal .modal-body p {padding:5px 30px 10px 30px}
.modal .modal-body .carousel {margin-bottom: 25px}
.modal .carousel-inner {background: #000;margin: 0 auto}
.modal a.carousel-control-prev {background:#10589a;display: block;margin-top: 220px;padding-top: 25px;height:70px;width: 50px;margin-left: 0px;-webkit-transition: all 0.25s;transition: all 0.25s}
.modal a.carousel-control-next {background:#10589a;display: block;margin-top: 220px;padding-top: 25px;height:70px;width: 50px;margin-right: 0px;-webkit-transition: all 0.25s;transition: all 0.25s}
.modal-lg {max-width: 50%}
@media (max-width: 1920px) {
  .modal-lg {max-width: 60%}
}
@media (max-width: 1480px) {
  .modal-lg {max-width: 75%}
}
@media (max-width: 1200px) {
  .modal-lg {max-width: 90%}
}


/*
================================================== NAVBAR
*/
#site-header {position:fixed;top:0;left:0;right:0;height:80px;background:#fff;z-index:9999;display:flex;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.07)}
#nav-logo {padding:0 20px;flex-shrink:0}
#nav-logo img {height:70px;display:block}
#site-nav {flex:1}
#site-nav ul {list-style:none;margin:0;padding:0;display:flex;justify-content:flex-end;align-items:center}
#site-nav ul li a {display:block;padding:0 16px;line-height:80px;text-transform:uppercase;font-weight:800;font-size:.9rem;color:#1d6a88;letter-spacing:.5px;text-decoration:none;transition:color .25s}
#site-nav ul li a:hover, #site-nav ul li a.active {color:#9cbd5c}
#site-nav .nav-linkedin a {line-height:80px;padding:0 12px;display:flex;align-items:center}
/* Burger */
#burger-btn {display:none;position:fixed;top:12px;right:14px;z-index:10001;background:#444;border:none;cursor:pointer;width:50px;height:50px;padding:12px;flex-direction:column;justify-content:space-between;border-radius:2px}
#burger-btn span {display:block;height:3px;background:#fff;border-radius:2px;transition:all .25s ease}
#burger-btn.open span:nth-child(1) {transform:translateY(9px) rotate(45deg)}
#burger-btn.open span:nth-child(2) {opacity:0}
#burger-btn.open span:nth-child(3) {transform:translateY(-9px) rotate(-45deg)}
@media (max-width:1480px) {
  #site-nav ul li a {font-size:.85rem;padding:0 12px}
  #nav-logo img {height:65px}
}
@media (max-width:1200px) {
  #site-nav ul li a {padding:0 10px;font-size:.8rem}
}
@media (max-width:992px) {
  #burger-btn {display:flex}
  #site-header {height:60px}
  #nav-logo img {height:46px}
  #nav-logo {padding:0 15px}
  #site-nav {display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:#fff;z-index:10000;overflow-y:auto;flex-direction:column}
  #site-nav.open {display:flex}
  #site-nav ul {flex-direction:column;padding:10px 0}
  #site-nav ul li a {line-height:1;padding:18px 30px;border-bottom:1px solid #f0f0f0;font-size:1rem}
  #site-nav .nav-linkedin a {line-height:1;padding:18px 30px}
}


/*
================================================== SLIDER
*/
@keyframes fade {
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2 {
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3 {
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

.slider-middle {margin: 0px auto;position: relative;z-index: 5;text-align: center;overflow: hidden}
.slide1 {z-index: -1}
.slide1 {width: 100%;height: 700px;background: url(../img/accueil/slider/fond.jpg)no-repeat;background-position: center center;background-size: cover}
.slide1 .homcasque {float:right;height: 700px;max-width: 100%}
.slider-titre {position: absolute;width: 500px;max-width: 90%;left: 50%;transform: translateX(-50%);top:150px;z-index: 9}
.slider-titre span {text-transform: uppercase;color:#d5f29c;font-size: 1.5rem;margin-left: 5px}
.slider-titre h1 {font-size: 3.5rem;font-weight: 700;color:#fff;margin: 0px 0 20px;line-height: 1;letter-spacing: -1px; font-size: 3.5em;}
.slider-titre hr {height: 1.5px;width: 300px;background-color: #d5f29c;margin-left: 100px}
.slider-titre h2 {font-size: 1.5rem;margin-left:5px;text-transform: uppercase;font-weight: 700;color:#fff}
.slider-actu {position: absolute;left:5%;top:45%;background: url(../img/nos-actualites/bureau-interieur.jpg) no-repeat center;background-size:cover;padding: 150px 20px 20px 20px;width: 450px;font-size: 1.2rem;text-align: left;z-index: 1}
.slider-actu span {display: block;background: #222;padding: 10px;color:#fff;}
.slider-actu a {color:#9cbd5c;padding: 5px 0}     
@media (max-width: 1480px) {
  .slider-actu {width: 25%}
}
@media (max-width: 1088px) {
  .slider-actu {display:none;}
}

/*
================================================== SECTION 1
*/
#acc-sect-1 {background: #f1f1f1;padding: 0;margin: 0;color:#555}
#acc-sect-1 .container {background: #fff;margin: -50px auto;position: relative;z-index: 99;padding: 90px 90px 80px 90px;max-width: 1500px}
#acc-sect-1 h3 {font-size: 3.2rem;font-weight: 700;margin-bottom: 10px;line-height: 1;letter-spacing: -1px;margin-bottom: 20px}
#acc-sect-1 h4 {font-size: 1.2rem;color: #9cbd5c;text-transform: uppercase;margin-bottom: 25px}
#acc-sect-1 hr {height: 2px;width: 90px;background-color: #9cbd5c;margin-left: 5px;margin-bottom: 60px}
#acc-sect-1 hr.hr-signature {margin-left: 180px;margin-top: -60px;margin-bottom: 0px}
#acc-sect-1 p {text-align: justify;margin-bottom: 40px}
#acc-sect-1 figure img {display: inline-block;height:80px;margin-bottom: 25px}
#acc-sect-1 a {float: right;font-size: 1.2rem;text-align: center;background-color: #9cbd5c;color:#fff;font-weight: 700;padding: 15px 60px;text-transform: uppercase;-webkit-transition: all 0.25s;transition: all 0.25s}
#acc-sect-1 a:hover {background-color: #10589a}
#acc-sect-1 .col-xl-4 img {width: 100%}
#acc-sect-1 .col-xl-8 {padding-left: 40px}
@media (max-width:1366px){
  #acc-sect-1 .container {padding: 90px 5% 80px 5%;max-width: 100%}
}
@media (max-width:1154px){
  #acc-sect-1 .container {text-align: center}
  #acc-sect-1 hr {margin: 0 auto 40px auto}
  #acc-sect-1 figure {text-align: center}
  #acc-sect-1 p {margin-top: 20px}
  #acc-sect-1 .col-xl-8 {padding-left: 0px}
  #acc-sect-1 .col-xl-4 {text-align: center}
  #acc-sect-1 .col-xl-4 img {max-width: 520px;margin-bottom: 40px}
}

/*
================================================== SECTION 2
*/
#section-2 {background: url(../img/accueil/bg-section-2.webp) no-repeat center top;background-size: cover;padding: 120px 0;text-align: center}
#section-2 h2 {font-size: 3rem;font-weight: 700;margin-bottom: 20px;line-height: 1;letter-spacing: -1px;color:#fff}
#section-2 hr {height: 2px;width: 90px;background-color: #9cbd5c;margin-bottom: 80px}
#section-2 .content {cursor: pointer}
#section-2 figure {background: rgb(0,0,0,.25);padding: 20px 5px;margin-top:15px;-webkit-transition: all 0.25s;transition: all 0.25s}
#section-2 figure:hover {background: #10589a}
#section-2 figure img {width: 120px}
#section-2 figure figcaption {font-size: 1.1rem;text-transform: uppercase;color:#fff;font-weight: 700;padding:15px 0 15px 0;}
@media (max-width:767px){
  #section-2 h2 {font-size: 2.5rem}
}
/*
================================================== SECTION 3
*/

#section-3 {background: #fff;padding: 120px 0;z-index: 99;text-align: left}
#section-3 h2 {font-size: 3rem;font-weight: 700;margin-bottom: 20px;line-height: 1;letter-spacing: -1px;color:#555}
#section-3 h2 span {color:#9cbd5c}
#section-3 hr {height: 2px;width: 90px;background-color: #9cbd5c;margin-top:40px;margin-bottom:80px;margin-left: 0}
#section-3 p {margin-top: 80px;color:#555}
#section-3 h3 {color:#333;font-weight: 700;letter-spacing: -.5px;font-size: 2rem}
#section-3 h4 {color:#9cbd5c;text-transform: uppercase;font-size: 1rem;font-weight: 700}
#section-3 .item {padding: 0 10px}
#section-3 .item .item-content {background-color:#9cbd5c;padding: 0 20px;height: 100%;width: 100%;text-align: center;padding-top: 40px}
#section-3 .item .item-content h5 {color:#fff;font-weight: 700;letter-spacing: -.5px;font-size: 1.8rem;margin-top: 20px}
#section-3 .item .item-content ul {list-style: none;padding: 0;color:#fff;font-size: 1.2rem;border-top: 1px solid #f1f1f1;margin-top: 40px}
#section-3 .item .item-content ul li {border-bottom: 1px solid #f1f1f1;padding: 20px 0}
/* responsive */
@media (max-width: 1200px) {
  #section-3 {padding: 80px 20px}
  #section-3 hr {margin-left: auto}
  #section-3 h2 {text-align: center}
  #section-3 .item .item-content ul {padding-bottom: 50px}
}
@media (max-width: 1153px){
  #section-3 img.img-fluid,#section-3 p,#section-3 h3,#section-3 h4 {display: none}
}
@media (max-width:767px){
  #section-3 h2 {font-size: 2.5rem}
}
#section-3 .col-md-12,#section-3 .col-sm-12,#section-3 .col-xs-12 {margin-top: 20px}
/*
================================================== LA SOCIETE
*/
#histoire {background: #fff url(../img/la-societe/background.jpg) no-repeat center bottom;background-size: cover;padding: 180px 0 150px 0}
#histoire h2 {font-size: 3rem;font-weight: 700;margin-bottom: 20px;line-height: 1;letter-spacing: -1px;color:#555}
#histoire h2 span {color:#9cbd5c}
#histoire hr {height: 2px;width: 90px;background-color: #9cbd5c;margin-top:40px;margin-bottom: 40px;margin-left: 0}
#histoire p {color:#555;padding-right:50px;text-align: justify;}
#histoire h3.date {line-height: 1;margin-top: 40px;font-weight: 700;letter-spacing: -1px;color: #9cbd5c}
#histoire p.desc {margin-top: 30px}
#slider-portfolio {padding:20px 0px 0 0px;-webkit-transition: all 0s;transition: all 0s}
#slider-portfolio .carousel-inner {width: 100%;height:600px;margin: 0 auto}
#slider-portfolio a.carousel-control-prev {background:#10589a;display: block;margin-top: 265px;padding-top: 25px;height:70px;width: 50px;margin-left: 0px;-webkit-transition: all 0.25s;transition: all 0.25s}
#slider-portfolio a.carousel-control-next {background:#10589a;display: block;margin-top: 265px;padding-top: 25px;height:70px;width: 50px;margin-right: 0px;-webkit-transition: all 0.25s;transition: all 0.25s}
#equipe {background: #e5ebf0;padding: 50px 10% 120px 158px}
#equipe .team {padding: 0px 80px 0 0}
#equipe img.img-equipe {margin-top: 50px;padding: 0;}
#equipe h2 {font-size: 3rem;font-weight: 700;margin-bottom: 20px;line-height: 1;letter-spacing: -1px;color:#9cbd5c}
#equipe hr {height: 2px;width: 90px;background-color: #9cbd5c;margin-top:40px;margin-bottom: 40px;margin-left: 0}
#equipe p {color:#555;padding-right:50px;text-align: justify;font-weight: 400}

/* responsive */
@media (max-width: 1480px) {
  #histoire {padding: 150px 20px 120px 20px}
  #histoire p {padding-right:20px}
  #slider-portfolio .carousel-inner {margin-top: 30px}
}
@media (max-width: 1199px) {
  #histoire {text-align: center;padding: 80px 20px 0px 20px}
  #histoire hr {margin-left: auto}
  #histoire p {text-align: justify;text-align-last: center;padding:0px 20% 40px 20%}
  #histoire h3.date {margin-top: 0px;text-align: right}
  #histoire .content-desc {text-align: left;text-align-last: left}
  #histoire p.desc {margin-top: 0px;padding: 0 30% 10px 0;text-align: justify;text-align-last: left}
  #slider-portfolio {padding:20px 10% 0 10%}
  #equipe {padding: 80px 0 0 0}
  #equipe .team {padding: 20px;margin: 0}
  #equipe .members {padding: 20px 50px;text-align: center}
  #equipe hr {margin-left: auto}
  #equipe p {text-align: justify;text-align-last: center;padding:0px 20% 40px 20%}
}
@media (max-width:767px){
  #histoire p {padding:0px}
  #histoire h3.date {text-align: left}
  #histoire p.desc {padding: 0}
  #slider-portfolio {padding:20px 0}
  #equipe p {padding:0px}
}

/*
================================================== NOS COMPETENCES
*/
#competences {overflow: hidden;background: url(../img/competences/background.jpg) no-repeat center center;background-attachment: fixed;background-size: cover;padding: 0px 0 150px 0}
#competences .content-comp {background: #fff;padding:180px 0px 30px 110px}
#competences h1 {font-size: 3rem;font-weight: 700;margin-bottom: 20px;line-height: 1;letter-spacing: -1px;color:#555}
#competences h1 span {color:#9cbd5c}
#competences hr {height: 2px;width: 90px;background-color: #9cbd5c;margin-top:40px;margin-bottom: 40px;margin-left: 0;-webkit-transition: all 0.25s;transition: all 0.25s}
#competences .content-comp p {color:#555;padding-right:50px;padding-left: 70px;text-align: justify;margin-bottom: 60px;line-height: 2}
#competences p strong {font-size:1.5rem;}
#competences p span {font-weight: 300;color: #9cbd5c;font-size: 1.5rem}
#competences .container-fluid {max-width: 1560px}
#competences .compet {margin-top: 20px;padding: 20px;text-align: left}
#competences .compet .compet-content {background: rgba(255,255,255,.9);padding: 40px 40px 40px 40px;height: 100%;width: 100%;cursor: pointer;-webkit-transition: all 0.25s;transition: all 0.25s}
#competences .compet .compet-content:hover {background: #fff}
#competences .compet .compet-content:hover .fleche{opacity: 1;right:60px}
#competences .compet .compet-content:hover hr {width: 50px}
#competences .compet .compet-content .fleche {position: absolute;bottom: 50px;right:80px;opacity: 0;-webkit-transition: all 0.25s;transition: all 0.25s}
#competences .compet .compet-content .fleche img {width:50px;opacity: .5}
#competences .compet .compet-content-img {background: #9cbd5c;padding: 10px;text-align: center;border-radius: 50% 50%;width: 120px;height: 120px;}
#competences .compet .compet-content-img img {width: 80px;margin-top:10px }
#competences .compet .compet-content h2 {font-weight: 700;font-size: 1.3rem;text-transform: uppercase;letter-spacing: -.5px;display: block;width: 100%;margin-top:20px;color:#555}
#competences .compet .compet-content hr {margin-top:20px}
#competences .compet .compet-content p {color:#555;padding-right:0px;text-align: justify;margin-bottom: 60px;line-height: 2}
#competences .compet .compet-content p b {color:#9cbd5c;}

@media (max-width:1153px){
 #competences .content-comp {padding-top:100px}
 #competences .content-comp p {padding-left: 0px}
}
@media (max-width:767px){
  #competences .content-comp {padding: 100px 0 0px 5%}
}


/*
================================================== NOS REALISATIONS
*/
#realisations {background: #fff url(../img/realisations/background.jpg) no-repeat center bottom;background-size: cover;padding: 180px 0;text-align: center}
#realisations h1 {font-size: 3rem;font-weight: 700;margin-bottom: 20px;line-height: 1;letter-spacing: -1px;color:#555}
#realisations h1 span {color:#9cbd5c}
#realisations hr {height: 2px;width: 90px;background-color: #9cbd5c;margin-top:40px;margin-bottom: 40px}
#realisations .item:hover .img-fluid{-webkit-filter: grayscale(50%);filter: grayscale(50%);cursor: pointer;opacity: .8}
#realisations .img-fluid {margin-top: 30px;-webkit-filter: grayscale(0%);filter: grayscale(0%);-webkit-transition: all 0.25s;transition: all 0.25s}
#realisations h2 {background: #222;color:#f1f1f1;text-transform: uppercase;font-size: 1.2rem;text-align: center;padding: 10px 5px }
@media (max-width: 1480px) {
  #realisations {padding: 150px 0}
}
@media (max-width: 1199px) {
  #realisations {padding: 100px 0}
}
/*
================================================== ACTUALITES
*/
#actu-titre {padding: 180px 0 0 0;text-align: center}
#actu-titre h1 {font-size: 3rem;font-weight: 700;margin-bottom: 20px;line-height: 1;letter-spacing: -1px;color:#555}
#actu-titre h1 span {color:#9cbd5c}
#actu-titre hr {height: 2px;width: 90px;background-color: #9cbd5c;margin-top:40px;margin-bottom: 50px}
#actu {background: url(../img/la-societe/background.jpg) no-repeat center bottom;background-size: cover;padding: 20px 0 150px 0;text-align: left}
#actu h1 {font-size: 3rem;font-weight: 700;margin-bottom: 20px;line-height: 1;letter-spacing: -1px;color:#555}
#actu h1 span {color:#9cbd5c}
#actu hr {height: 2px;width: 90px;background-color: #9cbd5c;margin-top:40px;}
#actu .lien {text-align: center;background-color: #9cbd5c;color:#fff;font-weight: 700;padding: 15px 60px;margin-top: 20px;text-transform: uppercase;letter-spacing: -.5px;-webkit-transition: all 0.25s;transition: all 0.25s}
#actu .lien:hover {background-color: #10589a;cursor: pointer}
#actu #lightgallery0 {margin-top: 20px}
#actu .row {position: relative;margin-bottom:60px;padding:50px;border-bottom: 3px solid #9cbd5c ;background: #f8f8f8}
#actu .row:last-child {margin-bottom:30px}
#actu .row .date {position: absolute;top: 0;left: 0;background-color: #9cbd5c;color:#fff;font-weight: 700;font-size: 1rem;padding: 10px;z-index: 66;}
#actu img.img-actu {padding: 12px 0}
#actu .content-actu {padding: 30px 30px;text-align: justify}
#actu .content-actu h2 {color:#444;text-transform: uppercase;font-weight: 700;font-size: 1.5rem;letter-spacing: -.5px;}
#actu .content-actu small {color:#9cbd5c;font-size: 1.3rem;font-weight: 400}
#actu .content-actu p {color:#555;text-align: justify;line-height: 1.8;padding:0;margin-top: 20px}
#actu .content-actu a {color:#f0f0f0;display: block;padding: 20px}
#actu .content-actu ul {list-style-position: outside;}
#actu .content-actu ul li {font-size: 1.2rem;line-height: 2;color:#555}
#actu .content-actu ul li span {font-weight: 300;color: #9cbd5c;font-size: 1.5rem}
#actu .content-actu img.internet {height: 30px;margin-right: 10px}
@media (max-width: 1480px) {
  #actu-titre {padding: 150px 0 0 0}
}
@media (max-width: 1199px) {
  #actu-titre {padding: 100px 0 0 0}
}
@media (max-width: 521px) {
  #actu .row {padding:2%}
}

/*
================================================== CONTACTEZ-NOUS
*/
#contact {background: url(../img/contact/background.jpg) no-repeat center center;background-attachment: fixed;background-size: cover;padding: 0px 0 150px 0;overflow: hidden}
/* Disable parallax on mobile - causes performance issues on iOS */
@media (max-width: 768px) {
  #contact {background-attachment: scroll}
  #competences {background-attachment: scroll}
}
#contact .contact-comp {background: rgba(255,255,255,.8);padding:180px 0px 30px 110px;margin-top: -20px}
#contact img.logo {background-color: #fff;padding: 20px 40px;margin-left: 70px;margin-bottom: 60px}
#contact h1 {font-size: 3rem;font-weight: 700;margin-bottom: 20px;line-height: 1;letter-spacing: -1px;color:#555}
#contact h1 span {color:#9cbd5c}
#contact hr {height: 2px;width: 90px;background-color: #9cbd5c;margin-top:40px;margin-bottom: 40px;margin-left: 0;transition: all 0.25s}
#contact .contact-comp p {color:#555;padding-right:50px;padding-left: 70px;text-align: justify;margin-bottom: 60px;line-height: 2}
#contact p span {font-weight: 300;color: #9cbd5c;font-size: 1.5rem}
#contact .container-fluid {max-width: 1560px}
#contact #sendMessageButton {text-align: center;background-color: #9cbd5c;color:#fff;font-weight: 700;padding: 15px 60px;margin-top: 20px;text-transform: uppercase;letter-spacing: -.5px;-webkit-transition: all 0.25s;transition: all 0.25s}
#contact #sendMessageButton:hover {background-color: #10589a;cursor: pointer}
#contact .formulaire {width :100%;text-align: left;display: inline-block;vertical-align: top}
#contact .formulaire h4 {color:rgba(255,255,255,.9);background: #9cbd5c;display: inline;padding: 20px 35px;margin:0px 0;display: block;border-radius: 10px;font-weight: 700;font-size: 18px}
#contact .formulaire h4 small {font-weight: 300;color: #504242}
#contact .formulaire form {margin-top: 50px}
#contact .formulaire form label {display: block;color:#504242;margin-bottom: -10px;margin-top:20px;font-size: 1rem;margin-left: 0%}
#contact .formulaire form label span {color:#cc3333}
#contact .formulaire form input[type=text] {border: 1px solid #9cbd5c;border-radius: 5px;transition:all .2s;background: rgba(255,255,255,.5);font-size: 1rem;width: 100%;padding:12px;margin-left: 0%}
#contact .formulaire form input[type=text]:focus {border: 1px solid #fff;outline: none;background: rgba(255,255,255,.8)}
#contact .formulaire form textarea {padding: 12px;border: 1px solid #9cbd5c;border-radius: 5px;background: rgba(255,255,255,.5);font-size: 1rem;box-sizing: border-box;max-width: 100%;margin-left: 0%;transition:all .2s;}
#contact .formulaire form textarea:focus {border: 1px solid #fff;background: rgba(255,255,255,.8);outline: none}
#contact .formulaire .button {color: rgba(255,255,255,.9);background: #504242;display: block;width: 100%;border: 1px solid #504242;border-radius: 10px;padding: 20px 40px;font-size: 16px;font-weight:900;text-transform: uppercase;margin-top: 60px;transition:all .2s}
#contact .formulaire .button:hover {color: #9cbd5c;background: #000;cursor: pointer}
#contact .formulaire p {padding:0}
#ajaxResponseFail {display:none;width:100%;padding: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0%;text-align: center;border: 1px solid #cc3333;border-radius: 3px;background: #ffcccc;color:#cc3333}
#ajaxResponseSuccess {display:none;width:100%;padding: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0%;text-align: center;border: 1px solid #669933;border-radius: 3px;background: #ccff99;color:#669933}
#ajaxResponseFail a {color:#cc3333;font-size: 1.1rem}
.map-content {padding: 0px 70px}
#map{height:550px;width:100%}
#contactForm{margin-top:60px}
#contactForm label{color:#9cbd5c;font-size: 1.5rem}
.floating-label-form-group{position:relative;margin-bottom:20px;background: rgba(255,255,255,1);padding: 20px 20px 0 20px}
.floating-label-form-group input,.floating-label-form-group textarea{background-color:#fff;z-index:1;position:relative;padding-right:0;padding-left:10px;border:none;border-radius:0;font-size:1.5em;background:none;-webkit-box-shadow:none !important;box-shadow:none !important;resize:none}
.floating-label-form-group::not(:first-child){padding-left:14px;border-left:1px solid #000}
.floating-label-form-group-with-value label{top:0;opacity:1;color:#333}
.floating-label-form-group-with-focus label{color:#333}
p.help-block.text-danger {padding: 0 !important;margin-bottom: 20px !important}
/* responsive */
@media (max-width: 1480px) {
  #contact h1 {font-size: 2.5rem}
  #contact .contact-comp {padding:150px 0px 30px 110px}
}
@media (max-width: 1199px) {  
  #contact h1 {font-size: 2.5rem}
  #contact .contact-comp {padding:150px 0px 30px 100px}
  #contact .contact-comp p {padding-right:20px;padding-left: 70px} 
  #map{height:500px}
}

@media (max-width: 992px) {
  #contact .contact-comp {padding: 110px 20px}
  #contact .info-contact {text-align: center}
  #contact img.logo {margin-top: 40px;margin-left: 0px}
  #contact .contact-comp p {padding-left: 0px;text-align: center}
}

@media (max-width: 521px) {
  .map-content {padding: 0px 0px}
}
/*
================================================== FOOTER
*/
footer {background: #222;margin:0;padding: 40px 0 80px 0}
footer h3 {color:#9cbd5c;font-weight: 400;font-size: 1.0rem;letter-spacing: .5px;text-transform: uppercase;margin-top: 15px}
footer p {color:#f1f1f1;margin-top: 20px;text-align: justify;padding-right: 20%}
footer p span,footer b {color:#f1f1f1}
footer .foot-1 {margin-top: 40px}
footer .foot-2 {color:#9d9d9d;margin-top: 60px;font-size: 1.2rem;line-height: 2}
footer .foot-2 strong {color:#f0f0f0;text-transform: uppercase;font-weight: 400;letter-spacing: 1px;display: block;font-size: 1.2rem;}
footer .foot-2 hr {background: #9cbd5c;width: 50px;margin:20px 0 55px 0}
.copyright {background-color: #111;text-align: center;padding: 10px 20px 20px 20px;font-size: 1rem;color:#9d9d9d;letter-spacing: 1px}
.copyright .mentions a{color:#f0f0f0}
.copyright .webmaster a {color: #f0f0f0}
footer a {color:#9cbd5c;}
@media (max-width:1366px){
  footer {padding: 40px 20px 80px 20px}
}
@media (max-width:1153px){
  footer {text-align: center}
  footer p {text-align: center;padding: 0%}
  footer .foot-2 hr {margin:20px auto 40px auto}
}

/* ========== SCROLL-TOP ========== */
.scrollToTop,.scrollToTop:focus {color:#fff;font-size: 25px;font-weight: 300;width:50px;height:50px;padding:10px;text-align:center;text-decoration: none;position:fixed;bottom:65px;margin-right:20px;z-index: 999;background-color: #10589a;border-radius: 2px;-webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out;cursor: pointer}
.scrollToTop:hover{text-decoration:none;background-color: #9cbd5c;color:#fff}
.top-on {right:10px;opacity: 1}
.top-off {right:-50px;opacity: 0}

#error {text-align: center;padding: 10% 0 20% 0;background: url(../img/contact/background.jpg)no-repeat center;background-size:cover;}
#error .container {background: rgba(255,255,255,.8);padding: 50px 0}
#error .container h1 {color:#10589a;font-size: 8rem}
#error .container h2 {color:#10589a;font-size: 2rem}
#error .container p {padding-bottom: 50px}
#error .container .link a {background: #9cbd5c;padding: 10px 20px;margin-right: 10px;font-weight: 400;color:#fff;font-size: 1.2rem}