/* ========================================================================== AATVENTURE BLOG - 07-01-2025 ========================================================================== */ :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; --breakpoint-xxl: 1400px; --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; touch-action: manipulation; /* no doubletouch zoom */ -webkit-text-size-adjust: 100%; backface-visibility: hidden; overscroll-behavior-y: contain; /* disable pull to refresh */ } html * { -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; margin: 0px; padding: 0px; border: 0px; } body { width: 100vw; width: 100svw; height: 100vh; height: 100svh; 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; overflow-x:hidden !important; overscroll-behavior-y: contain; /* disable pull to refresh */ -webkit-overflow-scrolling: touch; background-color: #090A0F; color: #FFFFFF; } .ql-editor.ql-blank:before {color: #BBBBBB !important;} .center {text-align: center !important;} .horizontalcontent .nav-link {width:100px; padding-left:0px !important;} @media (min-width: 1678px) { .c_aatventure-progressive-web-apps .notube {max-height:700px;} .c_aatventure-progressive-web-apps .notube .card-img {max-height:700px;} } /* ========================================================================== INSTANT HEADER LOAD ========================================================================== */ .appheader-aatventure { height: 70px !important; background-color: #0e1621; background-image: url("https://thereflex.nl/img/navicons/navbackgreyblue.webp"); background-repeat: repeat; background-size: 66% 110%; } #form-aatventure { position: fixed; top: 0px; } .navbar-brand img { width: 44px !important; } body::after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url("https://thereflex.nl/images/A.png") url("https://thereflex.nl/images/B.png"); } /* ========================================================================== AANGEPAST 2025 ========================================================================== */ @media screen and (max-width: 768px) {.body-aatventure .form-aatventure {position: fixed; top: -30px;}} /* ========================================================================== 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; -webkit-text-decoration-skip:objects; cursor:pointer} a:hover {color: #FFFFFF; text-decoration: none} b, strong {font-weight: bolder;} p {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} img {vertical-align: middle; border-style: none;} svg:not(:root){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%;} .d-nonx {display: none !important;} /* ========================================================================== SCROLL LINES ========================================================================== */ .scroll-lines {z-index: 1;} .scroll-line {position: fixed; width: 3px; height: 100%; z-index: 1;} .left {left: 0px;} .right {right: 2px;} .scroll-line::before, .scroll-line::after {position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""} .scroll-line::after {background-color: #3184ff; z-index: 1; animation: move 8s infinite; box-shadow: 0px 2px 2px rgb(95 166 255 / 50%), 0px 2px 4px rgb(101 144 240 / 50%), 0px 4px 8px rgb(88 146 255 / 50%), 10px 8px 16px rgb(212 228 255 / 50%);} @keyframes move { 0% {transform: translate3d(0, -200%, 0)} 20% {transform: translate3d(0, 100%, 0)} 100% {transform: translate3d(0, 100%, 0)} } /* ========================================================================== cdn browser ========================================================================== */ #cdn-browser-modal .modal-dialog .modal-content { position: absolute; left: 0px; top: 0px; height: 100%; width: 100vw; } .cdn-browser .browser-actions .col-left .control-remove { margin-right: 15px; padding-top: 3px; } .cdn-browser .browser-actions .col-left { display: flex; } .dungdt-upload-box .upload-actions { display: block !important; position: relative; margin-bottom: 50px; } .btn-group-vertical>.btn, .btn-group>.btn { position: relative; flex: 1 1 auto; } .d-flex { display: flex!important; } fa-edit:before { content: ""; } fa-trash:before { content: ""; } /* ========================================================================== COMMENTS ========================================================================== */ .outercomframe {width:108%; margin-left:-15px; height: auto;} .innercomframe {width: 100%; height: 1000px; overflow: scroll;} /* ========================================================================== PANDORAS BOX ========================================================================== */ .pandoras-box {background-image: url("../img/backgrounds/bwtech.jpg"); background-size: cover;} .pandoras-box #backgroundimagecontainer {position: fixed; left: 0px; top: 70px; width: 100%; height: 100%; opacity: 0.7;} .themeheader-pandoras-box {background: transparent !important;} .pandoras-box .mediumgrid {background: transparent !important;} @media screen and (max-width: 1023px) {.pandoras-box #backgroundimagecontainer {animation: zoombahton 100s infinite linear; background-image: url("../img/backgrounds/trapcode.gif"); background-size: 400%; background-position: -600px;}} @keyframes zoombahton { 0% {transform: scale(1); opacity:0} 40% {transform: scale(100) rotate(720deg); opacity:0.7} 50% {opacity:0.2;} 60% {transform: scale(100) rotate(720deg); opacity:0.7} 100% {transform: scale(1); opacity:0} } .ext_content_home {display: none;} .ext_content_aatventure-specials {display: none !important;} .c_movie .ext_content_home {display: block !important;} .club-tropicana {background-image: linear-gradient(to bottom, #ff959e, #ffb100, #faff00); background-size: 100%; text-shadow: none !important; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent;} .summersky {background-image: linear-gradient(to bottom, #56ccf2, #2f80ed); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent;} .supernova {box-shadow: inset 0 0 50px #fff, /* inner white */ inset 20px 0 80px #f0f, /* inner left magenta short */ inset -20px 0 80px #0ff, /* inner right cyan short */ inset 20px 0 300px #f0f, /* inner left magenta broad */ inset -20px 0 300px #0ff, /* inner right cyan broad */ 0 0 50px #fff, /* outer white */ -10px 0 80px #f0f, /* outer left magenta */ 10px 0 80px #0ff; /* outer right cyan */} .purple-haze {box-shadow: inset 0 0 200px #000000, /* inner black */ inset 20px 0 500px #000FFF, /* inner left blue */ inset -20px 0 500px #FF0000, /* inner right red */ inset 20px 0 500px #FF00FF, /* inner left purple */ inset -20px 0 500px #FF00FF /* inner right purple */;} .red-velvet {box-shadow: inset 0 0 500px #000000, /* inner black */ inset 20px 0 600px #FF0000, /* inner left red */ inset -120px 0 600px #000000, /* inner right black */ inset 20px 0 600px #DD0055, /* inner left purple */ inset -220px 0 600px #DD0000 /* inner right red */;} .blue-velvet {box-shadow: inset 0 0 500px #000000, /* inner black */ inset 20px 0 600px #333399, /* inner left blue */ inset -120px 0 600px #0000BB, /* inner right blue */ inset 20px 0 600px #000000, /* inner left black */ inset -220px 0 600px #000033 /* inner right black */;} .splitcolumn-white-rum {column-rule: 1px solid #fdc42e !important;} .splitcolumn-white-rum b {text-shadow: 7px 4px 0px #373b01;} .posttop-hideposttop {display:none !important;} @media screen and (max-width: 1023px) {.splittop-hideposttop {margin-top: 10px !important;}} @media screen and (min-width: 1023px) {.splittop-hideposttop {margin-top: 50px !important;}} /* ========================================================================== main ========================================================================== */ .aos-animate {-webkit-font-smoothing: subpixel-antialiased !important; transform: none !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;} .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;} .dummy {min-height: 0px !important; background: #4b0a07 !important;} .prodthumb {max-height: 80px; text-align: center;} .yttimestamp {display: inline-block; width: 100%; font-size: 15px; margin:0px; padding: 10px; cursor: pointer; background: #182738; border: 2px solid #000000; border-radius: 8px;} .yttimestamp:hover {background: #385788;} .transparent {background: rgba(0,0,0,0.05) !important;} .whitetext {color: #FFFFFF !important;} .StationSelector_stationRadio__1FTGQ:not(checked)~label {cursor: pointer;} .contentimg-package {display: none;} .videobg1 {position: fixed !important; top:80px !important; z-index:1 !important;} .higherzindex {z-index:10 !important;} .tagsbackground {position: fixed; width: 100vw; height:100vh; background-image: url(../img/backgrounds/filterbackground.webp); background-repeat: no-repeat; background-position: -20px;} .contentimg_promote {max-height: 500px; object-fit: cover; object-position: 0px -10px; box-shadow: inset 0px 0px 0px 10px #4b81c0;} @media screen and (min-width: 768px) {.img180px {width:176px !important; height:176px !important; padding:4px;} .extrapadding {padding:15px !important}} @media screen and (max-width: 768px) {.smalltext {font-size: 12px !important;}} .reflect {-webkit-box-reflect: below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.4)));} .transparent {padding: 10px;} .dashheader-aatventure {height: 70px !important; background-color: #0e1621; background-image: url(../img/navicons/navbackgreyblue.webp); background-repeat: repeat; background-size: 66% 110%;} .dashheader-darkblue {height: 70px !important; background-color: #0e1621; background-image: url(../img/navicons/navbackgreyblue.webp); background-repeat: repeat; background-size: 66% 110%;} .form-controlx {flex: 1 1 0%; width:100%; background: transparent; padding: 0.375rem 0.75rem; color: #FFFFFF; border-radius: 0 6px 6px 0;} .webmenuimage {width:500px; max-width: 50vw !important; border-radius: 5px;} .trendingcatcard {height: 210px;} .trendingheader {position: absolute; width: 100%; top: 20px; text-align: center; font-family:"MuktaMahee Bold"; font-size: 32px; -webkit-font-smoothing: antialiased;} .trendinggraph {position: absolute; width: 100%; top: 56px; text-align: center; font-family:"Caveat Regular"; font-size: 36px; color: #ffcc24; -webkit-font-smoothing: antialiased;} .trendingtext {position: absolute; width: 100%; top: 100px; text-align: center; font-family:"MuktaMahee Light"; font-size: 18px; padding: 30px; line-height: 1.1; -webkit-font-smoothing: antialiased;} /* ========================================================================== html mag niet op overflow: hidden staan, anders verdwijnt er soms text bij het scrollen, hierdoor moet mtaat/blockrow position fixed worden anders beweegt de header in de shops naar boven bij het scrollen! ========================================================================== */ .mtaat {position: fixed; height: calc(100vh - 54px); overflow-y: auto; -webkit-overflow-scrolling: touch;} .mt-5 {position: fixed !important; top: 162px; overflow-y: auto; -webkit-overflow-scrolling: touch;} .iconhome .t4 {display: none !important} /* ========================================================================== no transitions on safari ========================================================================== */ .transitions-false .card {transition: none !important; transform: none !important; animation: none !important;} /* ========================================================================== aatventuregrid 2022 ========================================================================== */ @media screen and (max-width: 768px) { .aatventuregridcontainer {display: block !important;} } @media screen and (min-width: 768px) { .aatventuregridcontainer {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0px 7px; padding: 2px; background-color: #090b14;} } @media screen and (min-width: 1500px) { .aatventuregridcontainer {grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0px 7px;} } @media screen and (max-width: 1450px) { .aatventuregridcontainer {grid-template-columns: 1fr 1fr 1fr; gap: 0px 7px;} } @media screen and (max-width: 1200px) { .aatventuregridcontainer {grid-template-columns: 1fr 1fr; gap: 0px 7px;} } .aatventuregridcontainer .youtube .change-ratio {max-height: initial;} .aatventuregridcontainer .notube .change-ratio {max-height: initial;} .blockrow .route-root .card {min-height: 350px;} .blockrow .route-root .card .card-img {min-height: 300px;} .blockrow .route-frontpage .card {min-height: 350px;} .blockrow .route-frontpage .card .card-img {min-height: 300px;} .blockrow .route-webtools .card {min-height: 246px; background: #1e2736 !important;} @media screen and (min-width: 1300px) { .i_genresxxx {min-height: 200px !important;} /* icon niet ok! anders oplossen */ } @media screen and (max-width: 768px) { .card-doubleheight {border-bottom: 36px solid #0A131A !important;} .c_movie.card-doubleheight .card-img {height: auto !important;} .i_aatventure-progressive-web-apps {object-position: top; object-fit: contain; min-height: 670px; border-bottom: 10px solid #0A131A !important;} .i_what-is-wrong-with-pwa-support-on-ios {min-height: 720px; border-bottom: 90px solid #2074b1 !important;} .o_aatventure-progressive-web-apps {margin-bottom: -40px;} } /* ========================================================================== STEADY CARDWITH IVM JUMPING -2px checkk ========================================================================== */ .blockrow {display: block; margin-left: -15px; margin-right: -15px;} @media (min-width: 1540px) { .route-home .card-aatventure {min-width: 402px !important;} .route-home .bginstant-aatventure {min-width: 402px !important;} .route-home .youtube .card-img {min-width: 402px !important;} .route-home .notube .card-img {min-width: 402px !important;} } @media (min-width: 1678px) { .route-home .card-aatventure {min-width: 410.75px !important;} .route-home .bginstant-aatventure {min-width: 410.75px !important;} .route-home .youtube .card-img {min-width: 410.75px !important;} .route-home .notube .card-img {min-width: 410.75px !important;} } /* ========================================================================== youtube cant scroll when 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;} /* ========================================================================== default fonts -> swap = load default font first ========================================================================== */ @font-face {font-family: 'Aatventure'; src: url('../fonts/Aatventure.woff') format('woff')} /* AATVENTURE LOGO */ @font-face {font-family: 'Abel'; src: url('../fonts/Abel-Regular.woff2') format('woff2')} /* HOORENBEECK | MOVIEBASE */ @font-face {font-family: 'Buttery'; src: url('../fonts/Buttery.woff2') format('woff2'); font-display: swap;} /* VANAF 1 KILO */ @font-face {font-family: 'Cabin'; src: url('../fonts/Cabin-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-stretch: 100%;} /* OG VOS */ @font-face {font-family: 'Marker Felt'; src: url('../fonts/Marker-Felt.woff') format('woff')} /* AADS BROODJESCORNER */ @font-face {font-family: 'JemberSketch'; src: url('../fonts/JemberSketch.woff2') format('woff2');} /* COCKTAILHEADER */ @font-face {font-family: 'Muli Light'; src: url('../fonts/Muli-Light.woff2') format('woff2'); font-display: swap;} /* SYSINFO MOVIEBASE */ @font-face {font-family: 'Myriad Regular'; src: url('../fonts/MyriadPro-Regular.woff') format('woff'); font-display: swap;} /* ASSGROEP TEXT */ @font-face {font-family: 'Olivetti Valentine'; src: url('../fonts/Olivetti-Valentine.woff2') format('woff2')} /* WINKELCENTRA MEGADROPDOWN */ @font-face {font-family: 'Open Sans'; src: url('../fonts/OpenSans-Regular.woff2') format('woff'); font-display: swap;} /* BODY OG VOS */ @font-face {font-family: 'Oswald Regular'; src: url('../fonts/Oswald-Regular.woff2') format('woff2')} /* HEADERMENU */ @font-face {font-family: "Oswald Bold"; src: url('../fonts/Oswald-Bold.woff') format('woff');} /* PARALAX ARCHIVE */ @font-face {font-family: 'Rajdhani Regular'; src: url('../fonts/Rajdhani-Regular.woff') format("woff");} /* PROFILE TEXT */ @font-face {font-family: 'Raleway Regular'; src: url('../fonts/Raleway-Regular.woff') format("woff")} /* ADMIN TABLES OOK MIJN BESTELLINGEN! */ @font-face {font-family: 'Roboto Light'; src: url('../fonts/Roboto-Light.woff') format('woff'); font-weight: 300; font-display: swap;} /* WEBSHOP SIDEBAR */ @font-face {font-family: 'Roboto Regular'; src: url('../fonts/Roboto-Regular.woff') format('woff'); font-weight: 400; font-display: swap;} /* ONS ASSORTIMENT */ @font-face {font-family: 'Roboto Medium'; src: url('../fonts/Roboto-Medium.woff') format('woff'); font-weight: 500; font-display: swap;} /* CARDHEADERS */ @font-face {font-family: 'Roboto Bold'; src: url('../fonts/Roboto-Bold.woff') format('woff'); font-weight: 700; font-display: swap;} /* POWERED BY */ @font-face {font-family: 'Roboto Black'; src: url('../fonts/Roboto-Black.woff') format('woff'); font-weight: 700; font-display: swap;} /* MASTERSHOW HEADER */ @font-face {font-family: 'VeiligOpSlot'; src: url('../fonts/VeiligOpSlot.woff2') format('woff2')} /* VEILIG VOS */ /* ========================================================================== font awesome ========================================================================== */ @font-face {font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap;} @font-face {font-family: 'FontAwesomeSolid'; src: url('../fonts/fa-solid-900.woff2') format('woff2'); font-weight: 400; font-style: normal;} @font-face {font-family: 'FontAwesomeBrands'; src: url('../fonts/fa-brands-400.woff2') format('woff2'); font-weight: normal; font-style: normal;} @font-face {font-family: 'FontAwesomeRegular'; src: url('../fonts/fa-regular-400.woff2') format("woff2"); font-weight: 400; font-style: normal; font-display: swap;} @font-face {font-family: 'simple-line-icons'; src: url('../fonts/Simple-Line-Icons.woff2?v=2.4.0') format('woff2'); font-weight: normal; font-style: normal; font-display: swap;} @font-face {font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.woff') format('woff'); font-display: swap;} .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; top: -3px; 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;} .fa-angle-double-left:before {line-height: 56px; font-size: 24px;} .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;} .card-body .list-left {padding-right: 10px !important;} .card-body .list-item {padding-left: 0px !important;} .menuholder {position: fixed; top:0px; left:0px; width: 100%;} #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); overflow-x: scroll !important;} } .imgthumb {border-radius: 8px} @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} .landinglink {padding-left: 70px; padding-bottom: 10px; cursor: pointer; line-height: 40px;} #mobileflag {display: inline-block; width: 100%; margin-top: -10px; margin-left: 9px; text-align: right;} #langflagmobile {width:40px; height:40px;} .lang-en {display: block !important;} .lang-nl {display: none !important;} .lang-fr {display: none !important;} .lang-de {display: none !important;} .lang-es {display: none !important;} .lang-ch {display: none !important;} .hideimg img {display: none !important;} /* ========================================================================== desktop fullscreen dropdown ========================================================================== */ .megadropdown {position: fixed; top: 0px; right: 0px; min-height: 70px; overflow: hidden; z-index: 9999999; cursor: pointer;} .megadropbtn {display: block; width:300px; background-color: transparent !important; color: #FFFFFF !important; float: left; text-align: right;} .megaheader {background-color: #0d3157; text-align: center; padding: 12px; color: white; border-bottom: 1px solid #35527a; margin-top: 20px;} .megadropbtn {font-size: 18px !important; font-weight: 300; text-transform: uppercase; padding-top: 7px; cursor: pointer;} .megadropbtn a {display: block; padding-top:6px; line-height: 2.6;} .megamargin {width:100vw; margin-left:auto; margin-right: auto; padding: 8px; padding-top: 20px;} /* padding was 50px? */ .notloggedin {margin-top:-11px;} .megacolumn {float: left; width: 33.33%; padding: 10px; background-color: #0e1621; height: 250px;} .megacolumn a {float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left;} .megacolumn a:hover {background-color: #ddd;} .megarow:after {content: ""; display: table; clear: both;} .underimage {display: block; width: 100%; text-align: center; margin-top: 6px; margin-bottom: -20px; z-index: 99; margin-left:0px; line-height: 1.3; padding-top: 2px; background-color: #000000; color: #8eb4d7; font-family: 'Olivetti Valentine'; font-size: 16px; border: 1px solid #23415c; border-radius: 4px;} @media screen and (max-width: 768px) {.smallgrid .size-1of3 .card {height: 166px;} .megadropdown .underimage {width: 150px !important}} @media screen and (max-width: 768px) {.underimagexxx {width: 180px;}} @media screen and (min-width: 768px) {.smallgrid .size-1of8 .card {align-items: center; height: 240px;}} @media screen and (max-width: 600px) { .megacolumn {width: 100%; height: auto;} .megamargin {padding: 20px;} .megacontent-alltags {display: block !important; overflow-y: scroll !important; background-size: cover !important;} } .megadropdown-content {display: none; position: fixed; right: 0px; top: 70px; width: 590px; border-left: 10px solid#1e2329; height: 100vh; z-index: 9999; background-color: #121722; overflow-x: hidden; overflow-y:auto; background-image: url('../img/backgrounds/filterbackground.jpg'); background-repeat: no-repeat; background-size: cover; background-position:-20px;} .megadropdown-show {display: block !important;} /* show dropdown based on url slug */ .megadropdown:hover .megacontent-aatventure-news {display: none !important;} .megadropdown:hover .megacontent-mijn-dashboard {display: none !important;} .megadropdown:hover .megacontent-answers {display: block !important;} .megadropdown:hover .megacontent-art-culture-fashion {display: block !important;} .megadropdown:hover .megacontent-artificial-intelligence {display: block !important;} .megadropdown:hover .megacontent-cams-and-streams {display: block !important;} .megadropdown:hover .megacontent-cartoon-cocktail {display: block !important;} .megadropdown:hover .megacontent-cocktails {display: block !important;} .megadropdown:hover .megacontent-economy-crypto-blockchain-nft {display: block !important;} .megadropdown:hover .megacontent-dee-dee-design {display: block !important;} .megadropdown:hover .megacontent-electrodisco-synthpop-trance {display: block !important;} .megadropdown:hover .megacontent-engineering {display: block !important;} .megadropdown:hover .megacontent-explicit-content {display: block !important;} .megadropdown:hover .megacontent-food-and-recipes {display: block !important;} .megadropdown:hover .megacontent-games-consoles {display: block !important;} .megadropdown:hover .megacontent-health {display: block !important;} .megadropdown:hover .megacontent-history-and-archaeology {display: block !important;} .megadropdown:hover .megacontent-movie-trailers {display: block !important;} .megadropdown:hover .megacontent-music-madness {display: block !important;} .megadropdown:hover .megacontent-phones-gadgets-electronica {display: block !important;} .megadropdown:hover .megacontent-politics-and-power-war-and-greed {display: block !important;} .megadropdown:hover .megacontent-psychology {display: block !important;} .megadropdown:hover .megacontent-quantum-mechanics {display: block !important;} .megadropdown:hover .megacontent-science {display: block !important;} .megadropdown:hover .megacontent-sentimental-journey {display: block !important;} .megadropdown:hover .megacontent-short-films {display: block !important;} .megadropdown:hover .megacontent-space-and-time {display: block !important;} .megadropdown:hover .megacontent-sports {display: block !important;} .megadropdown:hover .megacontent-synths-and-effects {display: block !important;} .megadropdown:hover .megacontent-technology {display: block !important;} .megadropdown:hover .megacontent-the-tainment {display: block !important;} .megadropdown:hover .megacontent-typically-dutch {display: block !important;} .megadropdown:hover .megacontent-web-development {display: block !important;} .megadropdown:hover .megacontent-wildlife {display: block !important;} .megadropdown:hover .megacontent-zombie-station {display: block !important;} .megadropdown:hover .megacontent-conspiracy-theories {display: block !important;} .logbox {display: block; height: 70px; background-color: rgba(0,0,0,0.2); padding-top: 14px;} .appheader-white .logbox {opacity: 0;} .avatar-xs {margin-left: 46px; margin-right: 20px; height: 40px; width: 40px; max-width: 40px !important; border-radius:50%;} .backbutton {width: 110px; height: 44px; background-image: url('../img/svg/aatventure-back.svg'); background-repeat: no-repeat; background-size: contain; border-radius: 8px 0px 0px 8px; margin-top: -12px; margin-right: 30px; cursor: pointer;} .maxwidth70 .avatar-xs {float:none !important; margin-left: 0px !important; margin-right: 0px !important;} @media screen and (min-width: 1100px) { .avatar-xs {margin-left: 16px; margin-right: 30px;} /* was float: right? */ .logbox .avatar-xs {float: right;} } /* ========================================================================== GROW (WAS WEG?) ========================================================================== */ .hvr-grow1 {z-index: 999999; vertical-align: middle; backface-visibility: hidden; transition-duration: 0.3s !important; transition-property: transform !important; cursor: pointer;} .hvr-grow1:hover, .hvr-grow1:focus, .hvr-grow1:active {transform: scale(1.1) !important;} .hvr-grow1:hover span {transition-duration:1s;} .hvr-grow1:active span:hover {transition-duration:1s;} /* ========================================================================== toegevoegd aan assortimensgroepen: frontpage overlays ivm fullscreen images ========================================================================== */ .frontpageheader {position: absolute; top: -36px; left: 0px; width: 100vw; height: 60px; z-index: 5; text-align: center; font-family: "Montserrat Regular"; font-size:44px; font-weight: 700 !important; letter-spacing:40px; margin-left: 12px;} .frontpageflag {position: fixed; bottom: 30px; right: 28px; width: 60px; height: 60px; z-index: 5; cursor: pointer;} .flagimg {width: 60px; height: 60px; border-radius: 50%; object-fit: contain;} .shine { text-align: center; color: rgba(255,255,255,0.7); background: linear-gradient(180deg, #999999, #FFFFFF, #999999); background-size: 125px 100%; -webkit-background-clip: text; -moz-background-clip: text; animation-name: shimmer; animation-duration: 10s; animation-iteration-count: infinite; background-repeat: no-repeat; background-position: 0 0; } @keyframes shimmer { 0% {background-position: -300%;} 100% {background-position: 300%;} } /* ========================================================================== filter scroller new -> 17-09-2021 ========================================================================== */ @keyframes slide { 0% {transform:translateX(-100%);} 100% {transform:translateX(100%);} } @media (min-width: 1030px) { #horizontalscroller {display: none !important;} #languagescroller {display: none !important;} .goedmakertje {display: none !important;} } .horizontalcontent { display: grid !important; grid-gap: 64px; grid-template-columns: 1px repeat(var(--total), 0) 1px; overflow-x: scroll; scroll-snap-type: x proximity; } .languagecontent { grid-gap: 80px !important; } .tagimg {width: 60px !important; height: 60px !important} .horimg {text-align: center; width: 40px; height: 40px; border-radius: 50%; object-fit: contain; box-shadow: 10px 6px 5px #000000;} .hortxt {width: 68px; text-align: center; font-size:12px !important; margin-top: 6px;} .tagsunderpost .hortxt {width: 80px; line-height: 1.2;} @media (min-width: 800px) { .tagsunderpost .center {width:100px; text-align: center !important;} .tagsunderpost .anchor {width:100%;} .tagsunderpost .hortxt {width: 100px;} } @media (max-width: 1030px) { #horizontalscroller {position: fixed; left:0px; top:70px; display: inline-block !important; width: 100% !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; z-index: 5 !important; height: 86px; background-image: url('../img/navicons/bloggradient.jpg'); background-size: cover; background-color: #000000;} #languagescroller {position: fixed; left:0px; bottom:76px; width: 100% !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; z-index: 5 !important; height:94px; background-color: #0f1724;} #languagescroller .horizontalcontent {overflow: hidden !important; grid-gap: 78px !important;} #horizontalscroller::-webkit-scrollbar {display: none;} .goedmakertje {width: 100vw; height: 82px;} .langimg {text-align: center; width: 50px; height: 50px; border-radius: 50%; object-fit: contain;} .emptylistitem {margin-left: -70px;} .nav-item {display: flex !important; scroll-snap-align: center;} #horizontalscroller .horizontalcontent .nav-item {margin-left: -80px;} #horizontalscroller .horizontalcontent > li:nth-child(2) .horimg {box-shadow: none !important; margin-left:20px; margin-top: 4px;} #languagescroller .horizontalcontent {height: 100px; border-top: 1px solid #030609;} #languagescroller .hortxt {font-family: arial;} .horizontalcontent:before { content:''; top:0; transform:translateX(100%); pointer-events: none; height:100px; position: absolute; z-index:1; animation: slide 8s infinite; background: linear-gradient(to right, rgb(0 0 0 / 0%) 0%,rgb(243 243 243 / 10%) 50%,rgba(28,86,132,0) 99%,rgba(125,125,125,0) 100%); } } /* ========================================================================== updates ivm tablet 1280 ========================================================================== */ @media (min-width: 1024px) and (max-width: 1280px) { .navbar-nav > li > a {font-size: 18px !important;} } /* ========================================================================== updates ivm comments ook ander font voor windows! ========================================================================== */ #aatventure_comments {font-family: 'Roboto Light' !important;} .cardaat-body .form-control {font-family: 'Roboto Light' !important;} @media (min-width: 1024px) { .splitit-left {column-count: 2; column-gap: 0px; column-rule: 10px solid #1e222a; background: #090a0e77;} #aatventure_comments {margin-top: -10px; margin-left: 40px !important; margin-right: 40px !important;} #aatventure_comments textarea {position: relative; z-index: 996; min-height: 200px !important;} } #aatventure_comments {margin-left: 5px; margin-right: 5px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue"; -webkit-font-smoothing: antialiased;} .aatvatar {position: relative; display: inline-block; float: left; margin-top:-3px; margin-left: 20px; width: 44px; height: 44px; border-radius: 50%; margin-right: 10px !important; box-shadow: inset 17px 14px 10px -18px #a6d4ec; border: 4px solid #000000; z-index: 1;} .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; color:#6c7477; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue"; resize: none; overflow: auto;} .splitit-left .form-group {border: 2px solid #020714;} .overlayclick {position: relative; display: block; cursor: pointer;} #aatventure_comments .media {background-color: #181d25; background-color: transparent !important; border: 0; margin: 0px; margin-top: 10px; padding: 10px 5px 5px 10px !important; border-radius: 20px;} .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: -15px; margin-bottom: -2px; background-color: #111b27; padding: 4px; padding-top: 15px;} #aatventure_comments .fbdate {font-family: "Helvetica Neue"; font-size: 13px !important; margin-top: -3px; margin-bottom: 10px;} #aatventure_comments .fbtext { background-color: #3b5998; border-left: 4px solid #000000; padding: 10px; padding-top: 12px; border-radius: 5% 15%; -webkit-font-smoothing: antialiased; position: relative; margin-left: -5px; margin-top: 0px; padding-bottom: 24px; font-size: 15px; line-height: 20px; font-weight: 400 !important; color: #e4e6eb !important; } #aatventure_comments .nextinline {border-bottom: 0 !important;} #aatventure_comments .nextinline .fbtext {background-color: #333c4a;} #aatventure_comments .nextinline .fbtext { margin-top: -1px; background-color: #0e151e !important; border-left: 4px solid #090a0e; 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: -75px; margin-right: 150px; 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: #3b5998 !important; transform: scale(1, -1) rotate(18deg); margin-bottom: -40px; z-index: 99; transform: rotate(0.05turn); } .commentmessage { min-height: 300px; background: #000000 !important; border-color: #15181d !important; color: #ffffff !important; margin-bottom: 50px; } @media (max-width: 800px) { .commentmessage{ min-height: 150px !important;} } .comheader {font-weight:700; color: #aaff07;} /* ========================================================================== moet automatisch (count characters) ========================================================================== */ #comment-29 .fbtext {border-radius:5px !important; padding: 30px !important; font-size: 18px !important; line-height: 24px !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} .backbutton {position: absolute; z-index:9999; right: 10px; margin-top: -4px !important;} .splitcolumn ul li {font-size: 20px;} .splitcolumn ul li:before {color: #aed5ff; content: '✓' !important; padding-right: 6px;} .fileinfo {color: #ffc107 !important;} /* anders zie je niets... */ .fileinfo p {color: #ffc107 !important;} /* anders zie je niets... */ @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;} /* ========================================================================== tags under post ========================================================================== */ .tagsunderpost {position: relative; width:calc(100% + 70px); right: 4px; margin-top: 20px; grid-gap: 87px !important;} .lowerthanfive {overflow: hidden !important; justify-content: end;} .xtagsunderpost .nav-link {width: 105px;} .tagsunderpost::-webkit-scrollbar {width:0px !important; height:0px !important} /* ========================================================================== stories and vertical scroller ========================================================================== */ .maincontainer-portrait {background: #000000 !important;} .layout-portrait .youtube {max-height: 100vh !important; border-bottom: 0px !important;} .adminheader-portrait {display: none !important;} .card-body-portrait {position: absolute; z-index: 1 !important; height: 100%; width: 100%; background: none !important; top: -2px; border-top: 0px solid #000000 !important; pointer-events: none !important; box-shadow: none !important;} .card-body-portrait .margintop-30 {position: absolute; bottom: 110px; width: 87vw; z-index:999;} .card-body-portrait .splitcolumn {display: none; position: absolute !important; bottom: 16px; height: 100px; width: 92%;} .card-body-portrait .nav-link {display: none; position: absolute; bottom: 76px; left: 7px;} .card-body-portrait .squiggly {display: none; position: absolute; bottom: 96px; right: 16px;} .card-body-portrait h1 {display: none;} .card-body-portrait .ataradescription {display: none;} .card-body-portrait .aatschannel {display: none;} .card-body-portrait .aatstimeago {display: none;} .card-body-portrait #timestampoverlay {display: none !important;} .card-body-portrait .list-item {display: none !important;} @media screen and (max-width: 800px) { .layout-portrait {height: calc(100vh - 60px) !important; margin-top: 12px;} .maincontainer-portrait {top: 60px !important; height: calc(100vh - 60px) !important;} .maincontainer-portrait .row {margin: 0px !important; padding:0px !important;} .maincontainer-portrait .col-md-8 {margin: 0px !important; padding:0px !important;} .blackground-portrait {position: absolute; left: 2px; bottom: 0px; width: 100vw; height: 76px; background: #000000; z-index: 9;} } .vertiscroll {width: 100%; min-height: 315px; max-height: 100vh;} .storyslider .swiper-container {position: absolute !important; top: -70px; left: 2px; height: 100vh; width: 100%;} .storyslider .swiper-slide {text-align: center;} .storyslider .video-container {position: relative; height: 100vh;} .storyslider .aatventureintro {position: relative; height: 100vh;} .video-play, .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-container iframe, .video-container object, .video-container embed { pointer-events: none; } .avataroverlay {position: absolute; bottom: 19px; left: 18px; z-index: 9999;} .shortuseroverlay {position: absolute; bottom: 67px; left: 73px; z-index: 9999; width: 99vw; text-align: left;} .shortdescoverlay {position: absolute; bottom: 67px; left: 73px; z-index: 9999; width: 99vw; text-align: left;} .shortmenubutton {position: absolute; bottom: 14px; right: 6px; width: 70px; height: 70px; cursor: pointer; background: url('../img/interface/roundmenubutton.png') no-repeat; background-size: contain; z-index: 99;} /* ========================================================================== radialmenu ========================================================================== */ #radialmenu {position: absolute; width: 100%; height: 85vh; background-color: rgba(0,0,0,0.1); z-index: 9; display: none; z-index:99;} div.menuHolder {position: absolute; user-select: none; position: relative; margin: 10px; margin-left: auto; margin-right: auto; margin-top: 6px; border-radius: 50%; background: rgb(24 24 31); background: url('../img/interface/radialmenu-background.jpg') no-repeat; background-size: contain; background-position: 2px -2px;} svg.icons {display: none;} svg.menu {position: absolute; overflow: visible; transition: 0.2s; transition-timing-function: ease-out; background-color: #111a26; border-radius: 50%; background-color: rgba(0,0,0,0.1); border: 4px solid #2b2b2b;} svg.menu.inner {transform: scale(0.66) rotate(-10deg); opacity: 0; visibility: hidden;} svg.menu.outer {transform: scale(1.5) rotate(10deg); opacity: 0; visibility: hidden;} svg.menu > g > path {fill: #00000080;} svg.menu > g.sector > path { cursor: pointer;} svg.menu > g.sector > text, svg.menu > g.sector > use {cursor: pointer; fill: white; font-size: 4.4px;} svg.menu > g.sector:hover > path {fill: #F9A602D0;} svg.menu > g.sector.selected > path {fill: #214caa !important;} svg.menu > g.center:hover > circle {fill: #F9A602D0;} svg.menu > g.center > circle {cursor: pointer; fill: #00000080;} svg.menu > g.center > text, svg.menu > g.center > use {cursor: pointer; fill: white;} .menuHolder::after { position: absolute; pointer-events: none; z-index:9; content: " "; width: 360px; height: 360px; background: transparent; border-radius: 50%; animation: pulse_animation 6s ease-out infinite; animation-delay: .2s; text-align: center; } /* ========================================================================== flyers and cocktails ========================================================================== */ #publicshow #maincontainer {background: radial-gradient(ellipse at bottom, #05172b 0%, #030617 100%);} .themeheader-cocktails {background: #000000 !important; background-image: none !important;} .postshow-cocktails {background: radial-gradient(ellipse at bottom, #05172b 0%, #030617 100%) !important;} .c_flyer {background: #000000 !important; border-bottom: 0px !important; margin-bottom: -36px !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%;} .c_music {height: 186px !important;} .c_music .notube {padding-top: 8px !important;} .c_music .profilecontent {margin-top: 0px !important;} .c_music .yearoverlay {bottom: 8px !important;} } /* ========================================================================== 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;} .profilecontent {margin-top: 30px !important;} .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)}} /* ========================================================================== .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;} /* ========================================================================== 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;} .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: 30px; margin-bottom: 20px; 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;} .autographxx {border-bottom: 50px solid transparent;} .redline {display: none !important;} .mainMenuOverlay a:hover, a:focus {text-decoration: none !important;} .floatingbutton-blue {background-color:#184093;} .printreceipt {color: #a7ff00; text-align: center; cursor:pointer;} .paystatus {color: #FFFFFF; text-align: center; cursor:pointer;} /* ========================================================================== defaults ========================================================================== */ .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;} .rounded-circle {border-radius: 50%!important} .clearfix::after {display: block; clear: both; content: ""} .clearfloat {clear: both !important;} .pull-right {float: right;} .thatsright {right: 80px !important;} .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;} /* ========================================================================== visibility ========================================================================== */ @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: 700px) { .notonphone {display: none !important;} } /* iPad */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { .notonipad {display: none !important;} .notonipadlandscape {display: none !important;} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { .notonipad {display: none !important;} .notonipadportrait {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; } input::placeholder {color: #999999 !important; opacity: 0.5 !important;} /* ========================================================================== containers ========================================================================== */ .container {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;}} /* ========================================================================== navbar ========================================================================== */ .navfixed {position: fixed; left: 0px; top: 0px;} .navcentered {width: 100vw; align-items: center; justify-content: center;} .navbar-nav {position: fixed; top: 0px; height: 69px; 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; text-decoration: none;} .navbar-nav > li > a:focus {text-decoration: none;} .navbar-nav > li > a:hover {text-decoration: none;} .appheader-aatventure { position: fixed !important; height: 70px !important; background-color: #0e1621; background-image: url('../img/navicons/navbackgreyblue.webp'); background-repeat: repeat; background-size: 66% 110%; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .themeheader-live-news {background-image: url('../img/navicons/the-tainment.jpg') !important; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .nonewstoday {background-image: url('../img/navicons/nonewstoday.jpg') !important; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } @media screen and (max-width: 760px) { .appheader-aatventure {background-size: 8300px 600px;} .themeheader-live-news {background-size: 220% 100% !important;} .nonewstoday {background-size: 220% 100% !important;} } .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 {position: fixed; background-size: cover !important;} #navbar-maintext {position: fixed; top: 15px; left: 74px; font-family: Aatventure; font-size: 25px; color: #FFFFFF;} /* navbar height is positie tooltip, popbox moet zichtbaar blijven */ #navbar .nav-item {font-family: 'simple-line-icons'; min-width: 55px; height: 62px; overflow: visible; background-repeat: no-repeat; background-size: contain;} .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"; 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 Regular"; 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! */ /* 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}} /* ========================================================================== webshop basics ========================================================================== */ .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;} .flexitem-aatventure:hover {background-color: #2C3E50; opacity:0.9;} .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;} .aatsflexrow .list-content p {flex: 1 0 auto;} .fullcard {margin-top: 10px; border-radius: 9px;} .productsbodyitems {transform: translate(0,0); width: 100%; margin-bottom: 50px;} .imagecropper {overflow: hidden;} .change-ratio {width: 100%; margin: -10% 0;} .youtube .change-ratio {max-height: 358px; object-position: 0 0; object-fit: contain;} .notube .change-ratio {max-height: 358px; object-position: 0 0; object-fit: cover;} @media (max-width: 1024px) {.youtube .change-ratio {height: 348px; max-height: 348px;}} @media (min-width: 1580px) {.youtube {height: 348px;}} @media screen and (max-width: 800px) {.youtube {height: 318px;} .youtube .change-ratio {height: 308px !important;}} .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;} /* ========================================================================== 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: -3px; 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;} /* ========================================================================== appicons ========================================================================== */ .iconhome {width: 78px; background-image: url('../img/navicons/home.png'); background-position: 0px 16px;} .iconfolder {width: 73px; background-image: url('../img/navicons/categories.png'); background-position: -8px 13px;} .iconnews {width: 76px; background-image: url('../img/navicons/news.png'); background-position: -6px 15px;} .iconwebshop {width: 80px; background-image: url('../img/navicons/shopshop.png'); background-position: -8px 13px;} .iconradio {width: 87px; background-image: url('../img/navicons/radio.png'); background-position: -5px 12px;} .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;} .icontags {width: 56px; background-image: url('../img/navicons/tags.png'); background-position: -6px 13px;} .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;} .iconholiday {width: 78px; background-image: url('../img/navicons/holiday.png'); background-position: 0px 16px;} @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;} .iconradio {width: 95vw; background-position: 1px 8px; background-size: 65px; 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;} .icontags {width: 95vw; background-position: 8px 8px; background-size: 60px; 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;} .besteltijden>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 ========================================================================== */ #maincontainer {overflow-x: hidden;} #maincontainer {height: calc(100vh - 80px);} /* testen!!!! */ @media (max-width: 846px) and (orientation: landscape) { body {padding-top: 0px;} #navbar {display: none !important;} #maincontainer {margin: 0px !important; width:100%} .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;} } #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; padding-right: 20px;} } #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;} .filtergrid {display: flex; flex-basis: 0; width: 100%; min-width: 100%; background-color: #090b14;} .smallgrid {display: flex; flex-basis: 0; width: 100%; min-width: 100%; background-color: #090b14 !important;} .mobilegrid {display: flex; flex-basis: 0; width: 100%; min-width: 100%; background-color: #090b14;} /* NEW 2025 */ .filtergrid {align-items: flex-start; justify-content: space-evenly; align-content: center; flex-wrap: nowrap; flex-direction: row;} .smallgrid[data-columns]::before {content: '8 .column.size-1of8';} .mediumgrid[data-columns]::before {content: '6 .column.size-1of6';} .filtergrid[data-columns]::before {content: '3 .column.filter-1of3';} .grid[data-columns]::before {content: '3 .column.size-1of3';} .mobilegrid[data-columns]::before {content: '4 .column.size-1of4';} [data-columns]::before {position: absolute; display: block; visibility: hidden; 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';} .filtergrid[data-columns]::before {content: '3 .column.filter-1of3';} .smallgrid[data-columns]::before {content: '3 .column.size-1of3';} .mobilegrid[data-columns]::before {content: '2 .column.size-1of2';} .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';} .filtergrid {width: 590px; min-width: 590px;} .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;} .filter-1of3 {padding-right: 5px; padding-left: 5px;} /* ========================================================================== 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; opacity: 1 !important;} .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 73% !important; max-width: 73% !important;}} /* was 69% */ /* ========================================================================== 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: 99 !important; height: 66px;} .scrollnavcontent {width: 4400px !important;} .smoothscroll {position: fixed; left: 0px; top: 170px; width: 100vw; height: 100%; overflow: auto !important; -webkit-overflow-scrolling: touch; z-index: 99; 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;} } /* ========================================================================== 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; font-family: "Raleway Regular"; vertical-align: middle;} .table th {color: #FFFFFF;} .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 {font-family: "Raleway Regular"; font-weight: 600; font-size: 16px; line-height: 24px; color: #FFFFFF !important;} .nav-tabs a {font-family: "Raleway Regular"; font-weight: 600; font-size: 16px; line-height: 24px; color: #FFFFFF !important;} .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {font-size: 16px; line-height: 24px; color: #FFFFFF !important;} .nav-link.active {background-color: #0879f9; border-color: #0879f9;} #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;} } @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; } /* ========================================================================== 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: 99; 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 !important; display: flex; flex-direction: column; width: calc(100% - 2px); min-width: 0; word-wrap: break-word; background-clip: border-box; border-radius: .25rem; border: 0px; border-bottom: 40px solid transparent !important;; margin-bottom: 10px !important; color: #FFFFFF; user-select: none; } .fullwidthcard {width:100% !important;} .barbatruuk .card {width:100% !important;} .card-aatventure {background-image: url('../boot/subtle.webp'); background-size: 100% 700px;} .card-body {flex: 1 1 auto; min-height: 1px; padding: 1.25rem; box-shadow: inset 0 90px 10px #161b28} .body-aatventure .card-body { background: linear-gradient(170deg, rgb(4 11 29) 20%, rgb(4 19 49 / 50%) 20%, rgb(5 12 30) 35%, rgb(3 12 27) 35%, rgb(5 17 36) 45%, rgb(4 13 28) 45%, rgb(5 17 36) 75%, rgb(4 12 30) 75%), linear-gradient(45deg, rgb(4 17 35) 0%, rgb(14 25 45) 50%, rgb(5 16 35) 50%, rgb(5 17 35) 100%) #051124;} @media screen and (max-width: 768px) { .card-body {border-top: 1px solid #3c4048; box-shadow: inset 0 70px 20px #161b28; margin-top: 1px;} .col-md-4 {background-color: #030406;} } .card .nocolor {color: inherit;} .card a,.card a:focus,.card a:hover {text-decoration:none; outline:none;} #aatventure_comments textarea {min-height: 200px !important; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important;} #aatventure_comments .remembermephrase {margin-bottom: 24px !important;} @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: 10px;} .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-bodysnapikniet {border-top: 20px solid transparent;} /* nog controleren maar gaat niet ok bij single post... */ .card-bodyxxx {margin-top: -20px;} } .assgroepcard {margin-top: 10px; border-bottom: 80px solid transparent;} @media screen and (min-width: 768px) { .card-default {display: grid; grid-row: span 1; grid-column: span 1; align-content: space-between;} .card-doubleheight {display: grid; grid-row: span 2; grid-column: span 1; align-content: space-between;} .card-tripleheight {display: grid; grid-row: span 3; grid-column: span 1; align-content: space-between;} .card-quadheight {display: grid; grid-row: span 4; grid-column: span 1; align-content: space-between;} .card-halfwidth {display: grid; grid-row: span 1; grid-column: span 2; align-content: space-between;} .card-triplewidth {display: grid; grid-row: span 1; grid-column: span 3; align-content: space-between;} .card-fullwidth {display: grid; grid-row: span 1; grid-column: span 4; align-content: space-between;} .card-square {display: grid; grid-row: span 2; grid-column: span 2; align-content: space-between;} } @media screen and (max-width: 768px) { .megadropdown-content {z-index: 9 !important;} .card-alltags {width: 33.3%; float: left; padding-left: 10px; padding-right: 10px;} .card-alltags .underimage {font-size: 12px;} .rotatingselected {width: 115px !important; height: 115px !important;} /* was 103 */ } /* paralax 2022 */ .card-fullwidth .card-like {display: none !important;} .card-fullwidth .author {display: none !important;} .card-fullwidth .card-date {display: none !important;} .card-fullwidth .text-muted {display: none !important;} .card-fullwidth .gradient {mask-image: linear-gradient(180deg, transparent 75%, rgb(0,0,0) 52%, rgba(0, 0, 0, 1) 6%, transparent 98%);} .card-fullwidth .bottom-txt {left: 0px; right: 0px; font-size: 80px; text-align: center; font-family: 'Oswald Bold'; text-shadow: 0 0 5px #4a685e;} .card-fullwidth.food-and-recipes .bottom-txt {font-size: 57px !important; font-family: 'Grinched' !important; text-shadow: 0 0 black !important;} .card-fullwidth .bottom-txt::after { content: attr(data-text); position: absolute; top: -16px; left: 0px; width:100%; text-align: center; transform-origin: bottom; transform: rotateX(180deg); background-clip: text; filter: blur(3px); opacity: 0.2; } @media screen and (min-width: 800px) { .paralay {position: absolute; top:0px; left:0px; width: 100%; height: 500px; object-fit: cover;} .paralay-warfare {margin-top: -63px; opacity:0.95;} .paralay-metaverse {margin-right: 100px !important; opacity:0.95;} } @media screen and (max-width: 800px) { .paralay {position: absolute; top:0px; left:0px; width: 100%; height: 580px; object-fit: cover;} .paralay-warfare {margin-top: -60px; opacity:0.95;} .paralay-metaverse {margin-right: 100px !important; opacity:0.95;} } @media screen and (max-width: 800px) {.notube {}} @media screen and (min-width: 800px) {.paralay-xxx {border-bottom: 20px solid #090b15 !important;}} @media screen and (min-width: 800px) {.card-fullwidth {border-bottom: 0px solid #000000 !important;}} @media screen and (min-width: 800px) {.card-fullwidth .i_blog {object-fit: cover; object-position: 100% 60%; max-height: 480px;}} @media screen and (max-width: 800px) {.card-fullwidth .i_blog {height: 500px; object-fit: cover; object-position: 40% 100%; margin-top: -10px; border-bottom: 20px solid #000000;}} @media screen and (max-width: 800px) {.i_metaverse-banner {object-position: 9% 100% !important;}} @media screen and (max-width: 800px) {.o_metaverse-bannerx {display: none;}} @media screen and (max-width: 800px) {.card-fullwidth .bottom-txt {bottom: 40px !important; font-size: 35px !important; text-shadow: 0 0 5px black;}} @media screen and (min-width: 800px) { .paralax-enabled .card-fullwidth {transition-duration: 0s !important;} } @media screen and (max-width: 800px) { .paralax-enabled .aos-animate {transition-duration: 0s !important;} .paralax-enabled .size-1of1 {height: calc(100vh - 160px); overflow-x: hidden; overflow-y: auto; perspective: 10px;} .paralax-enabled .card-fullwidth {transform-style: preserve-3d; z-index: -1; background: none !important;} .paralax-enabled .card-aatventure {padding-top: 10px;} .paralax-enabled .card-fullwidth .card-img {transform: translateZ(-7px) scale(1.7);} .paralax-enabled .card-fullwidth .paralay {transform: translateZ(-4px) scale(1.0);} .card-fullwidth .bg-over {margin-top: 250px; -webkit-mask-image: unset;} } .card-hidden {display: none;} .card-showbanner {display: grid;} /* ========================================================================== paralax for products ========================================================================== */ @media screen and (max-width: 800px) { .paralaxwrapper-aperitiefhapjes {height: auto; overflow-y: auto; overflow-x: hidden; perspective: 10px;} /* wrapper werkt alleen op totaalpagina*/ .listitemkind-fullwidth .card-img {transform: translateZ(0px) scale(1);} .listitemkind-fullwidth .paralay {transform: translateZ(0px) scale(2);} .paralay-height1000 {height: auto; top: 110px !important;} } @media screen and (min-width: 800px) { .paralaxwrapper-aperitiefhapjes {height: auto; overflow-y: auto; overflow-x: hidden; perspective: 10px;} /* wrapper werkt alleen op totaalpagina*/ .listitemkind-fullwidth .card-img {transform: translateZ(0px) scale(1);} .listitemkind-fullwidth .paralay {transform: translateZ(0px) scale(1);} .paralay-height1000 {height: auto; top: 10px !important;} } /* ========================================================================== 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: 160px; 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: 25px; 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; display: none;} .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('../images/facebook.png');} .twittercolor:active {background-image:url('../images/twitter.png');} .whatsappcolor:active {background-image:url('../images/whatsapp.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} .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;} .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)} .mt-5 {position: relative !important; top: 80px;} .loco {height:50px; line-height: 48px; width: 170px; text-shadow: 0px 0px 10px #000000; background-repeat: no-repeat; background-size: cover; background-position: 50% 80%; border-radius: 4px; } .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; width: 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);} @media screen and (min-width: 1024px) and (max-width: 1600px) { .bottom-txt {font-size: 22px !important; letter-spacing: -0.2px !important;} } /* ========================================================================== blog item widget adjustments ========================================================================== */ .route-laravel-packages .bottom-txt {text-align: center; opacity: 0 !important;} .route-warfare .c_wiki {grid-row: span 2; grid-column: span 1; background: #000000 !important; box-shadow: 20px 0px 20px 10px #000000;} .route-warfare .c_wiki img {-webkit-box-reflect: below 4px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.3));} .c_app {border-bottom: 0px !important; margin-bottom: -50px !important; background-image: none !important;} .c_music {background: #00000073 !important; border-bottom: 1px solid #000000; border-radius: 50% 50% 20% 50%; transform: rotate(354deg) !important;} .c_genre {border-bottom: 0px !important;} .c_wiki {border: 1px solid #000000 !important; background-image:none !important; margin-bottom: -34px !important;} .c_trending {min-height: 250px; background: #1f2734 !important; border: 0px !important; background-image: none !important;} .c_game {background: #000000 !important;} .c_tool .bottom-txt {text-align: center; opacity: 0 !important;} .c_tool .card-like {display: none !important;} .c_aatventure-progressive-web-apps {border-bottom: 0px solid transparent !important;} .c_the-hidden-worlds-of-national-parks {border-bottom: 0px solid transparent !important;} @media screen and (max-width: 1000px) {.c_aatventure-progressive-web-apps .bottom-txt {bottom: 104px !important;}} @media screen and (min-width: 1000px) {.c_aatventure-progressive-web-apps .bottom-txt {bottom: 64px !important;}} @media screen and (min-width: 1000px) { .c_music {background: rgba(0,0,0,0.3) !important; border-bottom: 0px solid #000000 !important; border-radius: 50% 60% 10% 50% !important;} .yearoverlay {bottom: 24px !important;} } .o_app {opacity: 0 !important;} .o_music {opacity: 0 !important;} .o_genre {opacity: 0 !important;} .o_wiki {opacity: 0 !important;} .o_trending {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-progressive-web-apps .author {display: none !important;} .o_aatventure-progressive-web-apps .card-date {display: none !important;} .o_the-hidden-worlds-of-national-parks .bottom-txt {margin-bottom: -60px !important;} .o_the-hidden-worlds-of-national-parks .author {display: none !important;} .o_the-hidden-worlds-of-national-parks .card-date {display: none !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;} .o_theory-versus-reality {opacity:0 !important;} .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_aatventure-progressive-web-apps {border-bottom: 0px solid #0A131A !important;} .i_the-hidden-worlds-of-national-parks {border-bottom: 0px solid #0A131A !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_radio-aatventure-live-on-air {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_aatventurenews-david-bowie-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;} .o_aatventure-progressive-web-apps .card-like {display: none !important;} .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;} .i_genres {min-height: 130px; border-radius: 50%; box-shadow: 0px 0px 3px #676869; padding: 4px; cursor: pointer;} .i_tags {border-radius: 50%; box-shadow: 0px 0px 3px #676869; padding: 4px; cursor: pointer;} .i_filters {height: 140px; width: 140px; border-radius: 10px; box-shadow: 0px 0px 3px #676869; padding: 4px; cursor:pointer; opacity:0.8; background: rgba(100,100,100,0.1) !important;} .border20px {background: rgba(100,100,100,0.1) !important; border-radius: 40% !important;} .i_filters:hover {opacity:1 !important} .megatags-art-culture-fashion .i_filters {border-radius: 50% !important} .megatags-artificial-intelligence .i_filters {border-radius: 50% !important} .megatags-cartoon-cocktail .i_filters {border-radius: 50% !important} .megatags-crypto-blockchain-mining-nft .i_filters {border-radius: 50% !important} .megatags-dee-dee-design .i_filters {border-radius: 50% !important} .megatags-engineering .i_filters {border-radius: 50% !important} .megatags-explicit-content .i_filters {border-radius: 50% !important} .megatags-games-consoles .i_filters {border-radius: 50% !important} .megatags-health .i_filters {border-radius: 50% !important} .megatags-history-and-archaeology .i_filters {border-radius: 50% !important} .megatags-music-madness .i_filters {border-radius: 50% !important} .megatags-politics-and-power-war-and-greed .i_filters {border-radius: 50% !important} .megatags-sentimental-journey .i_filters {border-radius: 50% !important} .megatags-short-films .i_filters {border-radius: 50% !important} .megatags-space-and-tim .i_filters {border-radius: 50% !important} .megatags-technology .i_filters {border-radius: 50% !important} .megatags-typically-dutch .i_filters {border-radius: 50% !important} .megatags-wildlife .i_filters {border-radius: 50% !important} .megatags-zombie-station .i_filters {border-radius: 50% !important} @media screen and (min-width: 1030px) {.contentimg_blog {padding-left:50px !important; padding-right: 50px !important;}} lft {float: left !important;} rgt {float: right !important;} .toolslink {border-bottom: 1px solid #c6af46 !important;} .relatedoverlay_promote {cursor: pointer !important;} /* blog => mastershow */ .card-body h1 {font-family: "Roboto Black"; text-transform: uppercase; font-size: 38px; margin-top: 40px; 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;} .tagimagepreview {min-width: 400px !important; height: auto !important;} .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: 28px; right: 0px;} .mb-3 {margin-bottom: 2px;} .card-body a {color: #70adff;} @media (max-width: 800px) {.card-body h1 {font-size: 30px;}} @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 26% !important; max-width: 26% !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;} .bginstant-aatventure .bottomline {font-family: "Olivetti Valentine";} .moviebottomback {border-bottom: 40px solid #0d1621 !important;} .moviebottom {border-bottom: 40px solid #0c1117 !important;} .aatsfasttitle {display: block; font-size: 2rem; font-weight: 500; line-height: 30px; margin-top: 7px; 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; object-fit: cover; border-radius:5px;} /* main screens 1920/1080 */ @media (min-width: 1000px) {.tag-img {height: 212px;}} /* double screens 2000/1080 */ @media (min-width: 2000px) {.tag-img {height: 300px;}} .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: 2px solid #0e1319 !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;} .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} .newstitle p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Segoe UI Symbol"; font-size: 27px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #c0f941 !important; } @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;} /* VOOR TRANSPARANTE HEADER BIJ PROFILE EN BIO */ @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;} @media (max-width: 768px) {.col-md-3 {flex: 0 0 100%; max-width: 100%;}} .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%;} } /* ========================================================================== ipad adjustments ========================================================================== */ @media only screen and (min-width : 768px) and (max-width : 1024px) { .w3-large {font-size: 14px !important;} .w3-small {font-size: 11px !important;} } @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { .splitleft {position: fixed; width: 70%; top: 69px; left: 0px; right: 30%; height: calc(100vh - 69px); overflow-y: scroll;} .splitright {position: fixed; width: 30%; top: 69px; right: 0px; height: calc(100vh - 69px); overflow-y: scroll; overflow-x: hidden;} .aatsflexrowxxx .list {width: 68.8vw !important;} /* DUBIEUS */ .aatsflexrow .list-item {width: 50% !important;} } .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 - 1px);} /* was 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%; 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);} } /* 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; -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;} .w3-container td.active {font-weight: 700 !important;} @media screen and (max-width: 800px) { .sidebaritem {margin-left:30px !important;} .w3-container .l {margin-left:30px !important;} } /* card */ .innertext {display:block; width:100%; text-align:center; padding-bottom:12px; font-size: 17px;} .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%;} .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;} .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;} .floatshare {float: left; margin-top: 50px; margin-left: 24px;} 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;} .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: 700px) {.h4,h4 {font-size: 1.48rem !important}} @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; margin-top: 12px !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; border-radius: 4px; border: 1px solid #132030; background-color: #17202f;} .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: #FFFFFF; background-color: #18202f; border: 1px solid #80bdff !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; min-width: 190px; } @media (max-device-width: 800px) { .col-md-10 {flex: 0 0 100%; max-width: 100%;} .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;}} .modal {padding-left: 0px !important} .nobackground {background: transparent; margin-top: -20px;} .fixed-topx {z-index: 9999;} .modalbody-aatventure.darkbackground {background: #0f1722 !important; margin-top: 0px !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} @media screen and (max-width:760px) { .modal {top: 68px !important;} .modal-backdrop {top: 0px !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;} } /* ========================================================================== 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; } /* ========================================================================== 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; } .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; padding-top: 10px} .mobileeditx {padding-left: 26px !important; padding-right: 26px !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 .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;} .ml-3 .heart {display: block; top: -9px !important;} @media screen and (min-width: 760px) { .btn-primary, .btn-danger {min-width: 100px;} .ml-3 .heart {margin-left: 30%;} } @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; z-index: 50; } .historybackgroundstatic .options { bottom:unset !important; top: calc(100vh - 65px); } .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; } .status-onetag {display: none !important;} .statstyle-corona .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; } .statstyle-toppop .statusoverlay { border: 5px solid #000000; box-shadow: 0px 0px 5px 2px #0a0909; border-radius: 50%; width: 80px; height: 80px; color: #000000; opacity: 0.9; text-align: center; font-size: 26px; padding-top: 16px; } .status-vhs { border: 5px solid #000000; box-shadow: 0px !important; border-radius: 5% !important; width: 120px !important; height: 44px !important; color: #000000 !important; font-size: 20px !important; padding-top: 3px !important; background: #FFFFFF !important; } .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; } .optbtn {width: 22% !important;} .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;} .aatscanvas { position: absolute; width: 100vw; top: 140px; padding: 40px; } .blurred-box { position: relative; width: 250px; height: 350px; top: calc(50% - 175px); left: calc(50% - 125px); background: inherit; border-radius: 2px; overflow: hidden; } .blurred-box:after { content: ''; width: 300px; height: 300px; background: inherit; position: absolute; left: -25px; right: 0; top: -25px; bottom: 0; box-shadow: inset 0 0 0 200px rgba(255,255,255,0.05); filter: blur(10px); } #fetti { position: fixed; top: 30px; left: -40px; width: 7vw; height: 100vh; background: transparent !important; pointer-events: none; z-index: 777; } #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/backgrounds/clockoptionsbackground2020.jpg"); background-repeat: no-repeat; background-size:100% 800px;} .max18 {max-width: 18% !important;} .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;} #btn-language svg {margin-left: 6px; margin-top:-4px;} #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%; background-color: #111c29; color: #FFFFFF;} .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);} .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/filterbackground.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; 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-productinfo { color: #FFFFFF; font-size: 18px; line-height: 1; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; 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; } .modal-title { width: 100%; 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; text-align: left; padding-left: 10px; width: 100%; margin-top: -12px; font-family: "Myriad Regular" !important; font-size: 26px; font-weight: 700; text-transform: uppercase; } .infox {margin: 0 !important; font-size: 22px; line-height: 1.9;} .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 {top:150px !important; 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;}} label.css-label {background-image: url('../img/interface/csscheckbox.png'); -webkit-touch-callout: none; user-select: none;} 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;} .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;} .categoryimage img {width: 400px !important; height: 200px !important; border-radius: 8px !important;} /* ========================================================================== 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;} /* ========================================================================== 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: hidden;} .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} @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} @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;} /* ========================================================================== kenburns effect ========================================================================== */ .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: 338px; top: 0px;} .margintop-80 {margin-top: -252px;} .profile-card-about {color: #95a2bd !important;} .norow {margin-left:22px !important; margin-right:0 !important} #KenBurns {height: 380px !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; } .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;} @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 / weightshop ========================================================================== */ .zichtbaar {color: #FFFFFF !important;} .onzichtbaar {color: #4A0B00 !important;} /* Logoutbox */ .logoutbox1-aatventure {background-color: #5D6F86 !important;} .logoutbox1-aatventure div {background-color: #819dbd !important;} .logoutbox2-aatventure::before, .logoutbox3-aatventure::before {background-color: #4D5F76 !important;} .logoutbox2-aatventure::after, .logoutbox3-aatventure::after {background-color: #718dad !important;} @media screen and (min-width: 600px) { .scrollbar-aatventure::-webkit-scrollbar {width: 12px;} .scrollbar-aatventure::-webkit-scrollbar-track-piece {background-color: #2b3038;} .scrollbar-aatventure::-webkit-scrollbar-thumb {background-color: #1e2c3a;} } /* ========================================================================== mobileheaders / floatingbuttons ========================================================================== */ .appheader-portguide {box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);} @media screen and (max-width: 400px) { .mobileheader-annamimi {background-image: url(../../img/mobileheaders/annamimi.jpg); background-size: 100% 60px !important;} .mobileheader-cafe-hilander {background-image: url(../../img/mobileheaders/cafe-hilander.jpg); background-size: 100% 60px !important;} .mobileheader-dogs-barbershop {background-image: url(../../img/mobileheaders/dogs-barbershop.jpg); background-size: 100% 60px !important;} .mobileheader-farasi {background-image: url(../../img/mobileheaders/farasi.jpg); background-size: 100% 60px !important;} .mobileheader-hasta-la-pasta {background-image: url(../../img/mobileheaders/hasta-la-pasta.jpg); background-size: 100% 60px !important;} .mobileheader-house-of-m-comics {background-image: url(../../img/mobileheaders/house-of-m-comics.jpg); background-size: 100% 60px !important;} .mobileheader-legio {background-image: url(../../img/mobileheaders/legio.jpg); background-size: 100% 60px !important;} .mobileheader-og-roosters {background-image: url(../../img/mobileheaders/og-roosters.jpg); background-size: 100% 60px !important;} .mobileheader-portguide {background-image: url(../../img/mobileheaders/portguide.jpg); background-size: 100% 60px !important;} .mobileheader-rens-vastgoedzorg {background-image: url(../../img/mobileheaders/rens-vastgoedzorg.jpg); background-size: 100% 60px !important;} .mobileheader-slagerij-verstappen {background-image: url(../../img/mobileheaders/slagerij-verstappen.jpg); background-size: 100% 60px !important;} .mobileheader-slagerij-verstappen-zakelijk {background-image: url(../../img/mobileheaders/slagerij-verstappen.jpg); background-size: 100% 60px !important;} .mobileheader-slagerij-van-hoorenbeeck {background-image: url(../../img/mobileheaders/slagerij-van-hoorenbeeck.jpg); background-size: 100% 60px !important;} .mobileheader-slagerij-de-tram {background-image: url(../../img/mobileheaders/tram-bbq.jpg); background-size: 100% 60px !important;} .mobileheader-sushisensei {background-image: url(../../img/mobileheaders/sushisensei.jpg); background-size: 100% 60px !important;} .mobileheader-timber {background-image: url(../../img/mobileheaders/timber.jpg); background-size: 100% 60px !important;} .mobileheader-veilig-op-slot {background-image: url(../../img/mobileheaders/veilig-op-slot.jpg); background-size: 100% 60px !important;} .mobileheader-yip-soon {background-image: url(../../img/mobileheaders/yip-soon.jpg); background-size: 100% 60px !important;} .mobileheader-zero-sushi-snacks {background-image: url(../../img/mobileheaders/zero-sushi-snacks.jpg); background-size: 100% 60px !important;} .mobileheader-zero-sushi-snacks {background-image: url(../../img/mobileheaders/bydeb-fashion.jpg); background-size: 100% 60px !important;} .mobileheader-yip-soon {background-color: #FFFFFF; border-bottom: 0px !important;} .mobileheader-og-roosters {background-color: #0c348e !important; color: #000000 !important; border-bottom: 2px solid #021028 !important;} .mobileheader-timber {background-color: #f6eedb !important; border-bottom: 0px solid #a26130 !important;} .assgroepbg-sushi {background-size: 213% !important;} } @media screen and (min-width: 400px) and (max-width: 600px) { .mobileheader-annamimi {background-image: url(../../img/mobileheaders/annamimi-zorg.jpg); background-size: 100% 70px !important;} .mobileheader-cafe-hilander {background-image: url(../../img/mobileheaders/cafe-hilander.jpg); background-size: 100% 70px !important;} .mobileheader-dogs-barbershop {background-image: url(../../img/mobileheaders/dogs-barbershop.jpg); background-size: 100% 70px !important;} .mobileheader-farasi {background-image: url(../../img/mobileheaders/farasi.jpg); background-size: 100% 70px !important;} .mobileheader-hasta-la-pasta {background-image: url(../../img/mobileheaders/hasta-la-pasta.jpg); background-size: 100% 70px !important;} .mobileheader-house-of-m-comics {background-image: url(../../img/mobileheaders/house-of-m-comics.jpg); background-size: 100% 70px !important;} .mobileheader-legio {background-image: url(../../img/mobileheaders/legio.jpg); background-size: 100% 70px !important;} .mobileheader-og-roosters {background-image: url(../../img/mobileheaders/og-roosters.jpg); background-size: 100% 70px !important;} .mobileheader-portguide {background-image: url(../../img/mobileheaders/portguide.jpg); background-size: 100% 70px !important;} .mobileheader-rens-vastgoedzorg {background-image: url(../../img/mobileheaders/rens-vastgoedzorg.jpg); background-size: 100% 70px !important;} .mobileheader-slagerij-verstappen {background-image: url(../../img/mobileheaders/slagerij-verstappen.jpg); background-size: 100% 70px !important;} .mobileheader-slagerij-verstappen-zakelijk {background-image: url(../../img/mobileheaders/slagerij-verstappen.jpg); background-size: 100% 70px !important;} .mobileheader-slagerij-van-hoorenbeeck {background-image: url(../../img/mobileheaders/slagerij-van-hoorenbeeck.jpg); background-size: 100% 70px !important;} .mobileheader-slagerij-de-tram {background-image: url(../../img/mobileheaders/tram-bbq.jpg); background-size: 100% 70px !important;} .mobileheader-sushisensei {background-image: url(../../img/mobileheaders/sushisensei.jpg); background-size: 100% 70px !important;} .mobileheader-timber {background-image: url(../../img/mobileheaders/timber.jpg); background-size: 100% 70px !important;} .mobileheader-veilig-op-slot {background-image: url(../../img/mobileheaders/veilig-op-slot.jpg); background-size: 100% 70px !important;} .mobileheader-yip-soon {background-image: url(../../img/mobileheaders/yip-soon.jpg); background-size: 100% 70px !important;} .mobileheader-zero-sushi-snacks {background-image: url(../../img/mobileheaders/zero-sushi-snacks.jpg); background-size: 100% 70px !important;} .mobileheader-bydeb-fashion {background-image: url(../../img/mobileheaders/bydeb-fashion.jpg); background-size: 100% 70px !important;} .mobileheader-yip-soon {background-color: #FFFFFF; border-bottom: 0px !important;} .mobileheader-og-roosters {background-color: #0c348e !important; color: #000000 !important; border-bottom: 2px solid #021028 !important;} .mobileheader-timber {background-color: #f6eedb !important; border-bottom: 0px solid #a26130 !important;} .assgroepbg-sushi {background-size: 213% !important;} } .mobilemenubackground-aatventure {background: url(../../img/backgrounds/techmenubgnext.jpg); background-size: 100vw;} .xxsidebarlogo-aatventure {background-image: url(../../img/sidebarlogos/onair.jpg)} .xxsidebarbgcolor-aatventure {background-color: #0e151f;} .td-aatventure li {border-bottom: 1px solid #1b293c;} .td-aatventure li:hover {background-color: #136DC6;} /* sidebar tags */ .xxxtaglist-aatventure {background-color: #1764CA; border: 1px solid #000000;} .xxxtaglist-aatventure:hover {background-color: #3784EA; border: 1px solid #FFD335;} .genresbackground {background-color: #042650; background-image: url(../../img/backgrounds/genresbackground-bw.jpg); background-repeat: no-repeat; background-size: auto 100%;} @media screen and (min-width: 800px) { .genresbackground {background-size: 100% auto !important;} } .searchbg-aatventure {background-color: rgba(10,10,20,0.9); background-image: url(../../img/backgrounds/filterbackground.jpg); background-size: cover;} .searchbg-aatventure {background-color: transparent !important;} .aatspopup-aatventure li {background-color: transparent !important;} .groupsbody-aatventure {background-color: rgb(17, 17, 17) !important;} .assgroepbg-aatventure {background-color: #1863ca;} .fullcard-aatventure {border-bottom: 0px solid transparent !important;} /* ========================================================================== aatventure 2022 ========================================================================== */ .body-aatventure {background-color: #090a0e;} .bginstant-aatventure {background-color: #090a0e;} .dashboardbg-aatventurex {background-color: #090a0e; background:url('../img/dashboard/canvas2018.jpg') no-repeat; background-size:cover;} .darkboardbg-aatventure {background-color: #090a0e; background:url('../img/dashboard/dashboarddarkside.webp') no-repeat; background-size:cover;} .loginbg-aatventure {background-color: #4c5e76; background-image: url(../../img/navicons/navback.png); background-repeat: no-repeat; background-size: cover;} .jumbotron-aatventure {background-color: #171B22 !important; background-image: url(../../img/navicons/bloggradient.jpg); border-bottom: 1px solid rgba(0,0,0,.0975); color: #2c2f39;} .jumbotronadmin-aatventure {background-color: #171B22; background-image: url(../../img/navicons/bloggradient.jpg); color: #d9dbe2!important;} .adminbody-aatventure {background:url('../../img/backgrounds/canvas2018.jpg') no-repeat; background-size:cover;} .menicon-aatventure {background-color: #d3ff34 !important;} .pdftoolbar-aatventure {background-color: #15202b !important} .profilecard-aatventurex {background-color: #313b4c; border: 1px solid #535e6d;} .profilebackground-aatventure {background: linear-gradient(to bottom, #282e38, #171b22, #191d25) !important; border-bottom: 7px solid #2781e6;} .hr-aatventure {background-color: rgb(49, 116, 195) !important;} .select2-container--bootstrap .select2-results > .select2-results__options::-webkit-scrollbar {width:0px !important} .select2-container--bootstrap .select2-results > .select2-results__options::-webkit-scrollbar-thumb {background-color: #94565d !important;} .select2-container--bootstrap .select2-results > .select2-results__options::-webkit-scrollbar-track-piece {background-color: #3e2529 !important;} .modalbodyi-aatventure .select2-selection {background-color: #292D3A !important;} .dynamic-aatventure .modal-body {background-color:#3d4e60; color: #FFFFFF !important;} .dynamic-aatventure .modal-header {background-color: #1d2f3f; border-bottom: 1px solid #000000;} .dynamic-aatventure .modal-title {color: #4286F4; color: #FFFFFF !important;} .dynamic-aatventure .modal-content {background-color:#3d4e60; ; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);} .dynamic-aatventure .modal-footer {background-color:#1e303f; border-top:1px solid #000000; color: #FFFFFF;} .dynamic-aatventure .close {color: #FFFFFF;} .dynamic-aatventure .btn-primary {background-color: #337ab7; border-color: #2e6da4; opacity:1 !important} .closebutton-aatventure {color: #FFFFFF !important;} .formcontrol-aatventure {background-color: #292D3A; border: 1px solid #292D3A; color: #FFFFFF !important;} .btndanger-aatventure {background-color: #FF4823; border-color: #FF4823;} .btnsuccess-aatventure {background-color: #0AB87D !important; border-color: #54C206 !important;} /* datepicker addons */ .flexitem-aatventure .picker {background-color: #15171d !important;} .flexitem-aatventure .picker__table td {border: 1px solid #000000 !important;} .flexitem-aatventure .picker__nav--prev, .flexitem-aatventure.picker__nav--next {background: #4a4e5d !important;} .flexitem-aatventure .picker__nav--prev:before {border-right: 0.75em solid #2a2e3a !important;} .flexitem-aatventure .picker__nav--next:before {border-left: 0.75em solid #2a2e3a !important;} .flexitem-aatventure .picker__day--highlighted {background: #c4e62c !important; border-color: #1f1f1f; color: #FFFFFF !important;} @media screen and (max-width: 1100px) { .scrollnavcontainer {background-color: transparent;} .scrollnav-aatventure {background-color: #2a2e3a;} } .loginmenubackground-aatventure {background-color: #191d23;} .bigproducttext:after {color: transparent;}