/* ==========================================================================
   STYLISH FONTS
   ========================================================================== */

@font-face {font-family: 'Abel';               src: url('../fonts/Abel-Regular.woff2')           format('woff2')}  /* WEBSHOPS */
@font-face {font-family: 'Agency';             src: url('../fonts/Agency.woff')                  format('woff')}   /* WEBSHOP ORDER */
@font-face {font-family: 'American Captain';   src: url('../fonts/AmericanCaptain.woff2')        format('woff2')}  /* MOVIEBASE */
@font-face {font-family: 'AnonymousPro';       src: url('../fonts/AnonymousPro.woff2')           format('woff2')}  /* MOVIEBASE */
@font-face {font-family: 'Arsmaquette Bold';   src: url('../fonts/Arsmaquette-Bold.woff')        format('woff'); letter-spacing: -0.033em;} /* FARASI MOVIEBASE */
@font-face {font-family: 'Bangers';            src: url('../fonts/Bangers.woff2')                format('woff2')}  /* RESTORED! AANTAL PERSONEN */
@font-face {font-family: 'Barbook';            src: url('../fonts/BarBook.woff2')                format('woff2')}  /* NEW! */
@font-face {font-family: 'Benjamin Sans';      src: url('../fonts/BenjaminSans-Regular.woff')    format('woff')}   /* SUSHISENSEI GUNKAN */ 
@font-face {font-family: 'Caps';               src: url('../fonts/ErikGCapsSkInvers.woff')       format('woff')}   /* METROPOLIS */ 
@font-face {font-family: 'CarbonType';         src: url('../fonts/CarbonType.woff2')             format('woff2')}  /* MOVIEBASE HORROR */ 
@font-face {font-family: 'Caveat Regular';     src: url('../fonts/Caveat-Regular.woff2')         format('woff2')}  /* TRENDING GRAPH */ 
@font-face {font-family: 'Comix';              src: url('../fonts/Comix.woff2')                  format('woff2')}  /* TIMBER LANDING */ 
@font-face {font-family: 'DaVinci';            src: url('../fonts/DaVinci.woff')                 format('woff')}   /* AUTOGRAPH DRAMA */ 
@font-face {font-family: 'Dharma Punk';        src: url('../fonts/Dharma-Punk-2.woff2')          format('woff2')}  /* NEW NICE*/
@font-face {font-family: 'Diara Light';        src: url('../fonts/Diaria-Light.woff')            format('woff')}   /* MOVIEBASE */
@font-face {font-family: 'Dinas-Handwriting';  src: url('../fonts/Dinas-Handwriting.woff')       format('woff')}   /* RECEPTEN | NEW! */
@font-face {font-family: 'Drinks';             src: url('../fonts/Drinks.woff2')                 format('woff2')}  /* NEW! */
@font-face {font-family: 'Fear';               src: url('../fonts/FaceYourFears.woff2')          format('woff2')}  /* MOVIEBASE HORROR */
@font-face {font-family: 'Final Frontier';     src: url('../fonts/Final-Frontier.woff2')         format('woff2')}  /* MOVIEBASE STARTREK */
@font-face {font-family: 'Gapstown';           src: url('../fonts/Gapstown.woff')                format('woff')}   /* MOVIEBASE SCIFI */
@font-face {font-family: 'Grahamo Regular';    src: url('../fonts/Grahamo-Regular.woff2')        format('woff2')}  /* FARASI */
@font-face {font-family: 'Grinched';           src: url('../fonts/Grinched.woff')                format('woff')}   /* FOOD AND RECIPES */
@font-face {font-family: 'Hack';               src: url('../fonts/Hack-Regular.woff2')           format('woff2')}  /* MOVIEBASE SCIFI */
@font-face {font-family: 'Hamburg Regular';    src: url('../fonts/Hamburg-Regular.woff')         format('woff')}   /* AH SCHAPPIE */
@font-face {font-family: 'Helvetica Neue';     src: url('../fonts/Helvetica-Neue-Regular.woff')  format('woff')}   /* OVERAL */
@font-face {font-family: 'HouseSlant';         src: url('../fonts/HouseSlant.woff')              format('woff')}   /* ZEROSUSHI */
@font-face {font-family: 'James Bond';         src: url('../fonts/SkyFallDone.woff')             format('woff')}   /* JAMES BOND */
@font-face {font-family: 'Jellee';             src: url('../fonts/Jellee-Roman.woff2')           format('woff2');} /* PRIJSSTICKER */
@font-face {font-family: 'Jukebox';            src: url('../fonts/JukeBox.woff2')                format('woff2');} /* NEW! NICE*/
@font-face {font-family: 'Keswick';            src: url('../fonts/Keswick.woff2')                format('woff2')}  /* AUTOGRAPH VERSTAPPEN */
@font-face {font-family: 'KGSecondChances';    src: url('../fonts/KGSecondChancesSolid.woff2')   format('woff2')}  /* NEW! 2024*/
@font-face {font-family: 'Kids';               src: url('../fonts/KidsScrawl.woff')              format('woff')}   /* SUSHISENSEI | VEEL */
@font-face {font-family: 'Lato Regular';       src: url('../fonts/Lato-Regular.woff')            format('woff')}   /* OG ROOSTERS */
@font-face {font-family: 'League Gothic';      src: url('../fonts/League-Gothic.woff')           format('woff')}   /* MOVIEBASE */
@font-face {font-family: 'Liquid Embrace';     src: url('../fonts/LiquidEmbrace.woff')           format('woff')}   /* WESTERN */
@font-face {font-family: 'Magic Medieval';     src: url('../fonts/MagicMedieval.woff')           format('woff')}   /* MOVIEBASE */
@font-face {font-family: 'Montserrat Regular'; src: url('../fonts/Montserrat-Regular.woff2')     format('woff2')}  /* ONDERZOEKEN! */
@font-face {font-family: 'MuktaMahee Bold';    src: url('../fonts/MuktaMahee-Bold.woff2')        format('woff2')}  /* TRENDING HEADER */
@font-face {font-family: 'MuktaMahee Light';   src: url('../fonts/MuktaMahee-Light.woff2')       format('woff2')}  /* TRENDING TEXT */
@font-face {font-family: 'Neucha';             src: url('../fonts/Neucha.woff')                  format('woff ')}  /* NEW! NICE */
@font-face {font-family: 'Nexa Bold';          src: url('../fonts/Nexa-Bold.woff2')              format('woff2')}  /* MOVIEBASE STARTREK */
@font-face {font-family: 'Noteworthy Light';   src: url('../fonts/Noteworthy-Light.woff')        format('woff')}   /* SUSHISENSEI | VEEL */
@font-face {font-family: 'Noteworthy Bold';    src: url('../fonts/Noteworthy-Bold.woff')         format('woff')}   /* SUSHISENSEI | VEEL */
@font-face {font-family: 'Numerals';           src: url('../fonts/Numerals.woff')                format('woff')}   /* REPORTS */
@font-face {font-family: 'Ornaments';          src: url('../fonts/Ornaments.woff2')              format('woff2')}  /* NEW NICE */
@font-face {font-family: 'Pasajero';           src: url('../fonts/Pasajero.woff')                format('woff')}   /* MOVIEBASE SCIFI */
@font-face {font-family: 'RousseauDeco';       src: url('../fonts/RousseauDeco.woff')            format('woff')}   /* SLAGERIJ VERSTAPPEN */
@font-face {font-family: 'Special Elite';      src: url('../fonts/SpecialElite-Regular.woff2')   format('woff2')}  /* NEW! AARDIG */
@font-face {font-family: 'Trajan';             src: url('../fonts/TrajanProRegular.woff')        format('woff')}   /* SUSHISENSEI | VEEL */
@font-face {font-family: 'Tropicana';          src: url('../fonts/Tropicana.woff')               format('woff')}   /* SUSHISENSEI | VEEL */
@font-face {font-family: 'Trueno Bold';        src: url('../fonts/Trueno-Extended-Bold.woff2')   format('woff2')}  /* ZEROSUSHI ASSGROEPCARDS */
@font-face {font-family: 'Universal';          src: url('../fonts/UniversalAccreditation.woff')  format('woff')}   /* MOVIEBASE CREDITS */
@font-face {font-family: 'Walt Disney';        src: url('../fonts/WaltDisneyScriptv41.woff2')    format('woff2')}  /* MOVIEBASE | DISNEY */

