/*
 * Author: Charles Lauzon
 * Script: base.css
 * Date:   23 Janvier 2020
 */
 
/* 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% 'Droid Sans' }
html, body, div{ width:100%; height:100%; color:#000 }
img{ border:0; vertical-align:bottom }
a{ color:#333; text-decoration:none; cursor:pointer }
/*h1{ width:845px; font-size:32px; color:#000; margin:0 auto }*/
h1, h2, h3{ line-height:120%; /*text-shadow:4px 4px 10px rgba(150, 150, 150, 1)*/ }
td{ padding:10px }
label{ cursor:pointer }

@font-face{ font-family:'Droid Sans'; src:url('fonts/droidsans-webfont.eot'); src:url('fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/droidsans-webfont.woff') format('woff'), url('fonts/droidsans-webfont.ttf') format('truetype'), url('fonts/droidsans-webfont.svg#droid_sansregular') format('svg'); font-weight:normal; font-style:normal }

/* NEW CSS DESIGN for IE6 Fixed Header and Footer: http://www.pmob.co.uk/temp/fixedlayoutexample5.htm */
/* Header */
header{ position:absolute; top:0px; left:0px; width:100%; height:82px; background:#fff; z-index:6 }
#header{ position:relative; max-width:1280px; margin:0 auto }
#headerCP{ position:absolute; left:0; right:0; max-width:1280px; height:82px; margin:0 auto }
#logo{ position:absolute; top:5px; left:0; width:auto; font-size:18px; color:#860991; cursor:pointer }
#logo img{ height:72px }
#lang{ position:absolute; top:5px; right:0; width:auto; height:20px; color:#fff }
#lang img{ cursor:pointer }
#busi{ position:absolute; top:30px; right:0; color:#78bce8; font-size:24px } /* Header: Terms, Policy & Login */
#slogan{ position:absolute; bottom:4px; right:0; color:#4f4f4f; font-size:16px } /* Header: Terms, Policy & Login */
/* Registration, Login, Lost Password, Reset Password, Registration Done */
.btnRegLog{ float:right; width:160px; height:auto; margin-top:42px; margin-left:10px; color:#860991; border:3px solid #860991; border-radius:5px; text-align:center; padding:5px 0; box-sizing:border-box; cursor:pointer }
.btnRegLog:hover{ font-weight:bold }
.dHeaBox{ position:absolute; top:100%; right:0; max-width:400px; height:auto; display:none }
.dHeaBox > form{ width:auto; background:#fff; padding:10px; border:2px solid #860991; border-radius:5px; box-sizing:border-box }
/* Registration */
#recaptcha{ box-sizing:border-box }
/* Login */
#dLoginBtn{ margin-left:0; margin-right:10px }
#dLogin input[type=text], #dLogin input[type=password]{ padding-left:12% }
#dLogin span{ float:right; color:#27aae1; cursor:pointer }
#dLogin p{ margin-bottom:5px }
/* Lost Password */
#dLostPassword > form > i{ position:absolute; top:0; right:0; width:20px; height:20px; color:#860991; font-size:18px; text-align:center; font-weight:bold; line-height:20px; border:2px solid #860991; border-radius:0 5px; cursor:pointer }
#dLostPassword p{ margin:0 10px 5px 0 }
#dLostPassword input[type=text]{ padding-left:12% }
/* Reset Password */
#dResetPassword{ display:block }
#dResetPassword p{ margin-bottom:5px }
/* Registration Done */
#dRegistrationDone > div{ display:block; width:100%; background:#fff; border:2px solid #860991; padding:10px 2%; border-radius:5px; box-sizing:border-box }
@media screen and (max-width:480px){ /* Mobile */
header{ height:95px }
.btnRegLog{ width:48%; margin:60px 1% 0; border-width:2px }
.dHeaBox{ width:98%; left:0; margin:0 auto }
#dLoginBtn{ margin-right:1% }
}
/* Body */
section{ min-height:100%; height:auto !important; height:100%; margin:0 auto -32px; background:#fff }
#body{ margin:0 auto; padding-top:82px; padding-bottom:100px; overflow:hidden }
#body-inner{ width:1280px; margin:0 auto; padding-top:20px; overflow:hidden } /* Header: Terms, Policy */
#body-inner h1{ margin-bottom:10px } /* Header: Terms, Policy */
/* Array Data for PHP/Javascript System Message/Error */
#dData{ position:absolute; top:0; left:0; /*top:82px;*/ width:96%; height:auto; padding:10px 2%; text-align:center; color:#000; /*white-space:pre;*/ cursor:default; z-index:6; 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(0,255,0,0.9) }*/
.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 } }
#dMain{ background-image:url(/assets/img/9.jpg); background-repeat:no-repeat; background-position:center bottom; background-size:cover; overflow:hidden; padding:120px 0 420px }
#dMain h1{ color:#78bce8; font-size:36px; text-align:center; margin-bottom:10px }
#dMain h2{ font-size:24px; text-align:center }
/* Les Outils */
#dLO{ background:#3e3e3e; height:75px; clear:both }
#dLO > div{ float:left; width:50%; color:#cd9c11; font-size:30px; text-align:center; line-height:75px; cursor:pointer }
#dLO i{ position:relative; top:5px }
#dLOD > div, #dLOEP > div{ position:absolute; left:50px; width:800px; height:auto; text-align:left; border:2px solid #cca030; background:#fff; border-radius:10px; z-index:1; transform:translateY(calc(-100% - 75px)); box-sizing:border-box; display:none }
#dLOEP > div{ left:unset; right:50px }
#dLO > div:hover > div{ display:block }
#dLOD > div > div:first-child{ float:left; width:50% }
#dLOD > div > div:last-child{ float:right; width:50% }
#dLOEP > div > div{ float:left; width:100% }
#dLO ul{ list-style:none }
#dLO ul li:first-child{ color:#860991; font-size:24px }
#dLO ul li{ margin:10px; font-size:20px }
@media screen and (max-width:960px){
#dLO > div{ font-size:24px }
#dLO > div:hover > div{ left:5%; width:90% }
}
@media screen and (max-width:760px){ /* Mobile */
#dLO > div{ width:100%; font-size:20px; height:37.5px; line-height:37.5px }
#dLO i{ top:2px }
#dLO > div:hover > div{ width:98%; left:1%; transform:translateY(calc(-100% - 37.5px)) }
#dLO ul li:first-child{ color:#860991; font-size:20px }
#dLO ul li{ margin:5px 10px; font-size:16px }
}
/* Avantage */
#dA{ float:left; margin-top:80px }
#dA > div{ float:left; width:33.33%; margin:0 auto; text-align:center }
#dA > div:nth-child(4), #dA > div:nth-child(5){ width:50%; padding-top:50px }
#dA i{ display:block; font-size:124px; color:#78bce8 }
#dA p{ display:inline-block; width:auto; text-align:center; padding-top:15px }
@media screen and (max-width:760px){ /* Mobile */
#dA{ margin-top:10px }
#dA > div, #dA > div:nth-child(4), #dA > div:nth-child(5){ width:100%; padding-top:20px }
#dA i{ font-size:76px }
}
/* Entreprise Employ� Programmation */
#dEEP{ float:left; margin-top:80px }
#dEEP > div{ margin:0 auto; background:#fff; clear:both }
#dEEP > div > div{ border-top:2px solid #860991; margin-top:30px }
#dEEP > div > div > div{ position:relative; color:#fff; background:#860991; width:500px; height:50px; line-height:50px; font-size:30px; clear:both }
#dEEP > div ul{ display:flex; flex-flow:row wrap; list-style:none; padding:20px 0; overflow:hidden; clear:both }
#dEEP > div ul li p{ padding-top:10px }
#dEEP > div ul li b{ color:#78bce8; font-size:24px }
#dEEP > div li{ float:left; width:50%; margin:10px 0 }
#dEEP > div li > span:first-child{ float:left; width:100px; height:100px; font-size:72px; color:#333; text-align:center; line-height:100px; margin:0 10px }
#dEEP > div li > span:last-child{ display:flex; width:70%; color:#666; font-size:16px }
.diagoLeft{ float:left; text-align:center; max-width:530px }
.diagoRight{ float:right; text-align:center; max-width:530px }
.diagoRight:before, .diagoLeft:before{ content:''; position:absolute; top:0; width:0 }
.diagoRight:before{ left:-50px; border-bottom:50px solid transparent; border-right:50px solid #860991 }
.diagoLeft:before{ right:-50px; border-bottom:50px solid transparent; border-left:50px solid #860991 }
@media screen and (max-width:1280px){
#dEEP > div > div > div{ height:45px; line-height:45px }
.diagoRight:before{ left:-45px; border-bottom:45px solid transparent; border-right:45px solid #860991 }
.diagoLeft:before{ right:-45px; border-bottom:45px solid transparent; border-left:45px solid #860991 }
#dEEP > div li > span:first-child{  width:90px; height:90px; font-size:64px }
#dEEP > div li > span:last-child{ font-size:16px }
}
@media screen and (max-width:960px){
#dEEP > div > div > div{ height:40px; line-height:40px }
.diagoRight:before{ left:-40px; border-bottom:40px solid transparent; border-right:40px solid #860991 }
.diagoLeft:before{ right:-40px; border-bottom:40px solid transparent; border-left:40px solid #860991 }
#dEEP > div li > span:first-child{  width:80px; height:80px; font-size:56px; margin:0 5px }
#dEEP > div li > span:last-child{ font-size:14px }
}
@media screen and (max-width:760px){ /* Mobile */
#dEEP > div > div > div{ height:35px; line-height:35px }
.diagoRight:before{ left:-35px; border-bottom:35px solid transparent; border-right:35px solid #860991 }
.diagoLeft:before{ right:-35px; border-bottom:35px solid transparent; border-left:35px solid #860991 }
#dEEP > div > div > div{ width:70%; font-size:20px }
#dEEP > div ul li b{ font-size:18px }
#dEEP > div li{ width:100% }
#dEEP > div li > span:first-child{  width:70px; height:70px; font-size:48px; margin:0 5px }
#dEEP > div li > span:last-child{ font-size:12px }
}
/*
#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 }
#left{ float:left; width:100% }
#content{ width:845px; margin:0 auto; padding-bottom:25px; overflow:auto }
#right{ float:left; width:300px; margin-left:-300px; min-height:600px }
*/
/* Footer */
footer{ float:left; width:100%; min-height:32px; background:#c1c1c1; color:#000; z-index:999 }
#footer{ position:relative; max-width:1280px; margin:0 auto }
#initial{ position:absolute; top:-68px; right:1%; color:#c1c1c1; font-family:arial; font-size:82px; line-height:82px; letter-spacing:-5px; cursor:default }
#copyright{ position:absolute; top:0; right:0; color:#333; font-size:12px; line-height:30px; /*font-family:'Droid Sans';*/ text-align:right; padding:0 5px; cursor:default }
#sitemap{ float:left; width:75%; color:#333; font-size:12px; line-height:30px }
#sitemap a{ color:#333; padding:0 5px }
#sitemap a:hover{ color:#78bce8 }

.inner{ /*position:relative;*/ width:1280px; margin:0 auto } 
/* jcrois que c pu vrai (2015-05-07) si je met position:relative le mouse over des items marche plus */

/* Index */
#indTitle{ color:#78bce8; margin:0 auto 10px; text-shadow:none; font-size:36px; line-height:120%; text-align:center; margin:80px auto }
#indBeta{ color:#f00; font-size:30px; line-height:120%; text-align:center; margin:20px auto 30px }

/* Box Contact Us */
#msgFixToBottom{ position:fixed; bottom:5px; right:5%; width:auto; height:auto; text-align:center; z-index:4 }
#msgIcon{ width:auto; height:auto; font-size:36px; color:#860991; background:#fff; padding:10px; border:2px solid #860991; border-radius:50px; cursor:pointer }
#msgBox{ position:absolute; bottom:0px; right:-18px; width:262px; height:auto; background:#fff; border:3px solid #860991; border-radius:10px 10px 0 0; display:none; padding:10px; z-index:2 }
#msgBox p{ color:#666; font-size:16px; text-align:center; margin:6px }
#msgBox input, #msgBox textarea{ width:100%; border:1px solid #333; border-radius:10px; margin:4px 0; padding:8px 4px; text-align:center; outline:none; box-sizing:border-box }
#msgBox textarea{ height:100px; vertical-align:top }
#msgCB{ position:absolute; top:-14px; right:-14px; width:18px; height:18px; color:#860991; border:3px solid #860991; padding:3px; border-radius:10px; font-family:arial; font-size:32px; line-height:14px; background:#fff }
#msgCB:hover{ background:#6fbada; cursor:pointer }
#msgBtnSend:hover{ background:#6fbada; cursor:pointer }
#msgLoad{ margin:0 auto; display:none }
#msgLoad p{ text-align:center }
#msgLoad p+p{ font-size:10px; display:none }

/* Line = un DIV qui a les fields: span & text/combobox.. */
.line{ position:relative; height:auto; margin-bottom:5px; overflow:hidden }
.line:last-child{ margin:0 }
.line span{ display:inline-block; width:40%; vertical-align:middle }
.line input[type=text], .line select, .line input[type=button], .line input[type=password], .line input[type=date], .line input[type=time], .line textarea{ width:60%; height:40px; border:2px solid #333; /*border-radius:5px;*/ padding-left:5px; box-sizing:border-box; outline:none }
.line select{ padding-left:2px }
.line input[type=button]{ padding-left:0 }
.line textarea{ padding:5px }
.borderRed{ border:2px solid #f00 !important }
.center{ text-align:center }
.lineFull{ position:relative; height:auto; margin-bottom:5px; overflow:hidden }
.lineFull:last-child{ margin:0 }
.lineFull input[type=text], .lineFull select, .lineFull input[type=button], .lineFull input[type=password], .lineFull input[type=date], .lineFull input[type=time], .lineFull input[type=datetime-local], .lineFull textarea{ width:100%; height:40px; border:2px solid #333; /*border-radius:5px;*/ padding-left:5px; box-sizing:border-box; outline:none }
.lineFull select{ padding-left:2px }
.lineFull input[type=button]{ padding-left:0 }
.lineFull input[type=date], .lineFull input[type=time]{ font-size:16px }
.lineFull textarea{ padding:5px }
.lineFC{ position:relative; height:auto; text-align:center; margin-bottom:5px; overflow:hidden }
.lineFC input[type=text], .lineFC select, .lineFC input[type=button], .lineFC input[type=password], .lineFC input[type=date], .lineFC input[type=time], .lineFC textarea{ width:100%; height:40px; border:2px solid #333; /*border-radius:5px;*/ padding-left:5px; box-sizing:border-box; outline:none }
.lineFC input[type=button]{ padding-left:0 }
.lineFC span{ width:100% }
@media screen and (max-width:760px){
.lineFC input[type=text], .lineFC select, .lineFC input[type=button], .lineFC input[type=password], .lineFC input[type=date], .lineFC input[type=time], .lineFC textarea{ height:30px }
}

input[type=text], input[type=button], input[type=password], .line input[type=date], .line input[type=time], select, textarea{ font-size:0.889em }
input[type=button]{ cursor:pointer }

/* Error */
/* Border Color of the Field can be a TextField or a ComboBox */
.fldErr{ color:#f00 !important; border-color:#f00 !important }
/* Message under field */
.lblErr{ display:none; color:#f00; line-height:24px; font-weight:normal }
.lbl_error{ float:left; width:100%; text-align:center; color:#f00 }

/* 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 #333; 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; } 

/* Loading Box */
.dLoading{ position:fixed; top:0; left:0; height:100%; width:100%; background:rgba(0, 0, 0, .8) url('../img/ajax-loader.gif') 50% 50% no-repeat; z-index:1000; display:none }
/* When the body has the loading class, we turn the scrollbar off with overflow:hidden */
body.loading{ overflow:hidden }
/* Anytime the body has the loading class, our modal element will be visible */
body.loading .dLoading{ display:block }

/* Truc que jai ajouter pour obtenir le "jquery.mobile-1.4.2.min.css" correctement comme je veux */
.ui-loader-default{ background:#fff !important; filter:Alpha(Opacity=100) !important; opacity:100 !important}

/* Tite Animation pour Grossir la Box et ensuite la faire Disparetre! */
.animScaleRemove{ -webkit-animation:cssAnimationScaleRemove 1s 1 linear; -moz-animation:cssAnimationScaleRemove 1s 1 linear; -o-animation:cssAnimationScaleRemove 1s 1 linear }
@-webkit-keyframes cssAnimationScaleRemove{ 
from{ -webkit-transform:scale(1) }
to{ -webkit-transform:scale(0.5) }
}
@-moz-keyframes cssAnimationScaleRemove{
from{ -moz-transform:scale(1) }
to{ -moz-transform:scale(0.5) }
}
@-o-keyframes cssAnimationScaleRemove{
from{ -o-transform:scale(1) }
to{ -o-transform:scale(0.5) }
}

/* Floating Box */
#dShadow, #floatB{ position:fixed; top:0; left:0; width:100%; height:100%; visibility:hidden }
#dShadow{ filter:alpha(opacity=50); opacity:0.5; background-color:#3f351d; z-index:5 }
#floatB{ z-index:6 }
.fbBox{ position:fixed; max-width:520px; width:85%; height:auto; margin:auto; background:#fff; border:10px solid #398fcc; border-radius:10px; box-sizing:border-box; display:none; left:50%; top:50%; transform:translate(-50%, -50%); z-index:6 }
.fbClose{ position:absolute; top:-22px; right:-22px; width:34px; height:34px; color:#f00; text-align:center; font-size:26px; line-height:34px; background:#398fcc; border-radius:50px; cursor:pointer; z-index:5 }
.fbBox form{ position:relative }
.fbBox p{ margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #398fcc; font-size:18px; text-align:center }
.fbContent{ width:auto; height:auto; max-height:500px; position:relative; padding:20px; overflow:auto }
.fbLoad{ width:auto; text-align:center; padding:20px; display:none }
.fbLoad p+p{ font-size:10px; display:none }

#fbConditions, #fbTerms{ max-width:800px }
#fbConditions h2, #fbTerms h2{ padding-bottom:20px }

@media screen and (max-width:760px){
#dData{ top:0; z-index:6; padding:18px 2% }
.fbBox{ max-width:98%; width:98%; height:auto; margin:auto; background:#fff; border:5px solid #398fcc; border-radius:10px; box-sizing:border-box; display:none }
.fbClose{ top:-5px; right:-5px; width:22px; height:22px; font-size:14px; line-height:22px; border-radius:0 10px 0 10px }
.fbBox p{ font-size:14px }
.fbContent{ padding:10px; max-height:400px }
}
		
/* 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:1280px){
#dMain h1{ font-size:34px }
#dMain h2{ font-size:22px }
}
@media screen and (max-width:960px){
#dMain h1{ font-size:32px }
#dMain h2{ font-size:20px }
}
@media screen and (max-width:760px){ /* Tablet */
#body-inner{ width:100% }
#dMain h1{ font-size:30px }
#dMain h2{ font-size:18px }
#msgFixToBottom{ right:5px }
#msg{ right:0; width:100%; height:auto; border-radius:0; border:0; border-top:2px solid #454344; margin:20px 0 0 0 }
#msgBox{ display:none; right:0px }
#msgBox p{ font-size:14px }
#msgCB{ top:-17px; right:-6px }
}
@media screen and (max-width:480px){ /* Mobile */
#logo{ font-size:16px; left:2% }
#logo img{ height:36px }
#lang{ top:18px; right:5px }
#body{ padding-top:95px }
#dMain{ padding:70px 0 350px }
#dMain h1{ font-size:28px }
#dMain h2{ font-size:16px }
#headerCP{ position:absolute; height:55px; max-width:1280px; margin:0 auto }
#headerCP #logo img{ height:50px }
#busi{ top:12px; font-size:16px }
#slogan{ bottom:-1px; font-size:12px }
#body-inner{ margin-top:-35px }
#footer{ width:100% }
#initial{ float:left; right:0; width:100%; text-align:center }
#copyright{ position:relative; float:left; right:0; width:100%; text-align:center; padding:0 }
#sitemap{ padding-left:0; float:left; width:100%; color:#fff; line-height:30px; text-align:center }
}