/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
/* @import url('../fonts/geomanist/stylesheet.css');*/

@import url('../fonts/segoe/stylesheet.css');

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/material-icons/MaterialIcons-Regular-new.woff2) format('woff2');
}





/* #Site Styles
================================================== */

:root {
	--gutter-base-right: 30px;
	--gutter-base-left: 30px;
	--font-family-base: 'Inter', sans-serif;
	--font-family-geomanist: 'Inter', sans-serif;
	--font-family-icon: 'icomoon';
	--font-size-base: 16px;
	--line-height-base: 1.3;
	--body-bg: #17262d;
	--color-orange: #e95703;
	--color-dark-orange: #cd4c03;
	--color-red: #e41316;
	--color-yellow: #C17A00;
	--color-dark-red: #c81113;
	--color-white: #fff;
	--color-black: #000;
	--color-gray: #0d171c;
	--w-100: 100%;
	--h-100: 100%;
	--heading-margin: 0 0 20px 0;
	--line-height-heading: 1.1;
	--font-size-h1: 26px;
	--font-size-h2: 26px;
	--font-size-h3: 24px;
	--font-size-h4: 22px;
	--font-size-h5: 20px;
	--font-size-h6: 18px;
	--input-radius: 5px;
	--input-height: 40px;
	--font-size-input: 14px;
	--base-duration: all 0.3s;
}

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,
body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-white); }
body { background: var(--body-bg); }
body.orange { background-color: var(--color-orange) !important; }
body.red{ background-color: var(--color-red) !important; }
body.yellow { background-color: var(--color-yellow) !important; }
[data-link] { text-decoration:underline;}

input,
select,
textarea { padding: 10px; width: var(--w-100); height: var(--input-height); font-family: var(--font-family-base); font-size: var(--font-size-input); color:white; border: 3px solid var(--color-white); border-radius: var(--input-radius); background-color: transparent; }
input::placeholder,
textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
label { margin-bottom: 3px; display: block; font-family: var(--font-family-geomanist); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
img { display: block; max-width: var(--w-100); border: 0; }
ul,
li { list-style: none; }
:focus { outline: none; }
a { display: inline-block; text-decoration: none; }
p { margin-bottom: 20px; }
p a { color:#E41316;}
h1, .h1, h2, .h2,h3, .h3, h4, .h4, h5,.h5, h6, .h6 { margin: var(--heading-margin); font-family: var(--font-family-geomanist); line-height: var(--line-height-heading); color: var(--color-white); font-weight:800;}
h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h2); }
h3, .h3 { font-size: var(--font-size-h3); }
h4, .h4 { font-size: var(--font-size-h4); }
h5, .h5 { font-size: var(--font-size-h5); }
h6, .h6 { font-size: var(--font-size-h6); }


/**************************************
General stuff
**************************************/
/* Responsive embedded video */
.videodetector {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; border-radius:10px;}
.videodetector iframe, .videodetector object, .videodetector embed { position:absolute;top:0; left:0; width:100%; height:100%;}
/* Set max content image size and margin for responsive use */
img[src*="/content/images/"] { max-width:100% !important;height:auto !important;}
img[src*="/content/images/"][style*="float: left"] { margin:0px 15px 15px 0;} 
img[src*="/content/images/"][style*="float: right"] { margin:0px 0px 15px 15px;} 
/* Hide captcha badge */
.grecaptcha-badge { display:none;}
a[disabled],button[disabled] { pointer-events: none; opacity:0.7;}
.material-icons.small { font-size:16px;}
.material-icons.medium { font-size:20px;}
.material-icons.large { font-size:100px;margin-bottom:10px;}
/*.hidden { display:none !important;}*/
*[type=submit] { cursor:pointer;}
.blockShadow { box-shadow:0 -70px 70px rgba(0, 0, 0, 0.03); /*0 0 60px rgba(0, 0, 0, 0.07);*/padding-top:120px !important;}
.js-datepicker { cursor:pointer;}
.form-input:has(.js-datepicker)::after, .datePicker::after, .form-field:has(.js-datepicker)::after, .form-group:has(.js-datepicker)::after  {
  content: "calendar_month";
  font-family: 'Material Icons';
  position: absolute;
  top: 50%;
  right: 8%;
  font-size:20px;
  transform: translateY(-50%);
  color: var(--gray-700);
  cursor: pointer;
}
 .form-group:has(.js-datepicker)::after { top:48px; }
