/*
 * Script: style.css
 * Author: Charles Lauzon
 * Date:   30 Mars 2015
 */
 
/* Reset CSS - Default Value */
*{ margin:0; padding:0 }
html, body, div, form, fieldset, ul, ol, table, p, input, textarea, select{ font:normal normal normal 22px/120% 'Arial', "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif }
html, body, div{ width:100%; height:100%; color:#000 }
img{ border:0; vertical-align:bottom }
a{ color:#333; text-decoration:none; cursor:pointer }
h1{ font-size:325% }
h1, h2, h3{ /*text-shadow:4px 4px 10px rgba(150, 150, 150, 1)*/ }
td{ padding:10px }
label{ cursor:pointer }
body{ height:100%; background:#fff }
@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 }
@font-face{ font-family:'KIONA'; src:url('fonts/Kiona-Regular.ttf') }

/* Header */
header{ position:absolute; top:0px; left:0px; width:100%; min-width:100%; height:105px; color:#fff; z-index:1 }
/* Menu */
#menu{ margin-top:2% }
#menu ul{ display:flex; justify-content:end; list-style:none }
#menu ul li{ float:left; margin:2% 2.5% }
#menu ul li a{ color:#fff }
#menu ul li a:hover{ color:#bada55 }
#menu ul li a.active{ text-decoration:underline }
#menu_mobile span{ position:absolute; right:2%; top:5px; font-size:36px; color:#fff; display:none }
#div_menu_box_mobile{ position:fixed; top:0; right:0; transform:translateX(100%); background:rgb(29, 39, 47); z-index:10 }
#btnMenuMobileClose{ position:absolute; right:2%; top:5px; font-size:36px; color:#fff }
#div_menu_box_mobile ul{ list-style:none; font-size:24px; text-align:center; line-height:200%; padding-top:70px }
#div_menu_box_mobile ul li a{ color:#fff }
.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%); }
}


/* new */
#new_bg{ position:fixed; width:100%; height:100%; background:url(/assets/img/bg_new_people.webp); background-position:center; background-size:cover }

#new_logo{ position:relative; width:auto; height:auto; padding:2% 0 0 2.5% }
#new_logo img{ width:20% }

#new_slogan{ position:relative; width:auto; height:auto; margin:15% 0 0 2.5%; color:#fff; font-size:28px }

#new_section{ position:relative; height:auto; background:url(/assets/img/bg_transparent.webp); background-size:cover; margin-top:30% }
#new_apropos{ height:auto; text-align:center; padding-top:12% }
#new_apropos h2{ color:rgb(14, 47, 71); font-size:28px; font-weight:400; letter-spacing:0.2em; line-height:normal }
#new_apropos_text{ width:25%; height:auto; padding-top:2%; font-size:16px; text-align:center; margin:0 auto }
#new_apropos_text p{ color:rgb(14, 47, 71); font-family:Arial Black; font-weight:700; font-size:16px; line-height:1.6em }

#new_links{ height:auto; text-align:center; margin-top:3%; font-size:32px }
#new_links a:nth-of-type(1){ padding-right:20px }

#new_merch_tlt{ height:auto; text-align:center; margin-top:10% }
#new_merch_tlt p{ color:rgb(41, 41, 41); font-size:28px; letter-spacing:0.03em; font-family:Times New Roman }
#new_merch_pic{ height:auto; text-align:center; margin-top:1% }
#new_merch_pic img:nth-of-type(1){ position:relative; top:35px; left:40px; transform:rotate(-15deg) }
#new_merch_pic img:nth-of-type(2){ position:relative; z-index:1 }
#new_merch_pic img:nth-of-type(3){ position:relative; top:35px; right:40px; transform:rotate(15deg) }

#new_job2004_tlt{ height:auto; text-align:center; margin-top:12% }
#new_job2004_tlt p{ color:rgb(41, 41, 41); font-size:28px; letter-spacing:0.03em; font-family:Times New Roman }
#new_job2004_pic{ height:auto; text-align:center; margin-top:3% }
#new_job2004_pic div{ position:relative; display:inline-block; height:auto; width:auto }
#new_job2004_pic img{ position:relative; width:100% }
#new_job2004_pic div:nth-of-type(1){ top:12px; left:20px }
#new_job2004_pic div:after{ content:""; position:absolute; width:100%; height:26px; bottom:-26px; left:0; background:url(/assets/img/job2004_bottom.png) no-repeat; background-size:100% auto }
#new_job2004_pic div:nth-of-type(2){ transform:rotate(-15deg); z-index:1 }
#new_job2004_pic div:nth-of-type(2) img{ z-index:1 }
#new_job2004_pic div:nth-of-type(3){ top:12px; right:20px }


#new_impression3d_tlt{ height:auto; text-align:center; margin-top:10% }
#new_impression3d_tlt p{ color:rgb(41, 41, 41); font-size:28px; letter-spacing:0.03em; font-family:Times New Roman }
#new_impression3d_pic{ position:relative; display:flex; justify-content:center; height:auto; text-align:center; margin-top:1% }
#new_impression3d_pic div{ position:relative; width:auto }
#new_impression3d_pic img{ border:5px solid #000; box-sizing:border-box }
#new_impression3d_pic span{ position:absolute; bottom:4%; left:4%; color:#cfc73e; text-align:left }




#website{ float:left; width:50%; font-family:"KIONA" }
#website h1{ position:absolute; left:25px; bottom:30px }
#website a{ line-height:30px; color:#fff }
#logo{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:200px; height:200px; border:5px solid #000; background-image:url(/assets/img/piscinekraken_logo.png); background-size:400px 330px; background-position:-96px -80px; background-color:#fff; z-index:1 }
/*
#menu{ float:right; width:50%; position:relative; background:#000 }
#menu span{ position:absolute; right:25px; bottom:15px; color:#fff; font-size:42px; line-height:52px; cursor:pointer }
nav{ position:absolute; top:105px; right:0; width:20%; z-index:-1 }
nav ul{ list-style:none; background:#000 }
nav li{ font-family:"KIONA"; text-align:center; font-size:150%; line-height:300% }
nav a{ color:#fff; text-decoration:none }
*/
/*
#logo{ float:left; width:25%; background:#fbfcfd }
#logo h1{ padding:25px 0 0 50px }
#logo a{ line-height:30px }
#logo span{ color:#e76f1f }
#logo b{ color:#e76f1f; font-size:32px; padding-left:20px }
#lang{ position:absolute; right:0; width:100%; height:30px; font-size:16px; text-align:right }
#lang a{ position:absolute; top:5px; right:0; padding-right:50px; display:inline-block; color:#4c4c4c }
#lang a:hover{ color:#e76f1f }
#lang p{ }
#lang p+p{ display:none }
*/
#ulMenu{ width:100%; list-style:none; display:block }
#ulMenu li{ float:left; width:22%; font-size:32px; line-height:80%; text-align:center; padding-top:40px }
#ulMenu li:nth-child(3){ width:34% }
#ulMenu li a{ color:#4c4c4c }
#ulMenu li a:hover{ color:#e76f1f }
#ulMenu li:nth-child(2):hover ul{ display:block }
#ulMenu li ul{ position:absolute; left:-5px; list-style:none; background:#e4e4e4; z-index:3; display:none }
#ulMenu li ul li{ float:none; padding:10px }
#cboMenu{ width:50%; color:#000; margin:10px auto; font-size:24px; border:2px solid #666; border-radius:10px; display:none }
#tel{ float:right; width:25%; background:#fbfcfd }
#tel p{ padding:20px 20px 0 0; font-size:54px; text-align:right; cursor:default }

/* Body */
section{ height:auto !important; margin:0 auto/*; border-top:2px solid #000*/ }
/* 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(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 } }

#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 }
#image{ width:100%; height:840px; background-image:url(/assets/img/bg1.jpg); background-size:cover; background-position:center }

/* Footer */
footer{ float:left; position:relative; width:100%; height:auto; color:#000; background:#fff; font-size:14px; overflow:hidden }
/* Box Contact Us */
#msgFixToBottom{ position:fixed; bottom:5px; right:2.5%; width:auto; height:auto; text-align:center; z-index:4 }
#msgIcon{ width:auto; height:auto; font-size:36px; color:#8a0383; background:#fff; padding:10px; border:2px solid #8a0383; border-radius:50px; cursor:pointer }
#msgIcon:hover{ background:#78bce8 }
#msglbl{ /*display:block;*/ font-size:1.375em; color:#545454; line-height:40px; text-align:center; cursor:pointer }
#msgBox{ position:absolute; bottom:0px; right:-18px; /*top:-358px; left:-19px;*/ width:262px; height:auto; background:#fff; border:3px solid #8a0383; border-radius:10px 10px 0 0; /*border-radius:10px;*/ 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:18px; text-align:center; font-family:arial; outline:none }
#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:#8a0383; border:3px solid #8a0383; padding:3px; border-radius:10px; font-family:arial; font-size:32px; line-height:14px; background:#fff; 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 }

/* new */
#offres{ text-align:center; padding:2% 2% 0%; box-sizing:border-box }
#offres span{ font-family:Arial Black; color:#292929; font-size:15px; letter-spacing:0.02em; font-weight:bold }
#sign{ bottom:5px }
#copyright{ text-align:center; padding:1% 0 5px }
#copyright span{ font-family:Arial Black; color:#292929; font-size:15px; letter-spacing:0.02em; font-weight:bold }
@media screen and (max-width:760px){ /* Tablet */
#offres{ padding:10% 2% 2% }
#sign{ position:relative; text-align:center; transform:unset; left:unset; bottom:unset }
#copyright{ padding:2% 0 }
}


/* Contact Info */
#jc{ width:100%; height:auto; color:#fff; padding:20px 0 }
#jc div:first-child{ width:30%; text-align:left }
#jc div{ float:left; width:16%; height:99px; text-align:center }
#jc p{ width:auto; font-size:24px; padding-left:50px }
#follow{ width:auto; list-style:none; padding:10px 0 0 50px }
#follow li{ float:left; position:relative; margin:0; padding:0 5px 0 0; color:#666; font-size:1.250em; line-height:30px }
#follow img{ cursor:pointer }
#sitemap{ float:left; width:100%; height:50px; color:#fff; background:#333 }
#sitemap ul{ height:100%; padding-top:14px; padding-left:50px; list-style:none; font-weight:bold; display:block }
#sitemap li{ float:left; position:relative; margin:0; color:#fff }
#sitemap li a{ float:left; padding-right:5px; color:#fff; display:block }
#sitemap li a:hover{ color:#e76f1f }
#sitemap b{ padding-right:5px }

#copy{ position:absolute; left:50%; transform:translate(-50%, 0); bottom:0; width:auto; height:auto; color:#000; font-size:14px; line-height:30px; cursor:default }
#sign{ position:absolute; left:2.5%; bottom:0; width:auto; height:auto }
#sign img{ width:100px; height:55px }

/* 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 }
/* Line Full */
.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 }
/* Line Full Center */
.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:60%; 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% }
/* Line Full Icon */
.lineFI{ position:relative; height:auto; margin-bottom:5px; overflow:hidden }
.lineFI:last-child{ margin:0 }
.lineFI input[type=text], .lineFI select, .lineFI input[type=button], .lineFI input[type=password], .lineFI input[type=date], .lineFI input[type=time], .lineFI input[type=datetime-local], .lineFI textarea, .lineFI label{ width:100%; height:40px; line-height:40px; border:1px solid #fff; border-radius:5px; padding-left:10%; box-sizing:border-box }
.lineFI input[type=button]{ padding:0 }
.lineFI textarea{ padding:10px 0 10px 10%; line-height:20px; vertical-align:top; resize:none }
.lineFI input[type=file]{ position:absolute; left:-99999rem }
.lineFI label{ display:inline-block; color:#999; background:#fff; text-align:left }
.lineFI input[type=text]:placeholder{ color:#f00 }
.lineFI input[type=text]:hover ~ i, .lineFI select:hover ~ i, .lineFI input[type=password]:hover ~ i, .lineFI textarea:hover ~ i{ color:#333 }
.lineFI input[type=text]:focus ~ i, .lineFI select:focus ~ i, .lineFI input[type=password]:focus ~ i, .lineFI textarea:focus ~ i{ color:#27aae1 }
.lineFI input[type=text]:focus, .lineFI select:focus, .lineFI input[type=password]:focus, .lineFI textarea:focus{ outline:none }
.lineFI input[type=text]::-moz-placeholder, .lineFI textarea::-moz-placeholder{ color:#999; opacity:1 }
.lineFI input[type=text]:-ms-input-placeholder, .lineFI textarea:-ms-input-placeholder{ color:#999 }
.lineFI input[type=text]::-webkit-input-placeholder, .lineFI textarea::-webkit-input-placeholder{ color:#999 }

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

/* 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){
html, body, div, form, fieldset, ul, ol, table, p, input, textarea, select{ font-size:20px }
header{ height:95px }
#website h1{ font-size:280% }
#logo{ width:175px; height:175px; background-size:395px 315px; background-position:-108px -84px }
#menu span{ font-size:200% }
nav{ top:95px }
#image{ height:715px }
}
@media screen and (max-width:1280px){
html, body, div, form, fieldset, ul, ol, table, p, input, textarea, select{ font-size:18px }
header{ height:85px }
#website h1{ left:20px; bottom:20px; font-size:250% }
#logo{ width:150px; height:150px; background-size:340px 260px; background-position:-94px -66px }
#menu span{ right:20px; bottom:15px }
nav{ top:85px; width:25% }
#image{ height:675px }
}
@media screen and (max-width:960px){
html, body, div, form, fieldset, ul, ol, table, p, input, textarea, select{ font-size:16px }
header{ height:75px }
#website h1{ left:15px; bottom:15px; font-size:220% }
#logo{ width:130px; height:130px; background-size:290px 220px; background-position:-78px -54px }
#menu span{ right:15px; bottom:10px }
nav{ top:75px; width:30% }
#image{ height:640px }
/* new */
#menu{ display:none }
#menu_mobile span{ display:block }
}
@media screen and (max-width:760px){ /* Tablet */
html, body, div, form, fieldset, ul, ol, table, p, input, textarea, select{ font-size:14px }
header{ height:50px }
#website h1{ width:36%; left:5px; bottom:10px; font-size:130% }
#logo{ width:70px; height:70px; background-size:150px 120px; background-position:-39px -31px }
#menu span{ right:5px; bottom:5px; line-height:40px }
nav{ top:50px; width:30% }
#image{ height:573px; background-position:-50px 0 }
.bg1{ background-position:-50px 0 !important }
.bg2{ background-position:center !important }
/*footer{ height:75px }*/
#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 }

#offres{ padding:10% 2% 2% }
#sign{ position:relative; text-align:center; transform:unset; left:unset; bottom:unset }
#copyright{ padding:2% 0 }

/* new */
#new_logo img{ width:60% }

#new_slogan{ margin:95% 0 0 2.5% }

#new_section{ margin-top:0 }

#new_apropos{ width:80%; margin:0 auto; padding-top:106% }
#new_apropos h2{ font-size:24px }
#new_apropos_text{ width:100%; font-size:15px }

#new_links{ margin-top:5% }

#new_merch_tlt{ margin-top:20% }
#new_merch_tlt p{ font-size:20px }
#new_merch_pic img{ width:65% }
#new_merch_pic img:nth-of-type(1){ left:unset }
#new_merch_pic img:nth-of-type(2){ top:35px }
#new_merch_pic img:nth-of-type(3){ right:unset }

#new_job2004_tlt{ margin-top:45% }
#new_job2004_tlt p{ font-size:20px }
#new_job2004_pic div{ width:70% }
#new_job2004_pic div:nth-of-type(1){ top:0; left:0 }
#new_job2004_pic div:nth-of-type(2){ width:80% }
#new_job2004_pic div:nth-of-type(3){ top:0; left:0 }
/*#new_job2004_pic div:nth-of-type(1) img{ left:unset }
#new_job2004_pic div:nth-of-type(2) img{ width:80% }
#new_job2004_pic div:nth-of-type(3) img{ right:unset }*/

#new_impression3d_tlt{ margin-top:30% }
#new_impression3d_tlt p{ font-size:20px }
#new_impression3d_pic img{ width:90% }
#new_impression3d_pic span{ left:8% }
}
@media screen and (max-width:480px){ /* Mobile */
html, body, div, form, fieldset, ul, ol, table, p, input, textarea, select{ font-size:12px }
}