/* ### GENERAL ### */
body                       { background:fixed url('img/texture.png') top left;font-family:"Open Sans", Arial, Helvetica, sans-serif; width:100%; }
h1                   	     { font-family: 'Roboto', sans-serif;font-size:36px !important; padding-bottom:20px;}
h2                   	     { font-family: 'Roboto', sans-serif; font-size:24px !important;}
h3                   	     { font-family: 'Roboto', sans-serif; font-size:20px !important; }
h4                         { font-family: 'Roboto', sans-serif;color:#999;font-size:20px !important; }
p                          {font-family: 'Roboto', sans-serif;color:000;font-size:16px !important;}
/* ### HEADER ### */
.navbar-brand { padding: 0px;}
.navbar-inverse {padding-top: 2%;background: #f7f7f7 !important;margin-bottom: 0 !important;}
.navbar-brand>img { height: 100%;padding: 5px; width: auto;}
.example3 .navbar-brand {height: 80px;}
.example3 .nav >li >a { padding-top: 30px; padding-bottom: 30px;}
.example3 .navbar-toggle { padding: 10px;margin: 25px 15px 25px 0;}
.navbar-alignit .navbar-header { -webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d; transform-style: preserve-3d; height: 50px;}
.navbar-alignit .navbar-brand {top: 50%;display: block;position: relative;height: auto;transform: translate(0,-50%);margin-right: 15px; margin-left: 15px;}
.navbar-nav>li>.dropdown-menu {z-index: 9999;}
#logo {width:100%;max-width:75%;height:auto;margin-top: -14px;}
#link {color:#fff; text-decoration:none;}
#link:hover {color:#06204e; text-decoration:none;}
.personna {margin-left:80%;margin-top: -8% !important;width:10% !important;}
#copi {margin-bottom: -10%;font-size: 16px;;}
#logobiz {height:150px;}

/* ### CONTENT ### */
.container-fluid             { max-width:1200px; }

section                      { color:#000;}	
section.slide                { color:#000;background-color:transparent;border-bottom:3px #fff solid;}
section.fonDyn               { background:transparent url('img/background-mecanique.png') top right no-repeat; padding-bottom:200px;}
section.fonDyn div div h1    { margin-top:100px; }
section.fonDyn div div h4    { margin-bottom:100px; }
section.fonDyn ul            { padding-left:0; }
section.fonDyn ul li         { height:80px;color:#111;list-style:none;padding:0px;margin:20px 0;cursor:default; }
section.fonDyn ul li span    { display:inline-block;width:80px;height:80px;background:transparent url('img/fnd-fa.png') top left no-repeat; }
section.fonDyn ul li span    { border-radius:80px;text-align:center;background-size:100% auto; }
section.fonDyn ul li span    { color:#111;font-size:2.6em;line-height:80px;margin-right:20px !important; }

/* ### CONTENU CETRAL ###*/
.row-center {max-width:1200px;text-align:center;margin-left:20%;padding-bottom:20px;}

/* ### ADAPTIVE GRID ### */


/* - Animated "li" */
section.fonDyn ul li:last-child span  { line-height:85px; }

section.fonDyn ul li:hover   { color:#333b46; }
section.fonDyn ul li:hover   { transition:all 1s ease-in 0s; }

section.fonDyn ul li:hover span { color:#333b46;font-size:3em;border-color:#333b46; }
section.fonDyn ul li:hover span { transition:all 0.3s ease-in 0s; }

.titre {z-index:2;font-size:40px;color:#fff;position:absolute; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.slide {z-index:1;text-align: center;position: relative;}

/* ### FOOTER ### */
footer                       { color:#fff;background:#4ba6f7 /*url('img/fndContacts.jpg') top left no-repeat*/;background-size:100% 250px;}
footer #info-contact         { height:300px;}
footer #info-contact h1      { margin-top:7%; }
footer #info-footer          {}

/* - List footer */
footer .container ul         { padding-left:0;padding-bottom:20px;}
footer .container ul li      { min-height:20px;color:#fff;list-style:none;padding:0px;margin:3px 0;cursor:default; }
footer .containerul li span { height:20px;width:25px;color:#fff;list-style:none;padding:5px;margin:0px auto;cursor:default;text-align:center; }
footer .container ul li      { padding-left:0;margin-bottom:0px; }
footer .container ul li img  { height:auto;color:#fff;padding:5px;margin:0 15px 0 0;cursor:default;padding-left:0; }

footer .container ul li span.text-ville { padding-left:18px; }

/* - Social link */
.footer-social               { background:transparent;font-size:30px; padding-right:10px;}
.footer-social  a             { display:inline-block;height:50px;/*width:40px;height:40px;background:#014c7e;border-radius:40px;color:#014c7e; */}
.footer-social  a.twt:hover   { background:#00aced;color:#fff; }
.footer-social  a.fcb:hover   { background:#3b5998;color:#fff; }
.footer-social  a.lin:hover   { background:#1686B0;color:#fff; }
.footer-social  a.goo:hover   { background:#da2713;color:#fff; }
.footer-social  a span        { font-size:1.3em;line-height:40px;    padding-left: 40%;
    padding-top: 30% !important; }
a:hover       { transition: background 1s ease-in 0s; }

/* - CopyRight & Sign */
#copyright             { position:absolute;left:100px;margin-top:10px;font-size:16px; }
#MD                    { position:absolute;right:100px;margin-top:10px;font-size:16px; }
#copy {padding-bottom: 70px;font-size:16px;margin-left: 20%;}
#iframe { width:760px; height:360px;}

/* - Contact Button */
button 					     { background-color:#333b46;border-radius:5px;border:2px #fff solid;padding:10px 40px; }
button:hover 			     { background-color:#7588a1; }
button:hover                 { transition:background-color 1s ease-in 0s;}
.btn { width:150px;height:40px;background:#4ba6f7; color:#fff;}
.btn:hover { width:150px;height:40px;background:#fff; color:#155f9b !important;text-decoration:none;}
.btn1 { width:250px;height:40px;background:#085594 ; color:#fff;border:none;}
.btn1:hover { width:250px;height:40px;background:#fff; color:#155f9b !important;text-decoration:none;}
.btn2 { width:250px;height:40px;background:#4ba6f7; color:#fff;border:none !important;}
.btn2:hover { width:250px;height:40px;background:#fff; color:#155f9b !important;text-decoration:none;border:none !important;}

/* ### MENU ###*/
*,
*::before,
*::after {box-sizing: border-box;-webkit-box-sizing: border-box;}
.menu { height: 60px; background-color:#e6e6e6; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center;-ms-flex-align: center;/* align-items: center;*/overflow: hidden; padding:60px;width:100%;position:fixed;z-index:4;border-bottom:1px solid #2d74ac;}
.menu .logo { max-width: 250px; padding: 0 10px; overflow: hidden;position: relative;margin-top: -0.5%;}
.menu .logo a {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-align: center;-ms-flex-align: center; align-items: center;height: 60px;}
.menu .logo a img {max-width: 100%; max-height: 60px;}
.menu .navbar {display: -webkit-box;display: -ms-flexbox; display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;/*padding: 0 15%;*/margin-left: 50% ;}
.menu .navbar ul {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;list-style: none; margin: 0; padding: 0;}
.menu .navbar ul li a { text-decoration: none; color: #999999; font-size: 14px; text-transform: uppercase;display: block; height: 60px; line-height: 50px; cursor: pointer; padding: 0 10px;border-bottom:3px solid transparent;}
.menu .navbar ul li a:hover { color: #2d74ac; border-bottom:3px solid #2d74ac;}
.menu .navbar ul li a.active { color: #2d74ac; border-bottom:3px solid #2d74ac;}
.menu .navbar ul .close { display: none; text-align: right;padding: 10px;}
.menu .navbar ul .close span { font-size: 40px; display: inline-block; border: 1px solid #cccccc; padding: 0 10px;cursor: pointer;}

/*.menu .navbar .icon-bar {padding: 18px 8px; width: 60px; height: 60px; display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; cursor: pointer;}*/
.menu .navbar .icon-bar {padding: 15px 7px; width: 55px; height: 50px; display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; cursor: pointer;}
.menu .navbar .icon-bar i { background-color: #000; height: 2px;}

/* ### FOOFTER BAND ###*/
.band_footer {border-top: 1px solid #fff;}
.band_footer {background-color: #303438;color: #ffffff;font-size: 14px;}
.band_footer {text-align:center;position: fixed;width: 100%;z-index: 3;height:24px;}


/* ### CONTACT ###*/
input#ContactFormName { width: 100%;height: 40px; padding-left: 20px; padding-right: 20px;}
input#ContactFormEmail { width: 100%;height: 40px; padding-left: 20px; padding-right: 20px;}
input#ContactFormPhone { width: 100%; height: 40px; padding-left: 20px; padding-right: 20px;}
textarea#ContactFormMessage {width: 100%; height: 180px; padding-left: 20px; padding-right: 20px;font-size: 14px;}
.grid__item.medium-up--one-half {text-align: left !important;padding-top:20px;}
input.btn {margin-bottom:40px;width:100%;}
input.btn:hover {margin-bottom:40px;width:100%;background:#2d74ac;color:#fff !important;/*border:1px solid #06204e;*/}
label {color:#1e5c99;font-family: 'Roboto', sans-serif; font-size:15px;font-weight:600;}
form input.text {font-size: 14px;}
/* ### SLIDE ###*/
.contener_slideshow
{
  width:610px;
  height:211px;
  overflow: hidden;
  position: relative;
  background-image: url(http:YOUR-URL-IMAGE.png);
 
}
.slid_1, .slid_2, .slid_3
{
  position: absolute;
  width:610px;
  height:211px;
  padding-left:20px;padding-right:20px;
}
.slid_1{left: 0;}
.slid_2{left: 610px;}
.slid_3{left: 1220px;}
.contener_slide
{
  width: 1220px;
  height: 211px;
  left:0px;
  position: absolute;
  -webkit-animation-duration: 30s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-name: anim_slide;
  -moz-animation-duration: 30s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-name: anim_slide;
  -ms-animation-duration: 30s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-name: anim_slide;
  animation-duration: 30s;
  animation-iteration-count:infinite;
  animation-name: anim_slide;
}
@-webkit-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@-moz-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@-ms-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}

/********* Superposition simple de texte sur une image *******/
/* Conteneur principal */
.overlay-image {
  position: relative;
  width: 100%;
 }
 /* Image originale */
 .overlay-image .image {
  display: block;
  width: 100%;
  height: auto;
 }
 /* Texte original */
 .overlay-image .text {
  color: #fff;
  font-size: 40px;
  line-height: 1.3em;
  /*text-shadow: 2px 2px 2px #000;*/
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
 }

 .overlay-image1 .text {
	color: #fff;
  font-size: 40px;
  line-height: 1.3em;
	line-height: 1em;
	/*text-shadow: 2px 2px 2px #000;*/
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
   }
   .overlay-image1 .text1 {
	color: #fff;
  font-size: 40px;
  line-height: 1.3em;
	line-height: 1em;
	/*text-shadow: 2px 2px 2px #000;*/
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
   }

 .boutoncon {
  color: #fff;
  padding: 12px;
  background-color:#ff1036;
  /*border: solid 1px #ff1036;*/
  line-height:16px;
  text-decoration: none;
  font-size:34px;
  border-radius: 6px;
  text-decoration: none !important;
}
.boutoncon:hover {background-color:#fff;/*border: solid 1px #fff;*/transition: 0s;}
a.boutoncon:hover { color:#000;}
i#ico {color: #fff;}
.boutoncon:hover #ico {color: #ff1036 !important;}

li.serv {min-height: 20px;color: #fff;list-style: none;padding-top: 10px;font-size: 16px;text-align:left;}
li.serv1 {line-height: 1.8 !important;margin: 0;color: #183b6a;font-weight: 500;list-style: none !important;}
i.fas.fa-plus {padding-right:4px;}

/*DEPANNAGE ELECTRIC BLOCK */



 /* TABLE PRO ET PARTICULIER */

 .single-service {border:1px solid #fff;text-align: center;background: #fff;}
 .service-bg {height:200px;position:relative;}
 .service-bg-1 {background: url("./img/pro-1.jpg");-webkit-background-size:cover;background-size:cover;background-position:center ;}
 .service-bg-1 h2 {left: 25%;}
 .service-bg-2 {background: url("./img/part-1.jpg");-webkit-background-size:cover;background-size:cover;background-position:center ;}
 .service-bg-2 h2 {left: 30%;}
 .service-bg h2 {color:#fff;background:#ff1036;border:1px solid #ff1036;font-size:17px;text-align:center;font-weight:700;padding:15px;position:absolute;width:84%:margin:0;bottom:-25px;border-radius:50px;letter-spacing:2px;}
 .single-service:hover .service-bg h2:hover {}
 .service-text {padding:50px 30px 20px 0px;font-size:15px;font-weight:400;background: #fff;color:#183b6a;height: 450px;}
 .service-text p:last-child {margin:0;line-height:1.8;}
 .btn-area {display:inline-block;color:#ff1036;font-size:17px;font-weight:700;margin-top:30px;text-transform: capitalize;margin-left: 60%;border: 1px solid #ff1036;padding: 10px;text-decoration: none;}
 .btn-area:hover {text-decoration: none;border: 1px solid #183b6a; }
 .service-bg h2:hover {color: #ff1036;background: #fff;border: 1px solid #ff1036;}
 input.btn-area-submit {display:inline-block;color:#fff;background:#ff1036;font-size:17px;font-weight:700;margin-top:30px;text-transform: capitalize;border: 1px solid #ff1036;padding: 10px;text-decoration: none;width:100%;}
 input.btn-area-submit:hover {color:#ff1036;background:#fff;}

 /* SLIDE PAGES */
 .text1 {font-weight: 600;font-size: 70px;}
 /* INSTALLATION PAGE */
 .back {background: #fff;}

/* 48em = 768px */

@media (min-width: 48em) {
.header li { float: left; }
.header li a { padding: 30px 30px; }
.header .menu { clear: none;float: right; max-height: none;}
.header .menu-icon {}


}



@media only screen and (max-width: 600px) {
.row-center {text-align:center;margin-left:0% !important;padding-top:20px;padding-bottom:0px !important;}
.row-center {}
.header .menu-icon {position: absolute; padding-top: 80px;padding-left: 50px ;}
#monfooter {text-align:left;padding-left:28%;}
#iframe {width:420px; height:300px;}
.slid_1, .slid_2, .slid_3 { position: absolute; width:360px;; height:auto;padding-left:0px;padding-right:40px;}
.contener_slideshow {width:420px;height:200px;overflow: hidden; position: relative; background-image: url('');}
#copy {margin-left: 0%;}
#copyright {font-size:12px !important;}
#inter {margin-top:0;}
#iframe { width:360px !important; height:360px !important;padding-right:20px;}
.header li a {display: contents;border-right: 1px solid #e6e6e6; text-decoration: none;height: 200px;}
.header li  {padding:20px 20px;display: block;}
.header .logo { padding-top:30px;}
.navbar-inverse { padding-top: 6% !important;}
.menu { z-index: 4;}
#bod {background:transparent !important;}
.personna {display:none;/*margin-top: -0% !important;width:25% !important;*/}
.menu .logo {padding:0 0px;}
h2#inter {margin-top: -3%;}
#copy {margin-bottom: -2%;}
#copi {font-size:16px;}
#logobiz {height:400px;}

}
@media only screen and (max-width: 650px) {
.menu {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; }
.menu .logo {-webkit-box-flex: 1; -ms-flex: 1;flex: 1;}
.menu .navbar { -webkit-box-flex: 0;-ms-flex: 0;flex: 0; }
.menu .navbar ul { -ms-flex-wrap: nowrap; flex-wrap: nowrap; position: fixed; left: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background:#fffffff0; width: 100%; height: 100%; overflow: auto;-webkit-transition: left .3s; -o-transition: left .3s;transition: left .3s;}
.menu .navbar ul li a { padding: 10px; font-size: 16px; height: auto; line-height: normal; color: rgb(153, 153, 153);text-align:center; padding-top: 20px;padding-bottom: 20px; }
.menu .navbar ul li a:hover { background:#e6e6e6 !important;color:#2d74ac;}
.menu .navbar ul li a.active{ background: #2d74ac;color:#fff;}
.menu .navbar ul .close {display: block;}
.menu .navbar .icon-bar {display: -webkit-box;display: -ms-flexbox; display: flex;position: fixed;}
.menu .navbar ._Menus-show {left: 0;}
.text1 {font-size: 40px;padding-top: 40px;}
.service-text {padding:50px 30px 20px 0px;height:auto;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
h2#inter { margin-top: -20%;}
}

 @media (min-width: 768px) {
.menu .navbar { margin-left:10% !important;}
#bod {background:transparent !important;}
.personna {margin-left:80%;margin-top: -7.5% !important;width:15% !important;}
#copy {margin-bottom: -2%;}
#copi {font-size:14px;}
#logobiz {height:200px;}
.text1 {font-size: 40px;padding-top: 40px;}
.service-text {padding:50px 30px 20px 0px;height: 650px;}
 }
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1024px) {
.header .menu-icon {}
h2#inter {margin-top: -2%;}
#logo {}
.menu .navbar { margin-left:30% !important;}
.personna {margin-left:80%;margin-top: -12% !important;width:15% !important;}
#copy {margin-bottom: -2%;}
#copi {font-size:16px;}
.text1 {font-weight: 600;font-size: 70px;}
.service-text { height: 450px;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
h2#inter {margin-top: 2%;}
.menu .navbar { margin-left:40% !important;}
.menu {padding-left:18%;}
.personna {margin-left:80%;margin-top: -8% !important;width:10% !important;}
#copy {margin-bottom: -2%;}
#logobiz {height:150px;}
.text1 {font-weight: 600;font-size: 70px;}
.service-text {padding: 50px 30px 20px 0px;}
}

/* FOOTER NEW */
.main {
	max-height: 550px;;
	background-color:#183b6a;
	color: white;
	font-size: 38pt;
	text-align: center;
	line-height: 550px;
}
footer{
  position: inherit;
	bottom: 0;
}
.footer-distributed{
	background-color: #183b6a;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;
	padding: 55px 50px;
  margin-top: 80px;
  position: inherit;

}
 
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}
 
.footer-distributed .footer-left{
	width: 40%;
}
 
.footer-distributed h3{
	color:  #ffffff;
	font: normal 36px 'Cookie', cursive;
	margin: 0;
}
 
.footer-distributed h3 span{
	color:  #5383d3;
}
 
 
.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
	padding: 0;
}
 
.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}
 
.footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}
 
 
.footer-distributed .footer-center{
	width: 35%;
}
 
.footer-distributed .footer-center i{
	background-color: #ff1036;
	color: #ffffff;
	font-size: 18px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 6px 7px;
	vertical-align: middle;
}
 
.footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}
 
.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
}
 
.footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}
 
.footer-distributed .footer-center p a{
	color:  #5383d3;
	text-decoration: none;;
}
 
.footer-distributed .footer-right{
	width: 20%;
}
 
.footer-distributed .footer-company-about{
	line-height: 20px;
	color:  #92999f;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}
 
.footer-distributed .footer-company-about span{
	display: block;
	color:  #ffffff;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}
 
.footer-distributed .footer-icons{
	margin-top: 25px;
}
 
.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;
 
	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;
 
	margin-right: 3px;
	margin-bottom: 5px;
}
 
 
@media (max-width: 880px) {
 
	.footer-distributed{
		font: bold 14px sans-serif;
	
	}
 
	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}
 
	.footer-distributed .footer-center i{
		margin-left: 0;
	}
	.main {
		line-height: normal;
		font-size: auto;
	}
 
}