/* ==========================================================================
   A PENNY FOR YOUR THOUGHTS
   ========================================================================== */

   .penny {position: relative; z-index: 997; background-color: #3b5998; margin-top:-12px; height: 43px; width: 100%; text-align: center;}

   .tip-button {
     background: none;
     border: 0;
     border-radius: 0px 0px 0px 0px;
     cursor: pointer;
     font-family: "Quicksand", sans-serif;
     font-size: 0.75rem;
     font-weight: 600;
     height: 2.6rem;
     margin-bottom: -4rem;
     outline: 0;
     position: relative;
     top: 0;
     transform-origin: 0% 100%;
     transition: transform 50ms ease-in-out;
     width: 9.5rem;
     -webkit-tap-highlight-color: transparent;
   }
   .tip-button:active {
     transform: rotate(4deg);
   }
   .tip-button.clicked {
     animation: 150ms ease-in-out 1 shake;
     pointer-events: none;
   }
   .tip-button.clicked .tip-button__text {
     opacity: 0;
     transition: opacity 100ms linear 200ms;
   }
   .tip-button.clicked::before {
     height: 0.5rem;
     width: 60%;
   }
   .tip-button.clicked .coin {
     transition: margin-bottom 1s linear 200ms;
     margin-bottom: 0;
   }
   .tip-button.shrink-landing::before {
     transition: width 200ms ease-in;
     width: 0;
   }
   .tip-button.coin-landed::after {
     opacity: 1;
     transform: scale(1);
     transform-origin: 50% 100%;
   }
   .tip-button.coin-landed .coin-wrapper {
     background: radial-gradient(circle at 35% 97%, rgba(3, 16, 50, 0.4) 0.04rem, transparent 0.04rem), radial-gradient(circle at 45% 92%, rgba(3, 16, 50, 0.4) 0.04rem, transparent 0.02rem), radial-gradient(circle at 55% 98%, rgba(3, 16, 50, 0.4) 0.04rem, transparent 0.04rem), radial-gradient(circle at 65% 96%, rgba(3, 16, 50, 0.4) 0.06rem, transparent 0.06rem);
     background-position: center bottom;
     background-size: 100%;
     bottom: -1rem;
     opacity: 0;
     transform: scale(2) translateY(-10px);
   }
   .tip-button__text {
     color: #FFFFFF;
     margin-right: 1.8rem;
     opacity: 1;
     position: relative;
     transition: opacity 100ms linear 500ms;
     z-index: 3;
   }
   .tip-button::before {
     background: #3b5998;
     border-radius: 0.25rem;
     bottom: 0;
     content: "";
     display: block;
     height: 100%;
     left: 50%;
     position: absolute;
     transform: translateX(-50%);
     transition: height 250ms ease-in-out 400ms, width 250ms ease-in-out 300ms;
     width: 100%;
     z-index: 2;
   }
   .tip-button::after {
     bottom: -1rem;
     color: #FFFFFF;
     content: "THANKS FOR POSTING!";
     height: 110%;
     left: 0;
     opacity: 0;
     position: absolute;
     pointer-events: none;
     text-align: center;
     transform: scale(0);
     transform-origin: 50% 20%;
     transition: transform 200ms cubic-bezier(0, 0, 0.35, 1.43);
     width: 100%;
     z-index: 1;
   }
   .coin-wrapper {
     background: none;
     bottom: 0;
     height: 18rem;
     left: 0;
     opacity: 1;
     overflow: hidden;
     pointer-events: none;
     position: absolute;
     transform: none;
     transform-origin: 50% 100%;
     transition: opacity 200ms linear 100ms, transform 300ms ease-out;
     width: 100%;
   }
   .coin {
     --front-y-multiplier: 0;
     --back-y-multiplier: 0;
     --coin-y-multiplier: 0;
     --coin-x-multiplier: 0;
     --coin-scale-multiplier: 0;
     --coin-rotation-multiplier: 0;
     --shine-opacity-multiplier: 0.4;
     --shine-bg-multiplier: 50%;
     bottom: calc(var(--coin-y-multiplier) * 1rem - 3.5rem);
     height: 3.5rem;
     margin-bottom: 3.05rem;
     position: absolute;
     right: calc(var(--coin-x-multiplier) * 34% + 16%);
     transform: translateX(50%) scale(calc(0.4 + var(--coin-scale-multiplier))) rotate(calc(var(--coin-rotation-multiplier) * -1deg));
     transition: opacity 100ms linear 200ms;
     width: 3.5rem;
     z-index: 3;
   }
   .coin__front, .coin__middle, .coin__back, .coin::before, .coin__front::after, .coin__back::after {
     border-radius: 50%;
     box-sizing: border-box;
     height: 100%;
     left: 0;
     position: absolute;
     width: 100%;
     z-index: 3;
   }
   .coin__front {
     background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%), linear-gradient(210deg, #8590b3 32%, transparent 32%), linear-gradient(150deg, #8590b3 32%, transparent 32%), linear-gradient(to right, #8590b3 22%, transparent 22%, transparent 78%, #8590b3 78%), linear-gradient(to bottom, #fcfaf9 44%, transparent 44%, transparent 65%, #fcfaf9 65%, #fcfaf9 71%, #8590b3 71%), linear-gradient(to right, transparent 28%, #fcfaf9 28%, #fcfaf9 34%, #8590b3 34%, #8590b3 40%, #fcfaf9 40%, #fcfaf9 47%, #8590b3 47%, #8590b3 53%, #fcfaf9 53%, #fcfaf9 60%, #8590b3 60%, #8590b3 66%, #fcfaf9 66%, #fcfaf9 72%, transparent 72%);
     background-color: #8590b3;
     background-size: 100% 100%;
     transform: translateY(calc(var(--front-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--front-scale-multiplier));
   }
   .coin__front::after {
     background: rgba(0, 0, 0, 0.2);
     content: "";
     opacity: var(--front-y-multiplier);
   }
   .coin__middle {
     background: #737c99;
     transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--middle-scale-multiplier));
   }
   .coin__back {
     background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%), radial-gradient(circle at 50% 40%, #fcfaf9 23%, transparent 23%), radial-gradient(circle at 50% 100%, #fcfaf9 35%, transparent 35%);
     background-color: #8590b3;
     background-size: 100% 100%;
     transform: translateY(calc(var(--back-y-multiplier) * 0.3181818182rem / 2)) scaleY(var(--back-scale-multiplier));
   }
   .coin__back::after {
     background: rgba(0, 0, 0, 0.2);
     content: "";
     opacity: var(--back-y-multiplier);
   }
   .coin::before {
     background: radial-gradient(circle at 25% 65%, transparent 50%, rgba(255, 255, 255, 0.9) 90%), linear-gradient(55deg, transparent calc(var(--shine-bg-multiplier) + 0%), #e9f4ff calc(var(--shine-bg-multiplier) + 0%), transparent calc(var(--shine-bg-multiplier) + 50%));
     content: "";
     opacity: var(--shine-opacity-multiplier);
     transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem / -2)) scaleY(var(--middle-scale-multiplier)) rotate(calc(var(--coin-rotation-multiplier) * 1deg));
     z-index: 10;
   }
   .coin::after {
     background: #737c99;
     content: "";
     height: 0.3181818182rem;
     left: 0;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 100%;
     z-index: 2;
   }
   
   @keyframes shake {
     0%   {transform: rotate(4deg);}
     66%  {transform: rotate(-4deg);}
     100% {transform: rotate();}
   }