.card-offer .form-group:has(.js-datepicker)::after { top:50%; }
.shorten { text-overflow: ellipsis;  overflow: hidden; white-space:nowrap;}
.mark {  box-sizing: border-box;border: 2px solid var(--blue);}
.noShadow { box-shadow:none !important;}
form span.error { color:red;display:block;margin-top:5px;font-size:14px;}
p.error { color:red !important;}
p.error a { color:red;}
input.error,select.error, textarea.error, .checkbox:has(span.error)  { border:1px solid red !important;}
.mb0 { padding-bottom:0px !important;}


/* ALERT box colors */
#mainCntr .data-popup.error { background:#ff1d25 !important;border:none !important;}
#mainCntr .data-popup.success { background:#7fa500;}
#mainCntr .data-popup.note { background:#ecc40b;}
#mainCntr .data-popups { z-index: 91; position: absolute; right: 10px; border-radius: 30px; top: 35px; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block;  }
#mainCntr .data-popup { z-index: 91; padding: 10px 5px 10px 23px; color: #fff; border-radius: 30px; margin-top: 1px; min-height: 40px; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; background: #efa43b; max-width: 100%;margin-bottom:5px; }
#mainCntr .data-popup a { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 20px; height: 20px; color: #fff; margin: 0 8px; letter-spacing: 0.01em; }
#mainCntr .data-popup a:hover { text-decoration: none; }
#mainCntr .data-popup a i { font-size: 20px; letter-spacing: 0; }

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
}

