/* ==========================================================================================
   AATVENTURE WIREMENU 24-07-2025
   user interface for the main layout
   ========================================================================================== */

* {margin: 0; padding: 0; box-sizing: border-box;}
*, ::after, ::before {box-sizing: border-box;}

html {
    font-family: "Open Sans";
    line-height: 1.15;
    touch-action: manipulation; /* no doubletouch zoom */
    -webkit-text-size-adjust: 100%;
    backface-visibility: hidden;
    overscroll-behavior-y: contain; /* disable pull to refresh */
}
   
html * {
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    margin: 0px;
    padding: 0px;
    border: 0px;
}
   
@font-face {font-family: 'Aatventure';          src: url('../../fonts/Aatventure.woff')            format('woff')}
@font-face {font-family: 'Oswald Regular';      src: url('../../fonts/Oswald-Regular.woff2')       format('woff2')}
@font-face {font-family: 'Roboto Bold';         src: url('../../fonts/Roboto-Bold.woff')           format('woff');  font-weight: 700;}
@font-face {font-family: 'Roboto Light';        src: url('../../fonts/Roboto-Light.woff')          format('woff');  font-weight: 300;}
@font-face {font-family: 'Rajdhani Regular';    src: url('../../fonts/Rajdhani-Regular.woff')      format("woff");} 
@font-face {font-family: 'simple-line-icons';   src: url('../../fonts/Simple-Line-Icons.woff2')    format('woff2'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'icomoon';             src: url('../../fonts/icomoon.woff')               format('woff');  font-weight: normal; font-style: normal;}
@font-face {font-family: 'FontAwesome';         src: url('../../fonts/fontawesome-webfont.woff2')  format('woff2'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'FontAwesomeSolid';    src: url('../../fonts/fa-solid-900.woff2')         format('woff2'); font-weight: 400;    font-style: normal;}
@font-face {font-family: 'FontAwesomeBrands';   src: url('../../fonts/fa-brands-400.woff2')        format('woff2'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'FontAwesomeRegular';  src: url('../../fonts/fa-regular-400.woff2')       format("woff2"); font-weight: 400;    font-style: normal; font-display: swap;}

body {
    width: 100vw;
    width: 100svw;
    height: 100vh;
    height: 100svh;
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
    text-rendering: optimizeLegibility;
    background-color: #090B14;
    color: #FFFFFF;
    padding-top: 80px;
    line-height: 1.5;
    overflow-x: hidden;
    overscroll-behavior-y: contain; /* disable pull to refresh */
    -webkit-overflow-scrolling: touch;
}

.body-sushisensei {
    overflow-y: scroll !important;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: #02111A;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: 70px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    padding: 0 2rem;
    font-family: 'Oswald Regular', sans-serif;
    font-size: 20px;
    font-weight: 400;
    user-select: none;
    z-index: 9999;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
    cursor:pointer;
}

.logo {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
}

.company-name {
    font-family: 'Aatventure';
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.9px;
    min-width: 390px;
}

#boldtext {
    font-family: "Roboto Regular";
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
}

#thintext {
    font-family: "Roboto Light";
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
}

.navbar-center {
    display: flex;
    align-items: center;
    margin-left:-150px;
}

.navbar-center-aatventure {gap: 25px;}
.navbar-center-webshop    {gap: 40px;}

.nav-icon {
    position: relative;
    width: 46px;
    height: 80px;
    margin-top: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: white;
    opacity: 1 !important;}

.nav-icon:active {
    transform: translateY(0);
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.navbar-megadropdown {
    display: flex;
    align-items: center;
    gap: 0px;
}

.search-container {
    position: relative;
}

.search-input {
    width: 300px;
    height: 40px;
    padding: 0 45px 0 15px;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.search-input:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.search-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.search-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}

.username {
    font-family:"Oswald Regular";
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
}

.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    object-fit: cover;
}

.avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Tooltip styles */
.tooltip {
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    font-family: "Roboto Light";
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: max-content; 
}
   
.nav-icon:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

.pointer {cursor: pointer;}

 @media (min-width: 768px) {
     .navbar-left {min-width: 390px;} /* no jumping */
 }

/* Mobile Responsive */
@media (max-width: 768px) {
    .navbar {padding: 0 1rem;}
    .navbar-center {display: none;}
    .search-input {width: 200px;}
    .company-name {font-size: 26px; margin-left: -8px;}
}

@media (max-width: 480px) {
    .search-input {width: 150px;}
    .username {display: none;}
}

.container-fluid, .container-lg, .container-md, .container-sm, .container-xl {width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}

/* Producteditor Browser Modal */
@media screen and (min-width: 768px) {
  .productmanager .modal          {top: 134px !important;}
  .productmanager .modal-backdrop {top: 134px !important;}
  #cdn-browser-modal {top: 75px !important;}
}
@media screen and (max-width: 768px) {
  .productmanager .modal {top: 74px !important;}
}

.bg-white {background-color: rgb(0 0 0) !important;}

/* ==========================================================================
   base
   ========================================================================== */
   a               {text-decoration: none; cursor: pointer;}
   ol, ul          {list-style: none;}
   .veryhidden     {display: none !important;}
   .center         {text-align: center;}
   .text-muted     {color: #FFFFFF; opacity: 0.6;}
   .column         {margin-left:auto; margin-right:auto;}
   img             {vertical-align: middle; border-style: none;}
   svg:not(:root)  {overflow: hidden; vertical-align: middle;}
   .sepia          {filter: sepia(1);}
   .flexcenter     {display: flex;  flex-direction: column;  align-items: center; text-align: center; width: 100%;}
   .float-right    {float:right !important;}
   .adminheader    {padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px;}
   .btn-block      {display: block; width: 100%;}
   .se-pre-con     {position: absolute; left:0px; top: 0px; width: 100vw; height: 100vh; z-index: 999; background-color: #0E1014;}
   .text-uppercase {text-transform: uppercase !important;}
   .row            {display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;}
   .hidden         {display: none;} /* zo laat mogelijk vanwege overrulled */
   .mobilemargin   {padding-left: 15px !important; padding-right: 15px !important;} /* anders mobiel veel te strak... */
   #optpopup       {display:none;}
   #svgclock       {display: initial !important;}
   .ipa            {font-size: 16px !important; }
   @media (max-width: 769px) {.notonmobile  {display: none !important;} .sidebar {display:none !important}}
   @media (min-width: 769px) {.notondesktop {display: none !important;}}
   @media screen and (max-width: 760px) {::-webkit-scrollbar {width: 0px !important;}}

   #headertext span:nth-child(2) {margin-left: -12px;}

/* ==========================================================================
   iframe overlays
   ========================================================================== */
   #aatventurecontainer {position: fixed; top: 69px; left: 0px; bottom: 0px; right: 0px; display: none; z-index: 10;
                         background: radial-gradient(ellipse at center, #192d38 0, #211f2f 100%);}
   #maincontainer {margin-left: auto; margin-right: auto; overflow-x: hidden; top: 0px; padding-left: 0px; padding-right: 0px;}
   #iframeoverlay {display: none; position: fixed; top: 69px; left: 0px; bottom: 0px; right: 0px; z-index: 10; width: 100vw; height: calc(100vh - 69px);}
   #root          {width: 100%;}
   @media (min-width: 769px) {
     .catcontainer  {width: 100%; padding-left: 20px !important; padding-right: 20px !important;}
     .newscontainer {width: 100%; padding-left: 20px !important; padding-right: 20px !important;}
     .tagcontainer  {width: 100%; padding-left: 20px !important; padding-right: 20px !important; padding-top:40px; }
   }

/* ==========================================================================
   alerts
   ========================================================================== */
  .alert         {position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem;}
  .alert-warning {color: #856404; background-color: #fff3cd; border-color: #ffeeba;}

/* ==========================================================================
   mobile menu
   ========================================================================== */
   .cd-main-content {z-index: 999999;}
   .cd-side-nav     {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif"; font-weight:300;}
   .cd-side-nav     {position: fixed !important; z-index: 999999; left: 0; top: 69px; width: 100%; height: calc(100vh - 69px); padding-bottom: 1.25em;
                     background-color: #0e1723; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.15);
                     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; visibility: hidden; opacity: 0;
                     overflow-x: hidden; overflow-y: auto; font-size: 20px; background-color: rgb(39, 44, 53);
                     background: linear-gradient(to bottom, #272c35 0%, #272c35 50%, #1a1e25 100%); background-image: url(../../img/backgrounds/techmenubgnext.jpg);
                     background-repeat: no-repeat; background-position: 0px 0px; background-size: cover; transition: 0.2s;}
   .cd-side-nav     {transition: none !important; transform: none !important; animation: none !important;}
   /* trigger */
   .cd-nav-trigger {position: fixed; right: 5px; top: 9px; display: block; width: 71px; height: 50px; border: 0;
                    background-color: rgba(0, 0, 0, 00); border-radius: 6px; cursor: pointer; z-index: 9999999; transform: scale(1.4);}
   .cd-nav-trigger span {position: absolute; height: 3px; width: 24px; cursor: pointer; top: calc(50% - 2px); right: 22px; transition: background 0.2s; background: #ffffff;}
   .cd-nav-trigger span::before, .cd-nav-trigger span::after {content: ""; right: 0; -webkit-transform-origin: 0 50%; 
    transform-origin: 0 50%; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s;}
   .cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after {position: absolute; height: 3px; width: 24px; cursor: pointer; background: hsl(0, 0%, 100%);}
   .cd-nav-trigger span::before {top: -6px;}
   .cd-nav-trigger span::after {top: 6px;}
   /* animation */
   .cd-side-nav--is-visible {opacity: 1 !important; visibility: visible !important; display: block !important;}
   .cd-nav-trigger--nav-is-visible span::before {transform: translateX(4px) translateY(-3px) rotate(45deg);}
   .cd-nav-trigger--nav-is-visible span::after  {transform: translateX(4px) translateY(2px) rotate(-45deg);}
   .cd-nav-trigger--nav-is-visible span {background: rgba(0, 0, 0, 0);}
    /* label */
   .cd-side__label {margin-top: -4px; padding: 1.25em 1.25em 0.375em;}
   .cd-side__label span {text-transform: uppercase; font-weight: 700 !important; font-size: 0.65em; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.1em;}
   .cd-side__item, .cd-nav__item {font-size: 0.875em; position: relative;}
   .cd-side__item > a, .cd-nav__item > a {display: flex; align-items: center;}
   .cd-side__item a, .cd-nav__item a {position: relative; display: block; padding: 0.75em 1.25em; color: hsl(0, 0%, 100%);}
   .cd-side__item, .cd-nav__item {border-width: 0px 0px 1px 0px; border-style: solid; border-image: linear-gradient(to right, #3a4354, rgba(0, 0, 0, 0)) 1 1%;}
   .cd-side__item > a::before {content: ""; height: 16px; width: 16px; margin-right: 14px; opacity: 0.5;}
    /* icon */
   .hasicon   {background-repeat: no-repeat;}
   .hasicon a {padding-left: 50px !important;}
   [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {cursor: pointer; */}
   /* submenu shop items */
   .cd-side__sub-list, .cd-nav__sub-list {background-color: rgba(0,0,0,0.3); display: none;}
   .cd-side__sub-item {margin-left: 10px; color: #ffffff;}
   .cd-side__item--expanded .cd-side__sub-list,.cd-side__item--expanded .cd-nav__sub-list {display: block;}
   .cd-side__item--has-children>a::after,.cd-nav__item--has-children>a::after {display: none}

   .menucomp  {padding-left: 0px; font-size: 20px; font-weight: 700; padding: 0px; padding-top: 6px; color: #FFFFFF;}
   .menuadr   {padding-left: 0px; font-size: 17px; padding: 2px; color: #FFFFFF;}
   .menumail  {padding-left: 0px; margin-left: -22px; margin-top: -8px !important; cursor: pointer; color: #FFFFFF;}
   .menutel   {padding-left: 0px; margin-left: -22px; margin-top: -8px !important; color: #FFFFFF;}
   .linktitle {font-size: 18px; padding: 10px; padding-left: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-left: 0px;}

   .cd-side__sub-list, .cd-nav__sub-list {padding-left: 46px !important; padding-bottom: 10px;}

   @media (max-width: 700px) {.cd-side__sub-item:first-child {padding-top: 10px;}}
   
   .fa-th                       {font-style:normal; font-size: 15px;}
   .fa-plus                     {font-style:normal; font-size: 15px;}
   .fa-toggle-on                {font-style:normal; font-size: 15px;}
   .fa-angle-double-left        {font-style:normal; font-size: 15px;}
   
   .fa-th:before                {font-family: FontAwesomeSolid !important; content: "\f00a" !important;}
   .fa-plus:before              {font-family: FontAwesomeSolid !important; content: "\f0fe" !important;}
   .fa-toggle-on:before         {font-family: FontAwesomeSolid !important; content: "\f205" !important;}
   .fa-angle-double-left:before {font-family: FontAwesomeSolid !important; content: "\f100" !important;}

   .cd-side__item a, .cd-nav__item a {font-family: "Roboto light" !important; font-weight: 500 !important;}
   .cd-side__sub-item                {font-family: "Roboto light" !important; font-weight: 500 !important;}
   .cd-side__label span              {font-family: "Roboto bold"  !important; font-weight: 500 !important;}

/* ==========================================================================
   mobilemenu modal
   ========================================================================== */
   .mobilemenubackground-aatventure {background: url(../../img/backgrounds/techmenubgnext.jpg); background-size: 100vw;}
   #sloganx      {margin-top: 30px; width: 100vw;}
   .autographx   {width: 100vw; font-family: "Roboto Bold"; font-size: 18px; color: rgba(255, 255, 255, 0.8); text-align: center;}
   .autographxx  {width: 100vw; font-family: "Roboto Light"; font-size: 14px; color: rgba(255, 255, 255, 0.8); text-align: center; border-bottom: 100px solid transparent;}
   .mobileheaderavatar   {display:flex; align-items: center;}
   .mobileheaderusername {float: left; font-family: "Roboto Light"; font-size: 14px; color: #FFFFFF; text-transform: uppercase;}
   .avatar-xs    {margin-left: 46px; margin-right: 20px; height: 40px; width: 40px; max-width: 40px !important; border-radius: 50%;}

/* ==========================================================================
   aatventure spinning logo
   ========================================================================== */
   .logo img {width:45px; height: 45px;}
   .aatsspinner {margin-left:-4px;}
   .aatsspinnerreverse {margin-left: -45px; animation-name: spinlogoreverse; animation-duration: 10000ms; animation-iteration-count: infinite; animation-timing-function: linear;}
    @keyframes spinlogo {from {transform:rotate3d(0,0,1,0)} to {transform: rotate3d(0,60,0,360deg)};}
    @keyframes spinlogoreverse {from {transform:rotate3d(0,0,1,0)} to {transform: rotate3d(0,0,60,-360deg)};}

/* ==========================================================================
   icons
   ========================================================================== */
   .nonewstoday {background-image: url('../../img/navicons/nonewstoday.jpg') !important; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); background-size: contain;}
   .nav-icon    {background-repeat: no-repeat; background-size: contain;}
   .iconhome    {background-size: 80px; background-image: url('../../img/navicons/home.png');       background-position: -16px 2px;}
   .iconfolder  {background-size: 80px; background-image: url('../../img/navicons/categories.png'); background-position: -16px -2px;}
   .icontags    {background-size: 63px; background-image: url('../../img/navicons/tags.png');       background-position: -6px 0px;}
   .iconnews    {background-size: 74px; background-image: url('../../img/navicons/news.png');       background-position: -14px 1px;}
   .iconwebshop {background-size: 83px; background-image: url('../../img/navicons/shopshop.png');   background-position: -18px -2px;}
   .iconradio   {background-size: 82px; background-image: url('../../img/navicons/radio.png');      background-position: -15px -2px;}
   .icontools   {background-size: 59px; background-image: url('../../img/navicons/tools.png');      background-position: -5px 6px;}
   .icongames   {background-size: 59px; background-image: url('../../img/navicons/games.png');      background-position: -5px 4px;}
   .iconarchive {background-size: 64px; background-image: url('../../img/navicons/archive.png');    background-position: -9px 4px;}
   .opa1{opacity: 0;}
    @media (max-width: 768px) {
      .nonewstoday {background-size: 220% 100% !important;}
      .iconhome    {margin-left: 20px; background-position: -16px 9px  !important;}
      .iconfolder  {margin-left: 20px; background-position: -16px 5px  !important;}
      .icontags    {margin-left: 20px; background-position: -6px 7px   !important;}
      .iconnews    {margin-left: 20px; background-position: -14px 10px !important;}
      .iconwebshop {margin-left: 20px; background-position: -18px 6px  !important;}
      .iconradio   {margin-left: 20px; background-position: -15px 6px  !important;}
      .icontools   {margin-left: 20px; background-position: -5px 13px  !important;}
      .icongames   {margin-left: 20px; background-position: -5px 10px  !important;}
      .iconarchive {margin-left: 20px; background-position: -9px 10px  !important;}
    }

/* ==========================================================================
   megadropdown
   ========================================================================== */
   .megadropdown         {position: fixed; top: 0px; right: 250px; width: 360px; min-height: 70px; overflow: hidden; z-index: 9999999; cursor: pointer;}
   .megadropdown-content {display: none; position: fixed; right: 0px; top: 70px; width: 590px; border-left: 10px solid#1e2329;
                          height: 100vh; z-index: 9999; background-color: #121722; overflow-x: hidden; overflow-y:auto;
                          background-image: url('../../img/backgrounds/filterbackground.jpg'); background-repeat: no-repeat; background-size: cover; background-position:-20px;}
   .megadropdown-show    {display: block !important;}
   .megamargin {width:100vw; margin-left:auto; margin-right:auto; padding:8px; padding-top:20px; padding-bottom: 100px;}
   .megamargin .underimage {display: block; width: 100%; text-align: center; margin-top: 6px; margin-bottom: -20px; z-index: 99;
                            margin-left: 0px; line-height: 1.3; padding-top: 2px; background-color: #000000; color: #8eb4d7; font-family: 'Olivetti Valentine'; font-size: 16px; 
                            border: 1px solid #23415c; border-radius: 4px;}
   .i_filters  {width: 140px; height: 140px;  padding: 4px; border-radius: 10px; box-shadow: 0px 0px 3px #676869; cursor: pointer; opacity: 0.8; background: rgba(100, 100, 100, 0.1) !important;}
   @media screen and (max-width: 768px) {.megamargin {padding:20px;}}
   @media (min-width: 768px) {
      .megadropdown .card       {width: 138px !important; min-height: 170px; margin-bottom: 40px; transition: transform .5s; border-radius: 6px; z-index: 9;}
      .megadropdown .card:hover {transform: scale(1.01); filter: brightness(1.1);}
      .hvr-grow1:hover, .hvr-grow1:focus, .hvr-grow1:active {transform: scale(1.1) !important;}
   }

   /* show dropdown based on url slug */ 
   .megadropdown:hover .megacontent-timemachine                       {display: block !important;}
   .megadropdown:hover .megacontent-games-consoles                    {display: block !important;}
   .megadropdown:hover .megacontent-artificial-intelligence           {display: block !important;}
   .megadropdown:hover .megacontent-quantum-mechanics                 {display: block !important;}
   .megadropdown:hover .megacontent-space-and-time                    {display: block !important;}
   .megadropdown:hover .megacontent-history-and-archaeology           {display: block !important;}
   .megadropdown:hover .megacontent-web-development                   {display: block !important;}
   .megadropdown:hover .megacontent-synths-and-effects                {display: block !important;}
   .megadropdown:hover .megacontent-movie-trailers                    {display: block !important;}
   .megadropdown:hover .megacontent-the-tainment                      {display: block !important;}
   .megadropdown:hover .megacontent-politics-and-power-war-and-greed  {display: block !important;}
   .megadropdown:hover .megacontent-economy-crypto-blockchain-nft     {display: block !important;}
   .megadropdown:hover .megacontent-technology                        {display: block !important;}
   .megadropdown:hover .megacontent-science                           {display: block !important;}
   .megadropdown:hover .megacontent-phones-gadgets-electronica        {display: block !important;}
   .megadropdown:hover .megacontent-engineering                       {display: block !important;}
   .megadropdown:hover .megacontent-psychology                        {display: block !important;}
   .megadropdown:hover .megacontent-health                            {display: block !important;}
   .megadropdown:hover .megacontent-food-and-recipes                  {display: block !important;}
   .megadropdown:hover .megacontent-cocktails                         {display: block !important;}
   .megadropdown:hover .megacontent-cartoon-cocktail                  {display: block !important;}
   .megadropdown:hover .megacontent-music-madness                     {display: block !important;}
   .megadropdown:hover .megacontent-travelling-and-sightseeing        {display: block !important;}
   .megadropdown:hover .megacontent-typically-dutch                   {display: block !important;}
   .megadropdown:hover .megacontent-short-films                       {display: block !important;}
   .megadropdown:hover .megacontent-explicit-content                  {display: block !important;}
   .megadropdown:hover .megacontent-zombie-station                    {display: block !important;}
   .megadropdown:hover .megacontent-art-culture-fashion               {display: block !important;}
   .megadropdown:hover .megacontent-dee-dee-design                    {display: block !important;}
   .megadropdown:hover .megacontent-wildlife                          {display: block !important;}
   .megadropdown:hover .megacontent-sports                            {display: block !important;}
   .megadropdown:hover .megacontent-answers                           {display: block !important;}
   .megadropdown:hover .megacontent-electrodisco-synthpop-trance      {display: block !important;}
   .megadropdown:hover .megacontent-sentimental-journey               {display: block !important;}
   .megadropdown:hover .megacontent-conspiracy-theories               {display: block !important;}

/* ==========================================================================
   make it rain
   ========================================================================== */
   #bgvideo {position: absolute; top:0px; width:100%; height: 100vh; pointer-events: none; z-index: 1; opacity: 0.3; object-fit: fill; }
   .rain {position: absolute; left: 0; width: 100%; height: 100%; z-index: 2;}
   .rain.back-row {display: none; z-index: 1; bottom: 60px; opacity: 0.5;}
   .drop {position: absolute; bottom: 100%; width: 15px; height: 120px; pointer-events: none; animation: drop 0.5s linear infinite;}
   .stem {width: 1px; height: 60%; margin-left: 7px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); animation: stem 0.5s linear infinite;}
   .splat {width: 15px; height: 10px; border-top: 2px dotted rgba(255, 255, 255, 0.5); border-radius: 50%;
   opacity: 1; transform: scale(0); animation: splat 0.5s linear infinite; display: none;}
   @keyframes drop {0% {transform: translateY(0vh);} 75% {transform: translateY(90vh);} 100% {transform: translateY(90vh);}}
   @keyframes stem {0% {opacity: 1;} 65%  {opacity: 1;} 75%  {opacity: 0;} 100% {opacity: 0;}}

/* ==========================================================================
   rotating circle
   ========================================================================== */
   .loading {text-align: center;}
   .rotating::before {position: absolute; width: 100%; height: 100%; content: " "; border-radius: 50%; box-shadow: 0 0 20px 12px rgba(13, 81, 156, 0.35); pointer-events: none;}
   .rotating {position: absolute; color: #000000; width: 114px; height: 114px; border-radius: 50%; animation: rotate_animation 4s ease-in-out infinite alternate, pulse_animation 3s ease-out infinite;
      z-index: 1; margin-top: -2px; margin-left: -2px;}
   .rotating::after {position: absolute; top: 3px; left: 3px; width: calc(40vh - 6px); height: calc(40vh - 6px); background-color: currentColor; content: " ";
	 border-radius: 50%; animation: pulse_animation 6s ease-out infinite; animation-delay: .2s;}
   @keyframes rotate_animation {0% { transform: rotate(0deg);} 100% {transform: rotate(600deg);}}
   @keyframes pulse_animation {0%, 40% { box-shadow: 0 0 5px 0px rgba(107, 163, 220, 0.2); } 100% { box-shadow: 0 0 5px 80px rgba(0, 0, 255, 0); }}
   @media (min-width: 1024px) {.rotating {top: -60px; right: 19px; z-index:99}}

/* ==========================================================================
   rotating filter selected
   ========================================================================== */
   .rotatingselected {position: absolute; color: #000000; width: 180px; height: 180px; border-radius: 50%;  z-index: 99; margin-top: -4px; margin-left: -4px; cursor: pointer;}
   .rotatingselected::before {position: absolute; width: 100%; height: 100%; content: " "; border-radius: 50%; border-radius: 20% !important; 
      box-shadow: 0 0 20px 12px rgba(13, 81, 156, 0.35); pointer-events: none;}
   .filtergrid .rotatingselected {position: absolute; color: #000000; width: 150px !important; height: 150px !important;}
   .rotatingselected:hover {animation: rotate_animation 4s ease-in-out infinite alternate, pulse_animation 3s ease-out infinite;}
   .rotatingselected::after {position: absolute; top: 3px; left: 3px; width: calc(40vh - 6px); height: calc(40vh - 6px); 
     background-color: currentColor; content: " "; border-radius: 50%; animation: pulse_animation 6s ease-out infinite; animation-delay: .2s;}
    @media screen and (max-width: 768px) {.rotatingselected {width: 115px !important; height: 115px !important;}}
    .rounded-circle {border-radius: 50% !important;}
    .higherzindex {z-index: 10 !important;}

/* ==========================================================================
   kenburns effect
   ========================================================================== */
   #KenBurns {position: relative; margin-top: 0px; background: transparent; display: flex; align-items: flex-end; height: 220px; margin-bottom: -150px; overflow: hidden;}
   #KenBurns img {position: absolute; min-width: 100%; min-height: 100%; height: auto; backface-visibility: hidden;
                  transform: scale(1.4) rotate(12deg); opacity:0; animation: KenBurns 80s infinite; animation-direction: normal, reverse;}
   #KenBurns img:nth-child(8) {animation-delay: 110s;}
   #KenBurns img:nth-child(7) {animation-delay: 100s;}
   #KenBurns img:nth-child(6) {animation-delay: 90s;}
   #KenBurns img:nth-child(5) {animation-delay: 80s;}
   #KenBurns img:nth-child(4) {animation-delay: 60s;}
   #KenBurns img:nth-child(3) {animation-delay: 35s;}
   #KenBurns img:nth-child(2) {animation-delay: 25s;}
   #KenBurns img:nth-child(1) {animation-delay: 15s;}
   @keyframes KenBurns {25% {opacity: 1; transform: scale(1) rotate(0);} 40% {opacity: 0;}}
   @media (max-width: 600px) {#KenBurns img {transform: scale(1.35) rotate(13deg) !important;}}       

/* ==========================================================================
    horizontal scroller
    ========================================================================== */

    .horimg {text-align: center; width: 40px; height: 40px; border-radius: 50%; object-fit: contain; box-shadow: 10px 6px 5px #000000;}

    @media (max-width: 768px) {
    .horizontalcontent {display: grid !important; grid-gap: 64px; grid-template-columns: 1px repeat(var(--total), 0) 1px; overflow-x: scroll; scroll-snap-type: x proximity;}
    .horizontalcontent:before {position: absolute; content: ''; top: 0; transform: translateX(100%); pointer-events: none; height: 100px; z-index: 1; animation: slide 8s infinite;
                               background: linear-gradient(to right, rgb(0 0 0 / 0%) 0%, rgb(243 243 243 / 10%) 50%, rgba(28, 86, 132, 0) 99%, rgba(125, 125, 125, 0) 100%);}
    }

    @media (max-width: 1030px) {
    #horizontalscroller {position: fixed; left: 0px; top: 70px; display: inline-block !important; width: 100% !important; overflow-y: hidden; 
                        -webkit-overflow-scrolling: touch; z-index: 5 !important; height: 86px; background-color: #000000; 
                        background-image: url('../../img/navicons/bloggradient.jpg'); background-size: cover;}
    #horizontalscroller .horizontalcontent .nav-item {margin-left: -80px;}
    #horizontalscroller .horizontalcontent > li:nth-child(2) .horimg {box-shadow: none !important; margin-left: 20px; margin-top: 4px;}
    .emptylistitem {margin-left: -70px;}
   }

    @media (min-width: 1030px) {#horizontalscroller {display: none !important;}}

/* ==========================================================================
    languages
    ========================================================================== */
    @media (max-width: 768px) {
      #languagescroller {position: fixed; left: 0px; bottom: 63px; width: 100% !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; z-index: 5 !important; height: 94px; background-color: #0f1724;}
      #languagescroller .horizontalcontent {height: 100px; border-top: 1px solid #030609; overflow: hidden !important; grid-gap: 78px !important;}
      #languagescroller .hortxt {font-family: arial;}    
      .hortxt {width: 68px; text-align: center; font-size: 12px !important; margin-top: 6px;}
      .langimg {text-align: center; width: 50px; height: 50px; border-radius: 50%; object-fit: contain;}
      .max18 {max-width: 18% !important;}
      .nav-item {display: flex !important; scroll-snap-align: center; padding-top: 4px; padding-bottom: 0px;}
    }
    .lang-en {display: none;}
    .lang-fr {display: none;}
    .lang-de {display: none;}
    .lang-ch {display: none;}
    .nav-link {display: block; padding: .5rem 1rem;}     
    
/* ==========================================================================
    footermenu options
    ========================================================================== */
    .options {position: fixed; bottom: 0px; width: 100vw; background-color: #142031; color: #ffffff; font-family: "Rajdhani Regular";
      text-align: center; padding: 5px; border-top: 1px solid #000000; z-index: 50; height:65px;}
    .optbtn {width: 22% !important; border: 0; color: white; cursor: pointer; text-align: center; height: 4rem;
             background-color: transparent; background-position: 50% 50%; background-repeat: no-repeat; background-size: auto 50%;
             -webkit-tap-highlight-color: transparent; outline: none;}
    .btn__icon                  {height: 50%; width: 100%;}
    .option svg                 {display: flex !important; vertical-align: middle;}
    #btn-clock .btn__icon       {margin-top: 0px;}
    #btn-map .btn__icon         {margin-top: -19px; margin-left: -8px; overflow: visible;}
    #btn-language svg           {margin-left: 6px; margin-top: -4px;}
    #btn-userinfo .btn__icon    {margin-top: -19px; height: 23%; overflow: visible;}
    #btn-browserinfo .btn__icon {margin-top: -8px;}

/* ==========================================================================
    ticker
    ========================================================================== */
    .ticker-wrap {position: absolute; top: 70px; width: 100%; overflow: hidden; height: 4rem; padding-left: 100%; box-sizing: content-box; z-index: 99;}
    .ticker-wrap .ticker {font-family: sans-serif; display: inline-block; height: 4rem; line-height: 4rem; white-space: nowrap; padding-right: 100%; box-sizing: content-box; 
                          animation-iteration-count: infinite; animation-timing-function: linear; animation-name: ticker; animation-duration: 50s;}
    .ticker-wrap .ticker__item {display: inline-block; padding: 0 2rem; font-size: 2rem; color: white;}
    @keyframes ticker {0% {transform: translate3d(0, 0, 0); visibility: visible;} 100% {transform: translate3d(-100%, 0, 0);}}
    @media screen and (max-width: 760px) {.ticker-wrap {display: none;}}

/* ==========================================================================
  squiggly text
  ========================================================================== */

  .squiggly {display: inline-block; width: 100%; line-height: 1.4; animation: squiggly-anim 0.34s linear infinite;}

  @keyframes squiggly-anim {
      0%  {filter: url("#squiggly-0");}
     25%  {filter: url("#squiggly-1");}
     50%  {filter: url("#squiggly-2");}
     75%  {filter: url("#squiggly-3");}
    100%  {filter: url("#squiggly-4");}
  }

/* ==========================================================================
    social icons profile and bio
    ========================================================================== */

    .horizontalscroller    {position: relative; width: 100%; overflow-x: scroll !important; background-color: transparent;}
    .profile-links-list    {display: flex; width: 610px !important; margin-top: -2px; padding: 10px 0; margin-left: -5px;}
    .profile-links-list li {margin: 0 5px; padding: 4px 0; }
    .profile-links-list .btn-light {background-color: transparent !important; border-radius: 50% !important; border: 0; min-width: 65px; min-height: 65px; cursor: pointer; margin-right: 5px;}
    .profile-card-photo {width: 110px !important; height: 110px !important; border: 5px solid #171c24; border-radius: 50%; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); z-index: 2; pointer-events: none;}

    .webcolor       {background-image: url('../../img/interface/www.png');       background-size: cover;}
    .youtubecolor   {background-image: url('../../img/interface/youtube.png');   background-size: cover;}
    .facebookcolor  {background-image: url('../../img/interface/facebook.png');  background-size: cover;}
    .instagramcolor {background-image: url('../../img/interface/instagram.png'); background-size: cover;}
    .tiktokcolor    {background-image: url('../../img/interface/tiktok.png');    background-size: cover;}
    .xcolor         {background-image: url('../../img/interface/x.png');         background-size: cover;}
    .linkedincolor  {background-image: url('../../img/interface/linkedin.png');  background-size: cover;}
    .whatsappcolor  {background-image: url('../../img/interface/whatsapp2.png'); background-size: cover;}
    .snapchatcolor  {background-image: url('../../img/interface/snapchat.png');  background-size: cover;}

    @media screen and (min-width: 760px) {
        #KenBurns  {margin-top: 15px !important;}
       .profilecontainer      {margin-top: 0px;}
       .margintop-80          {margin-top: -114px;}
       .profileleft           {position: relative; float: left; width: 120px; margin-left: 60px; margin-top: -10px;}
       .profileright          {position: absolute; top: 96px; left: 200px;}
       .profile-card-about    {position: absolute; color: #ecf3ff; margin-top: -64px; margin-left: 20px; width: 50vw; font-weight: 300; display:none;}
       .profile-card-name     {font-weight: 600; font-size: 20px; color: #d9dbe2 !important; text-transform: uppercase; padding-top: 21px;}
       .profile-card-username {margin-top:-4px; color:#d9dbe2; opacity:0.9;}
       .profile-card-photo    {position: absolute; right: 20px; margin-top: -60px; pointer-events: none;}
       .profile-links-list    {float: right; width: 870px !important; padding: 10px 0;}
       .hideoverflow          {position: relative; top: 0px; width: 100vw; height: 220px; margin-top: -24px; overflow: hidden; background: transparent;}
       .overlaybutton         {display: block; height: 140px; width: 140px; border-radius: 50%; text-align: center;cursor: pointer;}
       .horizontalscroller    {margin-top: -38px;}
       .blackoverlay          {position: relative; margin-top: -16px; width: 100vw; height: 70px; z-index: 0 !important; background-color: #090B14;}   
       .barbatruuk            {margin-top: -60px !important;} 
    }

    .transparentheader     {background: rgba(0, 0, 0, 0.3) !important; box-shadow:none !important;}

    @media screen and (max-width: 760px) {
       .profilecontainer      {margin-top: 0px;}
       .margintop-80          {margin-top: -330px;}
        #KenBurns             {height: 380px !important; margin-top: -40px !important; margin-left: -280px;}
       .profileleft           {position: relative; float: left; width: 120px; margin-left: 24px; padding-top: 10px;}
       .profileright          {position: relative; margin-top: 10px; width: 260px; float: right !important; text-align: right; padding-right: 12px !important;}
       .profile-card-about    {font-family: "Rajdhani Regular"; font-size: 16px; margin-top:-18px !important; text-align: right; line-height: 1.3; color: #95a2bd !important;}
       .profile-card-name     {position: relative; line-height: 0.9; top: -26px; font-size: 25px; text-align: right; word-wrap: break-word;
                               font-weight: 600; font-size: 20px; color: #d9dbe2 !important; text-transform: uppercase; padding-top: 30px;}
       .profile-card-username {margin-top: 6px !important; color: #80c6ff; text-align: right; display: none;}
       .hideoverflow          {position: relative; top: -56px; width: 100vw; height: 350px; margin-top: -24px; overflow: hidden; background: transparent;}
       .overlaybutton         {display: block; height: 140px; width: 140px; border-radius: 50%; text-align: center;cursor: pointer;}
       .blackoverlay          {display: none;}
       .barbatruuk            {margin-top: -8px; padding-top: 10px;}
       .profile-links-list    {margin-left: 22px !important;}
       .horizontalscroller    {margin-left: -13px !important;}
       .horizontalscroller::-webkit-scrollbar {display: none !important;}
    }

/* ==========================================================================
    webshops mobilemenu
    ========================================================================== */

    .dtlinktitle {display: inline; font-family: "Oswald Regular"; font-weight: 400 !important; font-size: 18px; color: #e7e7e7;
                  line-height: 60px; text-transform: uppercase; vertical-align: middle; cursor: pointer; transition: all 0.3s;}

    @media screen and (min-width: 760px) {.dtlinktitle {font-size: 21px !important;}}

    .dtlinktitle:hover {color: rgb(233, 198, 58);}

    .cd-side__item>a::before {content: ''; height: 16px; width: 16px; margin-right: 14px; opacity: 0.5;}
    .cd-side__item a, .cd-nav__item a {position: relative; display: flex; padding: 0.75em 1.25em; align-items: center; color: #FFFFFF;}
    .adresgegevens>a::before  {width: 500px; background: url(../img/svg/adresgegevens.svg)  no-repeat 0 0 !important; background-size: cover; height: 100px; padding: 0; padding-bottom: 500px; zoom: 4%; margin-right: 250px;}
    .openingstijden>a::before {width: 500px; background: url(../img/svg/openingstijden.svg) no-repeat 0 0 !important; background-size: cover; height: 100px; padding: 0; padding-bottom: 500px; zoom: 5%; margin-right: 140px;
                               margin-bottom: -140px;}
    .bezorggebieden>a::before {width: 500px; background: url(../img/svg/bezorggebieden.svg) no-repeat 0 0 !important; background-size: cover; height: 100px; padding: 0; padding-bottom: 500px; zoom: 5%; margin-left: -40px;
                               margin-right: 160px; margin-bottom: -140px;}
    .bezorggebieden>a::before {width: 500px; background: url(../img/svg/bezorggebieden.svg) no-repeat 0 0 !important; background-size: cover; height: 100px; padding: 0; padding-bottom: 500px; zoom: 5%; margin-left: -40px;
                               margin-right: 160px; margin-bottom: -140px;}
    .bezorgtijden>a::before   {width: 500px; background: url(../img/svg/bezorgtijden.svg) no-repeat 0 0 !important; background-size: cover; height: 100px; padding: 0; padding-bottom: 500px; zoom: 4%; margin-right: 250px;}
    .informatie>a::before     {width: 500px; background: url(../img/svg/informatie.svg) no-repeat 0 0 !important; background-size: cover; height: 100px; padding: 0; padding-bottom: 500px; zoom: 4%; margin-right: 250px;}
    .assortiment>a::before    {width: 500px; background: url(../img/svg/assortiment.svg) no-repeat 0 0 !important; background-size: cover; height: 100px; padding: 0; padding-bottom: 500px; zoom: 5%; margin-right: 140px;
                               margin-bottom: -140px;}
    .shoppingcart>a::before   {background: url(../img/svg/shoppingcart.svg) no-repeat 0 0 !important;}

    .appheader-sushi {box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);}
    .mobileheader-sushi {background: #000000;}

    @media  screen and (max-width: 800px) {
      .mobileheader-annamimi                     {background-image: url(../../img/mobileheaders/annamimi-zorg.webp) !important;          background-size: 100% 70px !important;}
      .mobileheader-bydeb-fashion                {background-image: url(../../img/mobileheaders/bydeb-fashion.webp) !important;          background-size: 100% 70px !important;}
      .mobileheader-cafe-hilander                {background-image: url(../../img/mobileheaders/cafe-hilander.webp) !important;          background-size: 100% 70px !important;}
      .mobileheader-dogs-barbershop              {background-image: url(../../img/mobileheaders/dogs-barbershop.webp) !important;        background-size: 100% 70px !important;}
      .mobileheader-faas-printmedia              {background-image: url(../../img/mobileheaders/faas-printmedia.webp) !important;        background-size: 100% 70px !important;}
      .mobileheader-farasi                       {background-image: url(../../img/mobileheaders/farasi.webp) !important;                 background-size: 100% 70px !important;}
      .mobileheader-og-roosters                  {background-image: url(../../img/mobileheaders/og-roosters.webp) !important;            background-size: 100% 70px !important;}
      .mobileheader-plaza-exotica                {background-image: url(../../img/mobileheaders/plaza-exotica.webp) !important;          background-size: cover !important;}
      .mobileheader-la-torre                     {background-image: url(../../img/mobileheaders/la-torre.webp) !important;               background-size: cover !important;}
      .mobileheader-portguide                    {background-image: url(../../img/mobileheaders/portguide.webp) !important;              background-size: 100% 70px !important;}
      .mobileheader-rens-vastgoedzorg            {background-image: url(../../img/mobileheaders/rens-vastgoedzorg.webp) !important;      background-size: 100% 70px !important;}
      .mobileheader-slagerij-verstappen          {background-image: url(../../img/mobileheaders/verstappen-mobileheader.jpg) !important; background-size: 100% 70px !important;}
      .mobileheader-sushisensei                  {background-image: url(../../img/mobileheaders/sushisensei.webp) !important;            background-size: 100% 70px !important;}
      .mobileheader-timber                       {background-image: url(../../img/mobileheaders/timber.webp) !important;                 background-size: 100% 70px !important;}
      .mobileheader-veilig-op-slot               {background-image: url(../../img/mobileheaders/veilig-op-slot.webp) !important;         background-size: 100% 70px !important;}
      .mobileheader-yip-soon                     {background-image: url(../../img/mobileheaders/yip-soon.webp) !important;               background-size: 100% 70px !important;}
    }

    @media  screen and (max-width: 800px) {
      .mobilemenubackground-plaza-exotica .cd-side-nav {background-image: url('../../img/backgrounds/tropicalmodalbg.webp') !important; background-repeat: no-repeat; background-position: 0px 0px; background-size: 100% 100%;}
      .mobilemenubackground-slagerij-verstappen {background-image: url('../../img/backgrounds/verstappenmodalbg.jpg') !important; background-repeat: no-repeat; background-position: 0px 0px; background-size: cover;}  
      .mobilemenubackground-warung-iengie {background-image: url('../../img/backgrounds/indianmodalbg.jpg') !important; background-repeat: no-repeat; background-position: 0px 0px; background-size: 100% 100%;}
      .mobilemenubackground-la-torre      {background-image: url(../../img/backgrounds/tower-of-pisa.webp) !important; background-repeat: no-repeat; background-position: 0px 0px; background-size: 100% 100%;} 
      .mobilemenubackground-sushisensei   {background: linear-gradient(to bottom, #000000 0%, #140000 30%, #280000 100%) !important; opacity: 0.99;}
    }

    .groupsbodybg-la-torre {background: #090B14; background-image: url('../../img/backgrounds/darkermarble.webp') !important; background-repeat: repeat; background-position: 0px 0px;}

    @media  screen and (min-width: 800px) {
    .mobileheader-luxury {
        background-color: #001622;
        background: url(../../img/backgrounds/abstract-op30.webp) no-repeat !important;
        background-size: 100% 50%;
        background-position-y: 0px !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    }   
    .mobileheader-plaza-exotica {
        background-color: #001622;
        background: url(../../img/backgrounds/abstract-op30.webp) no-repeat !important;
        background-size: 100% 50%;
        background-position-y: 0px !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    }
    }

    .body-slagerij-verstappen #boldtext {color: #dda250 !important;}
    .body-slagerij-verstappen #thintext {color: #dda250 !important;}
    
    @media screen and (min-width: 768px) {
        .l           {margin-left: 10px; color: #FFFFFF; width: 220px; -webkit-font-smoothing: antialiased; opacity: 0.7;}
        .l .dagen    {color: #FFFFFF; width: 100px; float: left;}
        .l .tijden   {color: #FFFFFF;}
        .b           {margin-left: 10px; color: #FFFFFF; width: 100%; -webkit-font-smoothing: antialiased; opacity: 0.7;}
        .b .postcode {color: #FFFFFF; width: 15%; float: left;}
        .b .area     {color: #FFFFFF; width: 100%; padding-right: 5px;}
    }

    @media screen and (max-width: 768px) {
      .l           {color: #FFFFFF; width: 220px; -webkit-font-smoothing: antialiased; opacity: 0.8; padding-top: 5px;}
      .l .dagen    {float: left;  width: 100px; color: #FFFFFF;}
      .l .tijden   {color: #FFFFFF;}
      .b           {color: #FFFFFF; width: 85%; -webkit-font-smoothing: antialiased; opacity: 0.8; padding-top: 5px;}
      .b .postcode {float: left; width: 50px; color: #FFFFFF;}
      .b .area     {width: 85%; color: #FFFFFF;}
    }

/* ==========================================================================
    admin menu
    ========================================================================== */

    .adminmenu {position: absolute; display: flex; align-items: center; justify-content: space-between; top:70px; width:100vw; height: 70px; background-color: #0A0E17; z-index: 99;}
    .display-4 {font-family: "Roboto Black"; text-transform: uppercase; color: #FFFFFF; font-size: 30px; font-weight: 300 !important;}

    
    @media  screen and (min-width: 768px) {
        .adminmenu .navbar-left   {padding-left: 40px; min-width: 100px !important;}
        .adminmenu .navbar-right  {padding-right: 40px;}
        .adminmenu .navbar-center {margin-left: -100px;}
    }

    @media  screen and (max-width: 768px) {
        .adminmenu .navbar-left   {padding-left:  20px;}
        .adminmenu .navbar-right  {padding-right: 20px;}
         .display-4               {font-size: 28px !important;}
    }

    .btn {display: inline-block; padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap;
          vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; border: 1px solid transparent; border-radius: 4px;}

    .defbtn-luxury       {background: #063e5f; border-color: #0c4463; color: #FFFFFF !important;}
    .defbtn-luxury:hover {background-color: #0069d9; border-color: #0062cc; color: #FFFFFF;}

    .btn-mobilemenu {background-color: #007bff; border-color: #007bff; color: #FFFFFF;}

    @media only screen and (min-width: 768px) {
      .xaddbutton {min-width: 160px !important; height: 40px; line-height: 24px;}
    }

    .aatsdata {position: absolute; height: calc(100vh - 118px); overflow-x: hidden;}

    /* livewire search */
    @media only screen and (min-width: 768px) {
      .grid-cols-2 {position: fixed; left: calc(100% - 540px) !important; width: 200px; top: 84px !important; z-index: 1000; text-align: right;}
      .aatsdata    {top: 50px !important;}
    }

    @media only screen and (max-width: 768px) {
       .aatsdata {top: 74px;}
    }

    .aatsdata .fa-home:before      {background-color: #020c11; padding: 6px 12px; border-radius:4px;}
    .aatsdata .fa-linkedin:before  {font-family: 'Font Awesome 6 Brands'; content: "\f0e1"; font-size: 26px; background-color: #020c11; padding: 3px 10px; border-radius:6px;}
    .aatsdata .fa-facebook:before  {font-family: 'Font Awesome 6 Brands'; content: "\f09a"; font-size: 26px; background-color: #020c11; padding: 3px 10px; border-radius:6px;}
    .aatsdata .fa-instagram:before {font-family: 'Font Awesome 6 Brands'; content: "\f16d"; font-size: 26px; background-color: #020c11; padding: 3px 10px; border-radius:6px;}
    .aatsdata .fa-youtube:before   {font-family: 'Font Awesome 6 Brands'; content: "\f167"; font-size: 26px; background-color: #FFFFFF; padding: 3px 10px; border-radius:6px;}
    .aatsdata .fa-x-twitter:before {font-family: 'Font Awesome 6 Brands'; content: "\e61b"; font-size: 26px; background-color: #020c11; padding: 3px 10px; border-radius:6px;}
    .aatsdata .fa-tiktok:before    {font-family: 'Font Awesome 6 Brands'; content: "\e07b"; font-size: 26px; background-color: #020c11; padding: 3px 10px; border-radius:6px;}

    .aatsdata .fa-home      {display: inline-block; width: 100%; font-size:24px !important; text-align: center; color:#FFC336;}
    .aatsdata .fa-linkedin  {display: inline-block; width: 100%; font-size:24px !important; text-align: center; color:#0A66C2;}
    .aatsdata .fa-youtube   {display: inline-block; width: 100%; font-size:24px !important; text-align: center; color:#FF0000}
    .aatsdata .fa-facebook  {display: inline-block; width: 100%; font-size:24px !important; text-align: center; color:#4267B2;}
    .aatsdata .fa-instagram {display: inline-block; width: 100%; font-size:24px !important; text-align: center; color:#8A3AB9;}
    .aatsdata .fa-twitter   {display: inline-block; width: 100%; font-size:24px !important; text-align: center; color:#1DA1F2;}
    .aatsdata .fa-x-twitter {display: inline-block; width: 100%; font-size:24px !important; text-align: center; color:#1DA1F2;}
    .aatsdata .fa-tiktok    {display: inline-block; width: 100%; font-size:24px !important; text-align: center; color:#00F2EA;}