/* 
  Template : ArobasePixel.css v1.0.0
  By : @Pixel
*/

/* BASE */
html,body {height: 100%;font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;}
hr {max-width: 100px;height: 2px;border-top: 1px solid #fff;border-bottom: 1px solid #fff;}
hr.color {border-color:#aaa;}
strong {font-weight: 400}
@media (min-width: 992px) {hr {max-width: 250px;}}
section {padding: 100px 0;}
@media (max-width: 767px) {section {padding: 75px 0;}}
a {color: #008ed4;-webkit-transition: all 0.5s;transition: all 0.5s;}
a:hover, a:focus {color: #c81b10;text-decoration: none;}
p {font-size: 18px;line-height: 1.8;letter-spacing: -.5px;font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 300}
p.lead {font-size: 20px;font-weight: 900;text-transform: uppercase; text-align:center}
h2,h3,h4,h5,h6 {font-weight: 900;text-transform: uppercase;}
@media (min-width: 768px) {
  h2 {font-size: 30px;}
  h3 {font-size: 20px;}
}
.btn {font-weight: 900;padding: 12px 18px;letter-spacing: 1px;text-transform: uppercase;border-radius: 0;}
.btn-primary {border: 1px solid white;background-color: transparent;}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {color: #008ed4 !important;border-color: white !important;background-color: white !important;}
.btn-primary:active, .btn-primary:focus {-webkit-box-shadow: 0 0 0 3px rgba(0, 142, 212, 0.5) !important;box-shadow: 0 0 0 3px rgba(0, 142, 212, 0.5) !important;}
.btn-secondary {border: 1px solid #222;background-color: transparent;color: #222;}
.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {color: white !important;border-color: #008ed4 !important;background-color: #008ed4 !important;}
.btn-secondary:active, .btn-secondary:focus {-webkit-box-shadow: 0 0 0 3px rgba(0, 142, 212, 0.5) !important;box-shadow: 0 0 0 3px rgba(0, 142, 212, 0.5) !important;}
button:hover {cursor: pointer;}
.btn-full-width {font-size: 26px;font-weight: 200;padding: 25px 0;letter-spacing: normal;text-transform: none;color: white;border: 0;border-radius: 0;background-color: #222;}
.btn-full-width:hover {color: white;background-color: #008ed4;}
.btn-full-width:focus {color: white;}
.display-off {display: none;}
.display-on {display: inline;}

/* SCROLL TO TOP */
.scrollToTop,.scrollToTop:focus {width:50px;height:50px;padding:10px;text-align:center;font-weight: bold;color: #fff;text-decoration: none;position:fixed;top:85%;z-index: 999;background-color: #222;border-radius: 2px;font-size: 18px;-webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out;}
.scrollToTop:hover{text-decoration:none;background-color: #222;color:#008ed4 !important;}
.top-on {right:10px;opacity: 1;}
.top-off {right:-50px;opacity: 0;}

/* SEPARATION */
.separation {height:30px; width: 100%; background: url(../img/mask.png) no-repeat top center;margin-top:-30px;}

/* MENU */
#mainNav {background-color: #222;}
#mainNav .navbar-toggler {padding: 15px;color: white;font-size: 14px;text-align: right !important;float:right;}
#mainNav .navbar-toggler:focus, #mainNav .navbar-toggler:hover {color: #222;background-color: white;}
#mainNav .navbar-brand img {height: 40px;}
#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link {padding-top: 15px;padding-bottom: 15px;color: #41C8F7;text-align: center}
#mainNav .navbar-collapse .navbar-nav > .nav-item span {color:#f29d1a;font-size: 13px;font-style: italic;-webkit-transition: all 0.5s;transition: all 0.5s;}
#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link.active,
#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link.active:focus,
#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link.active:hover,
#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link.active span {color: #fff;}
#mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link strong {color: #fff;margin-right: 1px;font-size: 20px}
@media (min-width: 992px) and (max-width: 1200px){
  #mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link {font-size: 12px;}
}
@media (min-width: 992px) {
  #mainNav {height: auto; padding: 15px 0;-webkit-transition: padding-top 0.3s, padding-bottom 0.3s;transition: padding-top 0.3s, padding-bottom 0.3s;background-color: rgba(0,0,0,.25);}
  #mainNav.navbar-shrink {padding: 5px 0;background-color: #222;}
  #mainNav .navbar-brand img {height: 50px;}
  #mainNav .navbar-collapse .navbar-nav > .nav-item {margin-right: 5px;text-align: center;line-height: 20px;margin-top: 10px}
  #mainNav .navbar-collapse .navbar-nav > .nav-item span {color:#f29d1a;font-size: 13px;font-style: italic;-webkit-transition: all 0.5s;transition: all 0.5s;}
  #mainNav .navbar-collapse .navbar-nav > .nav-item:last-child {margin-right: 0;}
  #mainNav .navbar-collapse .navbar-nav > .nav-item > .nav-link {padding: 15px;}
  #mainNav .navbar-collapse .navbar-nav > .nav-item:hover > .nav-link span,
  #mainNav .navbar-collapse .navbar-nav > .nav-item:focus > .nav-link span,
  #mainNav .navbar-collapse .navbar-nav > .nav-item:hover > .nav-link.active,
  #mainNav .navbar-collapse .navbar-nav > .nav-item:focus > .nav-link.active,
  #mainNav .navbar-collapse .navbar-nav > .nav-item:hover > .nav-link,
  #mainNav .navbar-collapse .navbar-nav > .nav-item:focus > .nav-link {color:#fff;}
}

/* HEADER */
header.masthead {position: relative;padding-top: 150px;padding-bottom: 150px;background-color: #222;background-size: cover;background-attachment: scroll;}
header.masthead .masthead-img {max-width: 150px;max-height: 150px;}
header.masthead .masthead-title h1 {font-size: 4rem;line-height: 4rem;font-weight: 900;text-transform: uppercase;letter-spacing: -2.5px;text-shadow: 2px 2px 2px #222}
header.masthead .masthead-subtitle {font-size: 1.5rem;line-height: 1.5rem;color:#fff;letter-spacing: -.5px;text-shadow: 2px 2px 2px #222}
header.masthead .scroll-down {position: absolute;bottom: 20px;width: 100%;text-align: center;}
header.masthead .scroll-down .btn {font-size: 30px;line-height: 50px;width: 50px;height: 50px;padding: 0;letter-spacing: normal;color: white;border: 2px solid white;border-radius: 100% !important;-webkit-transition: all 0.5s;transition: all 0.5s;}
header.masthead .scroll-down .btn:hover {color: rgba(255, 255, 255, 0.5) !important;border-color: rgba(255, 255, 255, 0.5);outline: none;}
header.masthead .scroll-down .btn:focus, header.masthead .scroll-down .btn:active {-webkit-box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important;box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /*
      Votre CSS pour IE versions 10, 11 et Edge
   */
   header.masthead .masthead-img {margin-top: 15%}

}
@media (min-width: 1024px) {
  header.masthead {background-attachment: fixed;}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  header.masthead {background-attachment: scroll;}
}

@media (min-width: 992px) {
  header.masthead {height: 100vh;min-height: 700px;padding-top: 0;padding-bottom: 0;}
  header.masthead .masthead-img {max-width: 250px;max-height: 250px;}
  header.masthead .masthead-title h1 {font-size: 5rem;line-height: 5rem;}
  header.masthead .masthead-subtitle {font-size: 2rem;line-height: 2rem;}
}
.bounce {-moz-animation: bounce 2s infinite;-webkit-animation: bounce 2s infinite;animation: bounce 2s infinite;}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

/* INTRODUCTION */
section#intro {padding: 80px 0 0 0;}
#intro h2 {color:#008ed4;}
#intro h3 {color:#f29d1a;margin-bottom: 40px}
#intro p {text-align: justify;text-align-last: center;padding: 30px 70px 30px 70px}
#intro .items {padding:20px 10px;}
#intro .items:first-child{padding:20px 10px 20px 20px;}
#intro .items:last-child{padding:20px 20px 20px 10px;}
#intro .items .item{background-color:#222;text-align: center;box-shadow: 1px 1px 3px #CFCFCF;padding:25px 0 20px 0;color:#fff;}
#intro .citation {background-color: #f8f9fa;padding:120px 0;margin-top: -60px}
#intro .citation p {text-align: center;text-align-last: center;padding: 0;}
#intro .citation p.lead{color:#f29d1a;}
#intro .citation span {display: inline-block;text-align: left;color:#222;}
#intro .citation span small {color:#008ed4;}
@media (max-width: 992px) {
  #intro p {padding: 30px 0px}
}

/* PLOMBERIE */
#plomberie {background-color:#fff;}
#plomberie h2 {color:#008ed4;}
#plomberie h3 {color:#f29d1a;margin-bottom: 40px}
#plomberie p {text-align: justify;padding: 30px 70px}
@media (max-width: 992px) {
  #plomberie p {padding: 30px 10px}
  #carouselplomberie {margin-top: 100px}
}
@media (max-width: 768px){
  #carouselplomberie {margin-top: 0px;margin-bottom: 50px}
  section#plomberie {padding-top: 50px}
}

/* TUYAUTERIE */
#tuyauterie .quote strong {color:#f29d1a}
#tuyauterie .quote {text-align: justify;text-align-last: center}
#tuyauterie .quote-bg {background-color:#008ed4;padding:20px;color:#fff;}
.call-to-action {padding: 100px 0;text-align: center;color: white;background-color: #222;background-size: cover;background-attachment: scroll;}
.call-to-action span.quote {font-size: 18px;line-height: 1.8;letter-spacing: -.5px;font-weight: 300;display: block;font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
@media (min-width: 1024px) {
  .call-to-action {background-attachment: fixed;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .call-to-action {background-attachment: scroll;}
}
@media (min-width: 768px) {
  .call-to-action {padding: 150px 0;}
  .call-to-action span.quote {font-size: 20px;line-height: 38px;margin-bottom: 20px}
}
@media (min-width: 992px) {
  .call-to-action {padding: 150px 0;}
  .call-to-action span.quote {font-size: 20px;line-height: 2;letter-spacing: -.5px;margin-top: 50px;margin-bottom: 50px}
}
.portfolio-grid .mix {float: left;overflow: hidden;width: 48%;margin: 1%;}
.portfolio-grid .mix .portfolio-wrapper {position: relative !important;overflow: hidden;cursor: pointer;background: #222;}
.portfolio-grid .mix .portfolio-wrapper img {position: relative;max-width: 100%;-webkit-filter: grayscale(0);filter: grayscale(0);-webkit-transition: all 0.5s;transition: all 0.5s;}
.portfolio-grid .mix .portfolio-wrapper img:hover {-webkit-filter: grayscale(1);filter: grayscale(1);}
.portfolio-grid .mix .portfolio-wrapper .caption {position: absolute;bottom: -75px;width: 100%;height: 75px;-webkit-transition: all 0.5s;transition: all 0.5s;}
.portfolio-grid .mix .portfolio-wrapper .caption .caption-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #008ed4;}
.portfolio-grid .mix .portfolio-wrapper .caption .caption-text {position: relative;z-index: 500;padding: 15px 8px;color: white;}
.portfolio-grid .mix .portfolio-wrapper .caption .caption-text a.text-title {color: white;}
.portfolio-grid .mix .portfolio-wrapper .caption .caption-text .text-category {font-size: 12px;display: block;}
.portfolio-grid .mix:hover .portfolio-wrapper .caption {bottom: 0;}
@media (min-width: 768px) {.portfolio-grid .mix {width: 23%;margin: 1%;}}
.mfp-with-zoom .mfp-container,.mfp-with-zoom.mfp-bg {opacity: 0;-webkit-backface-visibility: hidden;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.mfp-with-zoom.mfp-ready .mfp-container {opacity: 1;}
.mfp-with-zoom.mfp-ready.mfp-bg {opacity: 0.8;}
.mfp-with-zoom.mfp-removing .mfp-container,.mfp-with-zoom.mfp-removing.mfp-bg {opacity: 0;}
@media (max-width: 768px){
  .call-to-action span.quote {margin: 30px 0}
}

/* CHAUFFAGE */
#chauffage {background-color:#f8f9fa;}
#chauffage h2 {color:#008ed4;}
#chauffage h3 {color:#f29d1a;margin-bottom: 40px}
#chauffage hr {margin-bottom: 40px}
#chauffage p {text-align: justify;padding: 30px 40px}
#carouselchauffage {margin-top: 20px}
#chauffage .force {background-color: #008ed4;padding:30px 20px;color:#fff;font-weight: 300;margin-top: 20px;font-size: 20px}
@media (max-width: 992px) {
  #chauffage p {padding: 30px 10px}  
}

/* AUDIT */
section#audit {padding: 80px 0 0 0;background-color:#fff;}
#audit h2 {color:#008ed4;}
#audit h3 {color:#f29d1a;margin-bottom: 40px}
#audit p {text-align: justify;padding: 30px 40px;text-align-last: center;}
#audit ul {list-style: none;text-align: left;}
#audit ul li {margin-top: 10px;font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 300;font-size: 20px;letter-spacing: -.5px;}
#audit ul small {color:#f29d1a;margin-right: 5px}
@media (max-width: 992px) {
  #audit ul li {font-size: 16px}
  section#audit {padding:80px 0;} 

}
@media (max-width: 768px) {
  #audit p {padding: 30px 10px !important;}
}

/* MAINTENANCE */
#maintenance .quote-bg {background-color:#008ed4;padding:20px;color:#fff;}
#maintenance .quote strong {color:#f29d1a}
#maintenance .quote {text-align: justify;text-align-last: center}
.portfolio-grid .mix2 {float: left;overflow: hidden;width: 48%;margin: 1%;}
.portfolio-grid .mix2 .portfolio-wrapper {position: relative !important;overflow: hidden;cursor: pointer;background: #222;}
.portfolio-grid .mix2 .portfolio-wrapper img {position: relative;max-width: 100%;-webkit-filter: grayscale(0);filter: grayscale(0);-webkit-transition: all 0.5s;transition: all 0.5s;}
.portfolio-grid .mix2 .portfolio-wrapper img:hover {-webkit-filter: grayscale(1);filter: grayscale(1);}
.portfolio-grid .mix2 .portfolio-wrapper .caption {position: absolute;bottom: -75px;width: 100%;height: 75px;-webkit-transition: all 0.5s;transition: all 0.5s;}
.portfolio-grid .mix2 .portfolio-wrapper .caption .caption-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #008ed4;}
.portfolio-grid .mix2 .portfolio-wrapper .caption .caption-text {position: relative;z-index: 500;padding: 15px 8px;color: white;}
.portfolio-grid .mix2 .portfolio-wrapper .caption .caption-text a.text-title {color: white;}
.portfolio-grid .mix2 .portfolio-wrapper .caption .caption-text .text-category {font-size: 12px;display: block;}
.portfolio-grid .mix2:hover .portfolio-wrapper .caption {bottom: 0;}
@media (min-width: 768px) {.portfolio-grid .mix2 {width: 31%;margin: 1%;}}

/* CONTACT */
section#contact {background-color:#f8f9fa;padding: 80px 0 0 0;}
#contact h2 {color:#008ed4;}
#contact h3 {color:#f29d1a;}
#contact h4 {color:#aaa;margin-bottom: 80px;font-size: 18px}
#contact .form,#contact .info {padding:0 40px;}
#contact .info img {margin-top:80px;}
#contact .contact {background-color: #fff;padding:40px;box-shadow: 0px 0px 1px #eee;font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 300;font-size: 20px;letter-spacing: -.5px;}
#contact .contact small {color:#f29d1a;margin-right: 5px}
.floating-label-form-group {position: relative;margin-bottom: 0;padding-bottom: 0.5em;border-bottom: 1px solid #e1e1e1;}
.floating-label-form-group input,.floating-label-form-group textarea {z-index: 1;position: relative;padding-right: 0;padding-left: 0;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 label {display: block;z-index: 0;position: relative;top: 2em;margin: 0;font-size: 0.85em;line-height: 1.764705882em;vertical-align: middle;vertical-align: baseline;opacity: 0;-webkit-transition: top 0.5s ease,opacity 0.5s ease;transition: top 0.5s ease,opacity 0.5s ease;}
.floating-label-form-group::not(:first-child) {padding-left: 14px;border-left: 1px solid #e1e1e1;}
.floating-label-form-group-with-value label {top: 0;opacity: 1;}
.floating-label-form-group-with-focus label {color: #008ed4;}
form .row:first-child .floating-label-form-group {border-top: 1px solid #e1e1e1;}
#map {height: 500px;position: relative;width: 100%;margin-top:50px}
.maps-frame {height: 500px;width: 100%;}

/* ====== Footer ====== */
footer .bottom {padding: 50px 0;margin-top: 50px}
footer .bottom img {margin-left: 0px}
footer .bottom .widget {display: inline-block;width: 25%;vertical-align: top}
footer .bottom .widget h6 {font-size: 16px;color: #000;font-weight: 600;margin-bottom: 20px}
footer .bottom .widget p {font-size: 13px;letter-spacing: .65px;color: #909090}
footer .bottom .widget a {color: #008ed4;text-decoration: underline}
footer .bottom .widget a:hover {text-decoration: none}
footer .bottom .widget a.item {color: #008ed4}
footer .copyright {text-align: center;font-size: .8rem;background: #333;color: #f1f1f1;padding: 10px 5%;letter-spacing: 1px;line-height: 1.8;}
footer .copyright a {color: #008ed4}
footer .copyright span {color: #008ed4}
@media (max-width:1366px){
   footer .bottom .widget.widget4 a {font-size: 11px}
}
@media (max-width:1023px){
   footer .bottom {padding: 0 0 50px 0;width: 90%;margin:0px auto 0 auto;text-align: center}
   footer .bottom .widget {display: block;width: 100%;margin-top: 50px;}
   footer .bottom img {margin-left: 50px}
   footer .bottom .widget h6 {margin-bottom: 10px}
}

/* ====== MENTIONS LEGALES ====== */
.mentions-legales {background: #151515}
.mentions-legales .container {width: 80%;margin: 0 auto;}
.mentions-legales a.retour {font-size: 1.2rem;color: #008ed4;border: 1px solid #008ed4;opacity: .9;padding: 18px 40px 20px 40px;float:right}
.mentions-legales h1 {color: #008ed4;margin-bottom: 40px}
.mentions-legales p {color: #eee}
.mentions-legales p strong {color: #fff}
.mentions-legales a {color:#008ed4}