/* ==========================================================================
   PORTGUIDE NAVIRE
   ========================================================================== */

.navire {
   background: url("https://aatventure.news/img/interface/navire.png") no-repeat;
   background-size: 100% auto;
   width: 120px;
   height: 100px;
   position: absolute;
   top: -50px;
   right: -130px;
   transition: right 0.2s ease;
 }
 
 .mainMenuOverlay.open .navire {
   right: 70%;
   transition: right 28s ease 1s;
 }
 
 .mainMenuOverlay {
   background-color: rgb(166 205 228 / 60%);
   position: fixed;
   left: 0;
   right: 0;
   bottom: -420px;
   z-index: 999;
   height: 420px;
   box-shadow: 0 0 15px -3px #03374a;
   border-radius: 100% 100% 0 0 / 14% 14% 0 0;
   transition: bottom 0.5s ease;
 }
 
 .mainMenuOverlay.open {
   bottom: 0;
 }
 
 .mainMenuOverlay .toggleMenu {
   display: block;
   background-color: #44658e;
   border: 1px solid #fff;
   border-radius: 80px;
   width: 62px;
   height: 62px;
   position: absolute;
   top: -12px;
   left: 50%;
   margin: -31px 0 0 -31px;
   cursor: pointer;
   font-size: 24px;
   color: #fff;
   text-align: center;
   line-height: 62px;
   box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2) inset, 0 0 16px -4px #063343;
   transition: box-shadow 0.5s ease, top 0.5s ease;
 }
 
 .mainMenuOverlay.open .toggleMenu {top: 50%; background-color: #133d71;}
 
 .mainMenuOverlay .itemMenuBox {
   background-size: 28px auto;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -31px 0 0 -31px;
   height: 62px;
   width: 142px;
   text-align: right;
   border-radius: 40px;
   transform-origin: 31px 31px;
   transition: all 1s ease 0.4s;
 }
 
 .mainMenuOverlay.open .itemMenuBox      {width: 182px; transition: all 1s ease 0s;}
 .mainMenuOverlay .itemMenuBox.bills     {transform: rotate(270deg);}
 .mainMenuOverlay .itemMenuBox.tarsheed  {transform: rotate(330deg);}
 .mainMenuOverlay .itemMenuBox.employees {transform: rotate(30deg);}
 .mainMenuOverlay .itemMenuBox.location  {transform: rotate(90deg);}
 .mainMenuOverlay .itemMenuBox.eservices {transform: rotate(150deg);}
 .mainMenuOverlay .itemMenuBox.contact   {transform: rotate(210deg);}
 
 .mainMenuOverlay .itemMenuBox .itemMenu {
   display: inline-block;
   border: 2px solid rgba(255, 255, 255, 0.6);
   border-radius: 40px;
   background-color: #44658e;
   background-repeat: no-repeat;
   background-position: center center;
   width: 62px;
   height: 62px;
   border-radius: 40px;
   transition: all 0.8s ease;
   color: #fff;
   font-size: 28px;
   line-height: 64px;
   text-align: center;
 }
 
 .mainMenuOverlay .itemMenuBox.bills .itemMenu     {transform: rotate(90deg);}
 .mainMenuOverlay .itemMenuBox.tarsheed .itemMenu  {transform: rotate(30deg);}
 .mainMenuOverlay .itemMenuBox.employees .itemMenu {transform: rotate(330deg);}
 .mainMenuOverlay .itemMenuBox.location .itemMenu  {transform: rotate(270deg);}
 .mainMenuOverlay .itemMenuBox.eservices .itemMenu {transform: rotate(210deg);}
 .mainMenuOverlay .itemMenuBox.contact .itemMenu   {transform: rotate(150deg);}
 
 /* Hover */
 .mainMenuOverlay .itemMenuBox.bills .itemMenu:hover     {transform: rotate(450deg);}
 .mainMenuOverlay .itemMenuBox.tarsheed .itemMenu:hover  {transform: rotate(390deg);}
 .mainMenuOverlay .itemMenuBox.employees .itemMenu:hover {transform: rotate(690deg);}
 .mainMenuOverlay .itemMenuBox.location .itemMenu:hover  {transform: rotate(630deg);}
 .mainMenuOverlay .itemMenuBox.eservices .itemMenu:hover {transform: rotate(570deg);}
 .mainMenuOverlay .itemMenuBox.contact .itemMenu:hover   {transform: rotate(510deg);}
 
 .floating  {animation-name: Floating1; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}
 .floating2 {animation-name: Floating2; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}
 .floating3 {animation-name: Floating3; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}
 
 @keyframes Floating1 {
   from {transform: translate(0, 0px);}
   65%  {transform: translate(0, 5px);}
   to   {transform: translate(0, -0px);}
 }
 
 @keyframes Floating2 {
   from {transform: translate(0, 0px);}
   45%  {transform: translate(0, 8px);}
   to   {transform: translate(0, -0px);}
 }
 
 @keyframes Floating3 {
   from {transform: translate(0, 0px);}
   50%  {transform: translate(2px, 4px);}
   to   {transform: translate(0, -0px);}
 }

 /* ==========================================================================
    GESLOTEN MODAL
    ========================================================================== */

  .geslotenmodal {background-color: rgba(0, 0, 0, 0.5) !important; overflow: hidden !important}

  .modgesloten {
      background-color: #1e446566 !important;
      height: calc(100vh - 70px);
      background-image: url(../img/interface/gesloten.png);
      background-repeat: no-repeat;
      background-size: 90% auto;
      background-position: center 30px;
      font-size: 18px;
      padding: 30px;
      padding-top: 400px;
      text-align: center;
  }
  
  .modhierniet       {height: calc(100vh - 70px); font-size: 19px; padding: 30px; padding-top: 30px; text-align: left;}
  .modinputpg        {font-family:"Rajdhani Regular"; font-weight:700; font-size: 18px; background-color: transparent !important; color:#E1EDE1 !important;}
  .modmargingesloten {margin:0 !important;}
  .margintop2px      {margin-top: 2px;}