/*
 * Script: style.css
 * Author: Charles Lauzon
 * Date:   29 Mars 2019
 */
/* Reset CSS - Default Value */
*{ margin:0; padding:0 }
html, body, div, form, fieldset, ul, ol, table, p, input, textarea, select{ font:normal normal normal 100%/120% Gadget, sans-serif; }
html, body, div{ width:100%; height:100%; color:#000 }
img{ border:0; vertical-align:middle }
a{ color:#fff; text-decoration:none; cursor:pointer }
a[href^="tel"]{ color:inherit; text-decoration:none }
h1{ font-size:24px }
h2{ padding-left:50px; font-size:64px; line-height:200% }
td{ padding:10px }
label{ cursor:pointer }
ul{ list-style:none }
body{ height:100%; background:#fff }
/* Header */
header{ position:relative; top:0px; left:0px; width:100%; min-width:100%; height:auto; max-height:530px; color:#000; background:#221e1b }
#dMenu{ height:auto }
#ulMenu{ display:flex; align-items:center; color:#fff; padding:24px; box-sizing:border-box; width:70%; margin:0 auto }
#ulMenu li{ float:left; width:16.66%; text-align:center; font-weight:bold }
#ulMenu .active a{ color:#0b81cb }
#div_menu_mobile{ float:left; width:100%; padding:20px 20px 0 20px; display:none; box-sizing:border-box }
#div_menu_mobile ul{ display:flex; align-items:center; height:100%; overflow:hidden }
#div_menu_mobile li{ float:left; width:auto; height:100%; color:#fff; font-size:20px; flex-grow:3 }
#div_menu_mobile li:last-child{ float:right; text-align:right }
#div_menu_mobile a{ display:inline-block; width:auto; color:#eee; font-weight:normal; margin:0px; text-decoration:none }
#div_menu_mobile span{ font-size:32px }
#div_menu_box_mobile{ position:fixed; top:0; right:0; transform:translateX(100%); z-index:5 }
#div_menu_box_mobile div:first-child{ float:left; background:#000; width:20%; opacity:0.5 }
#div_menu_box_mobile div+div{ float:left; background:#fff; width:80%; overflow:auto }
.slide-in { animation:slide-in 0.5s forwards; -webkit-animation:slide-in 0.5s forwards }
.slide-out { animation:slide-out 0.5s 1 forwards; -webkit-animation:slide-out 0.5s 1 forwards }
@keyframes slide-in{ 100% { transform: translateX(0%); } }
@-webkit-keyframes slide-in{ 100% { -webkit-transform: translateX(0%); } }
@keyframes slide-out{ 0%{ transform: translateX(0%); } 100%{ transform: translateX(100%); } }
@-webkit-keyframes slide-out{ 0%{ -webkit-transform: translateX(0%); } 100%{ -webkit-transform: translateX(100%); } }
#div_menu_box_mobile ul{ list-style:none; overflow:hidden } 
#div_menu_box_mobile li{ width:100%; height:50px; margin:10px; line-height:50px; box-sizing:border-box }
#div_menu_box_mobile a{ display:block; width:100%; color:#000 }
#div_menu_box_mobile span{ display:inline-block; width:50px; font-size:32px; text-align:center; margin:0 10px; vertical-align:middle }
#div_menu_box_mobile img{ width:32px; height:32px; margin:0 10px; vertical-align:middle }
#div_menu_box_mobile li:first-child:hover ul{ display:block }
#div_menu_box_mobile .active{ height:auto; background:#333; padding:10px 20px }
#div_menu_box_mobile .active a{ color:#fff }
#logo{ width:100%; height:auto; text-align:center }
#logo h1{ position:relative; display:inline-block; width:100%; max-width:550px; font-size:22px }
#logo img{ width:100%; max-width:550px }
#logo span{ font-size:24px; line-height:100%; z-index:1 }
#lang{ position:absolute; right:0; top:0; width:auto; height:auto; font-size:16px }
/* Main */
#ent{ height:auto; font-size:42px; color:#fff; background:#005586; text-align:center; padding:25px; box-sizing:border-box; border-top:2px solid #000; clear:both }
#travaux{ height:auto; font-size:42px; text-align:center; padding:25px; border-top:2px solid #000; box-sizing:border-box; clear:both }
#rbq{ height:auto; font-size:42px; text-align:center; padding:25px; box-sizing:border-box; clear:both }
#social{ height:auto; text-align:center; padding:25px; box-sizing:border-box; clear:both }
#social #FB{ width:50px; display:inline-block }
#social #FB img{ width:100% }
#content{ height:auto; background-size:cover; background-repeat:no-repeat; border-top:2px solid; border-bottom:2px solid }
#mission{ height:auto; background:#221e1b; color:#fff; padding-bottom:50px }
#services{ height:auto; font-size:42px; font-weight:bold; color:#fff; text-align:center; padding:25px 0; box-sizing:border-box; clear:both }
#services_1{ width:80%; height:auto; display:flex; margin:0 auto; padding:20px 0 }
#services_1 > div:first-child{ float:left; width:50%; display:flex; justify-content:center; align-items:center }
#services_1 > div:first-child div{ width:70%; height:auto; text-align:center }
#services_1 > div:first-child img{ width:70% }
#services_1 > div:last-child{ float:left; width:50%; height:auto; min-height:auto; display:flex; justify-content:center; align-items:center; flex-direction:column }
#services_1 > div:last-child div{ width:auto; height:auto; color:#fff; font-size:36px; padding-bottom:15px }
#services_1 > div:last-child div:last-child{ font-size:30px }
#services_2{ width:80%; height:auto; display:flex; margin:0 auto; padding:20px 0 }
#services_2 > div:first-child{ float:left; width:50%; height:auto; min-height:auto; display:flex; justify-content:center; align-items:center; flex-direction:column }
#services_2 > div:first-child div{ width:auto; height:auto; color:#fff; font-size:36px; padding-bottom:15px }
#services_2 > div:first-child div:last-child{ font-size:24px }
#services_2 > div:last-child{ float:left; width:50%; display:flex; justify-content:center; align-items:center }
#services_2 > div:last-child div{ width:70%; height:auto; text-align:center }
#services_2 > div:last-child img{ width:70% }
#services_3{ width:80%; height:auto; display:flex; margin:0 auto; padding:20px 0 }
#services_3 > div:first-child{ float:left; width:50%; display:flex; justify-content:center; align-items:center }
#services_3 > div:first-child div{ width:70%; height:auto; text-align:center }
#services_3 > div:first-child img{ width:70% }
#services_3 > div:last-child{ float:left; width:50%; height:auto; min-height:auto; display:flex; justify-content:center; align-items:center; flex-direction:column }
#services_3 > div:last-child div{ width:auto; height:auto; color:#fff; font-size:36px; padding-bottom:15px }
#services_3 > div:last-child div:last-child{ font-size:30px }
#assu{ height:auto; font-size:42px; text-align:center; padding:30px; color:#fff; background:#005586; border-bottom:2px solid #000; box-sizing:border-box; clear:both }
/* Body */
section{ height:auto !important; margin:0 auto; color:#fff; background:#221e1b; border-top:2px solid #000; border-bottom:2px solid #000 }
#err{ float:left; width:100%; height:25px; font-size:16px; text-align:center; padding-top:10px }
#err span{ color:#f00; font-weight:bold; text-align:center; cursor:default }
#imgE{ width:15px; height:15px; background:url(images/error.png) }
#fSpacer{ float:left; width:100%; height:30px }
/* Footer */
footer{ float:left; position:relative; width:100%; font-size:14px; overflow:hidden; background:#221e1b }
/* Box Contact Us */
#msgFixToBottom{ position:fixed; bottom:0; right:100px; width:180px; height:30px; text-align:center; z-index:4 }
#msgBtn{ -webkit-appearance:none; width:180px; height:30px; font-size:18px; color:#0b81cb; background:#f8fafa; border:2px solid #0b81cb; border-radius:10px 10px 0 0; cursor:pointer }
#msgBtn:hover{ background:#6fbada }
#msglbl{ font-size:1.375em; color:#f20026; line-height:40px; text-align:center; cursor:pointer }
#msgBox{ position:absolute; bottom:0px; right:-18px; width:262px; height:auto; background:#fff; border:3px solid #0b81cb; border-radius:10px 10px 0 0; display:none; padding:10px; z-index:2 }
#msgBox p{ color:#666; font-size:16px; text-align:left; margin:6px }
#msgBox input, #msgBox textarea{ width:240px; height:17px; border:1px solid #000; border-radius:10px; margin:4px 0; padding:8px 4px; color:#000; font-size:12px; text-align:center; font-family:arial; outline:none; vertical-align:bottom }
#msgBox label{ font-size:24px; line-height:24px; cursor:pointer }
#msgBox textarea{ height:100px }
#msgCB{ position:absolute; top:-14px; right:-14px; width:18px; height:18px; color:#0b81cb; border:3px solid #0b81cb; padding:3px; border-radius:10px; font-family:arial; font-size:32px; line-height:14px; background:#eaeeef; cursor:pointer }
#msgCB:hover{ background:#6fbada }
#msgBtnSend{ cursor:pointer }
#msgBtnSend:hover{ background:#6fbada }
#msgLoad{ margin:0 auto; display:none }
#msgLoad p{ text-align:center }
#msgLoad p+p{ font-size:10px; display:none }
/* Message Error */
#dData{ position:fixed; top:0; height:auto; padding:10px 2%; text-align:center; color:#000; cursor:default; z-index:4; display:none }
#dData p{ margin:0 10px }
#dData.anim_hide{ -moz-animation:anim_hide 5s ease-in 5s forwards; -webkit-animation:anim_hide 5s ease-in 5s forwards; -o-animation:anim_hide 5s ease-in 5s forwards; animation:anim_hide 5s ease-in 5s forwards; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; display:block }
.bgGreen{ background:rgba(120,188,232,0.9) }
.bgRed{ background:rgba(255,0,0,0.9) }
@keyframes anim_hide{ to{ top:-1000px } }
@-webkit-keyframes anim_hide{ to{ top:-1000px } }
#copy, #sign{ float:left; width:50%; height:55px; color:#fff; padding:5px 0 40px }
#copy p{ line-height:55px; padding-left:50px }
#sign p{ color:#fff; font-size:14px; line-height:55px; padding-right:50px; text-align:right }
#sign a{ color:#fff }
#sign span{ position:relative; top:6px }
#sign img{ width:100px; height:55px }
#cities{ width:auto; height:auto; color:#fff; padding-bottom:20px; overflow:hidden }
#cities h3{ margin:20px; text-align:center }
#cities ul{ width:40%; margin:0 auto }
#cities li{ float:left; width:30.33%; padding-left:3% }

/* A Propos */
#equipe{ color:#fff; font-size:42px; padding:0 50px; box-sizing:border-box }
#equipe div{ color:#fff; display:flex; align-items:center; margin-bottom:10px }
#equipe img{ width:150px; height:150px; border-radius:150px; margin-right:15px }
#equipe p{ margin:30px 0 }

/* Services */
#dServices{ display:flex; flex-wrap:wrap }
#dServices > div{ width:50%; display:flex; flex-direction:column; align-items:center }
#dServices > div h3{ color:#fff; font-size:42px; line-height:50px; padding-top:20px }
#dServices > div img{ width:80% }
#dServices > div ul{ list-style:square; color:#fff; font-size:30px }
#dServices > div:last-child{ padding-bottom:50px }

/* Photo Galery */
#pg{ text-align:center; padding:0 50px 30px; box-sizing: border-box }
#pg img{ display:inline-block; width:150px; height:150px; border:2px solid #333; box-sizing:border-box; object-fit:cover; margin:2px; cursor:pointer }
#pg img:not([src]):not([srcset]){ visibility:hidden }
#pg img:hover{ border:2px solid #fff }
/* Full Screen Picture Viewer */
.fspv_hide{ display:none }
#fspv{ position:fixed; top:0; left:0; right:0; /*width:850px; max-width:100%;*/ text-align:center; z-index:5; margin:0 auto; background:rgba(0,0,0,0.9); border:50px solid rgba(0,0,0,0.9); border-bottom:150px solid rgba(0,0,0,0.9); background-clip:padding-box; box-sizing:border-box; display:none }
#fspv_img{ background-size:contain; background-position:center; background-repeat:no-repeat }
#fspv_img p{ position:absolute; bottom:0; width:100%; color:#fff }
#fspv_close, #fspv_next, #fspv_prev, #fspv_tlt{ position:absolute; width:32px; height:32px; text-align:center; font-size:34px; line-height:26px; cursor:pointer }
#fspv_close{ top:-41px; right:-41px; color:#f00; z-index:5; padding:0 0 10px 10px }
#fspv_next{ top:50%; bottom:50%; right:-41px; color:#fff; padding:25px 10px }
#fspv_prev{ top:50%; bottom:50%; left:-41px; color:#fff; padding:25px 10px }
#fspv_tlt{ top:-41px; left:0; right:0; margin:0 auto; width:auto; color:#fff; cursor:default }
#fspv_slider{ position:relative; width:100%; height:100px; margin:0 auto; padding-top:10px; font-size:0; text-align:center; overflow:hidden }
#fspv_slider img{ position:relative; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); display:inline-block; width:150px; height:100px; border:2px solid #333; box-sizing:border-box; object-fit:cover; margin-right:4px; cursor:pointer }
#fspv_slider img:first-child{ border:2px solid #fff; cursor:default }
#fspv_slider img:hover{ border:2px solid #fff }

#description{ width:auto; padding:0 50px }

/* Formulaire */
.formulaire{ float:left; width:100%; height:100%; text-align:left }
.row, .rowC{ width:100%; height:24px; text-align:left; line-height:24px; }
.rowS{ width:100%; height:24px; text-align:left }
.row{ width:100%; height:24px; text-align:left }
.row30{ width:100%; height:30px; text-align:left }
.row5{ width:100%; height:120px; text-align:left }
.row6{ width:100%; height:144px; text-align:left }
.rowC{ text-align:center }
.row10px{ width:100%; height:10px; line-height:10px; overflow:hidden }
/* Label */
.lbl_40, .lbl_50, .lbl_60, .lbl_70, .lbl_80, .lbl_100{ float:left; height:24px; color:#09f; line-height:24px; text-align:left; margin-left:4px; }
.lbl_40{ width:40px }
.lbl_50{ width:50px }
.lbl_60{ width:60px }
.lbl_70{ width:70px }
.lbl_80{ width:80px }
.lbl_100{ width:100px }
.lbl_error{ float:left; font:normal normal 10px/100% Arial, Helvetica, sans-serif; color:#f00; padding:8px 0px 0px 3px }
.lbl_error b{ visibility:hidden }
/* Field */
/* Text */
.fld_30, .fld_50, .fld_70, .fld_250, .fld_250b{ float:left; text-align:left }
.fld_30 input, .fld_50 input, .fld_70 input, .fld_130 input, .fld_150 input{ height:24px; background:#000; color:#09f; border:0; padding-left:4px }
.fld_30 input{ width:30px }
.fld_50 input{ width:50px }
.fld_70 input{ width:70px }
.fld_130 input{ width:130px }
.fld_150 input{ width:150px }
.fld_250b input{ width:246px; height:18px; border:1px solid #000; font-size:13px; line-height:18px; padding-left:4px }
/* TextArea */
.fld_250 textarea{ float:left; text-align:left; width:246px; height:130px; font:normal italic 12px/120% Arial, Helvetica, sans-serif; border:1px solid #000; padding:0 0 0 4px; margin:0 }
/* Button */
#btnSoumettre{ width:120px; height:30px; background:url(./images/boutton/btnSoumettre.png); background-position:top left }
#btnSoumettre:hover{ background-position:bottom left }

/* Font Awesome - Icons */
.faI:hover ~ i{ color:#333 }
.faI:focus ~ i{ color:#27aae1 }
.faI:focus{ outline:none }
[class^="input-fa"]{ position:absolute; left:0; top:0; display:inline-block; width:8%; height:40px; border-right:1px solid #ccc; color:#666; text-align:center; line-height:40px; transition:all 0.3s ease-out; pointer-events:none }
[class^="input-fa"]:before{ font-family:FontAwesome; font-weight:normal; font-style:normal; text-decoration:inherit; pointer-events:none }
[class^="span-fa"]:before{ font-family:FontAwesome; }

/* Animation Slide Down */
.slidedown{ -webkit-transition:-webkit-transform .3s ease; -moz-transition:-moz-transform .3s ease; -ms-transition:-ms-transform .3s ease; transition:transform .3s ease }
.slidedown.opened{ -webkit-transform:translate(0, 0%); -moz-transform:translate(0, 0%); -ms-transform:translate(0, 0%); transform:translate(0, 0%) }
.slidedown.closed{ -webkit-transform:translate(0, -100%); -moz-transform:translate(0, -100%); -ms-transform:translate(0, -100%); transform:translate(0, -100%) }

/* Media Query - Dynamic Design POWER!! */
/* Screen Resolution */
/* 1440 x 1280 x 960 x 760 x 720 x 480 */
/*                      >           >  */
/* 3 Modes Design
	1. Desktop = @media screen{ }
	2. Tablet  = @media screen and (max-width:760px){ }
	3. Mobile  = @media screen and (max-width:480px){ }
 */
@media screen{ 
}
@media screen and (max-width:1440px){
header{ }
#dMenu ul{ width:80%; padding:24px 0 }
#logo img{ width:100%; max-width:530px }
#ent{ font-size:38px }
#travaux{ font-size:38px }
#rbq{ font-size:38px }
h2{ font-size:50px }
#assu{ padding:28px; font-size:38px }
/*
#dbloc{ padding:28px }
#dbloc span{ font-size:30px }
#dbloc span:last-child{ font-size:24px }
*/
#services_1, #services_2, #services_3{ width:85% }
#services_1 > div:first-child div, #services_2 > div:last-child div, #services_3 > div:first-child div{ width:85% }
#services_1 > div:last-child div, #services_2 > div:first-child div, #services_3 > div:last-child div{ font-size:26px }
#services_1 > div:last-child div:last-child, #services_2 > div:first-child div:last-child, #services_3 > div:last-child div:last-child{ font-size:24px }
#cities ul{ width:50% }
#equipe{ font-size:38px }
#equipe img{ width:144px; height:144px; border-radius:144px }
#dServices > div h3{ font-size:38px }
#dServices > div ul{ font-size:28px }
}
@media screen and (max-width:1280px){
header{ }
#dMenu ul{ width:100%; padding:24px 0 }
#logo img{ width:100%; max-width:490px }
#ent{ font-size:32px }
#travaux{ font-size:32px }
#rbq{ font-size:32px }
h2{ font-size:44px }
#assu{ padding:24px; font-size:32px }
/*
#dbloc{ padding:24px }
#dbloc span{ font-size:28px }
#dbloc span:last-child{ font-size:22px }
*/
#services_1, #services_2, #services_3{ width:90% }
#services_1 > div:first-child div, #services_2 > div:last-child div, #services_3 > div:first-child div{ width:90% }
#services_1 > div:last-child div, #services_2 > div:first-child div, #services_3 > div:last-child div{ font-size:24px }
#services_1 > div:last-child div:last-child, #services_2 > div:first-child div:last-child, #services_3 > div:last-child div:last-child{ font-size:22px }
#cities ul{ width:60% }
#equipe{ font-size:32px }
#equipe img{ width:132px; height:132px; border-radius:132px }
#dServices > div h3{ font-size:36px }
#dServices > div ul{ font-size:26px }
}
@media screen and (max-width:960px){
header{ }
#logo img{ width:100%; max-width:450px }
#ent{ font-size:30px }
#travaux{ font-size:30px }
#rbq{ font-size:30px }
h2{ font-size:38px }
#assu{ padding:22px; font-size:24px }
/*
#dbloc{ padding:24px }
#dbloc span{ font-size:24px }
#dbloc span:last-child{ font-size:20px }
*/
#services_1, #services_2, #services_3{ width:100% }
#services_1 > div:first-child div, #services_2 > div:last-child div, #services_3 > div:first-child div{ width:100% }
#services_1 > div:last-child div, #services_2 > div:first-child div, #services_3 > div:last-child div{ font-size:22px }
#services_1 > div:last-child div:last-child, #services_2 > div:first-child div:last-child, #services_3 > div:last-child div:last-child{ font-size:20px }
#cities ul{ width:70% }
#equipe{ font-size:24px }
#equipe img{ width:124px; height:124px; border-radius:124px; margin-right:12px }
#dServices > div h3{ font-size:34px }
#dServices > div ul{ font-size:24px }
}
@media screen and (max-width:760px){ /* Tablet */
header{ }
#ulMenu{ display:none }
#div_menu_mobile{ display:block }
#logo img{ width:100%; max-width:410px }
#ent{ font-size:28px }
#travaux{ font-size:26px }
#rbq{ font-size:26px }
#assu{ padding:20px; font-size:22px }
/*
#dbloc{ padding:20px }
#dbloc span{ font-size:22px }
#dbloc span:last-child{ font-size:18px }
*/
#mission{ padding-bottom:15px }
#services{ font-size:28px }
#services_1, #services_2, #services_3{ flex-direction:column; width:90%; padding:10px 0 }
#services_2{ flex-direction:column-reverse }
#services_1 > div:first-child div, #services_2 > div:last-child div, #services_3 > div:first-child div{ width:70% }
#services_1 > div:first-child, #services_1 > div:last-child, #services_2 > div:first-child, #services_2 > div:last-child, #services_3 > div:first-child, #services_3 > div:last-child{ width:100%; padding-bottom:35px }
#services_1 > div:first-child img, #services_2 > div:last-child img, #services_3 > div:first-child img{ width:100% }
#services_1 > div:last-child div, #services_2 > div:first-child div, #services_3 > div:last-child div{ font-size:20px; padding-bottom:0 }
#services_1 > div:last-child div:last-child, #services_2 > div:first-child div:last-child, #services_3 > div:last-child div:last-child{ font-size:18px; padding-top:15px }
#msg{ right:0; width:100%; height:auto; border-radius:0; border:0; border-top:2px solid #000; margin:20px 0 0 0 }
#msgBtn{ display:none }
#msgBox{ position:relative; top:0; left:0; width:auto; border:0; border-radius:0; display:block !important; padding:10px }
#msgCB{ display:none }
#msgFixToBottom{ position:relative; right:0; width:100%; height:auto; /*border-top:2px solid #454344; border-bottom:2px solid #454344*/ }
#cities li{ width:47% }
#copy, #sign{ width:100% }
#copy{ height:30px }
#copy p{ line-height:30px }
#copy, #sign{ padding:10px 0 }
#copy p, #sign p{ padding:0; text-align:center }
h2{ font-size:32px; text-align:center; padding:0 }
#pg img{ width:100px; height:100px }
#fspv{ border:10px solid rgba(0,0,0,0.9); border-bottom:10px solid rgba(0,0,0,0.9) }
#fspv_close, #fspv_next, #fspv_prev, #fspv_tlt{ width:15px; height:20px; font-size:20px; line-height:20px }
#fspv_close{ top:0px; right:0px }
#fspv_next{ right:0px }
#fspv_prev{ left:0px }
#fspv_tlt{ top:-2px; width:auto }
#fspv_img{ height:80% }
#fspv_slider{ height:20% }
#fspv_slider img{ width:75px; height:50px }
#equipe{ font-size:22px; padding:0 10px }
#equipe img{ width:100px; height:100px; border-radius:100px; margin-right:10px }
#equipe p{ margin:15px 0 30px }
#dServices > div{ width:100% }
#dServices > div h3{ font-size:32px }
#dServices > div ul{ font-size:22px }
}
@media screen and (max-width:480px){ /* Mobile */
header{ }
#logo img{ width:100%; max-width:350px }
#ent{ font-size:26px }
#travaux{ font-size:22px }
#rbq{ font-size:22px }
#assu{ padding:18px; font-size:20px }
/*
#dbloc{ padding:18px }
#dbloc span{ font-size:20px }
#dbloc span:last-child{ font-size:16px }
*/
#services{ font-size:24px }
#services_1 > div:first-child, #services_1 > div:last-child, #services_2 > div:first-child, #services_2 > div:last-child, #services_3 > div:first-child, #services_3 > div:last-child{ padding-bottom:15px }
#services_1 > div:last-child div, #services_2 > div:first-child div, #services_3 > div:last-child div{ font-size:18px }
#services_1 > div:last-child div:last-child, #services_2 > div:first-child div:last-child, #services_3 > div:last-child div:last-child{ font-size:16px; padding-top:5px }
#cities ul{ width:100% }
#equipe{ font-size:20px }
#equipe img{ width:70px; height:70px; border-radius:70px; margin-right:5px }
#dServices > div h3{ font-size:30px }
#dServices > div ul{ font-size:20px }
}