/**** conception et integration par Raphael Wittmannn et EXOTISMES 
 * author url : https://raphaelwittmann.net/
 ******/

/*
 *  FONTS
 */ 
body, input { font-family: 'lato', 'Arial', sans-serif; }

.btn, .yellowStars:after, .pageHeader.destinationHeader h2, .garantiesList, .messageDefilant { font-family: 'lato-light', 'Arial', sans-serif; }


/*
 *  GENERAL
 */ 

:root {
    --side-margin: 20px;
    --content-max-width: 1300px;
    
    --color-white: #fff;
    --color-blue: #002A3F;
    --color-orange: #E84E0F;
    --color-yellow: #ffdc01;
    --color-grey: #808080;
    --color-light: #D9D9D9;
    --color-lighter: #e5e9eb;
}


html { }
body { background: var(--color-blue); font-size: 16px; line-height: 1; color: var(--color-white); text-align: left; overflow-x: hidden; }
.contentWrapper { color: var(--color-blue); background: var(--color-white); width: 100%; min-height: 100vh; }
a { text-decoration: underline; color: inherit;  }
a:hover { text-decoration: none; }

.btn { display: inline-block; text-decoration: none; border: 1px solid currentColor; font-size: 18px; text-transform: uppercase; font-weight: bold; padding: 16px 26px 13px; border-radius: 10px; transition: all 0.2s ease; }
.btn:hover { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-white); }


.main, .sectionContentWrapper { margin: 0 auto; max-width: var(--content-max-width); padding: 25px; }

.clearfix:before, .clearfix:after { clear: both; content: " "; display: table; }

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

/*
 *  HEADER
 */ 


