/*
 * 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 }
h1, h2, h3{ /*text-shadow:4px 4px 10px rgba(150, 150, 150, 1)*/ }
h2{ font-size:64px }
td{ padding:10px }
label{ cursor:pointer }
ul{ list-style:none }
body{ display:flex; min-height:100%; height:auto; flex-direction:column; background:#fff }
/* Header */
header{ height:100px; background:#fff; z-index:1 }
#logo{ display:flex; align-items:center }
#logo img{ width:100%; max-width:320px; max-height:100px }
#stiky_menu{ position:fixed; width:auto; height:100px; display:flex; flex-direction:row; justify-content:center; align-items:center; right:32px; z-index:3 }
/*
#reserver{ display:flex; justify-content:right; width:auto; height:auto; margin-right:50px }
#reserver a{ color:#000; border:2px solid #000; padding:10px; background:#fff; transition:all .3s }
#reserver:hover a{ color:#fff; background:#000 }
#reserverIcon{ display:flex; justify-content:right; width:auto; height:auto; margin-right:20px }
#reserverIcon i{ display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:#fff; font-size:30px; border:2px solid #000; border-radius:50px; cursor:pointer; color:#000; transition:all .3s }
*/
#cart i{ display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:#fff; border:2px solid #800080; border-radius:50px; cursor:pointer; color:#d3d3d3; transition:all .3s }
#reserverIcon{ display:none }
#menu{ width:auto; height:auto; margin:0 auto; font-size:36px; padding:20px 0 }
#btnMenuD{ display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:#fff; border:2px solid #d3d3d3; border-radius:50px; cursor:pointer }
#btnMenu{ width:30px; height:16px; position:relative; margin:auto }
#btnMenu .lineH{ display:block; width:100%; height:2px; left:50%; transform:translateX(-50%); background:#000; position:absolute; transition:all 200ms }
#btnMenu .lineH:nth-child(1){ top:0 }
#btnMenu .lineH:nth-child(2){ top:50%; transform:translate(-50%, -50%) }
#btnMenu .lineH:nth-child(3){ bottom:0 }
#btnMenu.menu_close .lineH:nth-child(1), #btnMenu.menu_close .lineH:nth-child(2){ top:0; transform:translate(-50%, 7px) rotate(45deg) }
#btnMenu.menu_close .lineH:nth-child(3){ transform: translate(-50%, -7px) rotate(-45deg) }
#div_menu_box{ display:flex; flex-direction:column; flex-wrap:wrap; background:#fff; transition:0.5s; position:fixed; top:0; right:0; transform:translateY(-100%); z-index:2 }
#div_menu_box_header{ display:flex; align-items:center; width:60%; height:100px }
#div_menu_box_logo{ display:flex; align-items:center }
#div_menu_box_logo img{ width:100%; max-width:320px; max-height:100px }
#div_menu_box_nav{ position:relative; display:flex; flex:1; width:60%; height:auto; box-sizing:border-box; padding-left:5%; padding-top:50px }
#div_menu_box_nav div:first-child ul{ display:flex; flex-direction:column; height:100% }
#div_menu_box_nav div:first-child ul li i{ color:#800080; font-size:24px; padding-left:10px }
#div_menu_box_nav li{ height:60px }
#div_menu_box_nav li:last-child{ flex:1; align-content:flex-end; padding-bottom:20px }
#div_menu_box_nav li a{ color:#000; font-size:32px; display:inline-block; padding-bottom:2px; background-image:linear-gradient(#000 0 0); background-position:0 100%; background-size:0% 2px; background-repeat:no-repeat; transition:background-size 0.5s, background-position 0s 0.5s; line-height:120% }
#div_menu_box_nav li a:hover, #div_menu_box_nav li a.active{ background-position:100% 100%; background-size:100% 2px }
#div_menu_box_nav li a i{ font-size:24px; padding-left:10px }
#div_menu_box_nav div:last-child a{ font-size:24px }
#div_menu_box_nav div:last-child ul li:first-child{ color:#999; font-size:18px; display:none }
#div_menu_box_nav div:last-child ul li:first-child a{ color:#999; font-size:18px }
#div_menu_box_nav div:last-child ul{ visibility: hidden; font-size:0; opacity:0; transition:.3s; box-sizing:border-box; height:0; transform:translateY(100%) }
#div_menu_box_nav div:last-child ul li i{ padding-right:10px }
#div_menu_box_nav div:last-child ul.active{ visibility:visible; font-size:100%; opacity:1; height:100%; transform:translateY(0%) }
#div_menu_box_nav div:last-child.hide *{ border-top:0; border-bottom:0 }
#div_menu_box_nav img{ width:50px; cursor:pointer }
#div_menu_box_nav ul li:last-child a:last-child img:last-child{ padding-left:30px }
#div_menu_box_nav #dMainMenu ul li:last-child a:hover{ background-position:0; background-size:0 }
#dMainMenu, #dSubMenu{ height:auto; background:#fff; box-sizing:border-box }
#div_menu_box_bg{ position:absolute; right:0; width:40%; background-image:url(/assets/img/bg_menu.webp); background-size:cover; background-repeat:no-repeat; box-shadow:inset 0 0 0 1000px rgba(0,0,0,.2); transition:.3s }
#div_menu_box_footer{ width:60%; height:auto; padding:0 5% 30px; box-sizing:border-box }
#div_menu_box_footer ul{ border-top:1px solid #cfcece; padding-top:20px }
#div_menu_box_footer li{ float:left; width:34%; text-align:center }
#div_menu_box_footer li:first-child{ width:16%; text-align:left }
#div_menu_box_footer li:last-child{ width:16%; text-align:right }
#div_menu_box_footer li a{ color:#000; font-size:32px; display:inline-block; padding-bottom:2px; background-image:linear-gradient(#000 0 0); background-position:0 100%; background-size:0% 2px; background-repeat:no-repeat; transition:background-size 0.5s, background-position 0s 0.5s; line-height:120% }
#div_menu_box_footer li a:hover{ background-position:100% 100%; background-size:100% 2px }
#div_menu_box_footer li a span:last-child{ display:none }
/* Body */
section{ display:flex; flex:100 0 auto }
#body{ position:relative; margin:0 auto; background:#fff; border-top:2px solid #e9e9e9; border-bottom:2px solid #e9e9e9; box-sizing:border-box } 
/* Footer */
footer{ float:left; position:relative; width:100%; font-size:14px; overflow:hidden; background:#272626 }
#politique, #copy, #sign{ float:left; width:33.333%; height:55px; color:#fff; padding:5px 0 40px }
#copy{ height:90px; padding:5px 0 5px }
#politique p{ line-height:55px; padding-left:50px }
#politique a{ color:#fff }
#copy p{ line-height:45px; text-align:center }
#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 }
/* Message Error */
#dData{ position:fixed; top:0; height:auto; padding:10px 2%; text-align:center; color:#000; cursor:default; z-index:5; 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 } }

/* Index */
.dImg{ position:relative; width:100%; height:600px; margin-top:100px; background-clip:content-box; background-size:cover; background-repeat:no-repeat; background-position:center; box-shadow:inset 0 0 0 1000px rgba(0,0,0,.2); box-sizing:border-box }
.dImg p{ position:absolute; top:10%; left:15%; font-size:42px; color:#fff; text-shadow:2px 2px #000 }
.dTxt{ height:auto; margin:0 auto; font-size:20px; text-align:center; padding-top:30px }
.dTxt p{ font-size:24px; width:80%; margin:0 auto }
.dTxt p:first-child{ font-size:36px }
.dTxt div:nth-of-type(1){ width:20%; height:1px; margin:50px auto; border-top:1px solid #800080; box-sizing:border-box }
.pDPOC, .pDPOCVIP, .btnSentier{ padding-bottom:50px }
.btnMauve{ display:flex; justify-content:center; width:auto; height:auto; padding-top:20px }
.btnMauve a{ color:#fff; border:0; padding:10px; background:#800080; transition:all .3s }
.btnMauve a:hover{ background:#000 }
#dImg1{ height:800px; margin-top:0; background-image:url(/assets/img/bg1.webp) }
#dImg1 p{ position:absolute; top:32%; left:50%; transform:translateX(-50%); width:100%; font-size:42px; color:#fff; text-align:center; text-shadow:2px 2px #000 }
#dImg1 br{ display:none }
#dTxt1{ height:auto; text-align:center; padding-top:100px }
#dTxt1 p{ font-size:36px; width:80%; margin:0 auto }
#dTxt1 div{ width:20%; height:1px; margin:50px auto; border-top:1px solid #800080; box-sizing:border-box }
#dTxt1 p:last-child{ font-size:24px }
#dVid{ width:100%; padding-top:100px }
/*#dTxt2{ height:auto; text-align:center; padding-top:50px }
#dTxt2 p{ font-size:24px; width:80%; margin:0 auto }
#dTxt2 div{ width:20%; height:1px; margin:50px auto; border-top:1px solid #800080; box-sizing:border-box }
#dTxt2 p:last-child{ font-size:24px }*/
#dBox1{ display:flex; justify-content:center; width:auto; height:auto; padding-top:50px }
#dBox1 a{ width:50%; max-width:200px; color:#000; border:1px solid #800080; padding:10px; margin:0 10px; text-align:center; background:#fff; transition:all .3s }
#dBox1 a:hover{ color:#fff; background:#800080 }
#dImg2{ background-image:url(/assets/img/bg2.webp) }
#dImg3{ background-image:url(/assets/img/bg3.webp) }
#dImg4{ background-image:url(/assets/img/bg4.webp) }
#dImg5{ background-image:url(/assets/img/bg5.webp) }
#dImg6{ background-image:url(/assets/img/bg6.webp) }

/* Reserver */
#dSystemRecherche{ height:auto; text-align:center; padding:30px 0 20px }
#dSystemRecherche h3{ font-size:16px;font-weight:bold; color:#800080; padding-bottom:20px }
#dSystemRechercheBoxDate{ position:relative; display:inline-flex; height:auto; width:auto; margin:0 auto; background:#fff; border:2px solid #000; padding:10px 20px; flex-direction:row; flex-wrap:wrap;align-content:space-evenly; cursor:pointer }
#dSystemRechercheBoxDate span{ padding:0 5px }
#dSystemRechercheCalendar{ display:flex; position:absolute; height:auto; width:auto; min-width:594px; background:#fff; /*padding:10px 20px;*/ border:2px solid #000; right:50%; transform:translateX(50%) translateY(-2px); z-index:1; box-sizing:border-box; cursor:default }
#dSystemRechercheCalendar.hide{ display:none }
#dSystemRechercheCalendar div:first-child{ flex:1; border-right:1px solid #000 }
#dSystemRechercheCalendar div:last-child{ flex:1; border-left:1px solid #000 }
#dSystemRechercheCalendar tr:first-child td span{ cursor:pointer }
#dSystemRechercheCalendar tr:first-child td:nth-child(2){ font-weight:bold; cursor:default }
#dSystemRechercheCalendar td{ padding:0 }
.calDefaultDay{ color:#000; background-color:#fff; text-decoration:none; border-style:inset; border:1px solid #fff; text-align:center; cursor:default }
.calDay{ border-style:inset; border:1px solid #fff; text-align:center; cursor:pointer }
.calCurrentDay{ color:#fff; background-color:#319; text-decoration:none; border-style:inset; border:1px solid #fff; border-radius:50px; text-align:center; cursor:default }
.calPassDay{ color:#696969; text-decoration:line-through; border-style:inset; border:1px solid #fff; text-align:center; cursor:default }
.calSelectedDay{ border:1px solid #000; border-radius:50px; text-align:center; cursor:default }
.calDay:hover{ border:1px solid #000; border-radius:50px }
.calRentedDay{ color:#f00; text-decoration:line-through; text-align:center; cursor:default }
.calDispoDay{ color:#696969;/*color:#f0f;*/ text-decoration:line-through; text-align:center; cursor:default }
#dSystemReservation{ display:flex; flex-direction:row; width:auto; height:auto; flex-wrap:wrap; align-content:space-evenly; justify-content:space-evenly }
#dSystemReservation > div{ display:flex; flex-direction:column; position:relative; width:auto; height:auto; margin-bottom:30px }
#dSystemReservation a{ color:#000 }
#dSystemReservation img{ max-width:400px; border-radius:12px }
#dSystemReservation span{ display:flex; width:100%; background:#fff; padding-left:10px; padding-bottom:5px; box-sizing:border-box; font-size:18px }
#dSystemReservation span:last-child{ display:flex; width:100%; background:#fff; color:#999; padding-left:10px; box-sizing:border-box; font-size:16px }
#dSystemReservation div div{ position:relative; width:100%; height:auto; margin-bottom:10px }
#dSystemReservation div:hover{ }
#dSystemReservation div div:hover::after{ content:''; display:block; position:absolute; width:100%; height:100%; background:#99999950; z-index:1; top:0; left:50%; transform:translateX(-50%); border-radius:12px }
#dSystemReservation div div i{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:32px; color:#fff; display:none }
#dSystemReservation div div:hover i{ display:block }

/* Terrain */
#dVisiteVirtuelle{ max-width:1120px; height:auto; margin:0 auto; color:#fff; padding:50px 0 100px; box-sizing:border-box }
#dVisiteVirtuelleTltImg{ display:flex; align-items:center; justify-content:center; }
#dVisiteVirtuelleTltImgInner{ display:inline-flex; flex-direction:column }
#dVisiteVirtuelleTltImgInner h2{ font-size:28px; line-height:150% }
#dVisiteVirtuelleTltImgInner h2:last-child{ display:none }
#dVisiteVirtuelleTltImgInner img{ width:100%; max-width:600px; cursor:pointer }
#dVisiteVirtuelleImg{ display:flex; flex-direction:row }
#dVisiteVirtuelleImg > div:first-child{ position:relative; width:50%; max-width:600px; height:auto; flex:1 0 50%; border-radius:10px 0 0 10px; padding:0; overflow:hidden }
#dVisiteVirtuelleImg > div:first-child span{ display:none; position:absolute; right:5px; bottom:5px; background:#00000050; color:#fff; padding:5px 10px; border-radius:10px }
#dVisiteVirtuelleImg > div:not(:first-child){ display:flex; flex-direction:column; width:25%; height:auto; flex:1; padding-left:6px; box-sizing:border-box }
#dVisiteVirtuelleImg > div:not(:first-child) div{ overflow:hidden; position: relative; margin:0 0 3px 0 }
#dVisiteVirtuelleImg > div:not(:first-child) div:last-child{ margin:3px 0 0 0 }
#dVisiteVirtuelleImg > div:not(:first-child) img{ width:100%; height:100%; object-fit:cover }
#dVisiteVirtuelleImg > div:last-child div{ border-radius:0 10px 0 0 }
#dVisiteVirtuelleImg > div:last-child div:last-child{ border-radius:0 0 10px 0 }
#dVisiteVirtuelleImgSlider{ position:relative; display:none; overflow:hidden }
#dVisiteVirtuelleImgSlider > span{ position:absolute; right:5px; bottom:5px; background:#00000050; color:#fff; padding:5px 10px; border-radius:10px }
.vvImgSlider{ display:none }
.vvImgSliderR{ animation:vvImgSliderR 0.5s forwards; }
@keyframes vvImgSliderR{ 0%{ transform: translateX(100%); } 100%{ transform: translateX(0%); } }
.vvImgSliderL{ animation: vvImgSliderL 0.5s forwards; }
@keyframes vvImgSliderL{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(0%); } }
#dVisiteVirtuelleCategorie{ padding-top:30px; color:#999; box-sizing:border-box }
#dVisiteVirtuelleDescriptionServiceReservation{ display:flex; flex-direction:row; padding-top:30px; box-sizing:border-box }
#dVisiteVirtuelleDescriptionService{ width:50% }
#dVisiteVirtuelleDescriptionService div{ padding-bottom:50px; padding-top:30px; border-top:1px solid #cfcece; box-sizing:border-box }
#dVisiteVirtuelleDescriptionService span{ display:block; font-size:24px; padding-bottom:10px }
#dVisiteVirtuelleReservation{ position:sticky; top:90px; width:50%; display:inline-flex; justify-content:center; flex-wrap:nowrap; flex-direction:column; align-items:flex-end }
#dVisiteVirtuelleReservation.slideYnew2{ transform:translateY(0%) }
#dVisiteVirtuelleReservationCloseMobile{ display:none; cursor:pointer; position:absolute; top:10px; right:10px; font-size:32px }
#dVisiteVirtuelleReservationNomMobile{ display:none; font-size:32px; line-height:120%; padding:10px 0 }
#dVisiteVirtuelleReservationDivOuter{ max-width:320px; height:auto; border:1px solid gray; padding:20px 10px 10px; border-radius:10px; box-shadow:rgba(0, 0, 0, 0.5) 0px 6px 16px; box-sizing:border-box }
#dVisiteVirtuelleReservationDiv{ width:auto; min-width:300px; border:1px solid #000; border-radius:10px; box-sizing:border-box }
#dVisiteVirtuelleReservationDate{ position:relative; border-bottom:1px solid #000 }
#dVisiteVirtuelleReservationBoxDate{ padding:10px; box-sizing:border-box; cursor:pointer }
#dVisiteVirtuelleReservationBoxDate span{ padding:0 5px }
#dVisiteVirtuelleReservationCalendar{ position:absolute; top:-22px; right:-22px; height:auto; width:auto; background:#fff; padding:20px; border:1px solid #000; z-index:1; border-radius:25px }
#dVisiteVirtuelleReservationCalendar.hide{ display:none }
#dVisiteVirtuelleReservationCalendar tr:first-child td span{ cursor:pointer }
#dVisiteVirtuelleReservationCalendar tr:first-child td:nth-child(2){ cursor:default; font-weight:bold }
#dVisiteVirtuelleReservationBoxDate2{ width:300px; margin-left:auto; padding:10px; box-sizing:border-box; border:1px solid #000; border-radius:10px; cursor:pointer }
#dVisiteVirtuelleReservationBoxDate2 span{ padding:0 5px }
#dVisiteVirtuelleReservationCalendarInner{ display:flex; padding-top:20px }
#dVisiteVirtuelleReservationCalendarInner div{ flex:1 }
#dVisiteVirtuelleReservationCalendarInner div:last-child{ border-left:1px solid #000 }
#dVisiteVirtuelleReservationAdulteEnfant{ }
#dVisiteVirtuelleReservationAdulte, #dVisiteVirtuelleReservationEnfant{ display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; padding:10px; box-sizing:border-box }
#dVisiteVirtuelleReservationAdulte div:first-child, #dVisiteVirtuelleReservationEnfant div:first-child{ flex:0 0 70% }
#dVisiteVirtuelleReservationAdulte div, #dVisiteVirtuelleReservationEnfant div{ flex:0 0 10% }
#dVisiteVirtuelleReservationAdulte span, #dVisiteVirtuelleReservationEnfant span{ display:flex; align-items:center; justify-content:center; width:25px; height:25px; font-size:12px; border:1px solid #000; border-radius:50px; box-sizing:border-box; cursor:pointer }
#dVisiteVirtuelleReservationAdulte div:nth-child(3) input, #dVisiteVirtuelleReservationEnfant div:nth-child(3) input{ width:25px; height:25px; font-size:16px; border:0; text-align:center; cursor:default; user-select:none; outline:none; pointer-events:none }
#btnSystemReserverQuiAdulteMoins.inactif, #btnSystemReserverQuiEnfantMoins.inactif{ border:1px solid gray; color:gray; cursor:default }
#dVisiteVirtuelleReservationProduit{ border-top:1px solid #000 }
#dVisiteVirtuelleReservationProduit > div:first-child{ cursor:pointer; padding:10px; box-sizing:border-box }
#dVisiteVirtuelleReservationProduit > div:first-child span:last-child{ float:right }
#dSystemRechercheProduitFix{ visibility:hidden; font-size:0; opacity:0; transition:.5s; box-sizing:border-box; height:0; overflow:hidden }
#dSystemRechercheProduitFix.show{ visibility:visible; font-size:100%; opacity:1; padding:10px; height:auto }
#dSystemRechercheProduitFix.hide *{ border-top:0; border-bottom:0 }
.dProduit{ display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; box-sizing:border-box; padding-top:5px }
.dProduit:first-child{ padding:0 }
.dProduit div:first-child{ flex:0 1 55% }
.dProduit div{ flex:0 0 10% }
.dProduit div:nth-child(2){ flex:0 0 15%; text-align:right; padding-right:10px; box-sizing:border-box }
.dProduit span{ display:flex; align-items:center; justify-content:center; width:25px; height:25px; font-size:12px; border:1px solid #000; border-radius:50px; box-sizing:border-box; cursor:pointer }
.dProduit div:nth-child(4) input{ width:25px; height:25px; font-size:16px; border:0; text-align:center; cursor:default; user-select:none; outline:none; pointer-events:none }
.dProduit.inactif{ border:1px solid gray; color:gray }
.dProduit b{ font-weight:normal }
#dVisiteVirtuelleReservationTotal{ display:flex; flex-direction:column; flex-wrap:nowrap; box-sizing:border-box; padding-top:10px; height:100% }
#dVisiteVirtuelleReservationTotal div{ position:relative; display:flex; padding:10px 0; justify-content:center }
#dVisiteVirtuelleReservationTotal div b{ position:absolute; left:0 }
#dVisiteVirtuelleReservationTotal div span:last-child{ font-size:26px }
#dVisiteVirtuelleReservationTotal div:last-child{ display:flex; flex-direction:column; justify-content:center }
#dVisiteVirtuelleReservationTotal div:last-child span{ color:#999; font-size:12px; text-align:center; padding-top:10px }
#btnReserver{ width:100%; border:0; border-radius:5px; color:#fff; padding:10px 50px; background:#800080; cursor:pointer }
#dBtnReserverMobile{ position:fixed; bottom:0; height:auto; left:0; z-index:1; align-content:center; flex-wrap:wrap; box-sizing:border-box; justify-content:center; background:#fff; padding:10px 0; display:none; box-shadow:rgba(0, 0, 0, 0.50) 0px 6px 16px }
#btnReserverMobile{ border:0; border-radius:5px; color:#fff; padding:10px 50px; background:#800080; cursor:pointer }

/* Other Pages Classes */
.dOtherPagesImg{ position:relative; height:600px; background-size:cover; background-repeat:no-repeat; background-position:center; box-sizing:border-box }
.dOtherPagesImg p{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; font-size:72px; color:#fff; text-shadow:2px 2px #000; text-align:center; line-height:65% }
.dOtherPagesImg span{ font-size:42px }
.dOtherPages{ padding:20px 100px; box-sizing:border-box }
.dOtherPages > div{ height:auto; margin:0 auto; font-size:20px; text-align:center; padding:30px 0 50px; border-top:1px solid #cfcece }
.dOtherPages > div:first-child{ border:0 }
.dOtherPages > div p{ font-size:36px; width:80%; margin:0 auto }
.dOtherPages > div span{ color:#999 }
.dOtherPages > div div{ width:20%; height:1px; margin:50px auto; border-top:1px solid #800080; box-sizing:border-box }
.dOtherPages > div p:nth-of-type(2){ font-size:24px }
/* A Propos */
#dAProposImg{ background-image:url(/assets/img/bg_a_propos.webp) }
/* Section Reguliere */
#dSectionReguliereImg{ background-image:url(/assets/img/section_reguliere.webp) }
/* Section VIP */
#dSectionVIPImg{ background-image:url(/assets/img/section_vip.webp) }
#dSectionVIPReserver{ display:flex; justify-content:center; width:auto; height:auto; border:0 }
#dSectionVIPReserver a{ color:#fff; border:0; padding:10px; background:#800080; transition:all .3s }
#dSectionVIPReserver a:hover{ background:#000 }
/* Nature */
.dImgCount{ position:absolute; bottom:5px; right:5px; width:auto; height:auto; color:#fff }
.dImgCount span{ font-size:16px }
#dNatureFloreImg{ height:800px; background-image:url(/assets/img/flore_fleure.webp) }
#dNatureFauneImg{ height:800px; background-image:url(/assets/img/faune_grenouille.webp) }
#dNatureIlesImg{ height:800px; background-image:url(/assets/img/kayak.webp) }
#dNatureRegles .ligneGriseTop{ border-top:1px solid #cfcece }
/* Marina */
#dMarinaImg{ background-image:url(/assets/img/marina.webp) }
#dMarina .lblMauve{ color:#800080 }
/* Sentier */
#dSentiersImg{ background-image:url(/assets/img/randonnee_pedestre.webp) }
#dOCascadesMapAvenza img{ width:100%; max-width:1199px }
/* FAQ */
#dFAQImg{ background-image:url(/assets/img/bg1.webp) }
#dFAQ > div{ padding:30px 0 0 }
#dFAQQuestion{ width:auto; max-width:1024px; height:auto; margin:0 auto; padding:0 10px; box-sizing:border-box }
#dFAQQuestion div:last-child{ padding:20px 0 200px }
#dFAQQuestion > div{ height:auto; padding:20px 0 }
#dFAQQuestion h3:hover{ color:#800080; cursor:pointer }
#dFAQQuestion p{ padding-top:20px; visibility:hidden; font-size:0; opacity:0; transition:.1s; box-sizing:border-box; height:0 }
#dFAQQuestion p.show{ visibility:visible; font-size:100%; opacity:1; height:100% }
/* Nous Joindre */
#dNousJoindreImg{ background-image:url(/assets/img/bg_nous_joindre.webp) }
#dNousJoindre > div{ padding:30px 0 0 }
#dAddress{ display:flex; flex-direction:column; flex-wrap:wrap; align-content:center; height:auto }
#dAddress p:first-child{ font-size:24px; padding-bottom:10px }
#dAddress p{ font-size:18px; padding-bottom:10px }
#dAddress p:last-child{ padding-top:10px }
#dCommGMap{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; width:auto; max-width:800px; height:auto; margin:0 auto; padding:50px 0 }
#msgCCom{ float:left; width:49%; margin-right:1% }
#msgCForm, #msgCLoad, #msgCSucc{ width:auto; height:auto; padding:10px; position:relative; border-radius:5px; background:#333; text-align:center }
#msgCLoad, #msgCSucc{ display:none }
#msgCForm h2{ color:#fff; padding-bottom:12px; font-size:20px; line-height:120% }
#msgCLoad h2, #msgCSucc h2{ color:#e76f1f; line-height:120% }
#msgCForm div{ position:relative; height:auto; margin-bottom:10px }
#msgCForm div:last-child{ margin:0 }
#msgCForm input{ width:100%; height:40px; border:1px solid #fff; border-radius:5px; padding-left:10%; box-sizing:border-box }
#msgCForm textarea{ display:block; width:100%; height:300px; border:1px solid #fff; border-radius:5px; padding:10px 0 10px 10%; line-height:20px; box-sizing:border-box; resize:none }
#msgCForm input[type=button]{ width:100%; height:40px; padding:10px 0; margin:0; border:0; color:#333; font-weight:bold; line-height:20px; transition:all 0.3s ease-out; cursor:pointer }
#msgCForm input[type=text]:hover ~ i, #msgCForm textarea:hover ~ i{ color:#333 }
#msgCForm input[type=text]:focus ~ i, #msgCForm textarea:focus ~ i, #msgCForm input[type=button]:hover{ color:#39f }
#msgCForm input[type=text]:focus, #msgCForm textarea:focus, #msgCForm button[type=submit]:focus{ outline:none }
#gmap{ float:right; width:49%; margin-left:1% }
#gmapForm{ width:auto; height:auto; padding:10px; position:relative; border-radius:5px; background:#333; text-align:center }
#gmap h2{ color:#fff; font-size:14px; line-height:14px; padding-bottom:15px }
#gmap iframe{ display:block; width:100%; border:0 }
/* Politique */
#dPolitique{ padding:20px 100px; box-sizing:border-box }
#dPolitique > div{ height:auto; margin:0 auto; font-size:20px; padding:30px 0 50px }
#dPolitique > div p:first-child{ text-align:center }
#dPolitique .ligneNoir{ width:100%; height:1px; margin:20px auto; border-top:1px solid #000; box-sizing:border-box }

/* 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:105; 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 }

/* 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:100%; border-right:1px solid #ccc; border-radius:5px 0 0 5px; color:#666; text-align:center; line-height:40px; background:#ededed; transition:all 0.3s ease-out; pointer-events:none } /* Version Ocascades.com */
/*[class^="input-fa"]{ position:absolute; left:2px; top:2px; display:inline-block; width:8%; height:40px; border-right:2px solid #ccc; border-radius:5px 0 0 5px; color:#666; text-align:center; line-height:40px; background:#ededed; transition:all 0.3s ease-out; pointer-events:none } ORIGINAL */
[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; }

/* Animations */
.slide-inY{ animation:slide-inY 0.5s forwards; -webkit-animation:slide-inY 0.5s forwards }
.slide-outY{ animation:slide-outY 0.5s 1 forwards; -webkit-animation:slide-outY 0.5s 1 forwards }
@keyframes slide-inY{ 100% { transform: translateY(0%); } }
@-webkit-keyframes slide-inY{ 100% { -webkit-transform: translateY(0%); } }
@keyframes slide-outY{ 0%{ transform: translateY(0%) } 100%{ transform: translateY(-100%) } }
@-webkit-keyframes slide-outY{ 0%{ -webkit-transform: translateY(0%); } 100%{ -webkit-transform: translateY(-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){
#div_menu_box_footer li a{ font-size:26px }
}
@media screen and (max-width:1280px){
#div_menu_box_nav{ padding-left:3% }
#div_menu_box_nav li a{ font-size:28px }
#div_menu_box_nav li a i{ font-size:22px }
#div_menu_box_nav div:last-child a{ font-size:22px }
#div_menu_box_footer li a{ font-size:20px }
}
@media screen and (max-width:1120px){ /* Visite Virtuelle Image Box */
#dVisiteVirtuelleCategorie{ padding:30px 10px 0 }
#dVisiteVirtuelleDescriptionServiceReservation{ padding:30px 10px 0 }
}
@media screen and (max-width:960px){
#div_menu_box_nav{ padding-left:2% }
#div_menu_box_nav li a{ font-size:22px }
#div_menu_box_nav li a i{ font-size:18px }
#div_menu_box_nav div:last-child a{ font-size:20px }
#div_menu_box_footer li a{ font-size:16px }
}
@media screen and (max-width:940px){ /* Visite Virtuelle Image Box */
#dVisiteVirtuelleImg > div:last-child{ display:none }
#dVisiteVirtuelleImg > div:first-child{ width:100%; max-width:none }
#dVisiteVirtuelleTltImgInner img{ max-width:100% }
#dVisiteVirtuelleImg > div:not(:first-child) div{ border-radius:0 10px 0 0 }
#dVisiteVirtuelleImg > div:not(:first-child) div:last-child{ border-radius:0 0 10px 0 }
}
@media screen and (max-width:760px){ /* Tablet */
#logo{ width:60% }
#stiky_menu{ right:5px }
#reserver{ display:none }
#reserverIcon{ display:flex }
#reserverIcon i{ width:40px; height:40px; border-radius:40px; font-size:24px }
#btnMenuD{ width:40px; height:40px; border-radius:40px }
#btnMenu{ height:12px }
#btnMenu .lineH{ width:60% }
#btnMenu.menu_close .lineH:nth-child(1), #btnMenu.menu_close .lineH:nth-child(2){ top:0; transform:translate(-50%, 5px) rotate(45deg) }
#btnMenu.menu_close .lineH:nth-child(3){ transform: translate(-50%, -5px) rotate(-45deg) }
#div_menu_box_header, #div_menu_box_nav, #div_menu_box_footer{ width:100% }
#div_menu_box_logo{ width:60% }
#div_menu_box_nav{ padding-left:0; padding-top:10px }
#div_menu_box_nav div{ position:absolute; transition:.3s }
#div_menu_box_nav li{ height:40px; padding-left:5% }
#div_menu_box_nav li a{ font-size:24px }
#div_menu_box_nav li a i{ font-size:18px }
#div_menu_box_nav div:last-child a{ font-size:20px }
#div_menu_box_nav div:last-child ul li:first-child{ display:block }
#div_menu_box_nav div:last-child ul{ transform:translateX(100%) }
#div_menu_box_nav div:last-child ul.active{ transform:translateX(0%) }
#div_menu_box_nav img{ width:40px }
#div_menu_box_bg{ position:relative; width:100%; height:200px }
#div_menu_box_footer{ padding:6% 5% 5% 5% }
#div_menu_box_footer ul{ border-top:0; padding-top:0 }
#div_menu_box_footer li a{ font-size:18px }
#div_menu_box_footer li a span:first-child{ display:none }
#div_menu_box_footer li a span:last-child{ display:block }
.div_menu_box_slideoutX{ transform:translateX(-100%) }
.div_menu_box_slideoutXR{ transform:translateX(100%) }
/* Full Screen Picture Viewer */
#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 }
#politique, #copy, #sign{ width:100% }
#politique{ height:30px }
#copy{ height:50px }
#politique p{ line-height:30px }
#copy p{ line-height:25px }
#politique, #copy, #sign{ padding:10px 0 }
#politique p, #copy p, #sign p{ padding:0; text-align:center }
/* Index */
.dTxt p{ font-size:16px; width:90% }
.dTxt p:first-child{ font-size:24px }
.dTxt div:nth-of-type(1){ margin:40px auto }
#dImg1{ height:600px }
#dImg1 p{ width:90%; font-size:36px }
#dImg1 br{ display:block }
#dTxt1{ padding-top:50px }
#dTxt1 p{ font-size:24px; width:90% }
#dTxt1 div{ margin:40px auto }
#dTxt1 p:last-child{ font-size:16px }
#dVid{ padding-top:50px }
/*#dTxt2{ padding-top:50px }
#dTxt2 p{ font-size:24px; width:90% }
#dTxt2 div{ margin:40px auto }
#dTxt2 p:last-child{ font-size:16px }
#dBox1{ padding-top:30px }*/
.dImg{ height:400px; margin-top:50px }
.dImg p{ font-size:30px }
.dImg span{ font-size:24px }
/* Reserver */
#dSystemReservation img{ width:90% }
#dSystemReservation span{ padding-left:0; justify-content:center }
#dSystemReservation span:last-child{ padding-left:0 }
#dSystemReservation div div{ text-align:center }
#dSystemReservation div div:hover::after{ width:90% }
#dSystemRechercheCalendar{ min-width:unset }
#dSystemRechercheCalendar div:first-child{ border-right:0 }
#dSystemRechercheCalendar div:last-child{ display:none }
/* Terrain */
#dVisiteVirtuelle{ padding:0 0 100px }
#dVisiteVirtuelleTltImgInner h2:first-child{ display:none }
#dVisiteVirtuelleTltImgInner h2:last-child{ display:block; padding:10px 20px 0 }
#dVisiteVirtuelleImg > div:not(:first-child) div{ border-radius:0 10px 0 0 }
#dVisiteVirtuelleImg > div:not(:first-child) div:last-child{ border-radius:0 0 10px 0 }
#dVisiteVirtuelleImg > div:last-child{ display:none }
#dVisiteVirtuelleCategorie{ padding:10px 20px 0 }
#dVisiteVirtuelleDescriptionServiceReservation{ flex-direction:column }
#dVisiteVirtuelleDescriptionService, #dVisiteVirtuelleReservation{ width:100%; padding:0 20px; box-sizing:border-box }
#dVisiteVirtuelleReservation{ padding-top:30px }
#dVisiteVirtuelleReservationCalendarInner div:last-child{ display:none }
/* Other Pages Classes */
.dOtherPagesImg{ height:500px !important }
.dOtherPages{ padding:20px 0 }
.dOtherPages > div{ width:90%/*; padding-top:50px*/ }
.dOtherPages > div p{ font-size:24px; width:100% }
.dOtherPages > div span{ font-size:18px }
.dOtherPages > div div{ margin:40px auto }
.dOtherPages > div p:nth-of-type(2){ font-size:16px }
/* Politique */
#dPolitique{ padding:20px 10px }
}
@media screen and (max-width:480px){ /* Mobile */
#menu{ width:100% }
#menu li{ padding-left:10%; font-size:18px }
#menu img{ width:100px; height:100px }
/* Terrain */
#dVisiteVirtuelleImg{ max-height:none }
#dVisiteVirtuelleImg > div:first-child{ max-width:100%; border-radius:0 }
#dVisiteVirtuelleImg > div:first-child span{ display:block }
#dVisiteVirtuelleImg > div:not(:first-child){ display:none }
#dVisiteVirtuelleImg{ display:none }
#dVisiteVirtuelleImgSlider{ display:block }
#dVisiteVirtuelleReservation{ position:fixed; top:0; right:0; transform:translateY(100%); background:white; box-sizing: border-box; padding-top:0; z-index:3; transition:all .3s; align-items:center; overflow:auto; justify-content:flex-start }
#dVisiteVirtuelleReservationCloseMobile, #dVisiteVirtuelleReservationNomMobile{ display:block }
#dBtnReserverMobile{ display:flex }
/* Other Pages Classes */
.dOtherPagesImg{ height:400px !important }
/*.dOtherPagesImg p{ width:100%; font-size:42px }
.dOtherPagesImg span{ font-size:24px }
.dOtherPages{ padding:20px 0 }*/
/* Nous Joindre */
#dCommGMap{ flex-direction:column; padding:50px 10px }
#msgCCom, #gmap{ width:100%; margin:0 }
#gmap{ padding-top:10px }
}
@media screen and (max-height:400px){ /* Mobile Fix with landscape view */
#div_menu_box_nav div:first-child ul{ padding-top:10px }
#div_menu_box_nav li{ height:auto }
#div_menu_box_bg{ display:none }
#div_menu_box_footer{ padding:0 5% }
#div_menu_box_footer ul{ padding:0 }
}





/* Admin */
.dAdmin{ display:none }
.dAdmin div{ margin-bottom:10px }
.dAdmin label{ font-weight:bold }
.dAdmin input, .dAdmin textarea{ width:98%; height:20px; border:0; border-radius:5px; padding:10px 1% }
.dAdmin textarea{ height:500px }
.dAdmin i{ font-size:12px; line-height:12px }
.dAdmin input[type=button]{ width:100%; height:40px; padding:10px 0; cursor:pointer; margin:0; color:#333; font-weight:bold; transition:all 0.3s ease-out; margin-bottom:10px; display:none }
.dAdmin input[type=button]:hover{ color:#09f }
.dAdmin input[type=date]{ width:40%; eight:20px; border:0; border-radius:5px; padding:10px 1% }

/* Admin Login Form */
#fAdminLogin{ width:400px; position:relative; border-radius:5px; margin:66px auto 133px }
#fAdminLogin h2{ font-size:36px; padding:10px 0 20px 0; text-align:center }
#fAdminLogin div{ position:relative; height:auto }
#fAdminLogin input{ width:100%; height:auto; border:1px solid #ccc; border-radius:5px; padding:10px 2% 10px 16%; line-height:20px; box-sizing:border-box }
#fAdminLogin input[type=button]{ width:100%; height:40px; padding:10px 0; cursor:pointer; border:0; margin:0; color:#fff; background:#333; font-weight:bold; transition:all 0.3s ease-out; }
#fAdminLogin input[type=text]:hover ~ i, #fAdminLogin input[type=password]:hover ~ i{ color:#333 }
#fAdminLogin input[type=text]:focus ~ i, #fAdminLogin input[type=password]:focus ~ i, #fAdminLogin input[type=button]:hover{ color:#27aae1 }
#fAdminLogin input[type=text]:focus, #fAdminLogin input[type=password]:focus, #fAdminLogin button[type=submit]:focus{ outline:none }
#fAdminLogin .input-fa{ width:12%; height:auto; line-height:40px; top:1px; left:1px; bottom:1px }
#fAdminLogin span{ float:right; font-size:12px; color:#27aae1; text-shadow:1px 1px black }

#fAL{ box-sizing:border-box; margin:0; padding:10px }
#fAL div{ float:none; width:100%; margin-bottom:10px }
#fAL div:nth-child(2){ margin:0; margin-bottom:10px }
#fAL div:last-child{ width:100%; margin:0 }

/* Admin Page */
#dAdminPage{ display:none }
#dAdminPage div{ margin-bottom:10px }
#dAdminPage label{ font-weight:bold }
#dAdminPage input, #dAdminPage textarea{ width:98%; height:20px; border:0; border-radius:5px; padding:10px 1% }
#dAdminPage textarea{ height:500px }
#dAdminPage i{ font-size:12px; line-height:12px }
#dAdminPage input[type=button]{ width:100%; height:40px; padding:10px 0; cursor:pointer; margin:0; color:#333; font-weight:bold; transition:all 0.3s ease-out; margin-bottom:10px; display:none }
#dAdminPage input[type=button]:hover{ color:#09f }

#adminContent{ width:1024px; height:auto; min-height:600px; margin:0 auto }
.inner{ /*position:relative;*/ width:1024px; margin:0 auto } /* si je met position:relative le mouse over des items marche plus */

/* 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; cursor:pointer }
.lineFull input[type=date], .lineFull input[type=time]{ font-size:16px }
.lineFull textarea{ padding:5px; vertical-align:bottom }
.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% }

/* Tool Tips */
/* Great Link: http://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element */
.tooltip{ position:relative; cursor:pointer }
.tooltip span{ position:absolute; margin-left:-999em }
.tooltip:hover span{ position:absolute; left:50%; top:-27px; width:auto; max-width:250px; font-size:80%; font-weight:normal; background:#fff; color:#09f; padding:5px; /*margin-left:0;*/ margin:0; border:1px solid #000; border-radius:5px 5px; box-shadow:5px 5px 5px rgba(0, 0, 0, 0.1); transform:translate(-50%, -50%); z-index:99; white-space:nowrap }
.tooltip:hover span:after{ content:''; display:block; position:absolute; bottom:-6px; left:0; right:0; margin:0 auto; width:10px; height:10px; background:#fff; border-right:1px solid #000; border-bottom:1px solid #000; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); box-sizing:border-box }
.tooltip_left:hover span{ top:8px; left:-10px; transform:translate(-100%, -50%); }
.tooltip_left:hover span:after{ top:0; bottom:0; left:unset; right:-6px; margin:auto; border-top:1px solid #000; border-bottom:0 }
.tooltip_right:hover span{ top:8px; left:unset; right:-10px; transform:translate(100%, -50%); }
.tooltip_right:hover span:after{ top:0; bottom:0; left:-6px; right:unset; margin:auto; border-top:1px solid #000; border-bottom:0; transform: rotate(225deg) }
.tooltip_top:hover span{ top:-10px; transform:translate(-50%, -100%) }
.tooltip_top:hover span:after{ }
.fa-info-circle.tooltip:hover span{ width:250px; white-space:normal }
.tooltipimg{ position:relative; display:inline-block; width:auto }
.tooltipimg span{ position:absolute; margin-left:-999em; min-width:250px }
.tooltipimg img:hover + span{ position:absolute; left:50%; bottom:100%; width:auto; font-size:14px; background:#fff; color:#09f; padding:5px; margin-left:0; margin-bottom:5px; border:1px solid #000; border-radius:5px 5px; box-shadow:5px 5px 5px rgba(0, 0, 0, 0.1); transform:translateX(-50%); z-index:99 }
.tooltipimg img:hover + span:after{ content:''; display:block; position:absolute; bottom:-6px; left:0; right:0; margin:0 auto; width:10px; height:10px; background:#fff; border-right:1px solid #000; border-bottom:1px solid #000; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); box-sizing:border-box }
/*.tooltip:hover span:after, .tooltip:hover span:before{ content:''; display:block; position:absolute; left:100%; width:0; height:0; border-style:solid }
.tooltip:hover span:after{ top:10px; border-color:#fdd transparent transparent transparent; border-width:10px }
.tooltip:hover span:before{ top:9px; border-color:#a00 transparent transparent transparent; border-width:11px }*/
@media screen and (max-width:760px){ /* TRICK To Cancel Hover on Mobile/Tablet Device!!! */
.tooltip:hover span, .tooltipimg img:hover + span{ display:none } /* Hide any other Tooltip */
.fa-info-circle.tooltip:hover span{ display:block } /* Show Info Bulle */
.tooltip_right:hover span, .tooltip_left:hover span{ top:7px; max-width:200px }
}
@media screen and (max-width:480px){ /* Mobile */
.tooltip_right:hover span, .tooltip_left:hover span{ top:5px; max-width:150px }
}