/****************************************
SHARE BUTTON
****************************************/
[data-share]:not(.nostyle) { text-decoration:none;padding:2px 10px;}
[data-share]:not(.nostyle):before {  font-family: 'Material Icons', sans-serif; font-size: 25px;  content: 'ios_share';margin:0;color:#3aa49a;transition: all 0.3s; transform: scaleX(-1); }
[data-share]:not(.nostyle):hover:before { color:#2c867e;}
.data-share-dropdown {  display:block;position: absolute; background-color: white;padding: 5px 15px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.21);border-radius:5px;z-index:9; transition:all 0.1s ease-in-out;min-width:150px;left:calc(50% - 75px);bottom:55px;}
.data-share-dropdown a { display: block !important; text-decoration: none !important; color:#706f6f !important;padding:7px 0px !important;border-bottom:1px solid #ddd !important;font-size:15px !important;font-weight:bold !important; border-top:none !important;text-align:left;}
.data-share-dropdown a:last-child { border:none !important;} 
.data-share-dropdown a:hover { color:#0c2220 !important;}
.data-share-dropdown a svg { width:15px;margin-right:10px; padding-top:5px;}
@media only screen and (max-width: 480px) { [data-share] { text-decoration:none;padding:2px} }









/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.centered { padding-right: calc((100% - 1200px) / 2); padding-left: calc((100% - 1200px) / 2); }
.button { padding: 10px 20px; display: inline-block; font-family: var(--font-family-geomanist); font-weight: 700; text-align: center; color: var(--color-black); border-radius: 5px; background-color: var(--color-white); transition: var(--base-duration); }
.button-primary { color: var(--color-white); background-color: var(--body-bg); }
.button-primary:hover { background-color: var(--color-black); }
.button-primary.dark { background-color: var(--color-black); }
.button-secondary { color: var(--color-white); background-color: var(--color-red); }
.button-secondary:hover { background-color: var(--color-dark-red); }
.info-toggle a { font-size: 22px; color: var(--color-white); }
/*
body.orange .compass-circle { background-color: var(--color-dark-orange); }
body.orange .compass-circle .white-circle { background-color: var(--color-orange); }
body.orange .compass-circle .compass-meter { transform: rotate(-30deg); }
body.orange .compass-circle .compass-marker { top: 22px; right: -15px; left: auto; transform: rotate(70deg); }
body.orange .compass-circle .flag { top: 0; left: 62px; transform: translateX(0); }
*/
body.orange .rangeBox .flag { color: var(--color-orange); }
body .rangeBox .line:before { position: absolute; top: 0; left: 0; width: 0%; height: 9px; border-radius: 30px; background-color: var(--color-white); content: ''; }
body.red .startBox .bg { background-color: var(--color-dark-red); }

/* ### wrapper ### */
#wrapper { margin: 0 auto; position: relative; display: block; width: var(--w-100); max-width: 600px; min-height: var(--h-100); overflow: hidden; }

/* ### main container ### */
#mainCntr { width: var(--w-100); }

/* ### content container ### */
#contentCntr { width: var(--w-100); }

/* ### language box ### */
.languageBox { padding: 100px 30px; position: relative; z-index: 2; text-align: center; }
.languageBox h1 { margin-bottom: 10px; }
.languageBox p { margin-bottom: 30px; }
.languageBox ul { margin: 0 -20px; display: flex; flex-wrap: wrap; }
.languageBox ul > li { padding: 0 20px; width: 50%; }
.languageBox ul > li > a { padding: 35px 15px 25px; display: block; color: var(--color-white); border-radius: 15px; transition: var(--base-duration); }
.languageBox ul > li > a span { padding-top: 12px; display: block; }
.languageBox ul > li.active > a span,
.languageBox ul > li > a:hover span { font-family: var(--font-family-geomanist); font-weight: 700; }
.languageBox ul > li.active > a,
.languageBox ul > li > a:hover { color: var(--color-black); background-color: var(--color-white); }
.languageBox ul > li > a img { margin: 0 auto; max-width: 82px;border-radius:3px; }

/* ### start box ### */
.startBox { position: fixed; bottom: 0; left: 0; z-index: 4; width: var(--w-100); }
.startBox .bg { margin: 0 auto; padding: 35px 30px; position: relative; max-width: 600px; border-radius: 30px 30px 0 0; background-color: var(--color-gray); }
.startBox .button { width: var(--w-100); }
.startBox p { text-align: center; }
.startBox .form-field { margin-bottom: 10px; }
.startBox .wrap { display: flex; }
.startBox .file-upload { margin-right: 8px; position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 5px; background-color: var(--color-white); cursor: pointer; }
.startBox .file-upload input { padding: 0; position: absolute; top: 0; left: 0; display: none; width: var(--w-100); height: var(--h-100); }
.startBox .file-upload i { font-size: 20px; color: var(--color-black); }
.startBox .back { margin-right: 12px; display: flex; align-items: center; justify-content: center; width: 50px; height: 40px; color: var(--color-white); border-radius: 5px; background-color: var(--body-bg); }
.startBox .layer { position: absolute; top: -250px; left: 0; z-index: -1; pointer-events: none; }

/* ### welcome box ### */
.welcomeBox { padding: 30px 30px 100px; position: relative; z-index: 2; text-align: center; }
.welcomeBox h1 { margin-bottom: 10px; }
.welcomeBox strong { margin-bottom: 10px; display: block; font-family: var(--font-family-geomanist); font-weight: 700; }
.welcomeBox .form-field { margin-bottom: 10px; }
.welcomeBox .info-toggle i { color:var(--body-bg);background:white;border-radius:50px;padding:3px; }

/* ### form box ### */
.formBox { padding: 30px 30px 100px; position: relative; z-index: 2; }
.formBox h1 { margin-bottom: 10px; text-align: center; }
.formBox .form-field { margin-bottom: 10px; }
.formBox p { text-align:center;}

/* ### boat box ### */
.boatBox { padding: 30px 30px 100px; position: relative; z-index: 2; text-align: center; }
.boatBox h1 { margin-bottom: 10px; text-align: center; }
.boatBox .subtitle { margin-bottom: 15px; font-family: var(--font-family-geomanist); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.boatBox .holder { margin: 0 -3px; display: flex; flex-wrap: wrap; }
.boatBox .column { margin-bottom: 6px; padding: 0 3px; width: 25%; }
.boatBox label { margin-bottom: 0; padding: 10px 10px 2px; position: relative; font-size: var(--font-size-h3); border-radius: 5px; background-color: var(--color-gray); cursor: pointer; }
.boatBox label[disabled] { pointer-events: none; opacity:.6;}
.boatBox input[type='radio'] { padding: 0; position: absolute; top: 0; left: 0; display: none; width: var(--w-100); height: var(--h-100); border: 0; }
.boatBox label:has(input[type='radio']:checked) { color: var(--color-black); background-color: var(--color-white); }
.boatBox label strong { display: block; }
.boatBox label i { font-size: 20px; }
.boatBox.join { padding-bottom:10px;}
.boatBox.join label.wide { border:3px solid var(--color-white);background:none;margin-bottom:10px;text-transform:none; font-family: var(--font-family-base);font-size: var(--font-size-base);line-height: var(--line-height-base);color: var(--color-white);height:40px;}
.boatBox.join label.wide strong { display:inline-block;float:left;font-weight:normal;letter-spacing:0;}
.boatBox.join label.wide span { display:inline-block;float:right;}

/* ### watch box ### */
.watchBox { padding: 30px 30px 100px; text-align: center; position:relative;z-index:2;}
.watchBox .info-toggle, .welcomeBox .info-toggle { margin-bottom: 140px; text-align: right; }
.watchBox .watch-icon { margin: 0 auto 15px; width: 80px; }
.watchBox h1 { margin-bottom: 15px; }
.watchBox p.intro { font-size:20px;}
.watchBox p a:not(.button), .boatBox p a:not(.button)  { color:#E41316;}
.watchBox i.large { margin-bottom:20px;}
.watchBox ul li { list-style:square; text-align:left;line-height:23px;margin-bottom:5px;}
.watchBox ul li strong { font-weight:800;}
.watchBox hr { margin:20px 0;}

/* ### info box ### */
.infoBox { position: fixed; bottom: -100%; left: 0; z-index: 11; width: var(--w-100); text-align: center; transition: var(--base-duration); }
.infoBox .bg { margin: 0 auto; padding: 20px 30px 35px; position: relative; max-width: 600px; border-radius: 30px 30px 0 0; background-color: var(--body-bg); }
.infoBox .close { position: absolute; top: 30px; right: 30px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 12px; color: var(--color-gray); border-radius: 25px; background-color: var(--color-white); }
.infoBox .divider { margin: 0 auto 35px; width: 50px; height: 8px; border-radius: 20px; background-color: var(--body-bg); }
.infoBox .tel { margin-bottom: 5px; font-family: var(--font-family-geomanist); font-size: 26px; font-weight: 900; color: var(--color-red); }
.infoBox .tel i { margin-top: -2px; margin-right: 5px; display: inline-block; vertical-align: middle; }
.infoBox .button { width: var(--w-100); }
.infoBox .button.button-secondary { margin-bottom: 30px; }
.infoBox .button i { margin-top: -2px; margin-right: 5px; display: inline-block; font-size: 18px; vertical-align: middle; }
.infoBox .of { margin-bottom: 8px; display: block; }
.infoBox h3 { margin-bottom: 15px; }
.infoBox.active { bottom: 0; }
.infoBox #error-log { font-size:14px;font-family:'Courier New';display:none;padding:5px; border:1px solid white;margin-top:10px;border-radius:3px;}

.infoBoxOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */ z-index: 10; /* Ensure it's above other content */ display: none; /* Initially hidden */}
body:has(.infoBox.active) .infoBoxOverlay {display:block; }

/* ### compass box ### */
.compassBox { padding: 30px 30px 100px; position: relative; z-index: 2; text-align: center; }
.compassBox .info-toggle { margin-bottom: 45px; text-align: right; }
.compassBox h1 { margin-bottom: 5px; }
.compassBox .subtitle { font-family: var(--font-family-geomanist); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }


/* ### compass-circle ### */
.compass-circle { margin-bottom: 35px; position: relative; display: flex; align-items: center; justify-content: center; width: 290px; height: 290px; border-radius: 50%; background-color: var(--color-gray); }
.compass-circle .flag { position: absolute; top: -15px; left: 50%; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 25px; background-color: var(--color-red); transform: translateX(-50%); }
.compass-circle .white-circle { padding: 20px; position: relative; display: flex; justify-content: center; width: 140px; height: 140px; border: 9px solid var(--color-white); border-radius: 50%; background-color: var(--body-bg); }
.compass-circle .compass-meter { width: 33px; }
.compass-circle .compass-marker { position: absolute; top: -10px; left: 4px; font-size: 13px; transform: rotate(-45deg); }
.compass-circle .compass-marker span { margin-left: 1px; display: block; width: 7px; height: 20px; border-radius: 20px; background-color: var(--color-red); }

/* ### range box ### */
.rangeBox { padding: 30px; position: fixed; bottom: 0; left: 0; z-index: 2; width: var(--w-100); text-align: center; }
.rangeBox .range-slider { margin: 0 auto; position: relative; width: 200px; }
.rangeBox .line { margin: 0 auto 25px; position: relative; width: 155px; height: 9px; border-radius: 20px; background-color: var(--color-gray); }
.rangeBox .title { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.rangeBox .flag { position: absolute; top: 50%; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--color-gray); border-radius: 30px; background-color: var(--color-white); transform: translateY(-50%); }

/* ### check box ### */
.checkBox { padding: 30px 30px 100px; position: relative; z-index: 2; text-align: center; }
.checkBox h1 { margin-bottom: 100px; }
.checkBox .water-flag img { margin: 0 auto; width: 160px; }

/* ### video box ### */
.videoBox { padding: 30px 30px 100px; position: relative; z-index: 2; text-align: center; }
.videoBox h1 { margin-bottom: 15px; }
.videoBox p.intro { font-size:20px;}
.videoBox .info-toggle { position: absolute; top: 29px; right: 40px; }
.videoBox iframe { /*width: var(--w-100); height: 170px;*/ border-radius: 20px; }
.videoBox img { border-radius:20px;}
.videoBox .logo { border-radius:0;width:100px;margin-top:20px !important;margin:0 auto;display:block;opacity:0.5;}

/* ### challenge box ### */
.challengeBox { padding: 30px 30px 100px; position: relative; z-index: 2; text-align: center; }
.challengeBox .info-toggle { margin-bottom: 120px; text-align: right; }
.challengeBox .image { margin-bottom: 20px; }
.challengeBox .image img { margin: 0 auto; width: 102px; }
.challengeBox h1 { margin-bottom: 15px; }

/* ### fixed-layer ### */
.fixed-layer { position: fixed; bottom: -58px; left: 0; width: var(--w-100); pointer-events: none; z-index:0;}
.fixed-layer .layer { margin: 0 auto; width: 100%; max-width:600px; }
body.yellow .fixed-layer .layer, body.orange .fixed-layer .layer, body.red .fixed-layer .layer { opacity:0.2;}






/*****************************
Page animations
*****************************/

/* Next page, slide old out */
.slideNextOut .pageTransition {
    -webkit-animation-duration: .5s;
    -webkit-animation-name: slideNextOut;
    -moz-animation-duration: .5s;
    -moz-animation-name: slideNextOut;
    -o-animation-duration: .5s;
    -o-animation-name: slideNextOut;
    animation-duration: .5s;
    animation-name: slideNextOut;
}
@-webkit-keyframes slideNextOut { from { margin-left: 0%;  width: 100%; overflow: hidden; } to { margin-left: -100%;  width: 100%;overflow: hidden;}}
@-moz-keyframes slideNextOut { from { margin-left: 0%;  width: 100%; overflow: hidden; } to { margin-left: -100%;  width: 100%;overflow: hidden;}}
@-o-keyframes slideNextOut { from { margin-left: 0%;  width: 100%; overflow: hidden; } to { margin-left: -100%;  width: 100%;overflow: hidden;}}
@keyframes slideNextOut { from { margin-left: 0%;  width: 100%; overflow: hidden; } to { margin-left: -100%;  width: 100%;overflow: hidden;}}


/* Next page, slide new in */
.slideNextIn .pageTransition {
    -webkit-animation-duration: .5s;
    -webkit-animation-name: slideNextIn;
    -moz-animation-duration: .5s;
    -moz-animation-name: slideNextIn;
    -o-animation-duration: .5s;
    -o-animation-name: slideNextIn;
    animation-duration: .5s;
    animation-name: slideNextIn;
}
@-webkit-keyframes slideNextIn { from { margin-left: 100%; width: 100%;  overflow: hidden; } to {  margin-left: 0%;width: 100%;overflow: auto;}}
@-moz-keyframes slideNextIn  { from { margin-left: 100%; width: 100%; overflow: hidden;  } to {  margin-left: 0%;width: 100%;overflow: auto;}}
@-o-keyframes slideNextIn { from { margin-left: 100%; width: 100%;  overflow: hidden; } to {  margin-left: 0%;width: 100%;overflow: auto;}}
@keyframes slideNextIn  { from { margin-left: 100%; width: 100%;  overflow: hidden; } to {  margin-left: 0%;width: 100%;overflow: auto;}}

/* Previous page, slide old out */
.slidePreviousOut .pageTransition {
    -webkit-animation-duration: .5s;
    -webkit-animation-name: slidePreviousOut;
    -moz-animation-duration: .5s;
    -moz-animation-name: slidePreviousOut;
    -o-animation-duration: .5s;
    -o-animation-name: slidePreviousOut;
    animation-duration: .5s;
    animation-name: slidePreviousOut;
}
@-webkit-keyframes slidePreviousOut { from { margin-left: 0%;  width: 100%;  overflow: hidden;  } to { margin-left: 100%;  width: 100%;overflow: hidden;}}
@-moz-keyframes slidePreviousOut { from { margin-left: 0%;  width: 100%;  overflow: hidden;  } to { margin-left: 100%;  width: 100%;overflow: hidden;}}
@-o-keyframes slidePreviousOut { from { margin-left: 0%;  width: 100%;  overflow: hidden;  } to { margin-left: 100%;  width: 100%;overflow: hidden;}}
@keyframes slidePreviousOut { from { margin-left: 0%;  width: 100%;  overflow: hidden;  } to { margin-left: 100%;  width: 100%;overflow: hidden;}}


/* Previous page, slide old in */
.slidePreviousIn .pageTransition {
    -webkit-animation-duration: .5s;
    -webkit-animation-name: slidePreviousIn;
    -moz-animation-duration: .5s;
    -moz-animation-name: slidePreviousIn;
    -o-animation-duration: .5s;
    -o-animation-name: slidePreviousIn;
    animation-duration: .5s;
    animation-name: slidePreviousIn;
}
@-webkit-keyframes slidePreviousIn { from { margin-left: -100%; width: 100%;  overflow: hidden; } to {  margin-left: 0%;width: 100%;overflow: auto;}}
@-moz-keyframes slidePreviousIn  { from { margin-left: -100%; width: 100%; overflow: hidden;  } to {  margin-left: 0%;width: 100%;overflow: auto;}}
@-o-keyframes slidePreviousIn  { from { margin-left: -100%; width: 100%;  overflow: hidden; } to {  margin-left: 0%;width: 100%;overflow: auto;}}
@keyframes slidePreviousIn  { from { margin-left: -100%; width: 100%;  overflow: hidden; } to {  margin-left: 0%;width: 100%;overflow: auto;}}


/* Boing animation */
.boing { animation: boing 800ms ease-in-out;animation-delay: 100ms;}
@keyframes boing {
  15%, 40%, 75%, 100% { transform-origin: center center; }
  15% { transform: scale(1.3, 1.3); }
  40% { transform: scale(0.85, 0.85);}
  75% {transform: scale(1.1, 1.1);}
  100% { transform: scale(1, 1);}
}

.zoom-in { animation: zoom-in 1s ease;}
 
@keyframes zoom-in { 0% {transform: scale(0, 0);} 50% { transform: scale(1.2, 1.2);} 100% { transform: scale(1, 1);}}

/*****************************
Compass pulse animation
*****************************/
.compass-pulse::before {
  content: '';
  position: absolute;
  top: 43%;
  left: 50%;
  /* Use a fixed size to start with a thin ring. Adjust as needed */
  width: 35vw; /* Starting width of the ring (determines initial inner diameter) */
  height: 35vw; /* Starting height of the ring (determines initial inner diameter) */
  max-height:200px;
  max-width:200px;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5); /* Starting thickness and color of the ring */
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(1);
  animation: pulse-ring-expand 4s infinite;
  z-index:10;
}
	
@keyframes pulse-ring-expand {
  0%, 25% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.5;
    border-width: 2px;
  }
  12.5% { /* Halfway through the animation period to smooth transition */
    transform: translate(-50%, -50%) scale(2.3);
    opacity: 0;
    border-width: 40px;
  }
  25%, 100% {
    transform: translate(-50%, -50%) scale(2.3); /* Maintains the end state for the pause */
    opacity: 0;
    border-width: 40px;
  }
}


#compass-notices { display:none;width:calc(100% - 30px); padding:10px;border-radius:10px; background-color: var(--color-orange);color:white;text-align:center;position:fixed;left:15px;bottom:25px;z-index:3; }
#compass-notices li:before {  font-family: 'Material icons';content : 'warning'; margin-right:5px;line}
#compass-notices li a { color:white;text-decoration:underline;}

#compass-gps-help {
	display:none;
	width:calc(100% - 30px); 
	padding:20px 10px;border-radius:10px; background-color: white;color:var(--color-black);text-align:center;position:fixed;left:15px;top:10%;z-index:3; 
	-webkit-box-shadow: 0px 0px 52px 19px rgba(0,0,0,0.78);
	-moz-box-shadow: 0px 0px 52px 19px rgba(0,0,0,0.78);
	box-shadow: 0px 0px 52px 19px rgba(0,0,0,0.78);
	text-align:center;
}
#compass-gps-help h3 { color:var(--color-black); font-size:22px;margin-bottom:10px;}
#compass-gps-help img { width:100%; max-width:400px;margin:0 auto;border-radius:10px;}