.menuWrapper { display: none; background: #fff; text-align: left; pointer-events: none; position: relative; z-index: 100; }
.menuWrapper ul {  }
.menu-opened .menuWrapper { pointer-events: auto; transition-delay: 0s; }

.menuWrapper li { border-bottom: 1px solid rgba(232, 78, 15, 0.2); }
.menuWrapper li a, .menuWrapper li h6 { padding: 10px 13px; font-size: 14px; line-height: 1.1; display: block; color: #E84E0F; }
.menuWrapper li h6 { text-transform: uppercase; background: rgba(232, 78, 15, 0.1); }
.menuWrapper li a:hover { background: rgba(232, 78, 15, 0.05); color: #002A3F; }


.menuTop { display: none; }
.menuTop a { text-decoration: none; }
.menuTop a:hover { text-decoration: underline; }

/*
 *  NAV BAR
 */ 


.navBar { background: transparent; color: #fff; position: absolute; left: 0; right: 0; top: 0; z-index: 99; animation: 0.3s ease-in 0 slideup; -webkit-animation: 0.3s ease-in 0s slideup; display: flex; align-items: center; justify-content: space-between}
@-webkit-keyframes slideup { from { transform: translateY(-50px); opacity: 0; }     to { translateY(0); opacity: 1; } }
@keyframes slideup { from { transform: translateY(-15px); opacity: 0; }     to { translateY(0); opacity: 1; } }
.navBar .logoHeaderLink {display: block; padding: 13px ; }
.navBar .logoHeaderLink img { height: 15px; width: auto; display: block; }


/*** menu toggle ***/

body #menu-toggle { display: block; float: right; width: 50px; text-align: center; position: relative; z-index: 9999;  text-decoration: none; position: absolute; right: 0; top: 0; padding: 7px 0 6px; margin-top: 0; }

a#menu-toggle { cursor: pointer; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity,filter; }
#menu-toggle strong { display: inline-block; position: relative; width: 30px; height: 26px; } 
#menu-toggle i, #menu-toggle i:before, #menu-toggle i:after { display: block; background-color: var(--color-white); height: 3px; width: 30px; position: absolute; z-index: 99; left: 0;  border-radius: 2px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; } 

#menu-toggle i { top: 50%; transition-timing-function: cubic-bezier(.55,.055,.675,.19); transition-duration: 75ms; }
#menu-toggle i:before { content:''; top: -7px; transition: top 75ms ease .12s, opacity 75ms ease; }
#menu-toggle i:after { content:''; bottom: -7px; transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55,.055,.675,.19); }

#menu-toggle.opened i { transform: rotate(45deg); background-color: var(--color-orange);  }
#menu-toggle.opened i:before { transition: top 75ms ease, opacity 75ms ease .12s; top: 0; opacity: 0; background-color: var(--color-orange); }
#menu-toggle.opened i:after{ bottom: 0; transition: bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s; transform: rotate(-90deg); background-color: var(--color-orange); }




/*
 *  HEADINGS
 */ 

h1 { font-size: 30px; font-size: clamp(30px, 4vw, 70px); font-weight: bold; line-height: 1; }
h2 { font-size: 26px; font-size: clamp(26px, 4vw, 36px); font-weight: bold; text-transform: uppercase; line-height: 1.1; }
h2 > span { display: block; color: var(--color-orange); font-weight: normal; font-size: 20px; }




.sectionHeader { text-align: center; padding: 50px 0; }
.sectionContentWrapper { margin: auto; max-width: var(--content-max-width); }

/*
 *  HOME HERO
 */ 
.homeHeroSection { position: relative; padding: 0 var(--side-margin); background: var(--color-blue); color: var(--color-white); text-align: center; overflow: hidden; }
.homeHeroSection:before { 
    content: '';  background: rgba(0,42,63, 0.3); background: linear-gradient(180deg, rgba(0,42,63,0.6) 0%, rgba(0,42,73,0) 50%); 
    position: absolute;  left: 0; right: 0; top: 0; bottom: 0; z-index: 1;
}
.homeHeroVideoWrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; }
.homeHeroSection .homeHeroBackgroundVideo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.homeHeroSection .sectionContentWrapper { position: relative; z-index: 2; padding: 100px 0; min-height: 100vh;  display: flex; justify-content: center; align-items: center; }
.homeHeroSection .sectionContent {  }

.homeHeroSection h1 { text-shadow: 0 5px 10px rgba(0,0,0,0.3); position: relative; margin-top: 30px; margin-bottom: 75px; }
.homeHeroSection h1 strong { position: relative; z-index: 2;  }
.homeHeroSection h1 span { 
    width: 62px; height: 62px; background: var(--color-orange); display: flex; align-items: center; justify-content: center; flex-direction: column;
    position: absolute; top: calc(100% - 10px); left: 50%; z-index: 1; margin-left: -31px; text-shadow: none; font-size: 11px; text-align: center;
    border-radius: 100%; font-weight: normal; text-transform: uppercase; transform: rotate(-20deg);
}
.homeHeroSection h1 span em  { font-style: normal; font-size: 18px; }

.homeHeroSection .sectionBottom { position: absolute; z-index: 3; bottom: 20px; left: 20px; right: 20px; }
.homeHeroSection .sectionBottom ul { display: flex; list-style: none; justify-content: center; text-transform: uppercase; }
.homeHeroSection .sectionBottom ul li { margin: 0 5px; position: relative; padding-left: 15px; }
.homeHeroSection .sectionBottom ul li:before { content: ''; display: block; width: 6px; height: 6px; border-radius: 100%; background: var(--color-white); position: absolute; left: 0; top: 5px; z-index: 1; }
.homeHeroSection .sectionBottom ul li:first-child { padding-left: 0; }
.homeHeroSection .sectionBottom ul li:first-child:before { display: none; }

/*
 *  HOME DESTINATIONS GRID
 */ 
.row.destinationsGrid { margin-right: -10px; margin-left: -10px; }
.row.destinationsGrid .col-md-3 { padding-right: 10px; padding-left: 10px; }
.cardWrapper { margin-bottom: 20px; }
.card {  }
.card a { display: flex; position: relative; text-decoration: none; min-height: 200px; align-items: center; justify-content: center; color: var(--color-white); font-weight: bold; text-transform: uppercase; padding: 15px; text-align: center; border-radius: 3px; overflow: hidden; }
.card a:after { content: ''; position: absolute; z-index: 3; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 42, 63, 0.4); transition: opacity 0.5s ease; } 
.cardTitle { position: relative; z-index: 4; }
.cardImage { position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; }
.card img { max-width: 100%; width: 100%; height: 100%; object-fit: cover; }
.card .imageStatic {}
.card .imageHover { position: absolute;  z-index: 2; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; transition: opacity 0.5s ease; }
.card a:hover .imageHover { opacity: 1; }
.card .cardBackgroundVideo { max-width: 100%; width: 100%; height: 100%; object-fit: cover; }

.card a:hover:after { opacity: 0.5; } 


.destinationsSection { position: relative; }
.destinationsSection .sectionContentWrapper { position: relative; z-index: 1; }
.exotismesSunWrapper {  position: absolute; right: -250px; top: 80%; z-index: 0; --rotation: 0deg; }
.exotismesSun { display: block; pointer-events: none; transform: rotate(var(--rotation)); }

.iconPalmiers { max-width: 92px; display: block; height: auto; margin: 0 auto 20px; }
.iconStars { max-width: 92px; display: block; height: auto; margin: 20px auto 0px; }


/*
 *  IMAGES
 */ 
img { max-width: 100%; }
.lazyload { opacity: 0; }
.lazyloaded { opacity: 1; transition: opacity 300ms; }

/*
 *  Footer
 */ 


.footer { padding: 70px 0; text-align: left; font-size: 15px; line-height: 1.2; }

.phoneWrapper { margin-top: 40px; }
.footerPhone { display: block; text-decoration: none; }
.footerPhone strong { font-size: clamp(20px, 3vw, 40px); }

.logoFooter { height: 15px; width: auto; display: block; margin-bottom: 20px; }

.socialNetworkLinks { display: flex; margin-top: 40px; }
.socialNetworkLinks li { margin-right: 10px; }
.socialNetworkLinks li a svg { width: 32px; height: auto; }
.socialNetworkLinks li a { transition: opacity 0.2s ease;  }
.socialNetworkLinks li a:hover { opacity: 0.7;  }

/*
 *  MESSAGES
 */ 
#messageWrapper { display: none; position: fixed; width: 100%; bottom: -60px; left: 0; text-align: center; z-index: 9; opacity: 1; }
#messageWrapper p { display: inline-block; background: #E84E0F; color: #fff; font-size: 16px; padding: 15px; border-radius: 40px; box-shadow: 0 0 13px rgba(0, 0, 0, .3); }

/*
 *  TABS
 */ 
.sectionContentWrapper ul.tabNav { list-style: none; display: flex; padding: 0; border-bottom: 1px solid var(--color-light); }
.sectionContentWrapper ul.tabNav li { padding: 0; border: 1px solid var(--color-light);  border-bottom: 0; border-radius: 3px 3px 0 0; margin-right: 5px; margin-bottom: -1px; }
.sectionContentWrapper ul.tabNav li a { display: block; padding: 5px 7px; text-decoration: none; background: var(--color-lighter); line-height: 1; font-size: 15px; transition: background-color 0.2s ease; }
.sectionContentWrapper ul.tabNav li a:hover { background: rgba(0, 42, 63, 0.07); }
.sectionContentWrapper ul.tabNav li.selected a { background: var(--color-white); }
.sectionContentWrapper ul.tabNav li a img { display: inline-block; height: 15px; width: auto; margin-right: 5px; }

.destinationsHeader { position: relative; }
.departureFrom { color: var(--color-grey); font-size: 13px; }

/*
 *  TEXTES
 */ 
.sectionContentWrapper { font-size: 17px; line-height: 1.4; }
.textLarge { font-size: 22px; }
.textExtraLarge { font-size: 30px; }

.sectionContentWrapper p, .sectionContentWrapper ul { margin: 25px 0; }


.sectionContentWrapper ul { list-style: disc; padding-left: 15px; }


.aboutSection { padding-bottom: 100px; position: relative; }
.aboutSection .exoWave { width: 40%; max-width: 600px; position: absolute; z-index: 0; bottom: 50px; left: -5%; }

.sectionContentWrapper .garantiesList { list-style: none; padding-left: 0; font-size: 20px; font-weight: bold; color: var(--color-orange); }
.garantiesList li { display: flex; width: 100%; align-items: center; padding: 20px 0; position: relative; }
.garantiesList li .filet { width: 100%; height: 1px; background: var(--color-orange); display: block; position: absolute; z-index: 1; left: 0; top: 0; } 
.garantiesList img { height: 40px; width: 55px; object-fit: contain; margin-right: 20px; }


.messageDefilant { background: #e5e9eb; color: var(--color-blue); font-weight: bold; font-size: 60px; font-size: clamp(30px, 7vw, 80px); line-height: 1; max-width: 100%; padding: 25px 0; }
.messageDefilant > div { white-space: nowrap; width: auto; position: relative; display: flex; }
.messageDefilant > div p {  display: inline-block; white-space: nowrap; position: relative;  }
.messageDefilant strong { color: var(--color-orange); }
.messageDefilant img { display: inline-block; height: 60px; height: clamp(30px, 7vw, 80px); width: auto; max-width: none; margin-left: 15px; position: relative; top: 0.5vw; }


.fadeInFromBottom { opacity: 0;  transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fadeInFromBottom.inView { opacity: 1; transform: translateY(0); }

.fadeInFromLeft {opacity: 0;  transform: translateX(-200px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fadeInFromLeft.inView { opacity: 1; transform: translateX(0); }