/************ Variables **************/

:root {
    
    --color-blue: #002A3F;
    --color-blue-70: #4D6A79;
    --color-blue-60: #667F8C;
    --color-blue-50: #80949F;
    --color-blue-20: #BFC9CF;
    --color-blue-15: #CAD2D7;
    --color-blue-10: #E6EAEC;
    --color-orange: #E84E0F;
    --color-orange-50: #F3A687;
   	--color-orange-30: #fbded3;
    --color-orange-20: #FADCCF;
    --color-orange-10: #FDF1EC;
    --color-vert: #b2ec91;
    --color-light: #DBE1E4;
    --color-white: #ffffff;
    --color-grey: #808080;
    --color-grey-50: #AEB0B2;
    
}


/************ fonts **************/

body, input  {
    font-family: 'lato', Arial, sans-serif; letter-spacing: 0.3px;
}


.main-menu ul.navigation > li > a, .footerListTitle  {
    font-family: 'lato-light', Arial, sans-serif;
}



/************ transitions **************/


a, a i, a i:before, a img {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/************ links **************/

a { color: var(--color-blue); text-decoration: underline; outline: 0; }
a:hover {  text-decoration: none; }
a[rel*="lightbox"] { cursor: pointer; }

/************ images **************/
img { 
    display: block; -webkit-backface-visibility: hidden; max-width: 100%; height: auto;
    transform: translate3d(0px,0px,0px); filter: brightness(1.01);
}

/************ structure **************/
html { overflow-x: hidden; }
body { font-size: 14px; line-height: 1.2; color: var(--color-blue); background-color: var(--color-light); /*overflow-x: hidden; */}







/************ header **************/
.tunnelHeaderWrapper { background-color: var(--color-blue); display: flex; align-items: center; justify-content: space-between; font-size: 14px; line-height: 1.1; }
.tunnelHeaderWrapper a { text-decoration: none; }
.headerLeft { display: flex; align-items: center; }
.logoWrapper { display: block; padding: 20px 20px; }
.logoWrapper img { width: 221px; height: auto;}
.tunnelBreadcrumb, .headerRight .phoneWrapper, .proLink { position: relative; min-height: 66px; display: flex; margin-left: 10px; padding-left: 10px; }
.tunnelBreadcrumb:before, .headerRight .phoneWrapper:before, .proLink:before { content: ''; background: var(--color-blue-50); position: absolute; top: 0; bottom: 0; width: 1px; z-index: 2; left: -10px;  }
.tunnelBreadcrumb { display: none; }
.tunnelBreadcrumb ul { display: flex; gap: 15px; align-items: center; }
.tunnelBreadcrumb ul li:not(.backLink) a { display: block; border: 1px solid var(--color-blue-50); border-radius: 4px; padding: 5px 10px; color: var(--color-blue-50);  }
.tunnelBreadcrumb ul li.past a { color: var(--color-white); }
.tunnelBreadcrumb ul li.past a:hover { background: var(--color-blue-50); }
.tunnelBreadcrumb ul li.active a { color: var(--color-white); background: var(--color-blue-50); }
.tunnelBreadcrumb ul li.backLink a { color: var(--color-white); display: flex; gap: 8px; }
.tunnelBreadcrumb ul li.backLink a:hover { text-decoration: underline; }

.headerRight { display: flex; align-items: center; }
.headerRight a { color: var(--color-white); display: block; padding: 20px; }
.headerRight .phoneWrapper { position: relative; display: none; }
.headerRight .phoneWrapper span { display: block; font-size: 10px; }
.headerRight .proLink { align-items: center; display: flex; }
.headerRight .proLink:before { left: 0; }


/************ Headings **************/

h1 { font-size: 36px; line-height: 1.2; font-weight: bold;  }
h2 { font-size: 36px; line-height: 1.2; font-weight: bold; margin-bottom: 10px; margin-top: 10px;  }
h3 { font-size: 16px; line-height: 1.1; font-weight: bold; margin-bottom: 20px;  }
h4 { font-size: 16px; line-height: 1.1; font-weight: bold; } 
h5 { font-size: 18px; line-height: 26px;   }
h6 { font-size: 12px; line-height: 15px; text-transform: uppercase; color: var(--color-blue-50); }

h1 strong, h2 strong, h3 strong { font-weight: bold; }

.txt h1, .txt h2 { color: var(--color-blue-50); margin-bottom: 15px; }
.txt h3 { color: var(--color-blue-50); margin-bottom: 10px; }
.txt h4 { color: var(--color-blue-50); margin-bottom: 10px; }
.txt h5 { color: var(--color-blue-50); }
.txt h6 { color: var(--color-blue-50);  }

.txt * + h2, .txt * + h3 , .txt * + h4, .txt * + h5, .txt * + h6   { margin-top: 20px; }

.txt h2 > span { color: #002A3F; font-weight: normal; }

h2 strong { margin-right: 10px;  }
h2 .smallPart { display: block; font-size: 16px; font-weight: 400; color: var(--color-blue-50); }



/************ links & text elements **************/


.txt { font-size: 14px; line-height: 1.3; }
.txt p {  }
.txt ul { list-style: disc; margin-left: 12px; margin-top: 9px; margin-bottom: 9px; }
.txt ul li { list-style: disc; margin-top: 3px; }

.smallTxt { font-size: 12px; line-height: 1.2;  }
.smallTxt ul {}

.btnWrapper { margin-top: 10px; }

.txt .excerpt { font-size: 18px; line-height: 26px; }

.txt blockquote {
    font-size: 22px; line-height: 25px; color: #868686; font-style: italic; margin-bottom: 10px; padding-left: 40px;
    position: relative; letter-spacing: 0.3px;
}
.txt cite { color: #868686; padding-left: 40px; display: block; margin-bottom: 20px; font-size: 13px; line-height: 17px; }

.chapo, .txt .chapo { font-size: 19px; line-height: 24px; margin: 15px 0; }

.aligncenter { text-align: center; }

.noMarginBottom, .txt .noMarginBottom { margin-bottom: 0; }

.gallery { margin-top: 50px; margin-bottom: 50px; display: grid; gap: 10px; }
.gallery img { border-radius: 4px; }
.gallery-2 { grid-template-columns: repeat(2, 1fr);} 
.gallery-3 { grid-template-columns: repeat(3, 1fr);} 
.gallery-4 { grid-template-columns: repeat(4, 1fr);} 

/************ Footer **************/


#footer { background: #002A3F; color: #0082AE; padding: 35px 25px;  }
.footer .main { color: var(--color-blue-50); padding: 20px 20px; font-size: 12px; display: flex; flex-direction: column; gap: 20px; }
.footer .main p { margin-bottom: 10px; }
.footer .main ul { }
.footer .main ul li { }

.footer .switchWrapperInList { margin-top: 10px; }
/************  **************/

/************  **************/

/************  **************/

/************ Repeated elements **************/
em, i { font-style: italic; }



.btn, .txt a.btn, input[type="submit"], button  {
    -moz-user-select: none;
    text-decoration: none;
    background: var(--color-blue-50);
    border: 2px solid var(--color-blue-50);
    border-radius: 30px;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0;
    padding: 10px 20px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--color-white);
    letter-spacing: 0px;
}


.btn.btnInlineWhite { color: var(--color-white);  border-color: var(--color-white); }
.btn:hover, .txt a.btn:hover, input[type="submit"]:hover, button:hover  { background-color: var(--color-blue-60); color: var(--color-white); border-color: var(--color-blue); }

.btn.btnInline { background: transparent; color: var(--color-blue-50);  }
.btn.btnInline:hover { background: transparent; color: var(--color-blue); border-color: var(--color-blue);  }

.btn.btnMain { background: var(--color-orange); border-color: var(--color-orange); }
.btn.btnMain:hover { border-color: var(--color-white); }

.yellowStars { font-size: 13px; letter-spacing: -0.7px; white-space: nowrap; padding: 0 12px 0 0; position: relative; }
.yellowStars:after { 
    content: 'NL'; font-size: 8px; line-height: 8px; letter-spacing: 0.3px;
    position: absolute; right: -4px; top: 0px; z-index: 1;
}

.colorGrey { color: var(--color-blue-50); }

/*** form elements ***/
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], textarea, select { 
    background-color: var(--color-white); color: var(--color-blue-50); border: 1px solid var(--color-blue-50); width: 100%; padding: 7px 5px;  
    font-size: 14px; line-height: 1.2; border-radius: 4px; margin-bottom: 5px; box-shadow: 0; outline: 0;
}
select { width: auto; max-width: 100%; }
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, textarea:hover { border-color: var(--color-blue-60); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus { border-color: var(--color-blue); background: var(--color-blue-10); color: var(--color-blue); }

::-webkit-input-placeholder { color: var(--color-blue-50); }
:-moz-placeholder { color: var(--color-blue-50); }
::-moz-placeholder { color: var(--color-blue-50); }
:-ms-input-placeholder { color: var(--color-blue-50); }

form label { font-size: 14px; padding: 3px 0; color: var(--color-blue-70) }
.whiteBlock form label { color: var(--color-blue-50); }
form p label { display: block; }
form p { margin: 10px 0; }



/************ pagination **************/

.pageNavigationWrapper { padding-top: 35px; padding-bottom: 35px; text-align: center; border-top: 1px solid #cbe6ee; }
.pageNavigation a { color: #808080; }

.pageNavigationWrapper a.next-page { float: right; }
.pageNavigationWrapper a.prev-page { float: left; }

.pageNavigationWrapper a.next-page:hover,  .pageNavigationWrapper a.prev-page:hover { color: #002A3F; }

.pagePagination { clear: both; text-align: center; padding-top: 45px; }
.pagePagination li { display: inline-block; color: #808080; font-size: 15px; line-height: 18px; margin: 0 2px; }

.pagePagination li a { color: #305aa1; }
.pagePagination li a:hover { color: #002A3F; }




/************  **************/
.tunnelTitleWrapper { background: var(--color-blue-50); color: var(--color-white); padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.tabs li a { border: 1px solid var(--color-blue); border-radius: 4px; padding: 5px 10px; display: block; text-decoration: none; }
.tabs li a:hover { background: var(--color-blue-20); }
.tabs li a.selected { background: var(--color-blue); color: var(--color-blue-50); }

.tunnelTitleWrapper .retourPrecedent { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

.tunnelTitleWrapper h1 { font-size: 18px; }
h2 { font-size: 20px; }

.tunnelMain { padding: 5px 20px 0; }
.tunnelMain + .tunnelMain { padding-top: 0; padding-bottom: 80px; }
.tunnelMainLast { padding-bottom: 80px; }
.titleWrapper { }
.volsWrapper > .titleWrapper { display: flex; justify-content: space-between; gap: 15px; align-items: center; }

.villeDepartWrapper { display: flex; gap: 10px; align-items: center; }
.villeDepartWrapper > label { white-space: nowrap; }

/************ Sejour Vignette **************/
.SejourVignette { display: flex; gap: 15px; }
.sejourVignetteHead { width: 75%;}
.imageThumbnailWrapper { position: relative; margin-bottom: 10px; width: 25%;}
.imageThumbnailWrapper.devisThumbnail { margin-bottom: 0; } 
.imageThumbnailWrapper img { width: 100%; border-radius: 4px; object-fit: cover; aspect-ratio: 16/9; }
.imageThumbnailWrapper .noteWrapper { display: none; position: absolute; right: 0; bottom: 0; z-index: 10; background: var(--color-orange); text-align: center; border-radius: 4px 0 4px 0; padding: 5px; }
.noteTitle { font-size: 8px; text-transform: uppercase; font-weight: bold; line-height: 1; }
.note { font-size: 10px; }
.note strong { font-size: 19px; }
.SejourVignette .surTitre, .hotelDetailsHead .surTitre { color: var(--color-orange); font-size: 14px; text-transform: uppercase; font-weight: 500; }
.SejourVignette h5, .hotelDetailsHead h5 { font-size: 16px; font-weight: bold; line-height: 1.1; padding-top: 5px; }

.imageThumbnailWrapper svg path { color: #fff;}
.imageThumbnailWrapper .swiper-button-prev, .imageThumbnailWrapper .swiper-button-next { opacity: 0;  }
.imageThumbnailWrapper:focus .swiper-button-prev, .imageThumbnailWrapper:focus .swiper-button-next,
.imageThumbnailWrapper:hover .swiper-button-prev, .imageThumbnailWrapper:hover .swiper-button-next{ opacity: 1; }
.imageThumbnailWrapper .swiper-button-prev svg { transform: rotate(180deg);}

/************ Calendrier **************/
.calendarWrapper { background: var(--color-white); padding: 20px; border-radius: 4px; margin-left: -20px; margin-right: -20px; }
.calendarMonthWrapper { display: flex; gap: 10px; align-items: center; }
.calendarMonthWrapper > label { color: var(--color-blue-50); }

.correspondanceWrapper > label { color: var(--color-blue-50); display: block; margin-bottom: 5px; }
.correspondanceBlock { position: relative; }
.correspondanceLabel { padding: 7px 5px; display: flex; gap: 5px; text-decoration: none; border: 1px solid var(--color-blue-50); border-radius: 4px; color: var(--color-blue-50); min-width: 180px; }
.correspondanceList { border: 1px solid var(--color-blue-50); border-radius: 4px; background: var(--color-white); overflow: hidden; position: absolute; left: 0; top: 100%; top: calc(100% - 1px); z-index: 21; box-shadow: 0px 2px 5px var(--color-blue-20); display: none; }
.correspondanceBlock:hover .correspondanceList, .correspondanceBlock:focus .correspondanceList { display: block; }
.correspondanceList li { border-bottom: 1px solid var(--color-blue-50); }
.correspondanceList li:last-child { border: 0; }
.correspondanceList a { padding: 7px 5px; display: flex; gap: 5px; text-decoration: none; color: var(--color-blue-50); }
.correspondanceList a span, .correspondanceLabel span { padding-right: 5px; display: inline-block; }
.correspondanceList a.active { background: var(--color-blue-10); } 
.correspondanceList a:hover { background: var(--color-blue-10); } 
.correspondanceList a em { font-style: normal; font-size: 10px; color: var(--color-blue-50); position: relative; top: 3px; }

.calendar { margin-top: 10px; position: relative; }
.calendarHead { display: flex; margin-bottom: 10px;  }
.calendarHead > div { text-align: center; width: 14.25%; color: var(--color-blue-50); padding: 10px 0; border-top: 1px solid var(--color-blue-50); border-bottom: 1px solid var(--color-blue-50);  }
.calendarLine { display: flex; }
.calendarLine .day { position: relative; text-align: center; width: 14.25%; padding: 0; font-size: 20px; margin: 2px; cursor: default; }
.calendarLine .day:first-child { margin-left: 0; }
.calendarLine .day:last-child { margin-right: 0; }
.calendarLine .day.notThisMonth { opacity: 0.2; }
.calendarLine .day .dayNumber { display: block; padding-top: 15px; }
.calendarLine .day > .dayNumber { border-top: 1px solid transparent; padding-bottom: 15px; }
.calendarLine .day .prix { display: block; font-size: 10px; white-space: nowrap; }
.calendarLine .day .dayLink { color: var(--color-blue); cursor: pointer; display: block; padding-bottom: 15px; position: relative; border-radius: 4px; text-decoration: none; border: 1px solid var(--color-blue-10); }
.calendarLine .day .dayLink:hover { background: var(--color-blue-10); } 
.calendarLine .day .dayLink:active { box-shadow: inset -2px 2px 0 var(--color-blue-20), inset 2px -2px 0 var(--color-blue-20); } 
.calendarLine .day .dayLink.selected:active { box-shadow: inset -2px 2px 0 var(--color-orange), inset 2px -2px 0 var(--color-orange); } 
.calendarLine .day .dayLink.selected { background: var(--color-orange-10); } 
.calendarLine .day .dayLink.selected .dayNumber{ color: var(--color-orange); font-weight: bold; } 
.calendarLine .day.hasDirect .dayLink:after { content: ''; background: #B3F69F; bottom: 0; height: 4px; left: 0; right: 0; position: absolute; z-index: 0; pointer-events: none; } 

.calendarLine .day .prix.onDemand { color: var(--color-blue-50); }

.calendarLine .day .bestPrice { color: var(--color-orange); font-size: 8px; line-height: 1.1; text-transform: uppercase; position: absolute; bottom: -5px; left: 50%; z-index: 2;  transform: translateX(-50%) rotate(0deg); text-align: center; font-weight: bold; transition: transform 0.3s ease; }
.calendarLine .day .selected .bestPrice, .calendarLine .day .dayLink:hover .bestPrice {  transform: translateX(-50%) rotate(-4deg); }

.calendarBottom {border-top: 1px solid var(--color-blue-50); padding-top: 15px; color: var(--color-blue-50); font-size: 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.volsDirectLegend:before { content: ''; display: inline-block; width: 15px; height: 5px; background: var(--color-orange-50); border-radius: 0 0 4px 4px; margin-right: 7px; }

.prevMonthArrow, .nextMonthArrow { display: none; border: 1px solid var(--color-blue-50); border-radius: 100%; width: 47px; height: 47px; position: absolute; top: 50%; left: -55px; background: var(--color-white); }
.prevMonthArrow:hover, .nextMonthArrow:hover { border-color: var(--color-blue-70); }
.prevMonthArrow:active, .nextMonthArrow:active { background-color: var(--color-blue-10); }

.nextMonthArrow { left: auto; right: -55px; }
.prixParPersonneWrapper { display: flex; gap: 10px; align-items: center; color: var(--color-blue-50); }
.budgetWrapper + .prixParPersonneWrapper { margin-top: 25px; }

/* The slider checkbox */
.switch { position: relative; display: inline-block; width: 33px; height: 14px; min-width: 33px; }
.switch input {  opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-blue-20); -webkit-transition: .4s; transition: .4s; border: 1px solid var(--color-white); border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 10px; width: 10px; left: 1px; bottom: 1px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--color-blue-50); }
input:focus + .slider { box-shadow: 0 0 1px var(--color-blue-50); }
input:checked + .slider:before { -webkit-transform: translateX(19px); -ms-transform: translateX(19px); transform: translateX(19px); }

/* Orange slider */
.switch.orange { width: 30px; height: 4px; min-width: 30px;}
.switch.orange .slider { background-color: var(--color-grey-50); border: 0;}
.switch.orange .slider:before { height: 12px; width: 12px; background-color: var(--color-grey); left: 0; bottom: auto; top: -3px; }
.switch.orange input:checked + .slider { background-color: var(--color-orange-50); }
.switch.orange input:checked + .slider:before { background-color: var(--color-orange); }

/************ budget block **************/
.devisWrapper { }
.devisWrapper .blockWrapper { background: var(--color-white); border-radius: 4px; padding: 20px; display: flex; flex-direction: column; gap: 30px; position: relative; margin-bottom: 20px; }
.devisWrapper .btnWrapper { display: flex; margin-top: 15px; justify-content: space-between; gap: 20px; align-items: center;  }
.widgetTitle { border-bottom: 1px solid var(--color-blue-50); margin-bottom: 10px; padding-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.hotelDetailsHead { display: block; }
.devisWrapper .priceWrapper { border-bottom: 1px solid var(--color-blue-50); margin-bottom: 10px; margin-top: 15px; padding-bottom: 10px; display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.devisWrapper .priceWrapper .price { font-size: 30px; font-weight: bold; }
.conditionsWrapper { font-size: 12px; text-align: right; }
.noRsrvp .btnMain { display: none; }

.tunnelColonneLoader { display: flex; pointer-events: none; align-items: center; justify-content: center; min-height: 300px; background: var(--color-white) url(/images/bg-colonne.png) no-repeat 20px 20px; background-size: calc(100% - 40px) auto; border-radius: 4px; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 5; }
.loaded .tunnelColonneLoader { display: none; }
.tunnelVolsLoader { display: flex; pointer-events: none; align-items: center; justify-content: center; min-height: 300px; background: var(--color-white) url(/images/loader-vols.png) no-repeat 20px 20px; background-size: 80% auto; border-radius: 4px; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 5; }
.loaded .tunnelVolsLoader { display: none; }

.calendarLoader { display: flex; pointer-events: none; align-items: center; justify-content: center;  background: var(--color-white) url(/images/loader-calendrier.png) no-repeat 0px 0px; background-size: 100% auto; border-radius: 4px; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 20; border-top: 1px solid var(--color-blue-50); min-height: 450px; }
.loaded .calendarLoader { display: none; }

.chambresLoader { display: flex; pointer-events: none; align-items: center; justify-content: center;  background: var(--color-white) url(/images/loader-chambres.png) no-repeat 0px 0px; background-size: 100% auto; border-radius: 4px; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 20;   }
.loaded .chambresLoader { display: none; }

.pensionsListeWrapper { position: relative; }
.pensionsLoader { display: flex; pointer-events: none; align-items: center; justify-content: center;  background: var(--color-white) url(/images/loader-pensions.png) no-repeat 0px 0px; background-size: 100% auto; border-radius: 4px; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 20;   }
.loaded .pensionsLoader { display: none; }
/************ Trajet  **************/
.trajetWrapper {  }

.titleAR { margin-top: 10px; }
.transfertTrajet { padding: 10px 0; border-bottom: 1px dashed var(--color-blue-50); }

.transfertTopLine { display: flex; gap: 15px; align-items: center; justify-content: space-between; }
.transfertTopLineLeft { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.iconTransfertTrajet { align-self: center; }
.transfertDate { }
.transfertCompagnie { max-width: 60px; height: auto; object-fit: contain; }
.transfertNumber { color: var(--color-blue-50); font-size: 10px; line-height: 1; }
.transfertLieuDetail { color: var(--color-blue-50); font-size: 10px; line-height: 1; }
.transfertPictoBagage { position: relative; width: 16px; }
.transfertPictoBagage .iconBagage { position: absolute; z-index: 1; width: 16px; bottom: -3px; left: 0; }
.transfertPictoBagage .iconNoBagage { position: absolute; z-index: 1; width: 16px; bottom: -3px; left: 0px; max-width: none; }

.transfertDetails { list-style: disc; color: var(--color-blue-50); margin-left: 15px; position: relative; }
.transfertDetails:before { content: ''; position: absolute; top: 10px; left: -10px; bottom: 10px; background: var(--color-blue-50); width: 1px; }
.transfertDetails li { margin: 5px 0;  }
.transfertHeure { font-size: 14px; color: var(--color-blue-50);  }
.transfertLieu { font-size: 15px; color: var(--color-blue); }

.readMoreToggleWrapper { font-size: 12px; color: var(--color-blue); }
.readMoreToggleWrapper > a { display: none; cursor: pointer; }
.readMoreToggleWrapper > a.selected { display: block; }

.trajetBlock { position: relative; }
.trajetBlock.smaller { height: 200px; overflow: hidden;  }
.trajetBlock.smaller:before { 
    content: ''; position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 120px;   border-radius: 4px;
    background: linear-gradient(0deg, rgba(191,201,207,1) 0%, rgba(191,201,207,0) 100%); 
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); 
}

/************ Hebergement **************/
.hostingWrapper li.surTitre, ul li.surTitre { margin-top: 5px; }

/************ Pastilles promo / badges  **************/
.pastillesPromoWrapper {}
.badgesWrapper { display: flex; gap: 10px; flex-wrap: wrap; }
.badgesWrapper img { height: 40px; width: auto; }

.badgeCode { text-decoration: none; font-size: 13px; line-height: 1.02; border: 2px solid var(--color-blue-50); border-radius: 10px; padding: 5px 5px; display: block; color: var(--color-blue-50); cursor: default;  }
.badgeCode strong { font-weight: 600; display: block;  }
a.badgeCode:hover { background: #fff; }

/*
* Liste vols
*/



.volsListeWrapper { background: var(--color-white); border-radius: 4px; padding: 20px; margin-left: -20px; margin-right: -20px; }
.volsWrapperHead { text-align: center; }
.volsWrapperHead .prixParPersonneWrapper { justify-content: center; margin-top: 10px; color: var(--color-blue-50); font-size: 12px; }
.volsWrapperHead h3 { font-size: 16px; font-weight: 400; }

.listeTrajetsWrapper { margin-top: 50px; display: flex; gap: 20px; flex-direction: column; position: relative; }
.trajetInListe { padding: 20px; border: 1px solid var(--color-blue-50); border-radius: 4px; display: flex; flex-direction: column; gap: 20px; }
.trajetInListe:hover, .trajetInListe:focus { background-color: var(--color-blue-10); }
.trajetInListe.selected, .trajetInListe.selected:hover { border-color: var(--color-orange); background-color: var(--color-orange-10); }
.volDetailsItem { padding: 10px 0; border-bottom: 1px solid var(--color-blue-50); }

.departureWrapper { display: flex; justify-content: space-between; gap: 10px;  padding-bottom: 10px;}
.departureTime, .arrivalTime { font-size: 12px; color: var(--color-blue-50); }
.iconTrajetDetails { height: 24px; width: auto; align-self: center; }
.arrivalWrapper { border-top: 1px dashed var(--color-blue-20); padding-top: 10px; display: flex; gap: 10px; flex-direction: column; }
.arrivalDetails { display: flex; gap: 10px; }


.trajetActionBlock { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;  }
.iconbagageTrajet { }
.trajetPrix { font-weight: bold; font-size: 16px; }
.bagageInfos { color: var(--color-blue-50); font-size: 12px; }
.trajetBagageWrapper { display: flex; align-items: center; gap: 8px; }

.filtresWrapper h4 { margin-top: 20px; margin-bottom: 10px; }
.filtersContent { padding: 0 0 25px; }
.hiddenContentOnMobile .filtersContent  { display: none; }
.filtersContent ul li { margin-bottom: 3px; }
.switchWrapper { display: flex; align-items: center; gap: 8px; }
.switchWrapper img.iconFiltreItem { max-width: 17px; } 
.filtresWrapper .switchWrapper > span { display: ruby; }
.plusEntreIcons { font-size: 10px; }
.filterIconsWrapper { display: flex; gap: 4px; }



/*** range sliders ***/



.range_container { display: flex; flex-direction: column; width: 100%; margin: 20px auto; }

.sliders_control { position: relative; min-height: 20px; }

.form_control { position: relative; display: flex; justify-content: space-between; font-size: 14px; color:  var(--color-blue-50); }

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 12px;
  height: 12px;
  background-color: var(--color-orange);
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb { -webkit-appearance: none; pointer-events: all; width: 12px; height: 12px; background-color: var(--color-orange); border-radius: 50%; box-shadow: none; cursor: pointer; }


input[type="number"] { color:  var(--color-blue-50); width: 50px; height: auto; font-size: 14px; border: none; padding: 5px; border-radius: 4px; outline: 0; }

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { opacity: 1; }

input[type="range"] { -webkit-appearance: none; appearance: none; height: 2px; width: 100%; position: absolute; background-color: var(--color-blue-50); pointer-events: none; }

#fromSlider1, #fromSlider2 { height: 0; z-index: 1; }
.form_control_container { display: flex; align-items: center; gap: 5px; }
/*
* Chambres
*/
hr { border: 0; border-top: 1px solid var(--color-blue-20); margin: 20px 0; }
.whiteBlock { background: var(--color-white); padding: 20px; border-radius: 4px; font-size: 16px; margin-bottom: 20px; position: relative;  }

.plusMoinsWrapper { display: flex; gap: 25px;  align-items: center; padding: 10px 0; justify-content: space-between; border-top: 1px solid var(--color-blue-20);  }
.plusMoinsWrapper .labelWrapper { display: flex; gap: 15px;  align-items: center;}
.plusMoins { display: flex; gap: 15px; }
.plusMoinsWrapper .moinsLink, .plusMoinsWrapper .plusLink { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;  background: transparent; border: 1.5px solid var(--color-blue); cursor: pointer; border-radius: 30px; text-decoration: none; font-size: 20px;  }
.plusMoinsWrapper .moinsLink:hover, .plusMoinsWrapper .plusLink:hover { background: var(--color-blue-20); }
.plusMoinsWrapper .moinsLink:active, .plusMoinsWrapper .plusLink:active { transform: scale(1.05); }
.plusMoins .number { font-size: 24px; width: 30px; text-align: center; display: flex; align-items: center; justify-content: center; }

.pensionsListe { display: flex; flex-direction: column; gap: 10px;  }
.pensionsListe li { position: relative;}
.pensionsListe li > label { border: 1px solid var(--color-blue-20); border-radius: 12px; padding: 10px; padding-right: 25px; display: block; pointer-events: cursor; transition: background 0.2s ease; }
.pensionsListe input[type="radio"]:not(:disabled):not(:checked)+label:hover { background-color: var(--color-blue-10); }
.pensionsListe input[type="radio"]:checked+label { background-color: var(--color-orange-10); border-color: var(--color-orange); }
input[type="radio"] { appearance: none; border-radius: 50%; width: 14px; height: 14px; border: 2px solid var(--color-blue-50); transition: 0.2s all linear;}
input[type="radio"]:checked { border: 4px solid var(--color-orange); }
input[type="radio"]:disabled { opacity: 0.4; }
.pensionsListe li > input[type="radio"] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; }

.pensionsListe input[type="radio"]:disabled+label { opacity: 0.4; }

.pensionTitre { font-weight: bold; font-size: 16px; }
.pensionInfos { font-size: 13px; }

.TypeChambreListeWrapper { position: relative; }
.TypeChambreListe { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.TypeChambreListe li { position: relative; }
.TypeChambreListe li > .radioTypeChambre { border: 1px solid var(--color-blue-20); border-radius: 12px; padding: 10px; padding-right: 25px; display: flex; align-items: center; gap: 10px; pointer-events: cursor; transition: background 0.2s ease; }
.excursion, .traverseeBateau { border: 1px solid var(--color-blue-20); border-radius: 12px; padding: 10px; padding-right: 25px; display: flex; align-items: center; gap: 10px; pointer-events: cursor; transition: background 0.2s ease; flex-direction: column; }

.TypeChambreListe li > input[type="radio"] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; }
.TypeChambreListe input[type="radio"]:not(:disabled):not(:checked)+label:hover { background-color: var(--color-blue-10); }
.TypeChambreListe input[type="radio"]:checked+label, .excursion.checked, .traverseeBateau.checked { background-color: var(--color-orange-10); border-color: var(--color-orange); }
.excursion .removeLink, .traverseeBateau .removeLink { display: none; }
.excursion.checked .removeLink, .traverseeBateau.checked .removeLink { display: inline-block; }
.excursion.checked .addLink, .traverseeBateau.checked .addLink { display: none; }

.radioTypeChambre .chambreThumbnail, .excursion .chambreThumbnail, .traverseeBateau .chambreThumbnail { border-radius: 4px; width: 25%; align-self: flex-start; aspect-ratio: 16/9; object-fit: cover; }
.typeChambreFeatures { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--color-blue-50); margin-top: 5px; flex-wrap: wrap; }
.typeExcursionFeatures { font-size: 16px; color: var(--color-blue-50);  }

.typeChambreTitre { font-size: 16px; font-weight: bold; }
.excursionTitre, .traverseeBateauTitre { font-size: 16px; font-weight: bold; }
.typeChambreInfos { display: flex; flex-direction: column; gap: 10px; width: 75%; }
.excursionInfos, .traverseeBateauInfos { display: flex; flex-direction: column; gap: 10px;  }
.chambreDescription { font-size: 12px; margin-top: 10px; max-width: 520px;  }
.typeChambrePrixWrapper { font-size: 12px; color: var(--color-blue-50); }
.typeChambrePrix, .typeExcursionPrix, .typeTraverseeBateauPrix  { font-size: 16px; }

.enSavoirPlusLink { margin-top: 10px; }
.enSavoirPlusLink a { color: var(--color-blue-50); }

.moreExcurionsLinkWrapper, .moreVoituresLinkWrapper { font-size: 12px; text-align: center; padding: 30px 0;}
.moreExcurionsLinkWrapper strong, .moreVoituresLinkWrapper strong { color: var(--color-blue-50); }
.moreExcurionsLinkWrapper a, .moreVoituresLinkWrapper a { cursor: pointer; }

.excursionsListe, .traverseeBateauListe { display: flex; gap: 10px; flex-direction: column; }
.excursionsListe li > input[type="checkbox"], .traverseeBateauListe li > input[type="checkbox"] { display: none; }

.btnMainWrapperChambres { text-align: right; justify-content: flex-end; }

.devisThumbnail { border-radius: 4px 4px 0 0; }
.devisThumbnail img { aspect-ratio: 16/9; object-fit: cover; border-radius: 4px 4px 0 0;  }
.devisThumbnail + .blockWrapper { border-radius: 0 0 4px 4px; }

.cadreOneMoreDayDepart { font-size: 12px; border: 1px solid var(--color-blue-20); padding: 5px; display: inline-block; border-radius: 4px; }

/*** transfert / location vehicule ***/

.transfertChoix, .locationVehicule { border: 1px solid var(--color-blue-20); padding: 10px 25px 10px 10px; border-radius: 12px; margin-bottom: 10px; transition: background-color 0.3s ease; display: flex; align-items: center; gap: 10px; position: relative; cursor: default; }
.transfertChoix:hover { background-color: var(--color-blue-10); } 
.transfertChoix.selected { background-color: var(--color-orange-10); border-color: var(--color-orange); } 

.transfertChoix .imgChoixWrapper, .locationVehicule .imgChoixWrapper { width: 25%; align-self: flex-start;  }
.transfertChoix .imgChoix, .locationVehicule .imgChoix { border-radius: 4px; aspect-ratio: 16/9; max-width: 90px; margin: 0 auto; width: 100%; object-fit: contain; }
.transfertChoix input[type="radio"] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; }
.transfertChoix .infosChoixWrapper, .locationVehicule .infosChoixWrapper { display: flex; flex-direction: column; gap: 10px; width: 75%; }

.prixChoix { color: var(--color-blue-50);  }
.commentPrixChoix { font-size: 12px; }

.titreChoix { font-size: 16px; line-height: 1.2; display: block; margin-bottom: 5px; }
.commentChoix { font-size: 12px; display: block; color: var(--color-blue-50); }

.vehiculeLocationChoixWrapper { display: none; padding-top: 15px; }
.transfertChoix.selected + .vehiculeLocationChoixWrapper { display: block; }

.locationVehiculeTitle { margin-bottom: 15px; }
.locationVehicule .plusMoinsWrapper { border: 0; padding: 0; }


/*
* Excursion / traverse bateau detail
*/
.excursionDetail, .itemBigDetail, .traverseeBateauDetail { display: flex; gap: 20px; flex-direction: column; }
.itemBigDetailLeft { position: relative; }
.excursionDetailLeft img, .itemBigDetailLeft img, .traverseeBateauDetailLeft img { border-radius: 4px; }
.itemBigDetail + .itemBigDetail { margin-top: 50px; }
.itemBigDetailRight h2 { color: var(--color-blue); }
.itemBigDetailRight .typeChambreDetails { width: 100%;}
.itemBigDetailRight .chambreDescription { font-size: 16px; }
.traverseeBateau .imgChoix { border-radius: 4px; aspect-ratio: 16/9; max-width: 90px; margin: 0 auto; width: 100%; object-fit: contain; }
.stickyImg { position: sticky; top: 50px; z-index: 1; }
/*
* Participants
*/
.normalWeight { font-weight: normal; }
.passengersSectionTitle { margin-top: 20px; margin-bottom: 20px; }
.passengersSectionTitle span { font-weight: normal; color: var(--color-blue-50); }
.passengersFormLineHead { display: none; }
.passengersFormLine { border-top: 1px solid var(--color-blue-50); padding-top: 20px; }
.passengersFormLineTitle { margin-bottom: 20px; }
.passengersFormLine .passengersFormField { margin-bottom: 10px; }
.passengersFormLine label { font-size: 14px; color: var(--color-blue-50); display: block; margin-bottom: 5px; }

.plusMoinsSmallWrapper.plusMoinsWrapper .moinsLink, 
.plusMoinsSmallWrapper.plusMoinsWrapper .plusLink { width: 25px; height: 25px; font-size: 14px; border-color: var(--color-blue-50); color: var(--color-blue-50); }
.plusMoinsSmallWrapper.plusMoinsWrapper .plusMoins { gap: 5px; }
.plusMoinsSmallWrapper.plusMoinsWrapper .plusMoins .number { font-size: 14px; color: var(--color-blue-50);  }
.passengersFormField.plusMoinsWrapper { border: 0; padding: 0; align-self: flex-start; }


.btnMainWrapperParticipants { display: flex; flex-direction: column; gap: 10px; }
.btnMainWrapperParticipantsComments { font-size: 16px; }

.textCheckboxes li { margin: 10px 0; }
.textCheckboxes .switchWrapper { align-items: flex-start; }
.textCheckboxes .switchWrapper .switch { margin-top: 2px; }
.textCheckboxes .switchWrapper .switch.orange { margin-top: 6px; }
.textCheckboxes .switchWrapper > span { display: block; max-width: calc(100% - 41px); }

.carnetsVoyageWrapper { border: 1px solid var(--color-blue-50); border-radius: 12px;   }
.carnetVoyage { padding: 20px; border-bottom: 1px solid var(--color-blue-50); }
.carnetVoyage:last-child { border-bottom: 0; } 
.carnetVoyage > img { max-width: 150px; }
.carnetVoyageInfosTitle { margin-bottom: 0; margin-top: 10px; }
.carnetVoyage .plusMoinsWrapper { border: 0;  }
.comments { font-size: 14px; color: var(--color-blue-50); }

.assuranceBlockWrapper { display: flex; gap: 20px; flex-direction: column; }

.assuranceBlockWrapper { border: 1px solid var(--color-blue-20); border-radius: 12px; padding: 10px; }
.assuranceBlockWrapper.checked { background-color: var(--color-orange-10); border-color: var(--color-orange); }
.assuranceBlockTitle { color: var(--color-blue-50); font-size: 16px; font-weight: bold;  }
.assuranceBlockInfos .comments { margin-top: 20px; }
.assurancePrix { font-size: 16px; color: var(--color-blue-50); }
.assurancePrixInfos .removeLink { display: none; font-size: 14px; }
.checked .assurancePrixInfos .removeLink { display: inline-block;  }
.checked .assurancePrixInfos .addLink { display: none; }

.coordonneesForm { margin: 20px 0; }
.coordonneesForm label { font-size: 14px; color: var(--color-blue-50); display: block; margin-bottom: 3px; }

.clientsFormLine { display: flex; gap: 10px; flex-direction: column; margin-bottom: 20px; }

.ui-tooltip  { border-radius: 20px!important; padding: 7px 14px!important; background: var(--color-blue)!important; color: var(--color-white)!important; font-size: 14px!important; border: 2px solid var(--color-white)!important; box-shadow: 0 5px 10px rgba(0,2,63,.3);  }

/*
* Nombre de passagers
*/
.nbPeopleWrapper .btnWrapper { text-align: right; border-top: 1px solid var(--color-blue-20); margin-top: 0; padding-top: 10px; }
.nbPeopleWrapper .hiddenContent { display: none; }
.childrenPassagerAge { display: flex; gap: 10px; align-items: center; }

/*
* Light box
*/

body.lightboxActivated { position: fixed; left: 0; right: 0; }
body.lightboxActivated .tunnelMain { filter: blur(10px); }
.lightBoxWrapper { display: block; position: fixed; z-index: 9999; top: 0; left: 100%; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; background: rgba(0,42,63,0.7);  opacity: 0; transition: opacity 0.2s ease; pointer-events: none; visibility: hidden;}
.lightboxActivated .lightBoxWrapper { display: block; visibility: visible; opacity: 1; left: 0; pointer-events: auto; }
.lightBoxWrapper .lightBoxContent { opacity: 0; transition: opacity 0.4s ease, top 0.4s ease; position: relative; top: -30px; }
.lightboxActivated .lightBoxWrapper .lightBoxContent { opacity: 1; top: 0; }

.lightBoxWrapper .lightboxLoader, .tunnelColonneLoader .loader, .tunnelVolsLoader .loader, .tunnelPatienceLoader .loader, .loader { position: absolute; top: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 0; border-radius: 100%; border: 1px solid var(--color-blue-20); background: var(--color-white); width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; }
.loader { top: 10px; right: 10px; left: auto; transform: none; width: 40px; height: 40px; background: transparent; border-color: transparent;}
.tunnelColonneLoader .loader { top: 10px; right: 10px; left: auto; transform: none; width: 40px; height: 40px; background: transparent; border-color: transparent;}
.tunnelVolsLoader .loader { top: 10px; right: 10px; left: auto; transform: none; width: 40px; height: 40px; background: transparent; border-color: transparent;}
.tunnelPatienceLoader .loader { top: 10px; right: 20px; left: auto; transform: none; width: 40px; height: 40px; background: transparent; border-color: transparent; }
.lightBoxWrapper .lightboxLoader:before, .tunnelColonneLoader .loader:before, .tunnelVolsLoader .loader:before, .tunnelPatienceLoader .loader:before, .loader:before { width: 50px; height: auto; margin: 0 auto; display: block; 
    content: ''; display: block; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(farthest-side,#80949f 94%,#0000) top/3.8px 3.8px no-repeat, conic-gradient(#0000 30%,#80949f);
   -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3.8px),#000 0); animation: spinner-c7wet2 1s infinite linear; 
    
}

@keyframes spinner-c7wet2 {
   100% {
      transform: rotate(1turn);
   }
}
.lightBoxWrapper .lightbox { padding: 35px 25px 25px; display: flex; align-items: center; justify-content: center; /*overflow: scroll;*/  min-height: 100%; }
.lightBoxContent { background: #fff; color: #002A3F; border-radius: 20px 0 20px 20px; padding: 35px 20px; text-align: left; max-width: 755px; flex-basis: 755px; position: relative; }
 
a.closeLightBox { position: absolute; z-index: 1; right: 0px; top: -34px; display: block; color: #fff; cursor: pointer; padding: 10px 0; font-size: 12px; opacity: 1; text-align: center; }
a.closeLightBox i:before { width: 25px; }
a.closeLightBox:hover { opacity: 0.8;  } 
.lightBoxContent a { text-decoration: underline; }

.lightBackground, .lightBlueBackground { background: var(--color-orange-10); padding: 20px; border-radius: 4px; margin: 20px 0; }
.lightBackground.border { border: 1px solid  var(--color-orange); }
.lightBlueBackground { background: var(--color-blue-10); }

.warningBoxWrapper { font-size: 14px; display: flex; gap: 20px; align-items: flex-start; }
.warningBoxWrapper .inconWraning { width: 20px; height: auto; }
.warningBoxWrapper .txt p { margin: 10px 0; }

/******* Confirmation *******/

.confirmationCarnetsWrapper .confirmationLine { }
.confirmationLine { display: flex; justify-content: space-between; gap: 10px; padding-top: 15px; border-top: 1px solid var(--color-blue-10); margin-top: 15px; }
.confirmationLine:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.confirmationLine .titleWrapperTitle { margin-bottom: 5px; }

.fieldWidgetWrapper p { color: var(--color-blue-50); font-size: 14px; }
.fieldWidgetWrapper .titleFieldWrapper { margin-bottom: 10px; }

.confirmationParticipantsWrapper .confirmationLine { padding-bottom: 15px; border-bottom: 1px solid var(--color-blue-10);}
.confirmationParticipantsWrapper .titleWrapper h4 span { color: var(--color-blue-50); font-weight: 400; }
.confirmationParticipantsColumns { display: flex; gap: 50px;  }
.confirmationParticipantColumn { padding: 15px 0; width: 50%; }

.confirmationFieldsCoordonnees { margin-top: 25px; }
.confirmationField { margin-top: 5px; margin-bottom: 5px; }
.confirmationField label { color: var(--color-blue-50); margin-right: 10px; font-size: 14px; }

.editBtnWrapper { margin-top: 25px; text-align: right; }

.confirmationThumbnail { border-radius: 4px; width: 68px; height: 42px; object-fit: cover; }
.titleWrapper { display: flex; gap: 15px; }
.confimationWidgetHotel { display: flex; gap: 15px; }
.confimationWidgetHotel .hotelDetailsHead { padding-top: 3px; }

.confirmationLineChambreTitle { padding-top: 15px; border-top: 1px solid var(--color-blue-10); margin-top: 15px; }
.confirmationLineChambreTitle .titleWrapper { align-items: center; }
.confirmationLineChambreDetail .labelWrapper { display: flex; gap: 10px; }

.btnMainWrapperCommentsConfirmation { margin-bottom: 20px;  }
.btnMainWrapperConfirmation  { display: flex; gap: 20px; flex-direction: column; }
.btnMainWrapperConfirmation .btnWrapper { text-align: right; }

.tunnelMainParticipantsBottom .tunnelLeft { display: flex; gap: 20px; flex-direction: column; }

.errorBox { box-shadow: inset 0 0 1px var(--color-orange); background-color: var(--color-orange-10); }
.textCheckboxes .labelWarning { margin-left: 38px; }
.labelWarning { color: var(--color-orange); font-size: 14px; margin-top: 15px; display: none; }
.errorBox .labelWarning { display: block; }
.errorBox .labelWarning.blinked { animation: blinkReverse .5s ; opacity: 1; }
.errorBox .btnMain { background-color: var(--color-grey); border-color: var(--color-grey); }

/******* Patience *******/
.patienceContentMain { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 60px); }
.patienceWrapper { background: transparent url(/images/exo-sun.svg) no-repeat 50% 10px; background-size: 100px auto; padding: 75px 25px 25px; margin: 0 auto; max-width: 760px; }
.patienceWrapper .loaderIcons { max-width: 50px; margin: 0 auto; }
.patienceCard { background: var(--color-white); border-radius: 30px; padding: 25px; font-size: 16px; }
.patienceTitle { color: var(--color-orange); margin-top: 25px; margin-bottom: 25px; font-size: 20px; animation: blink 1s infinite;}

@keyframes blink { 
  0% { opacity:0; }
  50% { opacity:1; } 
  100% { opacity:0; }
}
@keyframes blinkReverse { 
  0% { opacity:1; }
  50% { opacity:0; } 
  100% { opacity:1; }
}
.patienceImagesWrapper { position: relative; padding: 20px 0; }
.patienceImagesWrapper .loaderIcons { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); }
.loaderDots { margin-top: 15px; }
body.patience  .tunnelBreadcrumb, body.patience  .headerRight, body.patience .footer { display: none; }
/******* *******/

.noMarginTop { margin-top: 0; }