/* ==========================================================================
   aatventurestrap 27-11-2020
   ========================================================================== */

:root {
    --blue:      #007BFF;
    --indigo:    #6610F2;
    --purple:    #6F42C1;
    --pink:      #E83E8C;
    --red:       #DC3545;
    --orange:    #FB7826;
    --yellow:    #FFD908;
    --green:     #08FFBD;
    --teal:      #20C997;
    --cyan:      #17A2B8;
    --white:     #FFFFFF;
    --gray:      #6C757D;
    --gray-dark: #343A40;
    --primary:   #007BFF;
    --secondary: #6C757D;
    --success:   #0AB87D;
    --info:      #17A2B8;
    --warning:   #FFC107;
    --danger:    #DC3545;
    --light:     #F8F9FA;
    --dark:      #343a40;
    --black:     #000000;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont,
                             "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "Open Sans",
                             "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"
}

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

html {
    font-family: "Open Sans";
    line-height: 1.15;
    overflow-x: hidden;
    overscroll-behavior-y: contain; /* disable pull to refresh */
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation; /* no doubletouch zoom */
}

html * {
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

body {
    width: 100vw;
    height: 100vh;
    overflow-x:hidden !important;
    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Helvetica Neue",
    "Arial",
    "Noto Sans",
    "sans-serif",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

body                {background-color: #090A0F; color: #FFFFFF; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
.aos-animate        {-webkit-font-smoothing: subpixel-antialiased !important; transform: none !important;}
.body-slagerij      {background-color: #270105 !important;}
.loginbg-aatventure {background: #090A0E !important;}
.anchor             {cursor: pointer !important;}
.navsearchlink      {margin-left:20px !important; cursor: pointer !important;}
.fileinfo           {text-align: left !important;}
.ataratable         {column-span: all; user-select:text !important; overflow-x: auto;}
.defaulthide        {display: none}
.visible            {display: block !important;}

.card-body .list-left {padding-right: 10px !important;}
.card-body .list-item {padding-left: 0px !important;}
.avatar               {margin-top: 5px !important;}

#navbar     {position: fixed; background-color: #000000;}
#pdfoverlay {position: fixed; top: 70px; width: 100vw; height: calc(100vh - 70px); display: none; background-color: #100704; z-index: 999;}
#iframex    {width:100%; height:100%;}

.footertext {display: inline-block; margin-top: 30px; font-size: 12px !important; text-align: center; line-height: 50px !important;}

@media screen and (max-width: 800px) {
  .panel-body {height: calc(100vh - 137px) !important; overflow-x: scroll !important;}
}

@media screen and (min-width: 800px) {.imgthumb {max-width: 412px !important;} .footertext {width: 74vw;}}
@media screen and (max-width: 800px) {.footertext {width: 100vw;}}

.fixedheader     {position: fixed !important;}
.sticky-wrapper  {display: none !important;}
.landingtop      {width: 100% !important; margin-top: 69px; overflow-x: hidden !important}
.footertext a    {color: #FFFFFF !important;}
.movietitle      {opacity:0; margin-bottom:-30px;}
.wtf             {position: relative !important; z-index: 999999;}
.no-overflow     {overflow: hidden !important;}
.nav-logo        {min-width:145px !important}
.prevnextbuttons {margin-top: 10px !important; margin-bottom: 14px !important}

.aatspopup-aatventure li   {background-color: #0F1722; border-bottom: 1px solid #1a2531; color: #FFFFFF;}
.aatspopup-blue       li   {background-color: #011732; border-bottom: 1px solid #1a2531; color: #FFFFFF;}
.aatspopup-blue li:hover   {color: #42beff !important;}
.aatspopup-orange li       {background-color: #000000;; border-bottom: 1px solid #1a2531; color: #FFFFFF;}
.aatspopup-orange li:hover {color: #F26B19 !important;}
.aatspopup-pasta li        {background-color: #000000;; border-bottom: 1px solid #1a2531; color: #FFFFFF;}

#mobileflag     {display: inline-block; width: 100%; margin-top: -10px; margin-left: 9px; text-align: right;}
#langflagmobile {width:40px; height:40px;}
.lang-nl        {display: block !important;}
.lang-en        {display: none  !important;}

/* ==========================================================================
   updates ivm og-roosters
   ========================================================================== */

.adminheader      {padding: .75rem 1.25rem; margin-bottom: 0;}
.status-countdown {width:100px !important; background-color: #000000 !important; color: #FFFFFF !important;}
#flaglink         {position: relative; z-index: 99999; list-style: none;}

/* ==========================================================================
   updates ivm comments
   ========================================================================== */

@media (min-width: 1024px) {
  .splitit-left {border-top: 30px solid transparent; column-count: 2; column-gap: 0px; column-rule: 10px solid #1e222a; background: #090a0e77;}
   #aatventure_comments {margin-left: 15px !important; margin-right: 15px !important; padding-bottom: 600px}
}

#aatventure_comments {margin-left: 5px; margin-right: 5px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue";  -webkit-font-smoothing: antialiased;}
.aatvatar {display: inline-block; float: left; margin-left: 6px; width: 44px; height: 44px; border-radius: 50%; margin-right: 10px !important; 
           box-shadow: inset 17px 14px 10px -18px #a6d4ec; border: 4px solid #000000;}

.cardaat-body                   {margin-top: 20px;}
.cardaat-body .form-group       {border-radius: 6px; border: 2px solid #252b2f;}
.cardaat-body .form-group:hover {border: 2px solid #0073bf;}
.cardaat-body .form-control     {-webkit-font-smoothing: antialiased; box-sizing: border-box; width: 100%; line-height: 18px; padding: 10px 15px;
                                 height: 49px; font-size: 16px; background-color: #181c23 !important; color: #6c7477;
                                 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue"; resize: none; overflow: auto;}
                              
.overlayclick {position: relative; display: block; cursor: pointer;}

#aatventure_comments .media      {background-color: #1e222a; background-color: #181d25 !important;
                                  border: 0; margin: 0px; padding: 10px 5px 5px 10px !important; border-radius: 5px;}
#aatventure_comments .nextinline {border-bottom: 0 !important;}

.btn-outline-success {background-color: #3b5998 !important; color: #FFFFFF !important;
                      padding: 10px !important; margin-top: 20px; margin-bottom: 40px; width: 100%;}

#aatventure_comments .fbtitle {font-family: "Helvetica Neue"; font-size: 15px !important; margin-top: -8px;  margin-bottom: -2px;} 
#aatventure_comments .fbdate  {font-family: "Helvetica Neue"; font-size: 13px !important; } 

#aatventure_comments .fbtext {
  background-color: #3b5998; 
  padding: 10px; 
  padding-top: 12px; 
  border-radius: 0% 30%;
  -webkit-font-smoothing: antialiased;
  position: relative;
  margin-left: -5px;
  margin-top: 14px;
  padding-bottom: 24px;
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  color: #e4e6eb !important;
}

#aatventure_comments .nextinline .fbtext {background-color: #333c4a;}

#aatventure_comments .nextinline .fbtext {
    background-color: #19212b;
    background-color: #121721 !important;
    border-right: 4px solid #3156a5;
    padding: 10px;
    padding-bottom: 0px;
    border-radius: 5% 0%;
    min-width: 70%;
}                                                                        

#aatventure_comments .nextinline .fbtext        {float: right !important; padding-right: 20px; padding-left: 20px; clear: both;}
#aatventure_comments .nextinline .aatvatar      {float: right !important;}
#aatventure_comments .nextinline .textdirection {width: 100%; text-align: right;}

#aatventure_comments .nextinline .thisshouldbe100procent {position: relative; right: 20px;}

#aatventure_comments .nextinline .replybutton {
  width: 100px;
  height: 20px;
  margin-top: 8px;
  -webkit-mask-position: 73px -3px;
  background-color: #bef359 !important;
  opacity: 1 !important;
}

.replybutton {
  width: 37px;
  height: 27px;
  margin-top: -12px;
  float: right;
  -webkit-mask-image: url(../img/svg/send.svg);
  -webkit-mask-position: -1px 5px;
  -webkit-mask-size: 25px 25px;
  -webkit-mask-repeat: no-repeat;
  background-color: #f5f5f5 !important;
  opacity:0.5;
}

.editbutton {
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 15px !important;
  width: 40px;
  float: left;
  padding: 2px !important;
  background-color: #13161b !important;
  color: #FFFFFF;
  border: 1px solid #153150 !important;
}

.deletebutton {
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 15px !important;
  width: 40px;
  float: left;
  padding: 2px !important;
  background-color: #13161b !important;
  color: #FFFFFF;
  border: 1px solid #153150 !important;
}

.nextinline .sketcharrow {
  position: relative;
  width: 132px;
  height: 55px;
  margin-top: -25px;
  margin-right: 100px;
  float: right;
  -webkit-mask-image: url(../img/svg/sketch-arrow.svg);
  -webkit-mask-position: -1px 5px;
  -webkit-mask-size: 100px 50px;
  -webkit-mask-repeat: no-repeat;
  background-color: #3663c1 !important;
  transform: scale(1, -1) rotate(18deg);
  margin-bottom: -40px;
  z-index: 99;
}

#aatventure_comments .alert-warning {
  background: transparent !important;
  border-color: #15181d !important;
  color: #ffffff !important;
}

/* ==========================================================================
   updates ivm portguide
   ========================================================================== */

.langclass-NL {display: flex;}

.bodyinlineeditor                     {background: #000a15 !important;}
.jumbotronadmininline                 {padding: 6px 1rem 6px 1rem !important; background: #18233a !important;}
.postshow-portguide .img-fluid        {margin-bottom:6px !important}
.postshow-portguide .embed-responsive {margin-top:10px !important; border-radius:6px !important}

.splitcolumn ul li {font-size: 20px;}
.splitcolumn ul li:before {color: #aed5ff; content: '✓' !important; padding-right: 6px;}

@media (max-width: 600px) {
 .fileinfo p                      {font-size:0px !important;}
 .dynamic-aatventure button       {width: 100% !important;}
 .dynamic-aatventure .btn-warning {border-radius:5px 5px 0px 0px !important}
 .dynamic-aatventure .btn-danger  {border-radius:0px 0px 5px 5px !important; margin-left:-12px; width: 372px !important;}
}

.landinglink {color: #FFFFFF !important; padding-left: 50px; padding-top: 10px;}


/* ==========================================================================
   new: 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;}

@-webkit-keyframes Floating1 {
  from {transform: translate(0, 0px);}
  65%  {transform: translate(0, 5px);}
  to   {transform: translate(0, -0px);}
}

@-webkit-keyframes Floating2 {
  from {transform: translate(0, 0px);}
  45%  {transform: translate(0, 8px);}
  to   {transform: translate(0, -0px);}
}

@-webkit-keyframes Floating3 {
  from {transform: translate(0, 0px);}
  50%  {transform: translate(2px, 4px);}
  to   {transform: translate(0, -0px);}
}

/* ==========================================================================
   new: stories vertical scroller
   ========================================================================== */

.vertiscroll            {width: 100%; min-height: 315px; max-height: 100vh;}
.swiper-container       {background: #000000; width: 100%; height: 100%;}
.swiper-slide           {display: flex; justify-content: center; align-items: center; text-align: center; font-size: 18px;}
.video-js .vjs-tech     {position: relative !important; top: 0; left: 0; width: 100%; max-width: 100vw !important; height: auto !important;}
.storyslide1-dimensions {width: 100% !important; height: auto !important; max-width: 100vw !important; max-height: 98vh !important;}
.storyslide2-dimensions {width: 100% !important; height: auto !important; max-width: 100vw !important; max-height: 98vh !important;}
.storyslide3-dimensions {width: 100% !important; height: auto !important; max-width: 100vw !important; max-height: 98vh !important;}
.storyslide4-dimensions {width: 100% !important; height: auto !important; max-width: 100vw !important; max-height: 98vh !important;}
.storyslide5-dimensions {width: 100% !important; height: auto !important; max-width: 100vw !important; max-height: 98vh !important;}
.c_story                {border-bottom: 40px solid #000000 !important;}
.video-js .vjs-big-play-button {top: 40% !important; left: 38% !important;}
.video-js .vjs-control-bar     {display: none !important}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {display: none !important}

/* ==========================================================================
   new: flyers
   ========================================================================== */

.themeheader-cocktails {background: #000000 !important; background-image: none !important;}
.postshow-cocktails    {background: #070803 !important; border-top: 20px solid #000000 !important; box-shadow: inset 0 0px 0px #000000 !important;}
.c_flyer               {background: #000000 !important; border-bottom: 0px !important;}
.o_flyer               {opacity: 1;}
.o_flyer .card-like    {opacity: 0 !important;}
.o_flyer .category     {opacity: 0 !important;}
.o_flyer .bottom-txt   {opacity: 0 !important;}
.o_flyer .author       {opacity: 0 !important;}
.flyerheader           {font-family: "Ayherre"; font-size: 56px; text-transform: uppercase;}
.flyersubheader        {font-family: "Rousseau Deco"; font-size: 25px; text-transform: uppercase;}
.flyerline1            {font-family: "Rousseau Deco"; font-size: 14px; text-transform: uppercase;}
.flyerline2            {font-family: "Rousseau Deco"; font-size: 14px; text-transform: uppercase;}

/* ==========================================================================
   updates : visibilitystatus
   ========================================================================== */

.circle-on  {width: 30px; height: 50px; color: transparent !important; cursor: pointer;}
.circle-off {background-color: #FF0000 !important; width: 30px; height: 50px; color: transparent !important; cursor: pointer;}
.plunr      {float: right; opacity: 0.5; padding-right: 16px;}

.postkind-blog  {color: #C1FF07 !important;}
.postkind-music {color: #FFB834 !important;}
.postkind-movie {color: #4FC6FF !important;}
.postkind-game  {color: #ff5656 !important;}
.postkind-app   {color: #FF07C1 !important;}
.postkind-tool  {color: #FF07C1 !important;}
.postkind-flyer {color: #FF07C1 !important;}

.yearoverlay {position: absolute; bottom: -8px; right: 22px; width: 60px; color: #737373; padding: 2px; text-align: center;}

@media screen and (max-width: 800px) {
  .yearoverlay {font-size: 13px; bottom: -19px; left: 0px; right: 0px; color: #676767; width: 100%;}
}

/* ==========================================================================
   updates for movies => richcontent
   ========================================================================== */

.richcard  {background-color: #000000; background-image:none !important;}
.moviecard {background-color: #000000; background-image:none !important;}
.richitem, .movieitem {border-bottom: 116px solid transparent;}
.richtitle {font-family: "Rajdhani Regular"; margin-left: 1.25rem; margin-right: 1.25rem;
            z-index: 0; margin-top: -100px; font-size: 16px; font-weight: 700; line-height: 24px; color: #FFFFFF;}
.richcontent {padding-left: 1.25rem; padding-right: 1.25rem; z-index: 0; margin-bottom: 30px; margin-top: 10px;}
.richcontentspecial {padding-left: 1.25rem; padding-right: 1.25rem; z-index: 0; margin-bottom: 30px; margin-top: 30px;}
.moviespecial {background-color: #000000; background-image:none !important;}
@media screen and (max-width: 900px) {.movieitem {margin: auto auto; object-fit: cover; width: 100%; max-width: calc(100% - 8px)}}

/* ==========================================================================
   updates cant scroll in iframe :()
   ========================================================================== */

.cantscrolliniframeoverlay1 {position: absolute; top:0px; left:0px;  bottom:50px; width: 45%; background: transparent; z-index: 999999;}
.cantscrolliniframeoverlay2 {position: absolute; top:0px; right:0px; bottom:50px; width: 45%; background: transparent; z-index: 999999;}

/* ==========================================================================
   .tektonics test
   ========================================================================== */

.tektonics .profilecard-aatventure {margin-left:130px}

.tektonics {
    background-color: #090a0e;
    background: url(../img/backgrounds/neutralzone.jpg) no-repeat !important;
    background-size: 100% 100% !important;
}

.tektonics .jumbotronadmin {background: rgba(0,0,0,0) !important}

@media (max-width: 800px) {
  .mobilegroupmargin {margin-top:10px !important;}
}

.kind-product    {color: #FFFFFF !important;}
.kind-subproduct {color: #E8DE5D !important;}
.kind-menu       {color: #E8805D !important;}
.kind-pakket     {color: #E8805D !important;}

/* ==========================================================================
   aats login popup
   ========================================================================== */

.aatspopup           {position: absolute; top:10px; right: 0px; min-width: 300px; z-index: 99999999;}
.aatspopup .dropdown {width:300px !important; right: 0px; padding-right:20px;}
.aatspopup ul        {list-style: none; margin: 0; margin-top: -10px; padding-left: 0; padding-top: 0px; padding-bottom:12px}
.aatspopup li        {display: block; color: #FFFFFF; padding: 1rem; transition-duration: 0.5s;
                      padding-top: 8px; padding-bottom: 12px; padding-right: 30px; text-align: right;}
.aatspopup li:nth-child(1) {padding-top: 12px; padding-bottom: 12px; padding-right: 30px; text-align: right;}
.aatspopup li a      {color: #FFFFFF; cursor: pointer;}
.aatspopup li a li:hover {background: #FF0000 !important; cursor: pointer;}
.aatspopup ul li ul {position: absolute; top: 54px; visibility: hidden; opacity: 0; min-width: 240px;
                     transition: all 0.5s ease; left: 0; display: none;}
.aatspopup ul li:hover > ul {display: block; visibility: visible; opacity: 1; cursor: pointer }
.aatspopup ul li ul:hover {display: block; visibility: visible; opacity: 1; cursor: pointer;}

.logbox  {display: block !important; font-size: 15px !important; font-weight: 300; text-align: right; padding-right: 30px !important;}
.logbox  {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif",
                      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}

.aatspopup-aatventure ul li ul      {background: #0e1721;}
.aatspopup-aatventure li            {color: #FFFFFF; border-bottom: 1px solid #1a2531;}
.aatspopup-aatventure .logbox:hover {color: #4399f7 !important;}

/* ==========================================================================
   scrollbars
   ========================================================================== */

::-webkit-scrollbar-track-piece      {background-color: #2b3038;}
::-webkit-scrollbar-thumb            {background-color: #1e2c3a;}
@media screen and (max-width: 760px) {::-webkit-scrollbar {width: 0px !important;}}
@media screen and (min-width: 760px) {::-webkit-scrollbar {width: 12px;}}
@media (min-width: 868px)            {.mt-5 .col-md-4::-webkit-scrollbar {display: none;}}
@media (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {::-webkit-scrollbar {width: 0px !important;}}
@media screen and (max-width: 760px) {.horizontalscroller::-webkit-scrollbar {display: none !important;}}
@media screen and (max-width: 760px) {.horizontalscroller {margin-left: -13px !important;}}

.productinfo::-webkit-scrollbar-thumb       {background-color:#ff0000;}
.productinfo::-webkit-scrollbar-track-piece {background-color:#1f1f1f;}

.dontscrollx {position: absolute; top:0px;  bottom:0px; overflow-x: hidden; overflow-y: hidden; background-color: #090A0F;}
.doscrollx   {position: absolute; top:75px; bottom:0px; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; margin-bottom: 60px;}
.doscrollx   {transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0);}

#myweather   {position: fixed; left: 0px; top: 72px; width: 100vw; height: calc(100vh - 72px); border: 0; overflow: hidden;}
#myweather::-webkit-scrollbar-track-piece {background-color: #2b3038;}
#myweather::-webkit-scrollbar-thumb       {background-color: #1e2c3a;}

/* ==========================================================================
   default fonts
   ========================================================================== */

@font-face {font-family: 'Aatventure';        src: url('../fonts/Aatventure.woff')             format('woff')}
@font-face {font-family: 'Agency';            src: url('../fonts/Agency.woff')                 format('woff')}
@font-face {font-family: 'Arsmaquette Bold';  src: url('../fonts/Arsmaquette-Bold.woff')       format('woff'); letter-spacing: -0.033em;}
@font-face {font-family: 'Avenir Black';      src: url('../fonts/Avenir-Black.woff')           format('woff')}
@font-face {font-family: 'Lato Regular';      src: url('../fonts/Lato-Regular.woff')           format('woff')}
@font-face {font-family: 'Myriad Regular';    src: url('../fonts/MyriadPro-Regular.woff')      format('woff')}
@font-face {font-family: 'Nexa Bold';         src: url('../fonts/Nexa-Bold.woff2')             format('woff2')}
@font-face {font-family: 'Noteworthy Light';  src: url('../fonts/Noteworthy-Light.woff')       format('woff')}
@font-face {font-family: 'Noteworthy Bold';   src: url('../fonts/Noteworthy-Bold.woff')        format('woff')}
@font-face {font-family: 'Numerals';          src: url('../fonts/Numerals.woff')               format('woff')}
@font-face {font-family: 'Open Sans';         src: url('../fonts/OpenSans-Regular.woff2')      format('woff')}
@font-face {font-family: 'Oswald Regular';    src: url('../fonts/Oswald-Regular.woff')         format('woff')}
@font-face {font-family: "Oswald Bold";       src: url('../fonts/Oswald-Bold.woff')            format('woff')}
@font-face {font-family: 'Raleway Regular';   src: url('../fonts/Raleway-Regular.woff')        format("woff")}
@font-face {font-family: 'Rajdhani Regular';  src: url('../fonts/Rajdhani-Regular.woff')       format("woff")}
@font-face {font-family: 'Roboto Light';      src: url('../fonts/Roboto-Light.woff')           format('woff'); font-weight: 300;}
@font-face {font-family: 'Roboto Regular';    src: url('../fonts/Roboto-Regular.woff')         format('woff'); font-weight: 400;}
@font-face {font-family: 'Roboto Medium';     src: url('../fonts/Roboto-Medium.woff')          format('woff'); font-weight: 500;}
@font-face {font-family: 'Roboto Bold';       src: url('../fonts/Roboto-Bold.woff')            format('woff'); font-weight: 700;}
@font-face {font-family: 'Roboto Black';      src: url('../fonts/Roboto-Black.woff')           format('woff'); font-weight: 700;}

/* ==========================================================================
   stylish fonts
   ========================================================================== */

@font-face {font-family: 'Abel';              src: url('../fonts/Abel-Regular.woff2')          format('woff2')}
@font-face {font-family: 'American Captain';  src: url('../fonts/AmericanCaptain.woff2')       format('woff2')}
@font-face {font-family: 'AnonymousPro';      src: url('../fonts/AnonymousPro.woff2')          format('woff2')}
@font-face {font-family: 'Avenir Black';      src: url('../fonts/Avenir-Black.woff')           format('woff')}
@font-face {font-family: 'Caps';              src: url('../fonts/ErikGCapsSkInvers.woff')      format('woff')}
@font-face {font-family: 'CarbonType';        src: url('../fonts/CarbonType.woff2')            format('woff2')}
@font-face {font-family: 'Comix';             src: url('../fonts/Comix.woff2')                 format('woff2')}
@font-face {font-family: 'DaVinci';           src: url('../fonts/DaVinci.woff')                format('woff')}
@font-face {font-family: 'Dharma Punk';       src: url('../fonts/Dharma-Punk-2.woff2')         format('woff2')}
@font-face {font-family: 'Diara Light';       src: url('../fonts/Diaria-Light.woff')           format('woff')}
@font-face {font-family: 'Diara Bold';        src: url('../fonts/Diaria-Bold.woff')            format('woff')}
@font-face {font-family: 'Eurostyle Regular'; src: url('../fonts/Eurostile-Regular.woff2')     format('woff2')}
@font-face {font-family: 'Fear';              src: url('../fonts/FaceYourFears.woff2')         format('woff2')}
@font-face {font-family: 'Final Frontier';    src: url('../fonts/Final-Frontier.woff2')        format('woff2')}
@font-face {font-family: 'Gapstown';          src: url('../fonts/Gapstown.woff')               format('woff')}
@font-face {font-family: 'Hack';              src: url('../fonts/Hack-Regular.woff2')          format("woff2")}
@font-face {font-family: 'Hamburg Regular';   src: url('../fonts/Hamburg-Regular.woff')        format('woff')}
@font-face {font-family: 'HouseSlant';        src: url('../fonts/HouseSlant.woff')             format("woff")}
@font-face {font-family: 'James Bond';        src: url('../fonts/SkyFallDone.woff')            format('woff')}
@font-face {font-family: 'Josephs Brush';     src: url('../fonts/JosephsBrush.woff2')          format('woff2')}
@font-face {font-family: 'Kids';              src: url('../fonts/KidsScrawl.woff')             format('woff')}
@font-face {font-family: 'Lato Regular';      src: url('../fonts/Lato-Regular.woff')           format("woff")}
@font-face {font-family: 'League Gothic';     src: url('../fonts/League-Gothic.woff')          format("woff")}
@font-face {font-family: 'Liquid Embrace';    src: url('../fonts/LiquidEmbrace.woff')          format("woff")}
@font-face {font-family: 'Magic Medieval';    src: url('../fonts/MagicMedieval.woff')          format('woff')}
@font-face {font-family: 'Muli Light';        src: url('../fonts/Muli-Light.woff2')            format('woff2')}
@font-face {font-family: 'Pasajero';          src: url('../fonts/Pasajero.woff')               format("woff")}
@font-face {font-family: 'Trajan';            src: url('../fonts/TrajanProRegular.woff')       format('woff')}
@font-face {font-family: 'Tropicana';         src: url('../fonts/Tropicana.woff')              format('woff')}
@font-face {font-family: 'Trueno Bold';       src: url('../fonts/Trueno-Extended-Bold.woff2')  format('woff2')}
@font-face {font-family: 'Universal';         src: url('../fonts/UniversalAccreditation.woff') format('woff')}
@font-face {font-family: 'Walt Disney';       src: url('../fonts/WaltDisneyScriptv41.woff2')   format('woff2')}

/* ==========================================================================
   font awesome
   ========================================================================== */

@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/fontawesome-webfont.eot");
  src: url("../fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"),
  url("../fonts/fontawesome-webfont.woff2") format("woff2"),
  url("../fonts/fontawesome-webfont.woff") format("woff")
}

@font-face {
  font-family: 'FontAwesomeBrands';
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/!fontawesome5/fa-brands-400.eot");
  src: url("../fonts/!fontawesome5/fa-brands-400.eot?#iefix") format("embedded-opentype"),
  url("../fonts/!fontawesome5/fa-brands-400.woff2") format("woff2"),
  url("../fonts/!fontawesome5/fa-brands-400.woff") format("woff")
}

@font-face {
  font-family: 'FontAwesomeRegular';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/!fontawesome5/fa-regular-400.eot");
  src: url("../fonts/!fontawesome5/fa-regular-400.eot?#iefix") format("embedded-opentype"),
  url("../fonts/!fontawesome5/fa-regular-400.woff2") format("woff2"),
  url("../fonts/!fontawesome5/fa-regular-400.woff") format("woff")
}

@font-face {
  font-family: 'FontAwesomeSolid';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/!fontawesome5/fa-solid-900.eot");
  src: url("../fonts/!fontawesome5/fa-solid-900.eot?#iefix") format("embedded-opentype"),
  url("../fonts/!fontawesome5/fa-solid-900.woff2") format("woff2"),
  url("../fonts/!fontawesome5/fa-solid-900.woff") format("woff")
}

@font-face {
  font-family: 'simple-line-icons';
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0');
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0#iefix') format('embedded-opentype'),
       url('../fonts/Simple-Line-Icons.woff2?v=2.4.0') format('woff2'),
       url('../fonts/Simple-Line-Icons.ttf?v=2.4.0') format('truetype'),
       url('../fonts/Simple-Line-Icons.woff?v=2.4.0') format('woff'),
       url('../fonts/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {position: relative; top: 0px; display: inline-block; font-family:'Glyphicons Halflings' !important; vertical-align: middle;
           font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.glyphicon-remove {float: right; font-size: 26px; cursor: pointer; color: #FFFFFF !important;}
.glyphicon-remove:before {content: "\e014";}

.fa-th                       {font-style:normal;}
.fa-plus                     {font-style:normal;}
.fa-toggle-on                {font-style:normal;}
.fa-angle-double-left        {font-style:normal;}

.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;}

.icons    {font-family: 'simple-line-icons'; font-style: normal; line-height: 1; min-width: 55px;
           -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.noicon   {opacity:0}
.nav-icon {opacity:0}

.icon-arrow-left:before       {content:"\e605";}
.icon-shuffle:before          {content:"\e059";}
.icon-arrow-right:before      {content:"\e606";}
.icon-social-youtube:before   {content:"\e008";}
.icon-social-facebook:before  {content:"\f39e"; font-family: FontAwesomeBrands !important;}
.icon-social-twitter:before   {content:"\f099"; font-family: FontAwesomeBrands !important;}
.icon-social-instagram:before {content:"\f16d"; font-family: FontAwesomeBrands !important;}
.icon-frame:before            {content:"\e038";}
.icon-social-pinterest:before {content:"\e60b";}
.icon-picture:before          {content:"\e032";}
.icon-grid:before             {content:"\e06a";}

.icon-bars:before             {font-family: FontAwesomeSolid;   content: "\f0c9"; font-style: normal !important;}
.icon-fingerprint:before      {font-family: FontAwesomeSolid;   content: "\f577"; font-style: normal !important;}
.icon-heading:before          {font-family: FontAwesomeSolid;   content: "\f1dc"; font-style: normal !important;}
.icon-image:before            {font-family: FontAwesomeRegular; content: "\f03e"; font-style: normal !important;}
.icon-code:before             {font-family: FontAwesomeSolid;   content: "\f121"; font-style: normal !important;}
.icon-table:before            {font-family: FontAwesomeSolid;   content: "\f0ce"; font-style: normal !important;}
.icon-youtube:before          {font-family: FontAwesomeBrands;  content: "\f167"; font-style: normal !important;}
.icon-twitter:before          {font-family: FontAwesomeBrands;  content: "\f099"; font-style: normal !important;}
.icon-facebook:before         {font-family: FontAwesomeBrands;  content: "\f39e"; font-style: normal !important;}
.icon-instagram:before        {font-family: FontAwesomeBrands;  content: "\f16d"; font-style: normal !important;}

.icon-home:before             {font-family: FontAwesomeSolid;   content: "\f015"; font-style: normal !important;}
.icon-news:before             {font-family: FontAwesomeSolid;   content: "\f1ea"; font-style: normal !important;}
.icon-ship:before             {font-family: FontAwesomeSolid;   content: "\f21a"; font-style: normal !important;}
.icon-anchor:before           {font-family: FontAwesomeSolid;   content: "\f13d"; font-style: normal !important;}
.icon-info-circle:before      {font-family: FontAwesomeSolid;   content: "\f05a"; font-style: normal !important;}
.icon-globe:before            {font-family: FontAwesomeSolid;   content: "\f0ac"; font-style: normal !important;}
.icon-search:before           {font-family: FontAwesomeSolid;   content: "\f002"; font-style: normal !important;}

.icon-reply:before            {font-family: FontAwesomeSolid;   content: "\f304"; font-style: normal !important;}
.icon-edit:before             {font-family: FontAwesomeSolid;   content: "\f044"; font-style: normal !important;}
.icon-delete:before           {font-family: FontAwesomeSolid;   content: "\f1f8"; font-style: normal !important;}

.mainMenuOverlay .itemMenuBox .itemMenu {line-height: 59px !important;}

.modal .glyphicon {position: absolute; font-size: 25px; top: 0px; right: 18px; color: #FFFFFF; -webkit-appearance: none;}

#sloganx     {margin-top: 60px; 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;}
.redline     {display: none !important;}

.mainMenuOverlay a:hover, a:focus {text-decoration: none !important;}
.floatingbutton-blue {background-color:#184093;}

/* ==========================================================================
   defaults
   ========================================================================== */

article,aside,figcaption,figure,footer,header,hgroup,main,nav,section {display: block}
button,input,optgroup,select,textarea {margin: 0; font-family: inherit; font-size: inherit; line-height: inherit}
dl,ol ol,ol ul,ul ol,ul ul {margin:0 !important}
h1,h2,h3,h4,h5,h6 {margin-top: 0; margin-bottom: .5rem}

hr            {box-sizing: content-box; height: 0; overflow: visible}
ol, ul        {list-style: none;}
small         {font-size: 80%;}
a             {color: #9198a5; text-decoration: none; background-color: transparent}
a:hover       {color: #FFFFFF; text-decoration: none}
b, strong     {font-weight: bolder;}
img           {vertical-align: middle; border-style: none;}
svg           {overflow: hidden; vertical-align: middle}
table         {border-collapse: collapse}
th            {text-align: inherit}
button        {border: 0; border-radius: 0;}
button,input  {overflow: visible}
button,select {text-transform: none}
select        {word-wrap: normal}
hr            {margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0,0,0,.1)}
pre           {-webkit-user-select: all !important; -moz-user-select: all !important; user-select: all !important;}
figcaption    {margin-left:10px}
label         {display: inline-block; margin-bottom: 4px;}
ul li ul li   {clear: both; width: 100%;}

.overflow-auto     {overflow: auto     !important}
.overflow-hidden   {overflow: hidden   !important}
.position-static   {position: static   !important}
.position-relative {position: relative !important}
.position-absolute {position: absolute !important}
.position-fixed    {position: fixed    !important}
.position-sticky   {position: sticky   !important}
.fixed-top         {position: fixed; top: 0;    right: 0; left: 0; z-index: 999}
.fixed-bottom      {position: fixed; bottom: 0; right: 0; left: 0; z-index: 999}

.d-none            {display: none !important}
.d-inline          {display: inline !important}
.d-inline-block    {display: inline-block !important; width: 230px !important;}
.d-block           {display: block !important}
.d-table           {display: table !important}

.align-top         {vertical-align: top !important}
.align-middle      {vertical-align: middle !important}
.align-bottom      {vertical-align: bottom !important}

.float-left        {float: left !important}
.float-right       {float: right !important}
.float-none        {float: none !important}
.list-left         {float: left; padding-right: 7px;}
.leftalign         {text-align: left !important;}

.lowercase         {text-transform:lowercase  !important;}
.uppercase         {text-transform:uppercase  !important;}
.capitalize        {text-transform:capitalize !important;}
.text-uppercase    {text-transform:uppercase  !important;}
.text-center       {text-align: center!important;}
.centervertical    {display: inline-block; width: 100%; vertical-align: middle;}

.hidden            {display: none;}
.veryhidden        {display: none !important;}
.notextselect      {user-select: none;}
.smoothscroll      {overflow-x: auto !important; -webkit-overflow-scrolling: touch;}
.fade              {transition: opacity .15s linear}
.fade:not(.show)   {opacity: 0}
.rounded-circle    {border-radius: 50%!important}
.clearfix::after   {display: block; clear: both; content: ""}
.clearfloat        {clear: both !important;}
.pull-right        {float: right;}
.opa1              {opacity: 0;}
.list-item         {display: block; position: relative; min-height: 58px;}
.list-itemfull     {display: block; position: relative; min-height: 58px; width: 100%; padding: 6%;}
div.lesspadding    {padding-right: 0px; padding-left: 0px; text-align: center;}

[tabindex="-1"]:focus:not(:focus-visible) {outline: 0!important}

@media screen and (max-width: 800px) {
  .nomargin      {padding-left: 0px !important; padding-right: 0px !important;}
  .nopaddingx    {padding-left: 0px !important; padding-right: 0px !important;}
  .list-itemfull {width: 100%}
}
@media screen and (min-width: 768px) {.nomargin {margin: 10px !important; max-width: 100%;}}


.width72     {min-width: 72px !important; width: 72px; max-width: 72px;}
.minwidth80  {min-width: 80px !important; max-width: 100px;}
.minwidth100 {min-width: 100px !important;}
.minwidth120 {min-width: 120px !important;}
.minwidth200 {min-width: 200px; max-width: 400px;}

/* ==========================================================================
   preloader and visibility
   ========================================================================== */

.no-js #loader {display: none;}
.js #loader    {display: block; position: absolute;}
.se-pre-con    {position: absolute; width: 100%; height: 100%; z-index: 200; background-color: #0E1014;}
.boothide      {display: none; opacity: 0}

@media (min-width: 769px) {.onlymobile {display: none !important;}}

@media (max-width: 769px) {
  .notonmobile {display: none !important;}
  .onlymobile  {display: block !important;}
  .desktoponly {display: none !important;}
}

@media (max-width: 1030px) {.notonipad {display: none !important;}}

.bootframe  {position: absolute; background: #252831; width: 100vw; height: 100vh; overflow: hidden; text-align: center; z-index:999;}
.boothelper {display: inline-block; height: 100%; vertical-align: middle; text-align: center; overflow: hidden;}
.bootimage  {vertical-align: middle; text-align: center; max-height:48%; max-width: 48%; overflow: hidden;}

#popup-inner-weather     {position:fixed; top: 60px; width: 100vw; height:calc(100vh - 60px)}
#popup-inner-clock       {display: none;}
#popup-inner-weather     {display: none;}
#popup-inner-userinfo    {display: none;}
#popup-inner-browserinfo {display: none; padding-left: 5px; padding-right: 5px}

.preloader-aatventure {background-color: #090A10;}

.cameracontainer {display: none;}
.stop {position: absolute; z-index: 999999; left: -44px; top: -70px; width: 100vw; height: 56px; text align: center;}

/* ==========================================================================
   autocomplete and placeholder
   ========================================================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid #2d3a44;
    -webkit-text-fill-color: #85b8ff;
    -webkit-box-shadow: 0 0 0px 1000px #1d222b inset !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #85b8ff;
}

::placeholder {color: #FFFFFF; opacity: 0.6;}

/* ==========================================================================
   containers
   ========================================================================== */

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

@media (min-width: 576px)  {.container,.container-sm {max-width:540px}}
@media (min-width: 768px)  {.container,.container-md,.container-sm {max-width:720px}}
@media (min-width: 992px)  {.container,.container-lg,.container-md,.container-sm {max-width: 100vw}}
@media (min-width: 1200px) {.container,.container-lg,.container-md,.container-sm,.container-xl {max-width: 98vw;}}

#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%);}

/* ==========================================================================
   navbar
   ========================================================================== */

.navbar {position: relative; width: 100vw; user-select: none; border-radius: 0 !important; z-index: 999 !important;
         font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 400;}

.navfixed    {position: fixed; left: 0px; top: 0px;}
.navcentered {width: 100vw; align-items: center; justify-content: center;}

.nav                 {flex-wrap: unset !important;}
.navbar-nav          {margin: 0px !important;}
.navbar-nav > li > a {padding: 0 15px; display: block;  color: #e7e7e7; line-height: 60px; text-transform: uppercase; transition: all 0.3s;}
.navbar-nav > li > a {-webkit-font-smoothing: antialiased;}

.appheader-aatventure {position: fixed !important; height: 70px !important;}
.appheader-aatventure {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
.appheader-sushi      {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}

.navbar-brand {position: fixed; top: 13px; left: 15px; height: 44px !important; line-height: 35px !important; width: 100vw; display: none;}

.navbar-brand img {width: 44px !important;}

#navbar-maintext  {position: fixed; top: 15px; left: 74px; font-family: Aatventure; font-size: 25px; color: #FFFFFF;}
#navbar-maintextx {position: fixed; top: 17px; left: 74px; font-family: AatsThird;  font-size: 30px; color: #FFFFFF; letter-spacing: 1.3px}

.navbar-expand-md {min-height: 69px !important; padding-right: 0px !important; padding-left: 0px !important;}

.nav-link {display: block; padding: .5rem 1rem}
.nav-link:focus,.nav-link:hover {text-decoration: none}

#webshoptext {position: fixed; top: 12px; font-family: "Roboto Regular"; color: #FFFFFF !important; font-size: 30px; cursor: pointer;
              user-select: none; margin-left: 24px; text-transform: uppercase; z-index: 9999999;}
#boldtext           {font-family: "Roboto Regular"; font-weight: 700;}
#thintext           {font-family: "Roboto Light";   font-weight: 300;}
#showwebmenugroups  {position: absolute; top: 0px; left: 0px; width: 200px; height: 69px; background-color: transparent; z-index: 999999;}


#shopdesktopmenu {width: 100vw; display: flex; flex-wrap: wrap; align-items: center; user-select: none; padding: .5rem 1rem;}

#shopdesktopmenu li {display: inline; font-family: "Oswald"; font-weight: 400 !important; font-size: 20px !important; padding: 0 10px; color: #e7e7e7; line-height: 60px;
                     margin-right: 20px; text-transform: uppercase; vertical-align: middle; cursor: pointer; transition: all 0.3s; }

#shopdesktopmenu-alt li {font-family: "Roboto Light" !important; font-size: 14px !important; color: #FFFFFF !important;}

.smallmenu              {width: 260px !important; text-align: right; padding-right: 20px;}
.headerusername         {opacity: 0;}
.dtlinktitle:last-child {display:inline-block;}

.loginicon  {position: absolute !important; display: inline-block; top:0px; right:0px; overflow: visible; width: 70px; background-image: url(../../img/navicons/login.png);
             background-repeat: no-repeat; background-size: contain; background-position: -20px 16px; cursor: pointer;}
.inlogtextx {font-family: "Roboto Light"; font-size: 18px; padding-left: 26px; cursor: pointer;}
.mobileheaderusername  {font-family: "Roboto Light"; font-size: 14px; color: #FFFFFF; text-transform: uppercase;}
.brandlogo-aatventure {display: block;}

.inlogtext {display: inline-block; width: 100%; font-family: "Roboto Light"; text-align: right; font-size: 18px; padding: 0.75em 1.25em; cursor: pointer;}

@media screen and (min-width: 700px) {
  #webshopmenu {position: absolute; top: 0px; left: 0px; width: 160px; height: 69px; overflow: hidden;}
}

.navbar-nav img {display: block; max-height: 46px; width: auto !important; margin-left: auto; margin-right: auto;}

@media screen and (max-width: 700px) {
  #nav-mobile {display: none !important}
}

@media (max-width: 992px) {
  .navbar .nav-mobile-btn {background: transparent; display: block;
    height: auto; margin-left: auto; position: relative; top: auto; width: auto; z-index: 100; right: auto;}
}

/* ==========================================================================
   bootstrap nav and tabs
   ========================================================================== */

.nav                      {display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none;}
.tab-content>.tab-panel   {display: none;}
.tab-content>.tab-pane    {display: none;}
.tab-content>.active      {display: block !important;} /* anders geen photo/video toggle! */

/* ==========================================================================
   mobile menu
   ========================================================================== */

.cd-side-nav {transition: none !important; transform: none !important; animation: none !important;} 

.cd-side-nav {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif",
              "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
        
.cd-side-nav {position: absolute; 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, .1), 0 8px 24px rgba(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;}
.cd-side__label  {margin-top: -4px; padding: 1.25em 1.25em 0.375em;}
.cd-side__label span {text-transform: uppercase; font-weight: bold; font-size: 0.65em; color: rgba(255,255,255,0.6); letter-spacing: .1em;}
.cd-main-content {z-index: 999999;}
.cd-main-header {position: absolute; display: flex; top: 14px; right: 0px; height: 45px; margin-right: 20px; align-items: center; -webkit-font-smoothing: antialiased;}
.cd-main-header a {text-decoration:none;}

.cd-nav-trigger {position: relative; display: block; width: 71px; height: 50px; background-color: transparent;
                 margin-left: 0px; margin-right: -18px; zoom: 1.3; border: 0; cursor: pointer;}
.cd-nav-trigger span {top: calc(50% - 2px); right: 22px; transition: background .2s;}
.cd-nav-trigger span,
.cd-nav-trigger span::before,
.cd-nav-trigger span::after  {position: absolute; height: 3px; width: 24px; cursor: pointer;}
.cd-nav-trigger span::before {top: -6px;}
.cd-nav-trigger span::after  {top: 6px;}

.cd-nav-trigger span         {background: #FFFFFF;}
.cd-nav-trigger span::before {background: #FFFFFF;}
.cd-nav-trigger span::after  {background: #FFFFFF;}

.cd-side__item, .cd-nav__item    {font-size: 0.875em; position: relative;}
.cd-side__item a,.cd-nav__item a {position: relative; display: flex; padding: 0.75em 1.25em; align-items: center; color: #FFFFFF; height: 100%} /* tooltip position */
.cd-side__item>a::before         {content: ''; height: 16px; width: 16px; margin-right: 14px; opacity: 0.5;}
.cd-side-nav a                   {text-decoration: none;}
.cd-side-nav--is-visible         {opacity: 1 !important; visibility: visible !important; display:block !important}

.cd-nav__item         {height: 100%; align-items: center; -webkit-font-smoothing: antialiased;}
.cd-nav__item a       {position:relative; display:block; display: flex; padding:0.75em 1.25em; color: #FFFFFF;}
.cd-nav__item>a       {display:flex; height: 100%; align-items:center;} /* tooltip position */
.cd-nav__item a:hover {color:#4A99EF !important;}

.hasicon   {background-repeat: no-repeat; background-size: contain;}
.hasicon a {padding-left: 60px;}

@media (min-width: 64rem) {.cd-nav-trigger       {display: none !important;}}
@media (max-width: 600px) {.cd-nav__item>a       {border-bottom:1px solid rgba(255,255,255,0.1);}}
@media (min-width: 64rem) {.cd-nav__item a:hover {color:rgb(255,255,255,0.2);}}
@media (min-width: 760px) {.navbar-expand-md     {flex-flow: row nowrap; justify-content: flex-start}}

@media (min-width: 760px) {
  .cd-main-content {display: none !important}
}

@media (min-width: 760px) {
  .cd-main-header {top: 0; height: 70px; margin: 0px !important;}
  .cd-nav__list   {position: absolute; display: flex; height: 100%; right: 300px; padding-top: 3px;}
}

@media (max-width: 700px) {
  .cd-side__item, .cd-nav__item {border-width: 0px 0px 1px 0px; border-style: solid;
   border-image: linear-gradient(to right, #252f42, rgba(0, 0, 0, 0)) 1 1%;}
  .cd-side__sub-item:first-child {padding-top: 10px;}
  .cd-side__sub-item:last-child  {padding-bottom: 20px;}
}

/* transition */
.cd-nav-trigger span::before,
.cd-nav-trigger span::after                       {content: ''; right: 0; transform-origin: 0 50%; transition: transform .2s;}
.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);}

/* ipad landscape fix */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
   .cd-nav__list {right: 185px;}
}

/* submenu shop items */
.cd-side__sub-list, .cd-nav__sub-list {background-color: rgba(0,0,0,0.3); display: none;}
.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}
.linktitle {font-size: 18px; padding: 10px; padding-left: 30px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-left: 0px;}
.morespacebeneith {margin-top: 16px;}
.info {margin-left: 10px; color: #FFFFFF; width: 90%; -webkit-font-smoothing: antialiased; opacity: 0.7;}

.menucomp {font-size: 20px; font-weight: 700; padding: 0px; padding-left: 40px; padding-top: 6px; color: #FFFFFF;}
.menuadr  {font-size: 17px; padding: 2px; padding-left: 40px; color: #FFFFFF;}
.menumail {padding-left: 18px !important; margin-top: -8px !important; cursor: pointer; color: #FFFFFF;}
.menutel  {margin-top: -8px; padding-left: 18px; font-size: 22px; margin-bottom: 10px; color: #FFFFFF;}
.menurem  {padding-left: 40px; font-size: 15px !important; margin-top: -32px; margin-bottom: 1px; color: #FFFFFF;}

@media screen and (min-width: 737px) {
  .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: 737px) {
  .l           {margin-left: 55px; 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           {margin-left: 55px; 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;}
}

@media (min-width: 64rem) {
.loginblock-on  {position: fixed !important; right: 0px; top: 0px; height: 70px; width: 200px; padding-right: 63px; padding-top: 2px;}
.loginblock-off {position: fixed !important; right: 0px; top: 0px; height: 40px; width: 200px;}
.cd-nav__sub-list {position: fixed; top: 69px; right: 0; width: 200px; z-index:99999999;
    display: block; box-shadow: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15);
    background-color: #191d23; font-family: Arial; font-size: 16px; line-height: 2; padding: 10px; display: none;}
.cd-nav__item--account:hover .cd-nav__sub-list {display: block; background-color: #111b27;}
}

/* iphone SE20 SE */
@media (max-height: 670px) {.cd-side-nav {height: 600px; overflow-y: scroll}}
@media (max-height: 670px) {.mobilemenubackground-aatventure {height: 525px; overflow-y: scroll}}

/* ==========================================================================
   techmenubackground
   ========================================================================== */

.cd-side-nav {background: url(../img/backgrounds/techmenubg.jpg); background-size: 100vw;}

/* ==========================================================================
   webshop basics
   ========================================================================== */

.aatsflexrow .list         {display: flex; flex-wrap: wrap; margin-left: auto; margin-right: auto; width: 99%;}
.aatsflexrow .list-item    {display: flex; width: 100%; padding: 4px; padding-left: 6px; padding-right: 6px;}
.aatsflexrow .list-content {display: flex; flex-direction: column; width: 100%; background: transparent;}
.fullcard                  {margin-top: 10px; border-radius: 9px;}
.productsbodyitems         {transform: translate(0,0); width: 100%; margin-bottom: 50px;}

@media (min-width: 40em)  {.aatsflexrow .list-item {width: 50%;}}
@media (min-width: 60em)  {.aatsflexrow .list-item {width: 33.33%;}}
@media (max-width: 768px) {.aatsflexrow .list {width: 100vw;}}

.card-producttitle {position: relative; width: 100%; text-transform: uppercase; font-family: "Roboto Medium"; font-size: 19px;
    line-height: 20px; text-align: left; padding: 8px; padding-left: 14px; padding-right: 10px; z-index: 100;
    border-top-left-radius: 8px; border-top-right-radius: 8px; -webkit-font-smoothing: antialiased;}

.productdescription {position: relative; width: 100%; background: transparent; color: #FFFFFF; bottom: 0;
                     padding-left: 26px; padding-right: 26px; -webkit-font-smoothing: antialiased;}

.favomschrijving {position: absolute !important; top: 70px; font-size: 30px; line-height: 40px; text-align: center;}
.favfooter       {bottom: -30px !important; font-size: 14px !important;}

.productfooter   {position: absolute; left: 0px; bottom: -40px; height: 40px; width: 100%; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.inhoud          {position: absolute; display: inline-block; color: inherit; left: 1.25rem; bottom: -32px; z-index: 3; color: #FFFFFF;}
.prijs           {position: absolute; right: 80px; font-family: "Roboto Light"; font-size: 26px; bottom: -40px; color: #FFFFFF;}
.addtobasket     {position: absolute; bottom: -30px; right: 12px; width: 50px; height: 50px; background-color: #000000;
                  background: url(../img/interface/addicon-red3.png); background-size: cover; border-radius: 50%; z-index: 196; cursor: pointer;}
.xaantal         {position: absolute; right: 12px; width: 50px; height: 50px; bottom: -30px; line-height: 50px; border-radius: 50%; z-index: 199; cursor: pointer;
                  pointer-events: none; text-align: center; overflow: visible; border: 4px solid #FF0000; background-color: #FFDC03; letter-spacing: -2px; display: none;}
.xinput          {position: absolute; bottom: -3px; left: -7px; width: 54px; font-size: 26px; color: #000000; text-align: center; overflow: visible;
                  z-index: 199; letter-spacing: -2px; background-color: transparent;}
.substracthandle {position: absolute; display: none; bottom: 0px; right: 56px; width: 44px; height: 44px; z-index: 195;
                  background-image: url(../img/interface/minusicon-red2.png); background-size: 44px 44px; cursor: pointer; overflow: visible;}

/* substracthandle bottom was 53px */

.imagecropper  {overflow: hidden;}
.change-ratio  {width: 100%; margin: -10% 0;}
.youtube .change-ratio {max-height: 304px;}

.overlaymenu {display: none;}

.fullwidthoverlay {position: fixed; left: 0px; width: 100vw; height: 60px; bottom: 14px; text-align: center; z-index: 998;}

.centerbutton     {position: relative; margin-left: auto; margin-right: auto; width: 60px; height: 60px; color: #FFFFFF; border-radius: 50px;
                   text-align: center; cursor: pointer; z-index: 998; opacity: 0.9;}

.floatingbutton {position: fixed; width: 60px; height: 60px; bottom: 20px; left: 20px; color: #FFFFFF; border-radius: 50px;
                 text-align: center; cursor: pointer; z-index: 998; opacity: 0.9;}

.shoppingbasket {display: block; width: 45px; height: 45px;
    background-image: url(../../img/interface/shoppingbasket.png); background-repeat: no-repeat;
    background-size: contain; margin-left: 6px; margin-top: 6px; z-index: 9999;}

.widgetclass-divider        {flex: 0 0 100% !important; height: 0px !important;}
.widgetcard-divider         {background-color: transparent !important;}
.widgetomschrijving-divider {text-align: center !important;}
.widgetshare-divider        {display: none !important;}
.widgetimage-divider        {display: none !important;}
.widgetfooter-divider       {display: none !important;}
.widgetinhoud-divider       {display: none !important;}
.widgeteenheid-divider      {display: none !important;}
.widgetprijs-divider        {display: none !important;}
.widgetadd-divider          {display: none !important;}

.widgetomschrijving-divider {background-image: url(../../img/banners/slagerij-verstappenbanner-bbq2.jpg); background-size: 100% 100%;
    font-size: 23px !important; color: rgb(255, 209, 43) !important; border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) !important; line-height: 28px;}

#bestelposition {width: 95%; height: 1px; margin-bottom: -20px;}
#bestelwrapper  {position: relative; width: 95%; margin-left: auto; margin-right: auto; margin-top: 20px;}
#bestelheader   {margin-top: 80px; margin-left: auto; margin-right: auto; width: 100%; height: 50px; line-height: 50px;
                 color: #FFFFFF; font-family: 'Agency'; font-size: 30px; border-top-left-radius: 6px; border-top-right-radius: 6px; padding-left: 10px;}
#bestellingen   {width: 100%; margin-left: auto; margin-right: auto; height: 80px; margin-bottom: 10px; margin-top: -1px;}
#minitrashicon  {position: absolute; top: 87px; right: 18px; width: 30px; height: 32px;
                 background-image: url(../../img/interface/minitrashcan.png); background-size: cover; cursor: pointer;}


.sl_row1        {float: left; color: #FFFFFF; width: 85%; height: auto; font-family: 'Arial'; font-size: 18px; text-align: left; -webkit-font-smoothing: antialiased;}
.prodicon       {display: inline-block; width: 80px; height: 80px; vertical-align: middle; text-align: center; border-radius: 6px;
                 margin: 0px; margin-right: 20px; margin-top: 10px;}
.prodimg        {max-height: 60px; width: auto !important; border-radius: 8px; max-width: 90px; min-height: 60px;}
.sl_aantal      {position: absolute; display: inline-block; line-height: 22px; color: #FFFFFF; width: 57%;}
.sl_totaalprijs {float: right; display: inline; color: #FFFFFF; width: 15%; height: auto; line-height: 80px; font-family: 'Arial';
                 font-size: 18px; text-align: right; padding-right: 20px;}
.sl_row1        {border-bottom: 1px solid #333333;}
.sl_totaalprijs {border-bottom: 1px solid #333333;}
#totaalbedrag   {color: rgb(233, 198, 58); line-height: 61px; font-family: 'Arial'; font-size: 20px; font-weight: 700; text-align: right; padding-right: 20px;}
#bestelknop     {float: right; width: 100%; height: 60px; line-height: 60px; text-align: center; cursor: pointer; font-size: 28px;
                 font-weight: 700; -webkit-font-smoothing: antialiased; background-color: transparent; color: #FFFFFF; border: 1px solid #FFFFFF;}
#bestelknop     {background: #222222; border: 2px solid #FF0000; box-shadow: 0px 0px 20px #FF0000; border-left: 34px solid #000000; border-right: 34px solid #000000;}

#footerblock    {margin-top: 50px; width: 100%; overflow: hidden;}
.footerbgcolor  {margin-top: 30px; width: 100%; height: 200px;}
#footerbgimage  {margin-top: 0px; background-size: 290px auto; background-position: 50% 0%; background-repeat: repeat-x;}
.footerlogo     {height: 360px; width: auto; background-repeat: no-repeat; background-position: 50% 80px;}
.promotextarea  {margin-top: -50px; padding-left: 30px; padding-right: 30px;}
#promotext1     {display: inline-block; font-size: 18px; line-height: 40px;}
#promotext2     {display: inline-block; font-size: 18px; line-height: 40px;}
.tasje          {display: inline-block; font-size: 12px; color: #999999; line-height: 16px; margin-top: 40px; margin-top: 20px;}

@media screen and (max-width: 768px)  {.sl_aantal  {font-size: 16px; width: 59%;}}
@media screen and (max-width: 768px)  {#promotext1 {font-size: 16px; line-height: 26px;}}
@media screen and (max-width: 768px)  {#promotext2 {margin-top:20px; font-size: 16px; line-height: 26px;}}
@media screen and (max-width: 1025px) {.sl_aantal {position: relative !important;}}

@media screen and (min-width: 700px) {
  .tri-shape      {border-bottom: 70px solid rgb(0, 0, 0); margin-top: -70px;}
  .triangle-left  {position: absolute; height: 70px; width: 0; left: 0;  border-right: 700px solid transparent;}
  .triangle-right {position: absolute; height: 70px; width: 0; right: 0; border-left: 700px solid transparent;}
  .footerwrapper  {width: 100%; height: 100px;}
}

/* ==========================================================================
   search
   ========================================================================== */

.search                   {position: relative; overflow: hidden; width: 70px; height: 70px; margin: -6px auto 0;
                           margin-right: -20px; background-color: transparent; transition: all 0.5s ease;}
.search:before            {content: ''; display: block; width: 3px; height: 100%; position: relative; transition: all 0.5s ease;}
.search.open              {width: 420px;}
.search.open:before       {position: absolute; height: 60px; margin: 20px 0 20px 30px;}
.search-box               {width: 100%; height: 100%; box-shadow: none; border: none; background: transparent;
                           color: #FFFFFF; padding: 20px 100px 20px 45px; font-size: 40px;}
.search-box:focus         {outline: none;}
.search-button            {position: absolute; top: 0; right: 0; display: block; width: 70px; height: 70px; padding: 20px; padding-top: 18px; cursor: pointer;}
.search-icon              {position: relative; display: block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid #ffffff; margin-left: 5px;
                           transition: all 0.5s ease; z-index: 999999;}
.search-icon:before       {content: ''; position: absolute; width: 3px; height: 10px; right: -2px; top: 20px; display: block; background-color: #FFFFFF;
                           transform: rotate(-45deg); transition: all 0.5s ease;}
.search-icon:after        {content: ''; width: 3px; height: 10px; position: absolute; right: -9px; top: 27px; display: block;
                           background-color: #FFFFFF; transform: rotate(-45deg); transition: all 0.5s ease;}
.open .search-icon        {margin: 0px 0px 0px -16px; width: 34px; height: 34px; border-radius: 50%;}
.open .search-icon:before {transform: rotate(52deg); right: 12px; top: 11px; height: 12px;}
.open .search-icon:after  {transform: rotate(-230deg); right: 12px; top: 5px; height: 12px;}

/* ==========================================================================
   mobile appheaders
   ========================================================================== */

.appheader-aatventure {
    height: 70px !important;
    background-color: #0e1621;
    background-image: url(../img/navicons/navbackgreyblue.jpg);
    background-repeat: repeat;
    background-size: 66% 110%;
}

@media screen and (max-width: 760px) {
  .appheader-aatventure {background-size: 8300px 600px;}
}

.avatar-xs {margin-left: 36px; margin-right: 10px; height: 40px; width: 40px; max-width: 40px !important; border-radius:50%;}

/* ==========================================================================
   appicons
   ========================================================================== */

/* navbar height is positie tooltip, popbox moet zichtbaar blijven dus hoogte op last-child, nee kan niet...  */
#navbar .nav-item {font-family: 'simple-line-icons'; min-width: 55px; height: 62px; overflow: visible; background-repeat: no-repeat; background-size: contain;}

.iconhome    {width: 66px; background-image: url(../../img/navicons/home.png);       background-position: 0px 18px;}
.iconfolder  {width: 69px; background-image: url(../../img/navicons/categories.png); background-position: -8px 14px;}
.iconnews    {width: 66px; background-image: url(../../img/navicons/news.png);       background-position: -6px 17px;}
.iconwebshop {width: 72px; background-image: url(../../img/navicons/shopshop.png);   background-position: -8px 15px;}
.icontools   {width: 61px; background-image: url(../../img/navicons/tools.png);      background-position: 0px 17px;}
.icongames   {width: 61px; background-image: url(../../img/navicons/games.png);      background-position: 6px 16px;}
.iconpopular {width: 60px; background-image: url(../../img/navicons/popular.png);    background-position: -2px 18px;}
.iconpwa     {width: 64px; background-image: url(../../img/navicons/pwa.png);        background-position: 0px 14px;}
.iconarchive {width: 64px; background-image: url(../../img/navicons/archive.png);    background-position: 0px 16px;}
.iconsearch  {width: 64px; background-image: url(../../img/navicons/search.png);     background-position: 0px 15px;}

@media screen and (max-width: 760px) {
    .iconhome    {width: 95vw; background-position: -5px 9px; margin-left: 20px;}
    .iconfolder  {width: 95vw; background-position: 0px 10px; background-size: 65px; margin-left: 20px;}
    .iconpopular {width: 95vw; background-position: -5px 6px; margin-left: 20px;}
    .iconnews    {width: 95vw; background-position: -4px 6px; margin-left: 20px;}
    .iconwebshop {width: 95vw; background-position: -5px 8px; margin-left: 20px;}
    .iconpwa     {width: 95vw; background-position: -5px 2px; margin-left: 20px;}
    .iconarchive {width: 95vw; background-position: 0px 8px;  background-size: 70px; margin-left: 20px;}
    .icontools   {width: 95vw; background-position: 0px 11px; margin-left: 20px; background-size: 70px 45px;}
    .icongames   {width: 95vw; background-position: 4px 8px;  background-size: 65px; margin-left: 20px;}
    .iconsearch  {width: 95vw; background-position: 0px 7px;  background-size: 66px; margin-left: 20px;}
}

.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;}
.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;}

/* ==========================================================================
   mobile -> full width video on rotation
   ========================================================================== */

@media (max-width: 846px) and (orientation: landscape) {
  body                 {padding-top: 0px;}
  #navbar              {display: none !important;}
  #maincontainer       {margin: 0px !important; width:100%}
  #easyComment_Content {display: none;}
  .blackheader         {display: none !important;}
  .col-md-8 .card      {position: fixed; top: 0px; left: 0px;}
  .col-md-4            {display: none;}
  .card-img-top        {border-bottom: 10px solid #000000 !important};
  .embed-responsive    {position:fixed; top:4px; left:0px; height: 100% !important}
}

/* was important */
#maincontainer .col-md-8 {padding-left:2px; padding-right:2px} 
/* important: padding for mobile mastershow! */
@media (max-width: 768px) {
  #maincontainer .col-md-8 {padding-left: 20px !important; padding-right: 20px !important;}
}

#toppie     {margin-top: 80px}
.rowmargin0 {margin-left:0px !important; margin-right:0 !important}

/* ==========================================================================
   salvatore grid
   ========================================================================== */

.grid {
  display: flex;
  flex-basis: 0;
  width: 100%;
  min-width: 100%;
  background-color: #090b14;
  z-index: 1;
}

.mediumgrid {
    display: flex;
    flex-basis: 0;
    width: 100%;
    min-width: 100%;
    background-color: #090b14 !important;
}

.smallgrid {
    display: flex;
    flex-basis: 0;
    width: 100%;
    min-width: 100%;
    background-color: #090b14 !important;
}

.smallgrid[data-columns]::before {
  content: '8 .column.size-1of8';
}

.mediumgrid[data-columns]::before {
  content: '6 .column.size-1of6';
}

.grid[data-columns]::before {
  content: '3 .column.size-1of3';
}

[data-columns]::before {
    display: block;
    visibility: hidden;
    position: absolute;
    font-size: 1px;
}

@media screen and (max-width: 544px) {
  .grid[data-columns]::before {content: '1 .column.size-1of1';}
  .mediumgrid[data-columns]::before {content: '2 .column.size-1of2';}
  .smallgrid[data-columns]::before {content: '3 .column.size-1of3';}
  .display-4 {font-size: 2rem;}
}

@media screen and (min-width: 544px) and (max-width: 768px) {
  .grid[data-columns]::before {content: '2 .column.size-1of2';}
  .mediumgrid[data-columns]::before {content: '4 .column.size-1of4';}
  .display-4 {font-size: 2rem;}
}

@media screen and (min-width: 992px) and (max-width: 1400px) {
  .grid[data-columns]::before {content: '3 .column.size-1of3';}
  .mediumgrid[data-columns]::before {content: '5 .column.size-1of5';}
}

@media screen and (min-width: 1400px) {
  .grid[data-columns]::before {content: '4 .column.size-1of4';}
  .mediumgrid[data-columns]::before {content: '6 .column.size-1of6';}
}

.columnxxx {float: left;}

.size-1of1 {width: 100%;    padding-right: 5px; padding-left: 5px;}
.size-1of2 {width: 50%;     padding-right: 5px; padding-left: 5px;}
.size-1of3 {width: 33.333%; padding-right: 5px; padding-left: 5px;}
.size-1of4 {width: 25%;     padding-right: 4px; padding-left: 4px;}
.size-1of5 {width: 20%;     padding-right: 5px; padding-left: 5px;}
.size-1of6 {width: 16.666%; padding-right: 5px; padding-left: 5px;}
.size-1of7 {width: 14.285%; padding-right: 5px; padding-left: 5px;}
.size-1of8 {width: 12.5%;   padding-right: 5px; padding-left: 5px;}

.groupsbody    {background-color: rgb(17, 17, 17) !important;}
.groupsbodybg  {padding-left: 15px; padding-right: 15px;}
.assgroepcard  {margin-top: 10px;}

/* ==========================================================================
   rows and cols
   ========================================================================== */

.row {display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px}
.col {flex-basis: 0; flex-grow: 1; max-width: 100%}

.col,.col-lg,.col-md,.col-sm,.col-xl,
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-auto,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-auto,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-auto,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-auto,
.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

.row-cols-1>* {flex: 0 0 100%; max-width: 100%}
.row-cols-2>* {flex: 0 0 50%; max-width: 50%}
.row-cols-3>* {flex: 0 0 33.333333%; max-width: 33.333333%}
.row-cols-4>* {flex: 0 0 25%; max-width: 25%}
.row-cols-5>* {flex: 0 0 20%; max-width: 20%}
.row-cols-6>* {flex: 0 0 16.666667%; max-width: 16.666667%}

.col-auto {flex: 0 0 auto; width: auto; max-width: 100%}
.col-1    {flex: 0 0 8.333333%;  max-width: 8.333333%}
.col-2    {flex: 0 0 16.666667%; max-width: 16.666667%}
.col-3    {flex: 0 0 25%;        max-width: 25%}
.col-4    {flex: 0 0 33.333333%; max-width: 33.333333%}
.col-5    {flex: 0 0 41.666667%; max-width: 41.666667%}
.col-6    {flex: 0 0 50%;        max-width: 50%}
.col-7    {flex: 0 0 58.333333%; max-width: 58.333333%}
.col-8    {flex: 0 0 66.666667%; max-width: 66.666667%}
.col-9    {flex: 0 0 75%;        max-width: 75%}
.col-10   {flex: 0 0 83.333333%; max-width: 83.333333%}
.col-11   {flex: 0 0 91.666667%; max-width: 91.666667%}
.col-12   {flex: 0 0 100%;       max-width: 100%}

.col-md-auto {flex: 0 0 auto; width: auto; max-width: 100%}
.col-md-1    {flex: 0 0 8.333333%;  max-width: 8.333333%}
.col-md-2    {flex: 0 0 16.666667%; max-width: 16.666667%}
.col-md-3    {flex: 0 0 25%;        max-width: 25%}
.col-md-4    {flex: 0 0 33.333333%; max-width: 33.333333%}
.col-md-5    {flex: 0 0 41.666667%; max-width: 41.666667%}
.col-md-6    {flex: 0 0 50%;        max-width: 50%}
.col-md-7    {flex: 0 0 58.333333%; max-width: 58.333333%}
.col-md-8    {flex: 0 0 66.666667%; max-width: 66.666667%}
.col-md-9    {flex: 0 0 75%;        max-width: 75%}
.col-md-10   {flex: 0 0 83.333333%; max-width: 83.333333%}
.col-md-11   {flex: 0 0 91.666667%; max-width: 91.666667%}
.col-md-12   {flex: 0 0 100%;       max-width: 100%}

@media (min-width: 768px) {
  .offset-md-1  {margin-left: 8.333333%;}
  .offset-md-2  {margin-left: 16.666667%;}
  .offset-md-3  {margin-left: 25%;}
  .offset-md-4  {margin-left: 33.333333%;}
  .offset-md-5  {margin-left: 41.666667%;}
  .offset-md-6  {margin-left: 50%;}
  .offset-md-7  {margin-left: 58.333333%;}
  .offset-md-8  {margin-left: 66.666667%;}
  .offset-md-9  {margin-left: 75%;}
  .offset-md-10 {margin-left: 83.333333%;}
  .offset-md-11 {margin-left: 91.666667%;}
}

@media (min-width: 576px) {
  .col-sm-1  {flex: 0 0 8.333333%;   max-width: 8.333333%;}
  .col-sm-2  {flex: 0 0 16.666667%;  max-width: 16.666667%;}
  .col-sm-3  {flex: 0 0 25%;         max-width: 25%;}
  .col-sm-4  {flex: 0 0 33.333333%;  max-width: 33.333333%;}
  .col-sm-5  {flex: 0 0 41.666667%;  max-width: 41.666667%;}
  .col-sm-6  {flex: 0 0 50%;         max-width: 50%;}
  .col-sm-7  {flex: 0 0 58.333333%;  max-width: 58.333333%;}
  .col-sm-8  {flex: 0 0 66.666667%;  max-width: 66.666667%}
  .col-sm-9  {flex: 0 0 75%;         max-width: 75%}
  .col-sm-10 {flex: 0 0 83.333333%;  max-width: 83.333333%} /* gaat niet goed bij summernote!  */
  .col-sm-11 {flex: 0 0 91.666667%;  max-width: 91.666667%}
  .col-sm-12 {flex: 0 0 100%;        max-width: 100%}
  .col-sm-12 {width: 100%;}
}

@media (max-width: 800px) {
  .col-md-1  {flex: 0 0 94%;  max-width: 94%; margin: auto auto;}
  .col-md-2  {flex: 0 0 100%; max-width: 100%}
  .col-md-4  {flex: 0 0 98%;  max-width: 98%; margin: auto auto;}
  .col-md-5  {flex: 0 0 94%;  max-width: 94%; margin: auto auto;}
  .col-md-6  {flex: 0 0 100%; max-width: 100%}
  .col-md-7  {flex: 0 0 100%; max-width: 100%}
  .col-md-8  {flex: 0 0 100%; max-width: 100%}
  .col-md-9  {flex: 0 0 100%; max-width: 100%;}
  .col-md-10 {flex: 0 0 94%;  max-width: 94%; margin: auto auto;}
  .col-9     {max-width: 67% !important;} /* jumbotrontext op 1 regel!  */
}

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float: left;}
}

@media (min-width: 1025px) {.col-md-8 {flex: 0 0 69% !important; max-width: 69% !important;}}

/* ==========================================================================
   summernote
   ========================================================================== */

.note-editor.note-frame {border: 1px solid #21232a;}
.note-toolbar {background-color: rgb(15, 22, 33) !important;}
.note-editor.note-frame .note-editing-area .note-editable {background-color: #161f2e;}
.note-editor.note-frame .note-editing-area .note-editable {background-color: #17212f;}
.note-editor.note-frame .note-editing-area .note-editable {padding: 10px; text-align: left; overflow: auto;}

.note-editor.note-frame .note-editing-area .note-codable {
    display: none; width: 100%; padding: 10px; margin-bottom: 0;
    font-family: Menlo,Monaco,monospace,sans-serif; font-size: 14px; color: #CCCCCC;
    background-color: #222; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; resize: none;
}

.note-popover .popover-content>.btn-group, .card-header.note-toolbar>.btn-group {
    margin-top: 5px; margin-left: 5px; margin-right: 5px;
}

.btn-light     {background-color: #213854 !important;color: #DDDDDD; min-width: 65px !important; text-align: center; border: 1px solid #202329;}
.addmorebutton {min-width: 71px !important; margin-bottom: 8px;}
.col-md-7      {text-align: left;}
.btn-success   {width: 100%;}

/* ==========================================================================
   no flickering:
   ========================================================================== */

.note-frame {position: relative; z-index: 9999999; min-height: 1400px;
             transition: none !important; transform: none !important; animation: none !important;}

.note-editor.note-frame .note-editing-area .note-editable {min-height: 1380px;}

.dropdown-item:hover {background-color: #000000 !important; color: #FFFFFF !important}

/* ==========================================================================
   summernote toolbar fixes
   ========================================================================== */

.note-toolbar-wrapper {width: 100%; text-align: left;}
.note-popover .popover-content, .card-header.note-toolbar {width: 100%; text-align: left;}
.note-editor.note-frame.fullscreen {position: fixed; top: 0; left: 0; z-index: 9999999; width: 100vw !important; height: 100vh !important;}
.note-editor.note-frame .note-editing-area {overflow: hidden; clear: both;}

.note-color             {display: none !important;}
.fileinfo p             {font-size:16px !important;}
.note-editor .list-left {padding-right: 16px !important;} /* aangepast 16-02-2021  */

.note-editable p b              {color: rgb(140, 181, 236) !important;}
.note-editable ul li            {color: #FFFFFF; font-size: 20px;}
.note-editable ul li:before     {color: #aed5ff; content: '✓' !important; padding-right: 6px;}
.note-style button:nth-child(2) {display:none !important}

.aatsaddbuttons {text-align: center !important;}

button[name=img_addx]        {background-color: #272a94 !important}
button[name=youtube_addx]    {background-color: #C33734 !important}
button[name=table_addx]      {background-color: #d8a200 !important}
button[name=tweet_add]       {background-color: #2BA9E1 !important}
button[name=face_add]        {background-color: #3B5998 !important}
button[name=instagram_add]   {background-color: #ae1fbf !important}

button[name=note-insert] .btn-group  {width: 100% !important}

.note-popover .popover-content .dropdown-menu, .card-header.note-toolbar .dropdown-menu {
    min-width: 150px !important;
}

@media (min-width: 1000px) {
  .jumbotronadmininline           {margin-bottom: 40px !important;}
  .addblock1                      {float: left; margin-right:5px}
  .addblock2                      {float: left; margin-right:5px}
  .addblock3                      {float: right; margin-right:5px}
  .dropdown-toggle                {min-width: 100px !important}
  .note-style .note-btn-bold      {width: 80px !important;}
  .note-style .note-btn-italic    {width: 80px !important;}
  .note-style .note-btn-underline {width: 80px !important;}
  .note-para .btn                 {width: 80px !important;}
  .note-mis                       {width: 80px !important;}
  button[name=txt_add]            {display: none;}
  button[name=pinterest_add]      {display: none;}
}

@media (max-width: 760px) {
  .jumbotronadmininline      {margin-top: 0px !important;}
  .aatsaddbuttons button     {width: 32% !important;}
  .btn-group                 {width: 100%;}
  .note-mis                  {display: none !important}
  .note-para                 {display: none !important}
  button[name=txt_add]       {display: none;}
  button[name=code_add]      {display: none;}
  button[name=pinterest_add] {display: none;}
  form .col-form-label       {color: #AAAAAA !important; margin: auto auto; text-transform: uppercase;}
}

/* ==========================================================================
   summernote template plugin
   ========================================================================== */

.dropdown-template          {min-width: 200px;}
.dropdown-template li       {min-width: 200px; padding: 10px; background-color: #FFFFFF; color: #01162D !important}
.dropdown-template li:hover {min-width: 200px; padding: 10px; background-color: #01162D; color: #FFFFFF !important}
.dropdown-template a        {color: #01162D !important}
.dropdown-template a:hover  {color: #FFFFFF !important}

.defaulttext          {font-family: "Open Sans"; font-size: 18px; line-height: 29px; font-weight: 300; color: #D8D5D5}
.contactgegevens      {width:100%; font-family: "Arsmaquette Bold";  font-weight: 300}
.contactbuttons       {width:100%; font-family: "Arsmaquette Bold";  font-weight: 300}
.summernotewebsite    {width:100%; height: 40px; margin-bottom: 10px; background-color: #00468E !important; color: #FFFFFF !important;}
.summernoteemail      {width:100%; height: 40px; margin-bottom: 10px; background-color: #285b92 !important; color: #FFFFFF !important;}
.summernotephonenr    {width:100%; height: 40px; margin-bottom: 10px; background-color: #0f3b69 !important; color: #FFFFFF !important;}

/* ==========================================================================
   05 januari fix
   ========================================================================== */

@media (min-width: 760px) {
.editormargin {margin-left: -120px !important; margin-right: -240px;}
}

.btn-light {margin-bottom: 5px;}

/* ==========================================================================
   select fix
   ========================================================================== */

select::-ms-expand {display: none;}
.selectdiv {flex: 1 1 0%;}
.selectdiv:after {
    content: '>';
    font: 17px "Consolas", monospace;
    color: #FFFFFF;
    transform: rotate(90deg);
    right: 14px;
    top: 8px;
    position: absolute;
    pointer-events: none;
}
.selectdiv select {
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0px 12px;
}

.selectdiv2 {flex: 1 1 0%;}
.selectdiv2:after {
    content: '>';
    font: 17px "Consolas", monospace;
    color: #FFFFFF;
    transform: rotate(90deg);
    right: 30px;
    top: 8px;
    position: absolute;
    pointer-events: none;
}
.selectdiv2 select {
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0px 12px;
}

/* ==========================================================================
   flex items
   ========================================================================== */

.flex-row            {flex-direction: row!important}
.flex-column         {flex-direction: column!important}
.flex-row-reverse    {flex-direction: row-reverse!important}
.flex-column-reverse {flex-direction: column-reverse!important}
.flex-wrap           {flex-wrap: wrap!important}
.flex-nowrap         {flex-wrap: nowrap!important}
.flex-wrap-reverse   {flex-wrap: wrap-reverse!important}
.flex-fill           {flex: 1 1 auto!important}
.flexfullwidth       {flex: 0 0 100%;}
.flexhalfwidth       {flex: 0 0 50%;}

/* ==========================================================================
   scrollnavcontainer and searchbox
   ========================================================================== */

.keeppositionbottom {margin-top: 150px;}

@media (max-width: 1030px) {
  .container {overflow-x: hidden;}
  .keepposition {padding: 54px 1rem 1rem 1rem !important;}
  .scrollnavcontainer {position: fixed; display: inline-block !important; width: 100% !important;
                       overflow-y: hidden; -webkit-overflow-scrolling: touch; z-index: 999 !important; height: 66px;}
  .scrollnavcontent {width: 3200px !important;}
  .smoothscroll {position: fixed; left: 0px; top: 170px; width: 100vw; height: 100%; 
                 overflow: auto !important; -webkit-overflow-scrolling: touch; z-index: 999999; padding-bottom: 150px !important;}
}

.searchbox {
    display: inline-block;
    color: #FFFFFF;
    background-color: #181c22;
    border: 0px solid #000000 !important;
    border-top-right-radius: .25rem !important;
    cursor: pointer;
    flex: 1 1 auto;
    user-select: none;
}

@media (max-width: 1030px) {
  .searchbox {display: none !important;}
}

@media (max-width: 576px) {
  .jumbotronadmin {margin-top: 50px !important;}
}

/* ==========================================================================
   tables
   ========================================================================== */

table                {font-family: "Raleway Regular";}
.table td, thead     {font-family: "Raleway Regular"; overflow: hidden;}
.table               {width: 100%; margin-bottom: 1rem;}
.table td, .table th {background-color: #16191f; border: 1px solid #2b353e; color: #FFFFFF; font-family: "Raleway Regular"; vertical-align: middle;}
.table td,.table th  {padding: .75rem;}
.table thead th      {background-color: #000000; color: #666A77; border-bottom: 0 !important; vertical-align: bottom;}
.table-sm td,.table-sm th {padding: .3rem}
.tdsmallheight       {height: 46px !important;}
.table td a          {color: #FFFFFF;}
.ml-3                {margin-left: 0px !important; margin-right: 0px !important;}

.table td, thead          {font-size: 16px;}
.tablesmallfont td, thead {font-size: 14px !important;}
.weightitems td           {height: 63px; cursor: pointer;}

.catimg     {width:105px !important;}
.width200   {min-width: 200px !important; width: 200px; max-width: 200px;}
.width300   {min-width: 300px !important; width: 300px; max-width: 300px;}

.maxwidth13 {max-width: 13px !important; text-align: center;}
.maxwidth70 {width: 70px; max-width: 70px !important;}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    font-family: "Raleway Regular";
    color: #FFFFFF !important;
}

.nav-link.active  {background-color: #0879f9; border-color: #0879f9;}
.scrollnav-slagerij   .nav-link.active {background-color: #7b3032; border-color: #7b3032;}

#pills-tab .nav-item .nav-link {background-color: #000000;}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #FFFFFF !important;
    background-color: #18202f !important;
    border: 0px solid #ced4da !important;
    font-weight: 500;
}

@media (min-width: 900px) {
  .tablecontainer {overflow: hidden !important;}
}

@media (max-width: 900px) {
  .tablecontainer {overflow-x: auto !important;}
  .nomobilexoverflow {overflow-x: hidden !important;}
  table {display: table; overflow-x: auto; white-space: nowrap;}
  .width200 {min-width: 160px !important; width: 160px !important; max-width: 160px !important;}
  .width150 {min-width: 150px !important; width: 150px !important; max-width: 150px !important;}
  .tablecontainerx {margin-left: 2px !important; margin-right: -6px !important;}
  .col-sm-3 {margin-bottom:10px;}
}

.nav-tabs {font-family: "Raleway Regular";}

.nav-tabs .nav-link {color: #FFFFFF;}

@media (max-width: 760px) {
  .nav-item {padding-top: 4px; padding-bottom: 0px;}
}

@media (max-width: 760px) {
 .scrollnavcontent .nav-item {padding-top: 0px !important; padding-bottom: 0px;}
}

#filterinput {
    background-color: transparent;
    color: #FFFFFF;
    width: 100%;
    height: 42px;
    border: 4px solid #000000;
    text-align: left;
    padding-left: 10px;
    padding-right: 20px;
}

/* ==========================================================================
   dropdown menu
   ========================================================================== */

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 3px 50px 3px 10px;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

/* ==========================================================================
   progressbar
   ========================================================================== */

.progress {overflow: hidden; height: 22px; margin-bottom: 22px; background-color: #f5f5f5; border-radius: 4px;
           -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);}

.progress-bar {float: left; width: 0; height: 100%; font-size: 12px; line-height: 22px; color: #fff;
               text-align: center; background-color: #3097d1; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
               transition: width .6s ease;}

.progress-bar.active, .progress.active .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;}

.progress-bar-striped, .progress-striped .progress-bar {
    background-image: linear-gradient(45deg, hsla(0, 0%, 100%, .15) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .15) 0, hsla(0, 0%, 100%, .15) 75%, transparent 0, transparent); background-size: 40px 40px;}

.progress-bar-success {background-color: #2ab27b;}

.order-status {margin-top: -12px;}

/* ==========================================================================
   orderoverlay
   ========================================================================== */

.keepposition             {position: absolute; top: 0px; width: 100vw; z-index: 998; overflow: hidden; padding: 60px 1rem 1rem 1rem;}
.keeppositiontop          {margin-top: -38px;}
@media (min-width: 576px) {.keepposition {top: 40px;}}

.clickformore    {text-decoration: underline; cursor: pointer;}

.orderoverlay {position: fixed; background-color: #000000; left: 0px;top: 130px;
               width: 100vw; height: calc(100vh - 200px); min-height: 100vh; overflow: hidden;}

.customerinfo {width: 30vw; background-color: rgba(255,255,255,0.05); color: #FFFFFF; font-family: "Raleway Regular";
               min-height: calc(100vh - 60px); border-right: 1px solid rgba(255,255,255,0.2); padding-top: 5px;}

@media (max-width: 800px) {.customerinfo {display: none;}}

.productviewer {margin-bottom: 60px;}
.productviewer #bestelknop {display: none !important;}

@media screen and (min-width: 1025px) {
.productvieweradmin {position: absolute; top: 80px; right: 0px; width: 60vw; margin-right: calc(5vw); overflow-y: auto;
                     height: calc(100vh - 300px);}
}

.customeravatar  {margin-left: 50px; margin-top: 50px;}
.customername    {margin-left: 50px; margin-top: 20px; font-size: 30px !important;}
.customeraddress {margin-left: 50px; margin-top: -10px; font-size: 18px !important;}
.customeremail   {margin-left: 50px; margin-top: 0px; font-size: 16px !important;}
.customerphonenr {margin-left: 50px; margin-top: -4px; font-size: 16px !important;}
.customerremarks {margin-left: 50px; margin-top: 10px; font-size: 16px !important;}

@media screen and (max-width: 1025px) and (min-width: 600px) {
  .customeraddress {font-size: 15px !important;}
}

.lijstnaam            {margin-top: 8px; width: 300px; padding: 6px; text-align: center; border-radius: 6px;}
.lijstnaam-aatventure {background-color: #1F242D; border: 1px solid #687484; color: #FFFFFF;}

.listsubmit {margin-top: -14px !important; width: 300px; padding: 6px; text-align: center; border-radius: 6px; cursor: pointer;}

@media screen and (max-width: 1025px) and (min-width: 600px) {
  .listsubmit {width: 260px;}
}

/* ==========================================================================
   cards
   ========================================================================== */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-radius: .25rem;
    border: 0px;
    border-bottom: 40px solid transparent;
    background-image: url(../boot/subtle.jpg);
    background-size: 100% 700px;
    margin-bottom: 10px;
    color: #FFFFFF;
    user-select: none;
}

.card-body     {flex: 1 1 auto; min-height: 1px; padding: 1.25rem; box-shadow: inset 0 90px 10px #191c23;}
.card .nocolor {color: inherit;}

.card a,.card a:focus,.card a:hover {text-decoration:none; outline:none;}

@media screen and (min-width: 1024px) {
  .card-body      {padding: 50px !important;}
  .splitcolumn    {column-count: 2; column-gap: 50px; column-rule: 1px solid #1766bc; padding-bottom: 150px;}
  .col-md-8 .card {box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.42);}
  .col-md-8 .cardbackup {overflow-y; scroll;}
  .margintop-30   {margin-top:-34px;}
}

@media screen and (max-width: 1024px) {
  .margintop-30 {margin-top:-16px;}
}

@media (max-width:768px){
  .cardgaatnietgoed {margin-right:-5px; margin-left:-5px}
  .card-body        {border-top: 20px solid transparent;}
  .card-bodyxxx     {margin-top: -20px;}
}

/* ==========================================================================
   profile card
   ========================================================================== */

.col-md-5profile         {position: relative; width: 100%; margin-top: 24px !important;}

.profile-card            {display: inline-block; padding-right: 15px; float: left; padding-top: 30px; border-radius: 8px}
.profile-card-aatventure {background-color: #313b4c;}
.profile-cardborder      {border: 1px solid #535e6d;}
.profile-cardxxx         {display: inline-block; padding-right: 15px; float: left; overflow: hidden;}
.profile-card-about      {color: #677288;}
.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;}
.profile-card-name       {font-weight: 600; font-size: 20px; color: #d9dbe2 !important; text-transform: uppercase; padding-top: 30px;}
#quickfit-a              {padding-top: 24px !important}


/* new => alleen bij admin!!! */
@media screen and (min-width: 1000px) {
.profile-edit-top .profile-card       {margin-left: 10px;}
.profile-edit-top .profile-card-photo {position: absolute; left: 20px; margin-top: -10px !important; pointer-events: none;}
.profile-edit-top .profile-card-name  {position: absolute; width: 100%; font-weight: 600; font-size: 20px; text-transform: uppercase;
                                       padding-top: 112px; padding-left: 10px; line-height: 1.2;}
.profile-edit-top .profile-card-username {position: absolute; margin-top: 136px; padding-left: 10px;}
.addtextcolor-aatventure                 {color: #d9dbe2 !important;}
}

@media (min-width: 992px) {
 .col-md-5profile {margin-top: 54px !important;}
 .profileright {position: absolute; right: 130px;}
 .profile-edit-top .col-md-3 {margin-left: 50px; height: 300px; border-radius: 5px;}
}

@media screen and (max-width: 760px) {
  .profileleft           {width: 120px;}
  .profileright          {width: 260px;}
  .profiletop            {margin-top: 68px !important;}
  .profile-card-name     {position: relative; line-height: 0.9; top: -26px; font-size: 28px; text-align: right; word-wrap: break-word;}
  .profile-card-about    {font-family: "Rajdhani Regular"; font-size: 16px; margin-top: -18px; text-align: right; line-height: 1.3;}
  .profile-card-username {margin-top: 6px !important; color: #80c6ff; text-align: right;}
  .ticker-wrap           {display: none !important;}
}

@media screen and (max-width: 380px) {
  .profileright {width: 230px;}
}

@media screen and (min-width: 760px) {
  .profile-card-about    {display: none;}
  .profile-card-photo    {z-index: 99;}
}

.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 {padding: 4px 0; margin: 0 5px;}
.profile-links-list .btn-light {background-color: transparent !important; border-radius: 50% !important; border: 0; min-width: 65px; min-height: 65px;}


.share          {margin: 0px !important}
.webcolor       {background-image: url(../images/www.png);       background-size: cover !important;}
.facebookcolor  {background-image: url(../images/facebook.png);  background-size: cover !important;}
.twittercolor   {background-image: url(../images/twitter.png);   background-size: cover !important;}
.instagramcolor {background-image: url(../images/instagram.png); background-size: cover !important;}
.linkedincolor  {background-image: url(../images/linkedin.png);  background-size: cover !important;}
.youtubecolor   {background-image: url(../images/youtube3.png);  background-size: cover !important;}
.whatsappcolor  {background-image: url(../images/whatsapp2.png); background-size: cover !important;}
.snapchatcolor  {background-image: url(../images/snapchat.png);  background-size: cover !important;}

.facebookcolor:active {background-image:url(https://aatventure.news/images/facebook.png);}
.twittercolor:active  {background-image:url(https://aatventure.news/images/twitter.png);}
.whatsappcolor:active {background-image:url(https://aatventure.news/images/whatsapp2.png);}

#recentLikes {display: none;}

/* ==========================================================================
   blog columns
   ========================================================================== */

.splitcolumn i {quotes: "\201C""\201D""\2018""\2019";}

.splitcolumn i:before {
  color: #fed406;
  content: open-quote;
  font-family: "Arial";
  font-size: 50px;
  line-height: 0.1em;
  margin-right: 10px;
  vertical-align: -0.4em;
}

.splitcolumn i:after {
  color: #fed406;
  content: close-quote;
  font-family: "Arial";
  font-size: 50px;
  line-height: 0.1em;
  margin-left: 3px;
  vertical-align: -0.5em;
}

.splitcolumn img {border-radius: 8px}

.card-img-overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 1.25rem;}
.link-over        {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; cursor: pointer;}
.card-like        {position: absolute; top: 0; left: 0; padding: .25rem; z-index: 3;}
.category         {position: absolute; font-size: 12px; text-transform: uppercase; padding: .25rem; top: 1rem; right: 1rem; z-index: 3;}
.category-middle  {position: absolute; top: 1rem; right: 50px; font-size: 12px; text-transform: uppercase; padding: 3px; z-index: 3;}
.playericon       {position: absolute; top: .6rem; right: 1.25rem; z-index: 3; font-size: 1.6rem;}
.bottom-txt       {position: absolute; left: 1.25rem; right: 1.25rem; bottom: 4rem; margin-bottom: -42px;
                   z-index: 0; opacity: 0;}
.author           {position: absolute; bottom: 1rem; z-index: 3; margin-bottom: -48px;}
.author span      {display: inline-block; margin-bottom: -13px; padding-left: 4px;
                   color: #7f8188 !important; text-transform: lowercase; font-size: 13px;}
.card-count       {font-size: 16px; color: #999999; margin-top: 9px; margin-left: 40px;}

.card-img, .card-img-bottom, .card-img-top {flex-shrink: 0; width: 100%;}

.card-img,.card-img-bottom,.card-img-top {flex-shrink: 0; width: 100%}
.card-img,.card-img-top    {border-top-left-radius: calc(.25rem - 1px); border-top-right-radius: calc(.25rem - 1px)}
.card-img,.card-img-bottom {border-bottom-right-radius: calc(.25rem - 1px); border-bottom-left-radius: calc(.25rem - 1px)}

.youtube       {width: 100%; overflow: hidden; margin: 0; border-bottom: 88px solid rgb(19, 21, 25); max-height: 400px; border-radius: calc(.25rem - 1px);}
.mt-5          {position: relative !important; top: 80px !important;}
.ava           {width: 50px; height: 50px; border-radius: 50%; text-align: center;}
.avabig        {width: 100px; height: 100px; border-radius: 50%;}
.avatar-sm     {position: relative; z-index: 99999999999; height: 40px !important; margin-left: -5px; margin-right: 5px;}
.bg-over       {background: rgba(0,0,0,0.1); width: 100%;}
.bg-over:hover {background: rgba(0,0,0,0);}

/* ==========================================================================
   blog item widget adjustments
   ========================================================================== */

.c_app                                                {border-bottom: 0px !important;}
.c_game                                               {background: #000000 !important;}
.c_music                                              {border-bottom: 30px solid #010202 !important;}
.c_wiki                                               {border: 1px solid #000000 !important;}
.c_tool .bottom-txt                                   {text-align: center; opacity: 0 !important;}
.c_the-hidden-worlds-of-national-parks.c_hidden       {display: none !important;}

.o_app                                                {opacity: 0 !important;}
.o_music                                              {opacity: 0 !important;}
.o_wiki                                               {opacity: 0 !important;}
.o_game .category                                     {opacity: 0 !important;}
.o_game .bottom-txt                                   {opacity: 0 !important;}
.o_wiki .bottom-txt                                   {opacity: 0 !important}
.o_wiki .card-date                                    {opacity: 1 !important}
.o_news .bottom-txt                                   {opacity: 0 !important}
.o_news .card-date                                    {opacity: 0 !important}
.o_movie .bottom-txt                                  {opacity: 0 !important}
.o_aatventure-current-weather .overlayweather         {font-family: "Nexa Bold" !important; font-size: 13px; line-height: 24px; text-transform: uppercase;}
.o_aatventure-current-weather .card-like              {opacity: 0 !important;}
.o_aatventure-current-weather .category               {opacity:0 !important;}

.i_blog                                               {min-height: 314px;}
.i_movie                                              {max-height: 1230px;}
.appid1                                               {display: none !important;}
.bto_game                                             {opacity: 0 !important;}
.related-flyer                                        {border-bottom: 8px solid transparent !important;}
.related-wiki                                         {border-bottom: 8px solid transparent !important;}
.relatedoverlay_wiki                                  {opacity: 0 !important;}

.i_eerste-persoon-in-nederland-besmet-met-coronavirus {border-bottom: 86px solid #FF0000;}
.i_aatventure-timetravel-system                       {border-bottom: 86px solid #101317;}
.i_aatventure-mustwatch-top-25                        {border-bottom: 86px solid #101317;}
.i_coronastatus-from-day-one                          {border-bottom: 86px solid #101317;}
.i_aatventure-github-top-25                           {border-bottom: 86px solid #101317;}
.i_aatventure-news-scifi-special                      {border-bottom: 86px solid #101317;}
.i_aatventure-news-espionage-special                  {border-bottom: 86px solid #101317;}
.i_aatventure-commentsection-i                        {border-bottom: 88px solid #20242c;}
.i_waarom-een-ic-bed-meer-is-dan-een-bed-alleen       {border-bottom: 86px solid #101317;}

.i_horecatycoon-je-kunt-geen-heel-land-in-gijzeling-houden-voor-een-kleine-groep  {border-bottom: 86px solid #101317;}
.i_china-liegt-bewust-over-doden-en-besmettingen-door-coronavirus                 {border-bottom: 86px solid #101317;}
.i_mysql-date-format                                                              {border-bottom: 86px solid #101317;}

lft {float: left !important;}
rgt {float: right !important;}

.toolslink                    {border-bottom: 1px solid #c6af46 !important;}
.relatedoverlay_promote       {cursor: pointer !important;}

@media screen and (min-width: 768px) {
  .youtube {min-height: 314px;}
  .i_the-hidden-worlds-of-national-parks    {min-height: 678px; border-bottom:  2px solid #0A131A !important;}
  .i_aatventure-progressive-web-apps        {min-height: 678px; border-bottom: 20px solid #0A131A !important;}
}

@media screen and (max-width: 768px) {
  .c_aatventure-progressive-web-apps        {border-bottom: 90px solid #0A131A !important;}
  .i_aatventure-progressive-web-apps        {min-height: 670px; border-bottom: 0px solid #0A131A !important;}
  .o_aatventure-progressive-web-apps        {margin-bottom: -40px;}
  .i_what-is-wrong-with-pwa-support-on-ios  {min-height: 720px; border-bottom: 90px solid #2074b1 !important;}
}

/* blog => mastershow */
.card-body h1      {font-family: "Roboto Black"; text-transform: uppercase; font-size: 38px; margin-top: 50px; margin-bottom: 40px; line-height: 1;
                    color: #cbff03; color: #bef359;}
.ataradescription  {letter-spacing: -0.3px; margin-bottom: 30px; break-inside: avoid; padding-right: 10px;}
.ataradescription  {font-family: "Roboto Bold"; font-weight: 600; margin-bottom: 30px; break-inside: avoid;}
.card-body p b     {display: inline-block; font-size: 23px !important; line-height: 1.2; margin-top: 10px; margin-bottom: 6px; color: #bef359; !important;}
p                  {font-family: "Open Sans"; font-weight: 300; font-size: 20px; line-height: 1.6; color: #d8d5d5; margin: 0px;}
.content p         {color: #000000;}
.info p            {color: #000000;}
.desc p            {color: #000000;}
.note-editable p   {color: #ffffff !important;}
.splitcolumn p     {padding-right: 10px !important;}
.avatar            {height: 45px !important; margin-right: 5px; min-width: 10px !important; box-shadow: inset 17px 14px 10px -18px #2b3138;}
.aatsname          {position: absolute; margin-top: 2px; font-size: 20px;}
.aatsusername      {position: absolute; margin-top: 28px;}
.aatstimeago       {position: absolute; margin-top: 8px; right: 0px;}
.aatschannel       {position: absolute; margin-top: 26px; right: 0px;}
.mb-3              {margin-bottom: 2px;}
.card-body a       {color: #70adff;}
.card-date         {position: absolute; display: inline-block; right: 1.25rem; bottom: 1.40rem; margin-bottom: -52px; opacity: 0.3 !important;}
.signature         {font-family: "Oswald Bold" !important; font-size: 30px; text-transform: uppercase; letter-spacing: 2px; color: #faff00; margin-top: 50px; text-align: right;}
.signaturebottom   {font-family: "Oswald Regular" !important; font-size: 16px; text-transform: uppercase;
                    letter-spacing: 1px; color: #a3f794; color: #bef359; margin-top: -8px; text-align: right;}

@media (min-width: 1200px) {
  .card-body h1 {margin-top: 60px;}
}

@media (min-width: 868px) {
  .mt-5 .col-md-4 {position: fixed; right: 15px; overflow-y: scroll; height: 90vh;}
}

@media (min-width: 1025px) {
  .col-md-4 {flex: 0 0 31% !important; max-width: 31% !important;}
}

.ataraheader {margin-top: 10px; margin-bottom: 2px; color: #bfff00 text-transform: uppercase;}
.blog-footer {display: none !important;}

/* cats shops news and movies was #1a1e25 */
.bottomline      {position: absolute; bottom: -40px; font-size: 20px; padding-left: 4px;}
.moviebottom     {border-bottom: 40px solid #0d1621 !important;}
.aatsfasttitle   {display: block; font-size: 2rem; font-weight: 500; line-height: 30px; margin-top: 4px; text-transform: uppercase;}
.aatfastsubtitle {display: block; font-weight: 300; font-size: 20px; color: #C0C0C0;
                  line-height: 30px; margin-top: -2px; text-transform: uppercase;}
.tag-img         {height: 200px;}

.bginstant-aatventure {background-color: #090a0e; background: linear-gradient(#0e0f13, #1b1e24, #1b1e24);}
.newsitemx   {border-bottom: 116px solid #1d2127;}
.newsitemx   {border-bottom: 116px solid #1b212b;}
.newsitem    {border: 1px solid #000000; margin-bottom: 124px;}
.cats .card  {border-bottom: 20px solid #141a23 !important;}

.c_news         {border: 0px !important;}
.i_news         {min-height: 100px !important;}
.o_news         {opacity: 0 !important;}
.newstitle      {margin-left: 1.25rem; margin-right: 1.25rem; margin-top: -100px;}
.newstitle p    {font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Arial","Segoe UI Symbol";
                 font-size: 27px; font-weight: 500; line-height: 1.2; color: #c0f941; !important;}
.newscontent    {margin-left: 1.25rem; margin-right: 1.25rem; margin-bottom: 20px; margin-top: 10px;}
.newscontent    {font-size: 20px; color: #bec8d2; line-height: 1.5 !important;}
.newscontent a  {color: #c0f941; font-size: 20px;}
.newscontent p  {font-size: 20px; color: #bec8d2; line-height: 1.5 !important; margin-bottom: 16px;}
.newscontent em {margin-top: 20px; font-size: 20px; color: #bec8d2;line-height: 1.5 !important;}
.linebreak      {margin-top: 20px; margin-bottom: 0px !important;}
.author p       {font-size:16px}

@media (max-width: 768px) {.newsitem {border-radius: 0 !important;}}

.cbsimg {display: block; margin-left: auto; margin-right: auto; max-width: 100%; border-radius: 4px;}

/* clicktrough for site with links */
.x_CBS                 {pointer-events: none !important}
.x_google              {pointer-events: none !important}
.x_Geenstijl           {pointer-events: none !important}
.x_9to5Google          {pointer-events: none !important}
.x_9to5Mac             {pointer-events: none !important}
.x_Engadget            {pointer-events: none !important}
.x_chrome-developers   {pointer-events: none !important}

/* addons PHP4.3 */
.gsimagex {width: 100%; height: auto;}
.newscontent img {width: 100%; height: auto; border-radius: 4px;}

 /* ==========================================================================
   years
   ========================================================================== */

.sepia                   {filter: sepia(1);}
.historybackgroundstatic {background-color: #15120b;}

.historybackgroundscroll {margin-top: -10px; padding-top: 20px; width: 100vw; overflow-x: hidden;
                          background-image: url(../../img/years/background.jpg); background-repeat: repeat;}

@media (max-width: 768px) {.profileheader {background: rgba(0,0,0,0.6) !important}}

.historybackgroundstatic::after {
  content: "";
  position: absolute;
  overflow-x: hidden;
  width: 100vw;
  height: 100%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(../../img/years/background.jpg);
  background-repeat: repeat;
  transform: rotate(0deg);
}

@media screen and (min-width: 800px) {
  .historybackgroundscroll {background-size: 50% 25%;}
}

.yeardiv {
    width: 100%;
    font-family: "Oswald Bold";
    font-size: 50px !important;
    background-color: #1d190f;
    background-image: url(../../img/years/defaultyear.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #564c2e !important;
    box-shadow: inset 0px 0px 20px #251c02;
    padding: 0px !important;
}

.January   {width: 100%; border: 1px solid #1c5eab !important;}
.February  {width: 100%; border: 1px solid #1c5eab !important;}
.March     {width: 100%; border: 1px solid #1c5eab !important;}
.April     {width: 100%; border: 1px solid #1c5eab !important;}
.May       {width: 100%; border: 1px solid #1c5eab !important;}
.June      {width: 100%; border: 1px solid #1c5eab !important;}
.July      {width: 100%; border: 1px solid #1c5eab !important;}
.August    {width: 100%; border: 1px solid #1c5eab !important;}
.September {width: 100%; border: 1px solid #1c5eab !important;}
.October   {width: 100%; border: 1px solid #1c5eab !important;}
.November  {width: 100%; border: 1px solid #1c5eab !important;}
.December  {width: 100%; border: 1px solid #1c5eab !important;}

.year_-13700000000 {background-image: url(../../img/years/-13700000000.jpg);}
.year_-13400000000 {background-image: url(../../img/years/-13400000000.jpg);}
.year_-4500000000  {background-image: url(../../img/years/-4500000000.jpg);}

.year_-1350        {background-image: url(../../img/years/-1350.jpg);}
.year_-1330        {background-image: url(../../img/years/-1330.jpg);}

.year_23   {background-image: url(../../img/years/23.jpg);}
.year_33   {background-image: url(../../img/years/33.jpg);}
.year_64   {background-image: url(../../img/years/64.jpg);}
.year_79   {background-image: url(../../img/years/79.jpg);}
.year_150  {background-image: url(../../img/years/150.jpg);}
.year_325  {background-image: url(../../img/years/325.jpg);}
.year_843  {background-image: url(../../img/years/843.jpg);}
.year_1095 {background-image: url(../../img/years/1095.jpg);}
.year_1206 {background-image: url(../../img/years/1206.jpg);}
.year_1347 {background-image: url(../../img/years/1347.jpg);}
.year_1431 {background-image: url(../../img/years/1431.jpg);}
.year_1440 {background-image: url(../../img/years/1440.jpg);}
.year_1453 {background-image: url(../../img/years/1453.jpg);}
.year_1492 {background-image: url(../../img/years/1492.jpg);}
.year_1504 {background-image: url(../../img/years/1504.jpg);}
.year_1517 {background-image: url(../../img/years/1517.jpg);}
.year_1607 {background-image: url(../../img/years/1607.jpg);}
.year_1609 {background-image: url(../../img/years/1609.jpg);}
.year_1642 {background-image: url(../../img/years/1642.jpg);}
.year_1879 {background-image: url(../../img/years/1879.jpg);}
.year_1882 {background-image: url(../../img/years/1882.jpg);}
.year_1886 {background-image: url(../../img/years/1886.jpg);}
.year_1888 {background-image: url(../../img/years/1888.jpg);}
.year_1898 {background-image: url(../../img/years/1898.jpg);}
.year_1902 {background-image: url(../../img/years/1902.jpg);}
.year_1903 {background-image: url(../../img/years/1903.jpg);}
.year_1905 {background-image: url(../../img/years/1905.jpg);}
.year_1908 {background-image: url(../../img/years/1908.jpg);}
.year_1912 {background-image: url(../../img/years/1912.jpg);}
.year_1914 {background-image: url(../../img/years/1914.jpg);}
.year_1917 {background-image: url(../../img/years/1917.jpg);}
.year_1927 {background-image: url(../../img/years/1927.jpg);}
.year_1928 {background-image: url(../../img/years/1928.jpg);}
.year_1929 {background-image: url(../../img/years/1929.jpg);}
.year_1931 {background-image: url(../../img/years/1931.jpg);}
.year_1932 {background-image: url(../../img/years/1932.jpg);}
.year_1933 {background-image: url(../../img/years/1933.jpg);}
.year_1937 {background-image: url(../../img/years/1937.jpg);}
.year_1939 {background-image: url(../../img/years/1939.jpg);}
.year_1940 {background-image: url(../../img/years/1940.jpg);}
.year_1941 {background-image: url(../../img/years/1941.jpg);}
.year_1943 {background-image: url(../../img/years/1943.jpg);}
.year_1944 {background-image: url(../../img/years/1944.jpg);}
.year_1945 {background-image: url(../../img/years/1945.jpg);}
.year_1947 {background-image: url(../../img/years/1947.jpg);}
.year_1949 {background-image: url(../../img/years/1949.jpg);}
.year_1952 {background-image: url(../../img/years/1952.jpg);}
.year_1953 {background-image: url(../../img/years/1953.jpg);}
.year_1954 {background-image: url(../../img/years/1954.jpg);}
.year_1956 {background-image: url(../../img/years/1956.jpg);}
.year_1961 {background-image: url(../../img/years/1961.jpg);}
.year_1962 {background-image: url(../../img/years/1962.jpg);}
.year_1963 {background-image: url(../../img/years/1963.jpg);}
.year_1966 {background-image: url(../../img/years/1966.jpg);}
.year_1968 {background-image: url(../../img/years/1968.jpg);}
.year_1969 {background-image: url(../../img/years/1969.jpg);}
.year_1972 {background-image: url(../../img/years/1972.jpg);}
.year_1977 {background-image: url(../../img/years/1977.jpg);}
.year_1980 {background-image: url(../../img/years/1980.jpg);}
.year_1981 {background-image: url(../../img/years/1981.jpg);}
.year_1982 {background-image: url(../../img/years/1982.jpg);}
.year_1983 {background-image: url(../../img/years/1983.jpg);}
.year_1984 {background-image: url(../../img/years/1984.jpg);}
.year_1985 {background-image: url(../../img/years/1985.jpg);}
.year_1986 {background-image: url(../../img/years/1986.jpg);}
.year_1987 {background-image: url(../../img/years/1987.jpg);}
.year_1988 {background-image: url(../../img/years/1988.jpg);}
.year_1989 {background-image: url(../../img/years/1989.jpg);}
.year_1990 {background-image: url(../../img/years/1990.jpg);}
.year_1991 {background-image: url(../../img/years/1991.jpg);}
.year_1992 {background-image: url(../../img/years/1992.jpg);}
.year_1993 {background-image: url(../../img/years/1993.jpg);}
.year_1994 {background-image: url(../../img/years/1994.jpg);}
.year_1995 {background-image: url(../../img/years/1995.jpg);}
.year_1996 {background-image: url(../../img/years/1996.jpg);}
.year_1997 {background-image: url(../../img/years/1997.jpg);}
.year_1998 {background-image: url(../../img/years/1998.jpg);}
.year_1999 {background-image: url(../../img/years/1999.jpg);}
.year_2000 {background-image: url(../../img/years/2000.jpg);}
.year_2001 {background-image: url(../../img/years/2001.jpg);}
.year_2002 {background-image: url(../../img/years/2002.jpg);}
.year_2003 {background-image: url(../../img/years/2003.jpg);}
.year_2004 {background-image: url(../../img/years/2004.jpg);}
.year_2005 {background-image: url(../../img/years/2005.jpg);}
.year_2006 {background-image: url(../../img/years/2006.jpg);}
.year_2007 {background-image: url(../../img/years/2007.jpg);}
.year_2008 {background-image: url(../../img/years/2008.jpg);}
.year_2009 {background-image: url(../../img/years/2009.jpg);}
.year_2010 {background-image: url(../../img/years/2010.jpg);}
.year_2011 {background-image: url(../../img/years/2011.jpg);}
.year_2012 {background-image: url(../../img/years/2012.jpg);}
.year_2013 {background-image: url(../../img/years/2013.jpg);}
.year_2014 {background-image: url(../../img/years/2014.jpg);}
.year_2015 {background-image: url(../../img/years/2015.jpg);}
.year_2016 {background-image: url(../../img/years/2016.jpg);}
.year_2017 {background-image: url(../../img/years/2017.jpg);}
.year_2018 {background-image: url(../../img/years/2018.jpg);}
.year_2019 {background-image: url(../../img/years/2019.jpg);}
.year_2020 {background-image: url(../../img/years/2020.jpg);}

@media (max-width: 768px) {.col-md-3 {flex: 0 0 100%; max-width: 100%;}}

/* ==========================================================================
   comments
   ========================================================================== */

#easyComment_Content {display: block; margin-left: 20px; margin-right: 20px; margin-bottom: 30px;}
.add-comment         {position: relative; border-color: #353e42; margin-bottom: 25px;}
.footer-links a      {font-size: 11px; font-weight: 400; color: #7f919e;}

/* ==========================================================================
   shop basics
   ========================================================================== */

@media screen and (max-width: 1020px) {
  .splitleft  {position:absolute; left:0px; top:69px; height: calc(100vh - 69px); width: 100%;}
  .splitright {display: none;}
  .threequart {width: 100%;}
}

@media screen and (min-width: 1025px) {
  .splitleft  {position:absolute; left:0px; top:69px; height: calc(100vh - 69px); width: 76%;}
  .threequart {width: 76%;}
}

.overlaymenu {display:none;}
.mtaat       {margin-top: 69px; padding-left: 0px; padding-right: 0px;}
#iframeoverlay {display: none; position: fixed; top: 69px; left: 0px; bottom: 0px; right: 0px; z-index: 10; width: 100%; height: calc(100vh - 69px);}
@media screen and (min-width: 1025px) {.splitleft  {position: absolute; left: 0px; top: 69px; height: calc(100vh - 69px); width: 75.8%;}}
@media screen and (min-width: 1025px) {.splitright {position: fixed; top: 69px; right: 0px; width: 24% !important;
                   min-width: 300px; height: 100vh; clear: none; overflow-y: scroll;
                   -webkit-overflow-scrolling: touch; letter-spacing: 0; margin-left: 0; padding-left: 10px; padding-right: 10px;
                   user-select: none; z-index: 998; padding-bottom: 100px;}}
.scrollbar {overflow-y: scroll !important; overflow-x: hidden;}

@media screen and (max-width: 1020px) {
.splitleft {position: fixed; width: 100vw; left: 0px; top: 69px; height: calc(100vh - 69px);}
}

/* assortimentsgroepwrapper */
#assgrpwrapper {height: 56px; width: 100%; line-height: 40px;}
.assortimentsgroepheader {position: relative; padding: 0; margin: 0; width: 100%; height: 56px; float: left;
    text-align: center; z-index: 200; overflow: visible; font-family: "Myriad Regular"; font-size: 30px; font-weight: 700; text-transform: uppercase;
    line-height: 1; padding-top: 16px; transform: translate(0, 0);}
.fa-angle-double-left {display: block; padding-left: 17px; line-height: 56px; font-size: 20px;}
.backarrow {position: absolute; width: 50px; height: 50px; cursor: pointer; opacity: 0.5; -webkit-font-smoothing: antialiased; z-index: 998 !important;}
.minimalswitch {position: absolute; top: 12px; right: 20px; background-image: url(../../img/interface/minimal.png); z-index: 998; background-repeat: no-repeat;
                background-size: cover; width: 32px; height: 32px; cursor: pointer; opacity: 0.5;}

/* sidebar */
#logoright           {height: 400px; width: auto; margin-top: -120px; margin-bottom: -110px; margin-left: auto; margin-right: auto;
                      background-size: contain; background-repeat: no-repeat; background-position: center;}
.sidebarheadertext   {display: inline-block; margin-top: -10px; padding-left: 10px; font-family: "Roboto Regular"; font-size: 20px;
                      font-weight: 400; line-height: 1.1; color: #FFFFFF; -webkit-font-smoothing: antialiased;}
.sidebaritem         {margin-left: 10px; color: #FFFFFF; width: 220px; -webkit-font-smoothing: antialiased;}
.w3-card-2           {padding-left: 10px; padding-right: 10px;}
.w3-ul li            {font-family: "Roboto Light"; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid #FFFFFF; -webkit-font-smoothing: antialiased; cursor: pointer;}
.w3-ul a             {color: #FFFFFF; text-decoration: none;}
.w3-left             {float: left !important;}
.w3-margin-right     {margin-right: 16px!important;}
.w3-hoverable li img {height: 45px; width: auto; max-width: 66px; border-radius: 8px;}
.w3-large            {font-size: 18px !important; margin-top: 0px;}
.w3-small            {display: block; font-size: 15px; margin-top: -5px;}
.taglist             {min-height: 46px !important; text-align: center; margin-bottom: 10px; border-radius: 8px;
                      background-color: #222222; border: 1px solid #FFFFFF;}

@media screen and (max-width: 800px) {
  .sidebaritem     {margin-left:30px !important;}
  .w3-container .l {margin-left:30px !important;} 
}

/* card */
.backdrop {position: absolute; background: rgba(255,255,255,0.6); top: 36px; left: 0px; height: calc(100% - 36px); width: 100%; border: none;
           border-top: 1px solid #000000; border-bottom: 1px solid #000000; z-index: 99; display: none;}
.backdropmenu {position:absolute;top:42px;right:0px;width:240px;padding:5px 0;margin-left:auto;overflow-x:hidden;overflow-y:auto;z-index:9999999;}
.backdropmenu li {display:block;color:#FFFFFF;font-family:"Roboto Light";font-size:15px;font-weight:400;text-transform:uppercase;text-align:right;
                  background-color:rgba(0,0,0,0.7); border:1px solid rgba(200,200,200,0.3); border-radius:6px 0px 0px 6px; padding:7px 20px 7px 6px;
                  box-shadow:2px 2px 4px rgba(0,0,0, 0.4); margin-top:8px; margin-right:-2px; cursor:pointer; -webkit-font-smoothing:antialiased;}
.backdropmenu li:hover {background-color:rgba(0,0,0,0.9);}
.backdropmenu li a {color: #FFFFFF !important}

.assgroepcard-title       {position: absolute; bottom: -50px; color: #ffffff; margin-left: 14px; font-size: 32px; line-height: 1;}
.assgroepcard-description {position: absolute; bottom: -71px; color: #ffffff; margin-left: 14px;}

.innertext          {display:block;width:100%;text-align:center;padding-bottom:12px;}
.overlayinfo        {display:none;background-color:rgba(0,0,0,0.8);height:100%;position:absolute;z-index:99;top:36px;height:calc(100% - 36px);width:100%;}
.productinfo        {display:none;position:absolute;top:0px;height:100%;width:100%;padding:15px;overflow-y:auto;}
.allergieinfo       {display:none;position:absolute;top:0px;height:100%;width:100%;padding:15px;overflow-y:auto;}
.voedingswaardenx   {display: none;padding: 20px;font-size: 16px; overflow: auto; height: 250px;}
.hoogaantal         {display:none;position:absolute;top:0px;height:100%;width:100%;padding:15px;overflow-y:auto;}
.remarksinfo        {display:none;position:absolute;top:0px;height:100%;width:100%;padding:15px;overflow-y:auto;}
.shareinfo          {display:none;position:absolute;top:0px;height:100%;width:100%;padding:15px;overflow-y:auto;}
.shareicons         {margin-top:-10px;}
.allergenen         {display:flex; flex-wrap:wrap; align-items:flex-start; flex-direction:row; max-height:100vh;}
.allergenen img     {max-width:92px;}
.shareicon          {display:inline-block; background-color:#1e232b; border-radius:50%!important; min-width:65px; min-height:65px;
                     border:1px solid #212327; margin-left:10px; margin-top:6px; vertical-align:middle;}
.sharetxt           {padding-left:20px;}
.sharecon           {cursor:pointer;}
.sharelink          {float: right; padding-right: 6px; color:rgba(255,255,255,0.7); cursor:pointer;}
.sharelink i        {display:block; font-size:20px!important;}
.floatshare         {float: left; margin-top: 50px; margin-left: 24px;}

.opmerkingentextarea {position:absolute; top:50px; bottom:40px; width:94%; background-color:#131313; color:#FFFFFF; border-radius:10px;
                      padding:10px; margin-left:-3px; border:1px solid #000000;}

input.number {text-align:center; margin:0px; width:70px; height:47px; background-color:antiquewhite;}
.zindex190   {display: block; width: 200px !important; height: 35px !important; margin-top: -6px !important;
              margin-left: auto !important; margin-right: auto !important; border-radius: 8px;}

.savehoogaantalbutton {margin-top: 20px; width: 70px; height: 70px; margin-left: auto; margin-right: auto; cursor: pointer;
    background-image: url(../../img/interface/confirmaantal.png); background-repeat: no-repeat; background-size: cover;}

.WINKELVERKOOP  {color: #ff593b !important;}
.WEBSHOPVERKOOP {color: #a7ff00 !important;}
.AANGEPAST      {color: #ffbe00 !important;}
.VERVALLEN      {color: #FF0000 !important;}

.closebutton   {padding-top: 15px;}

/* ==========================================================================
   code
   ========================================================================== */

code {display: block; margin-top: 10px; margin-bottom: 10px; font-size: 90%;
      background-color:transparent !important; color: #7bb4ec; white-space: pre-wrap; word-wrap: break-word; padding:10px;}

.ataracode {margin-top: 10px; margin-bottom: 10px; background-color: #272b2f; border: 1px solid #000000; padding: 30px; cursor: text;
            border-radius: 15px; border-bottom: 1px solid #535f6b; box-shadow: 0 1px 5px rgba(0,0,0,0.4) inset, 0 0 20px rgba(0,0,0,0.2) inset;
            break-inside: avoid; user-select: text !important;}

.ataracode:hover {background-color: #263e56;}

@media screen and (max-width: 760px) {
  .ataracode {margin-top: 10px; margin-bottom: 10px; padding: 12px; margin-left: 0px; margin-right: 0px; font-size: 14px;}
}

@media (max-width: 700px) {
  .ataratable td {font-size: 12px;}
  .postshow-og-roosters .ataratable td {font-size: 14px;}
}

/* ==========================================================================
   typography
   ========================================================================== */

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {margin-bottom: .5rem; font-weight: 500; line-height: 1.2}
.h1,h1 {font-size: 2.5rem}
.h2,h2 {font-size: 2rem}
.h3,h3 {font-size: 1.75rem}
.h4,h4 {font-size: 1.5rem}
.h5,h5 {font-size: 1.25rem}
.h6,h6 {font-size: 1rem}

@media (max-width: 380px) {.h4, h4 {font-size: 1.25rem;}}

.display-1 {font-size: 6rem;   font-weight: 300; line-height: 1.2}
.display-2 {font-size: 5.5rem; font-weight: 300; line-height: 1.2}
.display-3 {font-size: 4.5rem; font-weight: 300; line-height: 1.2}
.display-4 {font-family: "Roboto Black"; text-transform: uppercase; color: #FFFFFF; font-size: 30px !important; font-weight: 300 !important; line-height: 1 !important;}

.small,small  {font-size: 80%; font-weight: 400}
.img-fluid    {max-width: 100%; height: auto; margin-left: auto; margin-right: auto;}
.color-delete {color: #f4645f !important;}

@media (min-width: 576px) {.display-4 {margin-left: 6px;}}

/* ==========================================================================
   form control
   ========================================================================== */

textarea, select, input, button {outline: none !important;}
input, select                   {box-sizing: border-box;}
textarea                        {min-height: 90px;}
@media (max-width: 768px)       {textarea {min-height: 160px;}}

input[type=search] {outline-offset: -2px; -webkit-appearance: none;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}

.form-control {
    display: block;
    width: 100%;
    height: 35px;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF !important;
    border-radius: 4px;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: initial, initial;
}

.form-control {border: 1px solid #132030; background-color: #17202f; color: #85b8ff;}

.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0);
    outline: 0;
    border-radius: 0;
}

.form-aatventure .form-control:focus {
    color: #495057;
    background-color: #18202f;
    border:  1px solid #80bdff !important;
}

.form-slagerij .form-control:focus {
    border: 1px solid #ff0719 !important;
}

.form-sushi .form-control:focus {
    border: 1px solid #78869c !important;
}

.popover .form-control, .modal .form-control {
    background-color: #292D3A;
    color: #FFFFFF !important;
    border: 0px !important;
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group>.custom-file, .input-group>.custom-select, .input-group>.form-control, .input-group>.form-control-plaintext {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    margin-bottom: 0;
    border-radius: 0 6px 6px 0;
}

.input-group-addon {
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #FFFFFF;
    text-align: center;
    background-color: #353f4e;
    border: 0px;
    border-radius: 0.25rem 0rem 0rem 0.25rem;
    min-width: 150px;
}

@media (max-device-width: 800px) {
  .col-md-10     {flex: 0 0 100%; max-width: 100%;}
  .form-slagerij {margin-left:10px; margin-right: 10px;}
  .formheader    {width: 100% !important; margin-top: 8px !important;}
  .input-group   {margin-bottom: 4px;}
}

@media (min-device-width: 800px) {
  .form-group {text-align: right;}
}

.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    vertical-align: middle;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #FFFFFF;
    background-color: #2374ca;
    border: 1px solid #2374ca;
}

.custom-control-label::before, .custom-file-label, .custom-select {
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@media (min-device-width: 760px) {
  .top14pixels {margin-top: 14px;}
}

@media (max-device-width: 760px) {
  .mobileformmargin {margin-top: 10px; margin-left: 10px !important; margin-right: 10px !important;}
}

/* ==========================================================================
   typahead search
   ========================================================================== */

@media (min-width: 768px) {.fullscreendialog {width:56vw !important;}}
@media (min-width: 768px) {.col10morewidth   {max-width: 100% !important; flex: 0 0 100% !important;}}
.typeahead__container {position: relative; width: 100%; font-family: "Roboto Light" !important; line-height: 1.4 !important;}
.typeahead__dropdown, .typeahead__list {height: calc(100vh - 270px); overflow-y: auto;}
.modal {padding-left: 0px !important}

.typeahead__container * {box-sizing: border-box; outline: 0; border: 0;}
.typeahead__field {color: #FFFFFF !important;}
.typeahead__field input, .typeahead__field textarea {border-radius: 0px !important;}
.nobackground   {background: transparent; margin-top: -20px;}
.fixed-topx     {z-index: 9999;}

.modalbody-aatventure.darkbackground {background: #08090a !important; margin-top: 0px !important;}

.typeahead__container.hint .typeahead__query>:last-child, .typeahead__hint {background: #131418 !important;}

.typeahead__field .typeahead__hint, .typeahead__field [contenteditable],
.typeahead__field input, .typeahead__field textarea {
    background: #131418;
    border: 0px solid #2b2f39 !important;
}


.typeahead__field .typeahead__hint:active, .typeahead__field .typeahead__hint:focus,
.typeahead__field [contenteditable]:active, .typeahead__field [contenteditable]:focus,
.typeahead__field input:active, .typeahead__field input:focus, .typeahead__field textarea:active,
.typeahead__field textarea:focus {
    border-color: #66afe9 !important;
    box-shadow: none !important;
}

.typeahead__dropdown .typeahead__dropdown-item>a, .typeahead__list .typeahead__item>a {
    display: block; clear: both; text-decoration: none;
}

.typeahead__dropdown, .typeahead__list {
    background-color: #2b2f39 !important;
    border: 1px solid #2a2f39 !important;
}

.typeahead__list>.typeahead__group.active>a, .typeahead__list>.typeahead__group>a,
.typeahead__list>.typeahead__group>a:focus, .typeahead__list>.typeahead__group>a:hover {
    background: #1d2027 !important;
    color: #3484c3 !important;
}

.typeahead__list .typeahead__dropdown .typeahead__dropdown-item>a, .typeahead__list .typeahead__item>a {
    padding: 16px 0px !important;
    min-height: 560px
}

.typeahead__item {border: 0 !important;}

.typeahead__list>.typeahead__group {font-weight: 700;}
.typeahead__list>li {position: relative;}
.typeahead__list>li.typeahead__group+li.typeahead__item {border: none;}
.typeahead__list>.typeahead__group.active>a, .typeahead__list>.typeahead__group>a, .typeahead__list>.typeahead__group>a:focus, .typeahead__list>.typeahead__group>a:hover {display: block; padding: .5rem .75rem; clear: both; text-decoration: none; cursor: default;}
.typeahead__dropdown li:last-child {border-top: 1px solid #4d5568 !important;}
.typeahead__filter button {width: 210px;}
.typeahead__result .name {display: inline-block; margin: 0 10px 0px 104px; }
.typeahead__result .division {position: absolute; right: 10px; font-size: 12px; color: #777777; font-variant: small-caps;}

.typeahead__container .typeahead__field .typeahead__hint, .typeahead__container .typeahead__field .typeahead__label-container, .typeahead__container .typeahead__field [contenteditable], .typeahead__container .typeahead__field input, .typeahead__container .typeahead__field textarea {
    color: #FFFFFF;
}

.typeahead__dropdown, .typeahead__list {min-width: 210px;}

.typeahead__field .typeahead__hint, .typeahead__field [contenteditable], .typeahead__field input, .typeahead__field textarea {
    min-height: 50px !important;
}

.typeahead__container button {
    border: 0px solid #CCCCCC !important;
    height: 50px !important;
}

.typeahead__dropdown .typeahead__dropdown-item>a, .typeahead__list .typeahead__item>a {
    display: block;
    clear: both;
    text-decoration: none;
    overflow: hidden;
}

.typeaheadx-slagerij.typeahead__dropdown-item>a,
.typeaheadx-slagerij.typeahead__item>a {
    border-bottom: 1px solid #c33113 !important;
}

.typeahead__dropdown .typeahead__dropdown-item>a,
.typeahead__list .typeahead__item>a {
    border-bottom: 1px solid #294a88;
}

.typeahead__dropdown .typeahead__dropdown-item>a, .typeahead__list .typeahead__item>a {
    min-height: 50px
}

.typeahead__dropdown .typeahead__dropdown-item>a, .typeahead__list .typeahead__item>a {
    min-height: 100px
}

.typeahead__dropdown .typeahead__dropdown-item>a {
    background-color: #191E28 !important;
    border-bottom: 1px solid #3A4251 !important;
}

.typeahead__filter+.typeahead__button button {display: none;}

.typeahead__field .typeahead__hint, .typeahead__field [contenteditable], .typeahead__field input, .typeahead__field textarea {
    background: #131417 !important;
}

.typeahead__dropdown, .typeahead__list {margin: 0 !important; padding: 0 !important;}
.typeahead__query {position: relative; z-index: 2; width: 100%;}
.typeahead__item>a {color: #fbfbfb !important;}
.typeahead__cancel-button {  position: absolute; right: 0; user-select: none; cursor: pointer; line-height: 1.25; padding: .5rem .75rem; visibility: hidden;}

.modalbody-sushi .typeahead__dropdown-item>a            {min-height: 40px !important; border-bottom: 1px solid #000000 !important;}
.modalbody-sushi .typeahead__list .typeahead__item>a    {min-height: 40px !important; border-bottom: 1px solid #000000 !important;}
.modalbody-slagerij .typeahead__dropdown-item>a         {min-height: 40px !important; border-bottom: 1px solid #000000 !important;}
.modalbody-slagerij .typeahead__list .typeahead__item>a {min-height: 40px !important; border-bottom: 1px solid #000000 !important;}

.modalcontent-aatventure .typeahead__list                            {background-color: #0e131f !important;}
.modalcontent-aatventure .typeahead__list>.typeahead__group>a        {background: #1b2338 !important; color: #3484c3 !important;}
.modalcontent-aatventure .typeahead__list>.typeahead__group.active>a {background: #1b2338 !important; color: #3484c3 !important;}
.modalcontent-aatventure .typeahead__list>.typeahead__group>a:focus  {background: #1b2338 !important; color: #3484c3 !important;}
.modalcontent-aatventure .typeahead__list>.typeahead__group>a:hover  {background: #1b2338 !important; color: #3484c3 !important;}
.modalcontent-aatventure .typeahead__dropdown-item:hover             {background-color: #598aec !important; color: #FFFFFF !important;}

.miniitem {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 80px;
    background-color: #000000;
    padding: 2px 4px 0 10px;
    overflow: hidden;
}

.miniitem img {
    position: absolute;
    top: 0px;
    left: 0px;
    height: auto;
    min-height: 60px;
    width: 100%;
    object-fit: contain;
}

.useritemclass {
  width: 110px !important;
}

.userimgclass {
  height: 110px !important;
  width: auto !important;
}

.useromsclass {
  margin: 0 10px 0px 120px !important;
  width: 100%;
  font-weight: 700;
  font-size: 18px;
}

.usersubtitleclass {
  margin: 0 25px 0px 120px !important;
}

.blogomsclass {
  margin: 0 10px 0px 94px !important;
  font-weight: 700;
  font-size: 18px;
}

.blogsubtitleclass {
  margin: 0 18px 0px 94px !important;
}

@media screen and (min-width: 760px) {
  .miniitem          {width: 120px;}
  .blogomsclass      {margin: 0 10px 0px 140px !important;}
  .blogsubtitleclass {margin: 0 18px 0px 140px !important;}
}

.productsubtitleclass {display: none !important}

.searchfor-users .typeahead__group   {height: 36px !important;}
.searchfor-users .typeahead__list .typeahead__item>a {min-height: 110px !important;}

.typeahead__container {margin-top: 4px; background-color: #121317; border-top: 1px solid #1d5daa; border-bottom: 1px solid #1e5395;}

@media screen and (max-width: 760px) {
.typeahead__field .typeahead__hint, .typeahead__field input, .typeahead__field textarea {
    border: 0px solid #2b2f39 !important;
}
}

@media screen and (max-width:760px) {
  .modal          {top: 69px !important;}
  .modal-backdrop {top: 69px !important;}
  .modal-dialog   {margin: 0px !important;}
  .p-5            {padding: 0px !important;}
  .col-10         {flex: 0 0 100%; max-width: 100%;}
  .col-2          {display: none;}
  .modal-open .modal {height: 100vh; background-color: #000000;}
  .typeahead__field .typeahead__hint, .typeahead__field input, .typeahead__field textarea {border: 0px solid #2b2f39 !important;}
  .typeahead__field .typeahead__hint, .typeahead__field [contenteditable], .typeahead__field input, .typeahead__field textarea {
    background: #131418 !important;}
}

/* extras (todo) */
.typeahead__button, .typeahead__filter {display: none !important;}
.typeahead__dropdown, .typeahead__list {height: calc(100vh - 69px);}

.typeahead__container[type = number]::-webkit - inner - spin - button,
.typeahead__container[type = number]::-webkit - outer - spin - button {
    height: auto
}

/* ==========================================================================
   aatventure spinner
   ========================================================================== */

@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)};
}

.aatsspinnerreverse {
    margin-left: -48px;
    animation-name: spinlogoreverse;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* ==========================================================================
   loading spinner
   ========================================================================== */

.typeahead__container.cancel:not(.loading) .typeahead__cancel-button:hover,.typeahead__label .typeahead__cancel-button:hover{color:#d0021b}
.typeahead__container.loading .typeahead__query:after,.typeahead__container.loading .typeahead__query:before{transition:all 0s linear,opacity .2s ease;position:absolute;z-index:3;content:"";top:50%;right:.55em;margin-top:-.675rem;width:1.35rem;height:1.35rem;box-sizing:border-box;border-radius:500rem;border-style:solid;border-width:.1em}
.typeahead__container.loading .typeahead__query:before{border-color:rgba(0,0,0,.35)}.typeahead__container.loading .typeahead__query:after{animation:a .6s linear;animation-iteration-count:infinite;border-color:#fff transparent transparent;box-shadow:0 0 0 1px transparent}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

/* ==========================================================================
   jumbotron en jumbotronadmin
   ========================================================================== */

.loginbackground {background-color: #4c5e76; background-image: url("../../img/navicons/navback.png");}

.jumbotron {
    padding: 10px 10px 10px 10px;
    border-radius: 0rem;
    border-bottom: 1px solid rgba(0,0,0,.0975);
    background-color: #171A25 !important;
    color: #d9dbe2 !important;
    background-image: url("../../img/navicons/aatsgradientblue.jpg");
}

.jumbotronadmin {
    background-color: #171B22;
    background-color: #171A25;
    background-image: url("../../img/navicons/aatsgradientblue.jpg");
    color: #d9dbe2;
}

.jblightbackup {margin-top: 46px;}
.jblight       {margin-top: 68px; margin-bottom: 40px;}

@media (min-width: 576px) {
  .jumbotronadmin  {padding: 76px 1rem 6px 1rem; margin-bottom: 20px; border-radius: 0px;}
}

@media (max-width: 576px) {
.jumbotron {background-size: 100% 100%;}
.jumbotronadmin {padding: 1rem 1rem 1rem 1rem; margin-top: 58px; padding-bottom: 0px; margin-bottom: 2px;}
}

@media screen and (min-width: 1000px) {
  .jumbotronprofile   {padding: 140px 0px 10px 0px !important;
                       background-image: url(../../img/navicons/spacebackground5.jpg) !important; background-size: cover;}
  .profile-card-photo {position: absolute; right: 20px; margin-top: -60px; pointer-events: none;}
  .horizontalscroller {margin-top: -26px;}
  .profile-links-list {float: right; width: 870px !important; padding: 10px 0;}
  .profile-card-about {position: absolute; color: #ecf3ff; margin-top: -64px; margin-left: 20px; width: 50vw; font-weight: 300;}
}

@media (max-width: 576px) {
    .minitron   {margin-top: 64px  !important;  margin-bottom: 14px !important; padding: 6px 0px 0px 0px !important;}  /* login trbl */
    .display-4  {margin-top: 12px  ! important; margin-bottom: 14px !important; padding: 6px 0px 0px 0px !important;}  /* adminmenu = */
    .totheright {margin-left: 14px !important;}
}

@media (max-width: 600px) {
  .container     {padding-left: 0px; padding-right: 0px;}
  .containermax  {padding-left: 8px !important; padding-right: 8px !important;} /* for login */
  .minitron      {padding: 80px 10px 6px 0px;}
  .aatsloginform {margin-top:20px}
  .mobileedit    {padding-left: 10px !important; padding-right: 10px !important;}
}

/* ==========================================================================
   buttons
   ========================================================================== */

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

[type=button],[type=reset],[type=submit],button {-webkit-appearance: button}
[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled) {cursor: pointer}

.btn-block           {display: block; width: 100%;}
.btn-primary         {background-color: #007bff; border-color: #007bff; color: #FFFFFF; }
.btn-primary:hover   {background-color: #0069d9; border-color: #0062cc; color: #FFFFFF; }
.btn-secondary       {color: #FFFFFF;}
.btn-secondary:hover {color: #FFFFFF;}
.btn-success         {background-color: #0AB87D !important; border-color: #54C206 !important; color: #FFFFFF}
.btn-success:hover   {background-color: #0AB87D !important; border-color: #54C206 !important; color: #FFFFFF}
.btn-warning         {color: #212529; background-color: #ffc107; border-color: #ffc107}
.btn-warning:hover   {color: #212529; background-color: #e0a800; border-color: #d39e00}
.btn-danger          {background-color: #d9534f; border-color: #d43f3a; color: #FFFFFF;}
.btn-danger:hover    {background-color: #c82333; border-color: #bd2130; color: #FFFFFF;}
.btn-orange          {background-color: #FF4823; border-color: #FF4823; color: #FFFFFF}
.btn-info            {background-color: #2374CA; color: #FFFFFF; border-color: #2C75C3; cursor: pointer;}
.btn-info:hover      {background-color: #3485DB; border-color: #3D86D4; color: #FFFFFF;}
.defbtn-aatventure   {background: #181c22; border-color: #29303a !important; color: #FFFFFF !important;}

.btn-group, .btn-group-vertical {position: relative; display: inline-flex; vertical-align: middle;}
.btn-group-sm>.btn, .btn-sm     {padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem; margin-right:5px;}

.btn-arrow       {background-color: #111316; color: #FFFFFF; border-color: #1d2c3a; box-shadow: rgb(29, 44, 58) 0px 0px 70px inset; opacity: 0.6;}
.btn-arrow:hover {background-color:#1e2023; color:#FFFFFF; border-color:#585F72; opacity:1;}
.btn-arrow:focus {box-shadow:0 0 0 0.2rem rgba(134, 142, 150, 0.5);}

.btn-face svg {height: 18px; width: 18px; vertical-align: middle;}
.btn-twit svg {height: 18px; width: 18px; vertical-align: middle;}
.btn-aat svg  {height: 18px; width: 18px; vertical-align: middle;}
.btn svg *    {transition: fill 0.5s ease-out 0s;}

.like            {margin-top: 0px !important; background-color: #ef883c; cursor: pointer; border-radius:0;}
.btn-face        {display: block; background-color: #3b5998; fill: rgb(255, 255, 255); color: #FFFFFF !important; cursor: pointer; border-radius:0;}
.btn-twit        {display: block; background-color: #2ba9e1; fill: rgb(255, 255, 255); color: #FFFFFF !important; cursor: pointer; border-radius:0;}
.btn-aat         {display: block; background-color: #2FD64B; fill: rgb(255, 255, 255); color: #FFFFFF !important; cursor: pointer; border-radius:0;}
.ml-3 .heart     {margin-top: -10px !important; margin-left: 30%;}
.ml-3 .likeCount {margin-top: 3px !important; margin-left: 18px !important; color: #FFFFFF;}
.minibutton      {flex: 50 0 25%; max-width: 100%; text-align: right;}
.justright       {position: absolute; right: 20px;}

@media screen and (min-width: 760px) {
  .btn-primary, .btn-danger {min-width: 100px;}
}

@media screen and (max-width: 760px) {
  .minibutton {max-width: 100%;}
  .minadmin   {min-width: 80px !important;}
}

@media (max-width: 600px) {
  .mobilebutton {max-width: 44px !important; max-height: 44px !important; float: right; border-radius: 50% !important; margin-left: 10px;}
}

.btn-bigbuts {height: 40px; font-size: 18px; border-radius: 6px;}
.btn-clear   {background-image: -webkit-linear-gradient(top,#de2311,#de2311); border: 1px solid #FF0000; color: #FFFFFF;}
.btn-annuleren {background-image: -webkit-linear-gradient(top,#3ede11,#2bde11); border: 1px solid #3dff00; color: #FFFFFF;}

/* ==========================================================================
   menu options (status)  and popup
   ========================================================================== */

#optpopup {display: none; position: fixed; top: 70px; left: 0; bottom: 0; right: 0;
           background-color: rgb(16,18,23); z-index: 999999; text-align: left; font-family: "rajdhani";}
.popup__content     {max-width: 93%; margin: 0 auto; background-color: rgba(0,0,0,0.3); color: white;
                     margin-top: 20px; line-height: 18px; -webkit-font-smoothing: auto;}
.popup__contents    {padding: 5px; box-shadow: 0px 0px 10px #000000;}
.popup__inner       {padding: 8px;}
.popup__inner--hide {display: none;}
.popup__close       {display: block; padding: 1rem; text-align: right; width: 100%; border: 0; background: transparent; outline: none;}

.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;
}

.statusoverlay {
    position: absolute;
    bottom: 100px;
    right: 10px;
    text-align: right;
    font-family: "Roboto Black";
    background-color: rgba(255,255,255,0.7);
    border: 2px solid #141621;
    color: #ff0000;
    padding: 10px;
    border-radius: 4px;
    font-size: 18px;
}

.status-github {
    background-color: #294255;
    background-image: url("../../img/interface/nr1small.png");
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-position: 50% 30%;
    border: 5px solid #ffbe0c;
    box-shadow: 0px 0px 5px 2px #f9c22e;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    color: transparent;
    opacity: 0.95;
    top: 45px;
    right: 20px;
}

.optbtn {
    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%;}
#btn-clock .btn__icon       {margin-top: 0px;}
#btn-userinfo .btn__icon    {margin-top: -19px; height: 23%; overflow: visible;}
#btn-browserinfo .btn__icon {margin-top: -8px;}
#btn-map .btn__icon         {margin-top: -19px; margin-left: -8px; overflow: visible;}

canvas {
    position: absolute;
    width: 100vw;
    top: 140px;
    padding: 40px;
}

#myclock  {position:absolute; top:0px; left:0px; width:100vw; height:100vh; z-index:100; background-position: center 0px; height:95vh; text-align: center;
					 background-image: url("../../img/landing/clockoptionsbackground2020.jpg"); background-repeat: no-repeat; background-size:100% 800px;}

.max25        {max-width: 23% !important;}
.stathdr      {font-family: "Rajdhani Regular"; font-size: 22px; line-height: 24px; text-align: right;}
.statxt       {font-family: "Rajdhani Regular"; font-size: 20px; line-height: 22px;}
.thinblueline {width: 100%; height: 1px; margin-top: 10px; margin-bottom: 10px; background-color: #417BAE;}

#slogan {position: relative; right: -200px; bottom: -20px; z-index: 99;}
.autograph {font-family: "Autograph"; font-variant: small-caps; font-size: 44px; letter-spacing: -2px;
            color: rgb(117, 177, 255); text-shadow: 0 -1px 4px #0d26c5, 0 -2px 10px #0a5fdc, 0 -10px 20px #203f65, 0 -18px 40px #126bda;}

.bluebutton {display: block; height: 60px; width: 100%; color: #FFFFFF; text-align: center; font: bold 16px "Muli Light";
             border-radius: 4px; cursor: pointer; margin-bottom: 10px; border: 1px solid #3C8DE9; background-color: #3C8DE9;}

.alright {font-family: "Rajdhani Regular"; float: right; text-transform: uppercase;}

.optbtn  {z-index: 9999}
@media (min-height: 840px) {#slogan {bottom: -84px;}}
@media (max-height: 670px) {#slogan {display: none}}
@media (max-height: 670px) {.popup__contents {padding: 0px !important;}}

/* ==========================================================================
   messenger
   ========================================================================== */

.haalermaarwataf {margin-top:-30px !important}

.media {
    display: inline-block;
    background-color: #111318;
    color: #FFFFFF;
    min-height: 70px;
    padding: .75rem 1.25rem;
    width: 100%;
    border-bottom: 1px solid #242831;
    cursor: pointer;
    overflow: hidden;
    font-family: "Helvetica Neue";
}

.media-body {
    width: 100%;
    color: #FFFFFF;
    padding: 10px;
}

.media-headingmes {
    font-family: "Helvetica Neue";
    font-size: 16px;
    color: #b9ff7b;
}

.media-bodytextmes {
    font-size: 16px;
    margin-top: 20px;
}

.media-linktext {
    width: 100%;
    color: #FFFFFF;
    font-size: 17px;
    padding-right: 90px;
    font-weight: 400;
}

.media-owner {
    width: 100%;
    color: #b9ff7b;
    color: #b9ff7b;
}

.media-timeagox {
    float: right;
    font-size: 14px;
    opacity: 0.5;
    padding-top: 3px;
    padding-right: 10px;
}

.media-participants {
    display: none;
}

.media-participants {
    position: absolute;
    bottom: 10px;
    width: 100%;
    margin-top: 20px;
}

.participantstext {
    opacity: 0.5;
    padding-right: 40px;
}

.whavatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    float: left;
    margin-right: 20px;
}

.latestpostdate {
    font-size: 12px;
    color: #7b8a90;
    float: right;
    margin-top: -20px;
    font-weight: 200;
}

.unreadcountfp {
    display: none;
    font-size: 12px;
    color: #798184;
    float: right;
}

@media screen and (min-width: 768px) {
  .media {margin-bottom: 6px; border: 1px solid #262b33;}
}

.flexcolumn-mes {
    flex: 25%;
    padding: 20px;
}

.media-messages {
    background-color: #171a21;
    color: #FFFFFF;
    padding: 6px;
    min-height: 0px !important;
    border: 0px solid #000000;
    margin-top: 2px;
    margin-bottom: -6px;
}

.msgavatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.ava2 {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 20px;
    border-radius: 50%;
}

.messagetextarea {
    margin-top: 8px;
    background-color: #161920 !important;
    border: 1px solid #b5fc7a !important;
}

.messagesendbutton {
    background-color: #b5fc7a !important;
    margin-bottom: 10px;
    color: #000000 !important;
    text-transform: uppercase;
}

.deelnemers {
    color: #FFFFFF;
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.uitnodigen {
    color: #FFFFFF;
    text-align: center;
    font-size: 20px;
    margin-top: 6px;
    margin-bottom: 10px;
}

.listparticipants {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    color: #FFFFFF;
    margin-bottom: 6px;
    background-color: #15181f !important;
    border: 1px solid rgb(105, 105, 105);
    border-radius: 6px;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 2.5;
}

.media-heading {
    color: #FFFFFF;
    width: 100%;
}

.threadcenter .media-heading {display: inline-block; color: #b5fc7a; margin-left: 10px; width: auto !important;}

.media-body p {font-size: 16px;}

.deelnemersdiv {display: none !important}

/* ==========================================================================
   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;
}

/* ==========================================================================
   modal
   ========================================================================== */

.modal.fade .modal-dialog {transition: transform .3s ease-out,-webkit-transform .3s ease-out;}
.fade.show                {background-color: rgb(12, 14, 17);}
.modal-slagerij.fade.show {background-color: rgb(56 9 8);}
.tab-content .fade.show   {background: rgb(12, 14, 17) !important;}
.searchbg-aatventure      {background-color: rgba(10,10,20,0.9); background-image: url(../../img/backgrounds/scicobg.jpg); background-size: cover;}
.modal-backdrop           {position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.3);}

.modal        {display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
               width: 100%; height: 100%; z-index: 9999999 !important; -webkit-overflow-scrolling: touch; outline: 0; color: #51586A;}
.modal-dialog {margin-left: auto; margin-right: auto;}
.modal-body   {position: relative; flex: 1 1 auto; padding: 15px; background-color: #3D4F61; color: #FFFFFF !important;}

.modal-content {display: flex; flex-direction: column; width: 100%; min-height: 90vh; font-family: "Roboto Light"; outline: 0;
                overflow-x: hidden; overflow-y: auto !important; border: 1px solid rgba(0,0,0,0.2); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
                border:0 !important; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch;}

.modal-contentx  {position: relative; border-radius: 8px; background-color: #161F28;}
.modal-maxheight {height: calc(100vh - 60px) !important; min-height: 540px !important;}

.modal-header {
    display: flex; /* was ? */
    height: 50px;  /* was 60px */
    padding: 22px;
    background-color: #5B6E7E;
    border-bottom: 1px solid #000000;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.modal-title {
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1.42857143;
    margin: 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.modal-title {
    text-align: left;
    padding-left: 10px;
    width: 100%;
    margin-top: -9px;
    font-family: "Myriad Regular" !important;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
}

.close {float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #FFFFFF; text-shadow: 0 1px 0 #fff; opacity: .5;}
button.close {padding: 0; background-color: transparent; border: 0; appearance: none;}
.modal-header .close {padding: 1rem 1rem; margin: -1rem -1rem -1rem auto;}

.dynamic-aatventure .modal-content {margin-left: 0px; margin-right: 0px; background-color: #3d4e60; min-height: 300px !important}
.dynamic-aatventure .modal-header  {background-color: #1d2f3f; border-bottom: 1px solid #000000; padding: 15px; border-radius: 6px 6px 0px 0px;}
.dynamic-aatventure .close         {color: #FFFFFF; padding-top: 12px;}

.custom-control-input {position: relative; width: 1rem; height: 1.25rem; z-index: 999 !important; opacity: 1 !important;
                       -webkit-appearance: checkbox !important; vertical-align: middle;}

.modal-footer {
    padding: 15px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: right;
    background-color: #2C3E50;
    background-color: #2A2D3A;
    color: #FFFFFF;
    border-top: 0;
}

.modal-footerfix   {margin-bottom: -50px;}
.modal-open .modal {overflow-x: hidden; overflow-y: auto;}
.only2buts         {min-width: 100px; float: right !important; margin-right: 10px;}
.modassgroupheader {height: 56px; height: 60px !important;}
.modwisbestelling  {height: 136px; overflow-y: hidden;}
.modal-remark      {background-color: #ff2a05; padding: 15px; text-align: center; color: #FFFFFF; margin-bottom: 16px; font-weight: 700;}

/* mobile */
@media (max-width: 768px)  {.modal-content {border-radius: 0 !important;}}
@media (max-width: 600px)  {.modal-dialog  {position: absolute; width: 100%;}}
/* pc laptop bigscreen */
@media (min-width: 576px)  {.modal-dialog {margin-top: 50px !important;}}
@media (min-width: 768px)  {.modal-dialog {max-width: 600px; margin: 30px auto;}}
@media (min-width: 1024px) {
.modal-dialog                 {max-width: 800px; margin: 30px auto;}
.modal-sushi .modal-dialog    {max-width: 600px !important;}
.modal-slagerij .modal-dialog {max-width: 600px !important;}
}

/* bezorgen of afhalen */
.w50l {width: 45%; height: 62px; float: left; text-align: left;}
.w50r {width: 45%; height: 62px; float: right; text-align: left;}
.w50l input {display:none;}
.w50r input {display:none;}
label.css-label {background-image: url(../../img/interface/csscheckbox.png);}
input[type=checkbox].css-checkbox + label.css-label {padding-left: 60px; height: 50px; display: inline-block;
    line-height: 50px; background-repeat: no-repeat; background-position: 0 0; font-size: 15px; vertical-align: middle; cursor: pointer;}
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -50px;}

.modalbody-aatventure {overflow-y: visible !important;}
.modalbody-aatventure::-webkit-scrollbar {width: 0px !important}
.modalbody-aatventure .form-control {background-color: #111b27 !important; color: #FFFFFF !important;} /* search input */

.modal .form-group {text-align: left;}

/* ==========================================================================
   loginform
   ========================================================================== */

.aatsloginform {margin-left: auto; margin-right: auto; max-width: 400px; border-radius: 8px; margin-top: 50px;
                background-color: #252b35; padding: 20px; border: 1px solid #2e3542; padding-bottom: 20px; overflow: visible;
                box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}

.form-group                   {margin-bottom: 10px;}
.form-horizontal .form-group  {margin-left: -15px; margin-right: -15px;} /* gaat niet overal goed: loginform */
.editormargin                 {padding-left: 10px !important; padding-right: 10px}
.editormargin .col-form-label {padding-top: 4px !important;}
#aatsloginform .form-group    {text-align: left !important; margin-left: 0px !important; margin-right: 0px !important;}
.checkbox label, .radio label {width: 100%;}
.fullwidth                    {width: 100%;}
.reglink                      {float: right; padding-right: 10px; color: #85b8fd; text-transform: lowercase;}
.aatsloginform .btn-primary   {width: 100%;}
@media (max-width: 768px)     {.aatsloginform  {margin-top:10px !important;}}
@media (min-width: 768px)     {.col-form-label {margin-bottom: 0; padding-top: 0px !important;}}
.uploadimage                  {width: 100px; height: 100px; float: left;}
#previewimage                 {float: right; width: 150px; height: 150px; border-radius: 50%; margin-top: 30px;}
#previewimage img             {width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-left: 50px}

/* ==========================================================================
   popupcontainer (weet niet precies meer waarom)
   ========================================================================== */

#popupcontainer {display: none; position: fixed; top: 58px; left: 0px; bottom: 0px; width: 100vw; height: 100vh; background: rgba(44, 47, 57, 0.8); z-index: 9999;}

/* ==========================================================================
   pickmeup 19-04-2020
   ========================================================================== */

.dpx      {top: 15px;background-color: #6E454A;}
.pickmeup {position: relative; touch-action: manipulation; width: 100%; margin-top: -8px; margin-bottom: -10px; margin-left: -5px; font-family: "Roboto Light"}
.pmu-instance                      {display: block; height: 13.8em; padding: .5em; text-align: center; width: 15em}
.pmu-hidden                        {display: none}
.pmu-instance nav                  {display: flex; background-color: #6d4549; color: #eee; height: 24px; line-height: 24px;}
.pmu-instance nav .pmu-month       {width: 100%; font-size: 9px; text-align: center;}
.pmu-instance nav *:first-child:hover {color: #88c5eb}
.pmu-instance .pmu-day-of-week *   {width: 100% !important; background-color: #290e04; line-height: 2.3em !important; font-size: 8px;}
.pmu-instance:first-child .pmu-prev,
.pmu-instance:last-child .pmu-next {display: block; margin-left: 10px; margin-right: 10px;}
.pmu-instance .pmu-days *          {border-left: 1px solid #4e2227; border-top: 1px solid #4e2227;}
.pmu-instance .pmu-days:last-child {border-bottom: 1px solid #4e2227;}
.pmu-instance .pmu-sunday          {border-right: 1px solid #4e2227;}
.pmu-instance .pmu-selected        {background: #136a9f; color: #eee}
.pmu-instance .pmu-day-of-week     {height: 18px; cursor: default;}
.pmu-instance .pmu-days *          {display: inline-block; line-height: 1.8em; width: 32px !important; font-size: 12px; padding: 2px;}
.pmu-instance .pmu-button {color: #eee; cursor: pointer; outline: none; text-decoration: none;}
.pmu-instance .pmu-today  {background: #842433 !important; color: #FFFFFF !important; border-radius: 50% 0%; opacity: 1 !important;}
.pmu-instance .pmu-button:hover {}
.pmu-instance .pmu-not-in-month {color: #7f555a;}
.pmu-instance .pmu-disabled,
.pmu-instance .pmu-disabled:hover {color: #80565b; cursor: default}
.pmu-instance .pmu-selected {border-radius: 50% 0%;}
.pmu-instance .pmu-years *,
.pmu-instance .pmu-months * {display: inline-block; line-height: 3.6em; width: 3.5em}

.pmu-instance:first-child .pmu-prev,
.pmu-instance:last-child .pmu-next {display: block;}

.pickmeup:not(.pmu-view-days) .pmu-days,
.pickmeup:not(.pmu-view-days) .pmu-day-of-week,
.pickmeup:not(.pmu-view-months) .pmu-months,
.pickmeup:not(.pmu-view-years) .pmu-years {display: none}
.pickmeup .pmu-instance .pmu-not-in-month.pmu-selected {background: #462a30;}

.pickmeup {transform-origin: 0 0;     transform: scale(1.585); margin-bottom: 340px; margin-left: -6px;}  /* PC/Laptop/iPad */
@media (max-width: 540px) {.pickmeup {transform: scale(1.5);   margin-bottom: 280px; margin-left: -6px;}} /* Surface Duo */
@media (max-width: 420px) {.pickmeup {transform: scale(1.3);   margin-bottom: 150px; margin-left: -5px;}} /* Galaxy S9+ */
@media (max-width: 414px) {.pickmeup {transform: scale(1.3);   margin-bottom: 150px; margin-left: -4px;}} /* iPhone 6/7/8+ */
@media (max-width: 380px) {.pickmeup {transform: scale(1.24);  margin-bottom: 120px; margin-left: -5px;}} /* iPhone X */
@media (max-width: 375px) {.pickmeup {transform: scale(1.23);  margin-bottom: 120px; margin-left: -4px;}} /* iPhone 6/7/8 */
@media (max-width: 360px) {.pickmeup {transform: scale(1.21);  margin-bottom: 120px; margin-left: -4px;}} /* moto G4 */
@media (max-width: 320px) {.pickmeup {transform: scale(1.13);  margin-bottom: 60px;  margin-left: -4px;}} /* iPhone 5 */
@media (max-width: 280px) {.pickmeup {transform: scale(1.05);  margin-bottom: 20px;  margin-left: -4px;}} /* Galaxy Fold */

/* ==========================================================================
   pagination
   ========================================================================== */

.pagination {display: flex; padding-left: 0; list-style: none; border-radius: .25rem}
.pagination {position: relative !important; margin-left: 0px; margin-bottom: 40px; overflow-y: scroll;}

.page-link {position: relative; display: block; padding: .5rem .75rem; margin-left: -1px;}
.page-link {width: 50px; height: 50px; line-height: 2; text-align: center;}
.page-link:hover {z-index: 2; text-decoration: none;}
.page-link:focus {z-index: 3;outline: 0; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25)}

.page-item:first-child .page-link {margin-left: 0; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem}
.page-item:last-child .page-link {border-top-right-radius: .25rem; border-bottom-right-radius: .25rem}
.page-item.active .page-link {z-index: 3;}
.page-item.disabled .page-link {pointer-events: none; cursor: auto;}

.mr-3,.mx-3 {margin-right: 1rem }
.text-white {color: #fff!important}
.text-muted {color: #FFFFFF !important; opacity: 0.6;}

@media (min-width: 768px) {
   .d-md-none         {display:none!important}
   .d-md-inline       {display: inline!important}
   .d-md-inline-block {display: inline-block!important}
   .d-md-block        {display: block!important}
}

.embed-responsive {position: relative; display: block; width: 100%; padding: 0; overflow: hidden}
.embed-responsive::before {display: block; content: ""}
.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.embed-responsive-21by9::before {padding-top: 42.857143%}
.embed-responsive-16by9::before {padding-top: 56.25%}
.embed-responsive-4by3::before  {padding-top: 75%}
.embed-responsive-1by1::before  {padding-top: 100%}

.align-items-center {align-items: center!important}

/* Internet explorer fix */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .card {display: block;}
}

/* ==========================================================================
   checkboxes
   ========================================================================== */

.control {
    font-family: arial;
    display: block;
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
    padding-top: 0px;
    cursor: pointer;
    font-size: 18px;
}

.control input {
   position: absolute;
   z-index: -1;
   opacity: 0;
}

.control_indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 30px;
    width: 30px;
    background: #0a0c0e;
    border: 1px solid #5a6884;
    border-radius: 50%;
}

.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #5493d6;
}

.control input:checked ~ .control_indicator {
    background: #2374ca;
}

.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: #2374ca;
}

.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}

.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control_indicator:after {
    display: block;
}

.control-checkbox .control_indicator:after {
    left: 8px;
    top: 6px;
    width: 10px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #7b7b7b;
}

.control-checkbox .control_indicator::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 4.5rem;
    height: 4.5rem;
    margin-left: -1.3rem;
    margin-top: -1.3rem;
    background: #2aa1c0;
    border-radius: 3rem;
    opacity: 0.6;
    z-index: 99999;
    transform: scale(0);
}

/* ==========================================================================
   tooltips
   ========================================================================== */

.tooltip {
    position: absolute;
    z-index: 99999;
    display: block;
    margin: 0;
    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Helvetica Neue",
    "Arial",
    "Noto Sans",
    "sans-serif",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    opacity: 0
}

.tooltip.show           {opacity: 0.9}
.tooltip .arrow         {position: absolute; display: block; width: .8rem; height: .4rem}
.tooltip .arrow::before {position: absolute; content: ""; border-color: transparent; border-style: solid}
.tooltip-inner          {max-width: 200px; padding: .25rem .5rem; color: #fff; text-align: center; background-color: #000; border-radius: .25rem}
.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom {padding: .4rem 0}
.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow {top: 0}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before {bottom: 0; border-width: 0 .4rem .4rem; border-bottom-color: #000000}

/* ==========================================================================
   simple keyboard
   ========================================================================== */

.simple-keyboard {position: fixed; width: 100vw; bottom: 0px; background: #0b0d10; overflow: hidden; z-index: 9999; opacity: 0;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial";
    max-width: 1000px; margin: 0 auto; user-select: none; box-sizing: border-box; overflow: hidden; touch-action: manipulation}

.simple-keyboard input {width: 100%; height: 100px; padding: 20px; font-size: 20px; border: none;
                        box-sizing: border-box; background-color: #11191e; color: #FFFFFF;}

.simple-keyboard .hg-row {display: flex}
.simple-keyboard .hg-row:not(:last-child) {margin-bottom: 5px}
.simple-keyboard .hg-row .hg-button:not(:last-child) {margin-right: 5px}
.simple-keyboard .hg-button {display: inline-block; flex-grow: 1; cursor: pointer}
.hg-standardBtn {max-width: 100vw}
.simple-keyboard.hg-theme-default {background-color: #21262f; padding: 5px; border-radius: 5px}

.simple-keyboard.hg-theme-default .hg-button {display: flex; box-shadow: 0 0 3px -1px rgba(0,0,0,.3); height: 54px; min-width: 20px;
    border-radius: 5px; box-sizing: border-box; padding: 5px; background: #13191e; color: #FFFFFF; border-bottom: 1px solid #164077;
    align-items: center; justify-content: center; font-size: 20px; cursor: pointer;}

.simple-keyboard button.hg-button {border-width: 0; outline: 0; font-size: inherit}
.simple-keyboard.hg-theme-default .simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
    width: 33.3%; height: 60px; align-items: center; display: flex; justify-content: center
}
.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,
.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {height: 85px}
.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {width: 105px}
.simple-keyboard.hg-theme-default .hg-button.hg-button-com {max-width: 85px}
.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {max-width: 45px}
.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {background: rgba(5, 25, 70, .53); color: #fff}
.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {max-width: 82px}
.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {max-width: 60px}

.simple-keyboard .hg-button.hg-functionBtn.hg-button-space {min-width: 150px; min-width: 26px !important; max-width: none;}
.simple-keyboard.hg-theme-default .hg-button[data-skbtnuid^="numbers-"] {width: 33%; max-width: none;}
.simple-keyboard .hg-button-numbers {max-width: 80px;}
.simple-keyboard .hg-button.hg-functionBtn.hg-button-ent {max-width: 80px;}

.simple-keyboard.myTheme1 {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.simple-keyboard.myTheme1 .hg-button {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

.simple-keyboard.myTheme1 .hg-button:active {background: #1c4995; color: white;}

#root .simple-keyboard.myTheme1 + .simple-keyboard-preview {background: #1c4995;}

.simple-keyboard.hg-theme-default .hg-button:active {background: #1b98ff;}

@media screen and (max-width: 600px) {
.modal {height: 100vh}
.typeahead__result {
    position: fixed;
    top: 122px;
    width: 100vw;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 306px);
}
}

/* ==========================================================================
  timepicker
  ========================================================================== */

#timepicker {
  margin-top:10px
}

.ui-timepicker-wrapper {
    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #16171d !important;
    color: #FFFFFF !important;
    border: 1px solid #000000 !important;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    outline: none;
    z-index: 9999999999 !important;
    margin: 0;
    text-align: center;
}

.ui-timepicker-list li {
    padding: 3px 0 3px 5px;
    cursor: pointer;
    white-space: nowrap;
    color: #FFFFFF !important;
    list-style: none;
    margin: 0;
    font-size: 22px;
    line-height: 26px;
    background-color: #17161D;
    border-bottom: 1px solid #282a33;
}

.ui-timepicker-list:hover .ui-timepicker-selected {background: transparent;}
.ui-timepicker-wrapper {max-height: 300px !important;}
@media (min-width: 600px) {.ui-timepicker-wrapper {width: 568px !important; margin-left:0px !important}}

/* ipad */
@media screen and (max-width: 1025px) {.ui-timepicker-wrapper {width: 466px !important}}
/* phones under 444 px width */
@media screen and (max-width: 767px) {.ui-timepicker-wrapper {width: calc(100vw - 34px) !important}}
/* ipad portrait */
@media screen and (width: 768px) and (orientation : portrait) {
  .modal-dialog {margin-top: 100px !important;}
}

/* ==========================================================================
   zoom hover transition
   ========================================================================== */

@media (min-width: 700px)  {
  .card              {transition: transform .5s; border-radius:6px; }
  .card:hover        {transform: scale(1.01); filter: brightness(1.1);}
  .bofx:hover        {outline: 1px solid #444444; outline-offset: -1px;}
  .donthover         {transform: none !important; filter: none !important;}
  .donthover:hover   {transform: none !important; filter: none !important;}
  .note-editor:hover {transform: none !important; filter: none !important;}
}

/* ==========================================================================
   preloader
   ========================================================================== */

.loadwrap   {position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);}
.loadtxt    {color: #fbae17; display: inline-block; margin-left: 5px;}
.bounceball {position: relative; display: inline-block; height: 37px; width: 15px;}

.bounceball:before {
  position: absolute; content: ""; display: block; top: 0; width: 15px; height: 15px; border-radius: 50%;
  background-color: #fbae17; transform-origin: 50%; animation: bounce 500ms alternate infinite ease;}

@keyframes bounce {
  0%  {top: 30px; height: 5px; border-radius: 60px 60px 20px 20px; transform: scaleX(2);}
  35% {height: 15px; border-radius: 50%; transform: scaleX(1);}
  100% {top: 0;}
}

/* ==========================================================================
   keyframe transitions
   ========================================================================== */

@keyframes redglow {0%{border-color:#FF6666; box-shadow:0 0 5px rgba(255,0,0,.2), inset 0 0 5px rgba(255,0,0,.1), 0 2px 0 #000;}100%{border-color:#FF6666; box-shadow:0 0 20px rgba(255,0,0,.6), inset 0 0 10px rgba(255,0,0,.4), 0 2px 0 #000;}}

@keyframes greenglow {0%{border-color:#339933; box-shadow:0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;}100%{border-color:#66FF66; box-shadow:0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;}}

@keyframes blueglow {0%{border-color:#3344FF; box-shadow:0 0 5px rgba(0,0,255,.2), inset 0 0 5px rgba(0,0,255,.1), 0 2px 0 #000;}100%{border-color:#3344FF; box-shadow:0 0 20px rgba(0,0,255,.6), inset 0 0 10px rgba(0,0,255,.4), 0 2px 0 #000;}}

@keyframes yellowglow {0%{border-color:#FFFF66; box-shadow:0 0 5px rgba(255,255,0,.2), inset 0 0 5px rgba(255,255,0,.1), 0 2px 0 #000;}100%{border-color:#FFFF66; box-shadow:0 0 20px rgba(255,255,0,.6), inset 0 0 10px rgba(255,255,0,.4), 0 2px 0 #000;}}

@keyframes oldglow {0%{border-color:#FFDD88; box-shadow:0 0 5px rgba(255,200,0,.2), inset 0 0 5px rgba(255,200,0,.1), 0 2px 0 #000;}100%{border-color:#FFDD88; box-shadow:0 0 20px rgba(255,200,0,.6), inset 0 0 10px rgba(255,200,0,.4), 0 2px 0 #000;}}

@keyframes whiteglow {0%{box-shadow:0 0 5px rgba(200,200,200,.2), inset 0 0 5px rgba(200,200,200,.1), 0 2px 0 #000;}100%{box-shadow:0 0 20px rgba(200,200,200,.6), inset 0 0 10px rgba(200,200,200,.4), 0 2px 0 #000;}}

.yeardiv:hover   {filter: brightness(1.50); animation: oldglow 800ms ease-out infinite alternate;}
.btn-arrow:hover {animation: blueglow 800ms ease-out infinite alternate;}

/* ==========================================================================
   rotating circle
   ========================================================================== */

.loading {text-align: center;}

.rotating::before {
	width: 100%;
	height: 100%;
	content: " ";
	border-radius: 50%;
	box-shadow: 0 0 20px 12px rgba(13, 81, 156, 0.35);
	position: absolute;
  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;}

@media (min-width: 1024px) {.rotating {top: -60px; right: 19px; z-index:99}}

.rotating::after {
	width: calc(40vh - 6px);
	height: calc(40vh - 6px);
	background-color: currentColor;
	content: " ";
	position: absolute;
	top: 3px;
	left: 3px;
	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); }
}

/* ==========================================================================
   kenburns effect
   ========================================================================== */

#KenBurns {position: relative; margin-top: 40px; background: transparent; display: flex; align-items: flex-end;
           height: 100%; overflow: hidden; height: 220px; margin-bottom: -150px;}

#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;}
}

.hideoverflow {position: relative; top: 0px; width: 100vw; height: 220px; margin-top: -24px; overflow: hidden;
               background: #090B14; background-image: url("../../img/backgrounds/fx4.jpg");
               background-repeat: no-repeat; background-size: cover;}
.blackoverlay {position: relative; width: 100vw; height: 2px; z-index:2; background-color: #090B14;}
.margintop-80 {margin-top: -110px}
.barbatruuk   {margin-top: -8px; padding-top:10px;}

@media (max-width: 600px) {
  .hideoverflow       {position: relative; height: 304px; top: 0px;}
  .margintop-80       {margin-top: -220px;}
  .profile-card-about {color: #95a2bd !important;}
  .norow              {margin-left:22px !important; margin-right:0 !important}
  #KenBurns           {height: 350px !important; margin-top: -40px !important; margin-left: -280px;}
  #KenBurns img       {transform: scale(1.35) rotate(13deg) !important;}
}

.bluesky {background: linear-gradient(to bottom, rgb(115, 167, 224) 0%, rgb(59, 136, 224) 30%, rgb(107, 163, 220) 89%, rgb(161, 197, 229) 98%, rgb(147, 190, 235) 100%);}

/* ==========================================================================
   css newsticker
   ========================================================================== */

.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);}
}

/* ==========================================================================
   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");}
}

/* ==========================================================================
   heartblast
   ========================================================================== */

.heart {
    background: url(../images/heart.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 50px;
    width: 50px;
    cursor: pointer;
    position: absolute;
    left: 0px;
    background-size: 1450px;
    left: 5px !important;
    top: 0px !important;
}

.heartguest {
  background: url(../images/heart.png);
  background-position: left;
  background-repeat: no-repeat;
  height: 50px;
  width: 50px;
  cursor: pointer;
  position: absolute;
  left:0px;
  background-size:1450px;
  left: 5px !important;
  top: 0px !important;
}

.heart:hover {background-position: right;}
.heartliked  {background-position: right;}

@-webkit-keyframes heartBlast {
  0% {background-position: left;}
  100% {background-position: right;}
}

@keyframes heartBlast {
  0% {background-position: left;}
  100% {background-position: right;}
}

.heartAnimation {
  animation-name: heartBlast;
  animation-duration: .8s;
  animation-iteration-count: 1;
  animation-timing-function: steps(28);
  background-position: right;
}

/* ==========================================================================
   basic theming
   ========================================================================== */

.dashboardbg-aatventure       {background-color: #0e1b29; background: url(../img/dashboard/bluedash2022.jpg) no-repeat; background-size: cover;}
.flexitem-aatventure          {background-color: #334863;}
.flexitem-aatventure:hover    {background-color: #526986; opacity: 0.9;}

.assgroepbg-sushi             {background-image: url(../img/banners/sushisenseibanner2.png);}
.sidebarbgcolor-sushi         {background-color: #000000;}
.sidebarlogo-sushisensei      {background-image: url(../img/sidebarlogos/sushisensei14.png);}
.sidebarheadertextcolor-sushi {color: rgb(233, 198, 58);}
.taglist-sushi                {background-color: #BB0000 !important; border: 1px solid #000000;}
.taglist-sushi:hover          {background-color: #FF0000 !important; border: 1px solid #ffd335;}
.td-sushi li                  {border-bottom: 1px solid #AA0000}
.td-sushi li:hover            {background-color: #333333;}
.autograph-sushi              {color: rgb(249, 246, 238); text-shadow: 0 -1px 4px #f7edc9, 0 -2px 10px #1f0000, 0 -10px 20px #a22e2e, 0 -18px 40px #1e0000;}
.card-producttitle-sushi      {background-color: #2D2D2D;}

/* ==========================================================================
   slagerij productedits
   ========================================================================== */

.productsbody-slagerij               {background-color: rgb(63,1,7) !important;}
.fullcard-slagerij                   {min-height: 150px !important; transition-property: none !important; transform: none !important; animation: none !important;}
.fullcard-slagerij .bigproducttext   {position: absolute; top: 10%; text-align: left; font-size: 23px; line-height: 44px; padding: 0px 0px 0px 20px;}
.fullcard-slagerij .infopopup        {position: absolute; display: inline !important; bottom: -35px;}
.fullcard-slagerij .inhoud           {position: absolute; display: inline-block; left: 1.25rem; bottom: -33px; left: 50px; opacity: 0.5; z-index: 3; color: #FFFFFF;}
.fullcard-slagerij .addtobasket      {display: inline; bottom: -30px !important; right: 12px;}
.fullcard-slagerij .addtenhandle     {bottom: -30px; right: 67px;}
.fullcard-slagerijx .substracthandle {position: absolute; bottom: 5px !important; right: 120px !important; width: 44px; height: 44px;}

/* ==========================================================================
   alleen voor verstappen en slagerij van hoorenbeeck => show weightinputs
   ========================================================================== */

.body-slagerij-verstappen .xaantal {
      right: 11px; width: 100px; height: 32px; bottom: 30px; line-height: 50px; border-radius: 6px;
      background-color: #5a1309 !important; border: 1px solid #ff7200 !important;}

.body-slagerij-van-hoorenbeeck .xaantal {
      right: 11px; width: 100px; height: 32px; bottom: 30px; line-height: 50px; border-radius: 6px;
      background-color: #5a1309 !important; border: 1px solid #ff7200 !important;}


.smallproducttitle {font-size:24px !important}