/* ==========================================================================================
   AATVENTURE WIREBLOG 24-07-2025
   user interface for blog layout
   ========================================================================================== */

@font-face {font-family: 'Roboto Light';         src: url('../../fonts/Roboto-Light.woff')                 format('woff');  font-weight: 300; font-display: swap;} 
@font-face {font-family: 'Roboto Regular';       src: url('../../fonts/Roboto-Regular.woff')               format('woff');  font-weight: 400; font-display: swap;}  
@font-face {font-family: 'Roboto Medium';        src: url('../../fonts/Roboto-Medium.woff')                format('woff');  font-weight: 500; font-display: swap;} 
@font-face {font-family: 'Roboto Bold';          src: url('../../fonts/Roboto-Bold.woff')                  format('woff');  font-weight: 700; font-display: swap;}  
@font-face {font-family: 'Roboto Black';         src: url('../../fonts/Roboto-Black.woff')                 format('woff');  font-weight: 700; font-display: swap;}
@font-face {font-family: 'Open Sans';            src: url('../../fonts/OpenSans-Regular.woff2')            format('woff2'); font-display: swap;}
@font-face {font-family: 'Myriad Regular';       src: url('../../fonts/MyriadPro-Regular.woff')            format('woff');  font-display: swap;}
@font-face {font-family: 'Olivetti Valentine';   src: url('../../fonts/Olivetti-Valentine.woff2')          format('woff2');}
@font-face {font-family: 'Oswald Bold';          src: url('../../fonts/Oswald-Bold.woff')                  format('woff');}
@font-face {font-family: 'Rajdhani Regular';     src: url('../../fonts/Rajdhani-Regular.woff')             format('woff');}
@font-face {font-family: 'VCRMONO';              src: url('../../fonts/VCROSDMono.woff2')                  format('woff2');}
@font-face {font-family: 'Glyphicons Halflings'; src: url('../../fonts/glyphicons-halflings-regular.woff') format('woff'); font-display: swap;}
@media screen and (min-width: 760px) {::-webkit-scrollbar             {width: 12px} 
                                      ::-webkit-scrollbar-thumb       {background-color: #062D40;}
                                      ::-webkit-scrollbar-track-piece {background-color: #021924;}}

html               {touch-action: manipulation; overscroll-behavior-y: contain;}
body               {position:absolute; background-color: #090b14; color: #FFFFFF;}
input              {background-color: #000000 !important; color: #FFFFFF !important;}
.body-aatventure   {background-color: #090b14;}
.maincontainer     {margin-top:0px; overflow-x: hidden; margin-left:auto; margin-right: auto;}
.videos            {margin-bottom:-10px;}
.hidden            {display: none;}
.wirecontainer     {user-select: none;}
.loadingcontentx   {position:fixed; width:100vw; height: 100vh; background-color:#FF0000; z-index:999999;}
.loadingcontent    {display:none !important;}
.wirecard          {background-color: #000000;}
.borderbottom      {border-bottom: 88px solid rgb(19, 21, 25); border-radius: calc(.25rem - 1px);}
.titletext         {position: relative; font-size: 1.5rem; margin-top: -90px; font-weight: 500; line-height: 1.2; z-index: 9;}
.titletext         {min-height: 58px;}
.desctext          {position: relative; font-family: "AnonymousPro"; font-size: 0.9rem; margin-top: 10px;  line-height: 1.3; z-index: 9;}
.videothumb        {object-fit: cover;}
.search-button     {display: none;}
.flexsearch        {display: flex;}
.horimg            {max-width: 60px !important;}
.img-fluid         {max-width: 100%; height: auto; margin-left: auto; margin-right: auto;}
.avatar-sm         {height: 40px !important; width: 40px !important;}
.horflex           {background: #20232D; bottom:0px; margin-top: 28px; margin-left:-15px; margin-right:-15px; height: 40px;}
.wireusername      {position: absolute; color: rgb(127, 129, 136); font-size: 13px; text-transform: lowercase; left: 50px; margin-top: -27px; width: 300px;}
.innerflex         {display: flex;}
.wiresearch:before {content: "\e000";}
.appid2            {display: none;}
.u_the-archiver    {min-height: 660px !important;}
.desctext          {padding-top: 20px;}
.filtertext        {color: #656b7e; cursor: pointer;}
.text-muted        {color: #FFFFFF; opacity: 0.6;}
.center-container  {position: absolute; top: 0px; right: -20px !important; width: 300px; text-align: right;}
.center-container  {display: flex; align-items: center; height: 40px;}
.category-middle   {position: absolute; display: inline-flex; align-items: center;  gap: 0px; top: 1rem; right: 50px; font-size: 12px; text-transform: uppercase; padding: 3px; z-index: 3;}
.youtube           {width: 100%; overflow: hidden; margin: 0; border-bottom: 88px solid rgb(19, 21, 25); border-radius: calc(.25rem - 1px);}
.notube            {width: 100%; overflow: hidden; margin: 0; margin-bottom: 20px; border-bottom: 91px solid rgb(19, 21, 25); border-radius: calc(.25rem - 1px);}
.list-left         {float: left; padding-right: 7px;}
.float-right       {float: right !important;}
.change-ratio      {width: 100%; margin: -10% 0;}
.align-middle      {vertical-align: middle !important;}
.list-item         {display: block; position: relative; min-height: 58px;}
.anchor            {cursor: pointer !important;}
.mt-5              {position: relative !important;}

@media (min-width: 1580px) {.youtube {height: 356px;}}
@media (min-width: 1580px) {.notube  {min-height: 356px;}}

.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::before {display: block; content: "";}
.embed-responsive-16by9::before {padding-top: 56.25%;}

/* ==========================================================================
   nakijken
   ========================================================================== */

.grid-blog     .richcontent {margin-bottom: -30px !important;}
.imagepost     .imagethumb  {min-height:260px; object-fit: cover;}
.doubleheight  .imagethumb  {height: initial !important;}
.trippleheight .imagethumb  {height: initial !important;}

.App_footer__29Fsv {bottom: -18px !important; background: #000000 !important;}

/* ==========================================================================
   scroll lines
   ========================================================================== */

.scroll-line  {position: fixed; width: 3px; height: 100%; z-index: 99;}
.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)}
}

/* icons  */
.icons {font-family: 'simple-line-icons'; font-style: normal; line-height: 1; min-width: 55px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.wirecategory .icon-social-youtube {font-size: 23px; min-width: 34px;}
.icon-social-youtube:before        {content: "\e008";}
.icon-arrow-left:before            {content: "\e605";}
.icon-arrow-right:before           {content: "\e606";}
.icon-shuffle:before               {content: "\e059";}

/* button */
.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;}
.btn-group-sm>.btn, .btn-sm {padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem; margin-right: 5px;}
.btn-block {display: block; width: 100%;}
.btn-secondary {color: #FFFFFF;}
.prevnextbuttons {margin-top: 10px !important; margin-bottom: 14px !important;}
.btn-arrow {background-color: #111316; color: #FFFFFF; border-color: #1d2c3a; box-shadow: rgb(29, 44, 58) 0px 0px 70px inset; opacity: 0.6;}
@media screen and (min-width: 760px) {.btn-primary, .btn-danger {min-width: 100px;}}

/* overlays */
.statusoverlay {position: absolute; bottom: 15px; 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-countdown {width: 100px !important; background-color: #000000 !important; color: #FFFFFF !important;}
.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;}

@media screen and (max-width: 800px) {.videothumb  {height: 240px;}}

@media (min-width: 1024px) {
  .body              {overflow-y: scroll !important;}
  .maincontainer     {height: 100%;}
  .grid-cols-1       {grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px;}
  .wiresearch        {position: absolute; top: 4px; right: 40px; color: #FFFFFF; z-index: 99999; font-size: 33px; font-family: 'icomoon'; -webkit-font-smoothing: antialiased; cursor: pointer;}
  #search-input      {position: absolute; top: 5px; right: 100px; min-width: 300px; height: 45px; border-radius:6px !important;}
  .wirecontainer     {margin-top: 0px;}
  .wirecard          {min-height: 524px;}
  .wirecardy:hover   {transform: scale(1.05) !important; box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0); z-index:999999;}
  .horflex           {position: relative; bottom: 0px;}
  .doubleheight      {display: grid; grid-row: span 2; grid-column: span 1; align-content: space-between;}
  .tripleheight      {display: grid; grid-row: span 2; 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 2; grid-column: span 1; align-content: space-between;}
  .searchfilter      {position: fixed; top: 8px; right: 225px; z-index: 9999999;}
  .tagsunderpost     {margin-bottom: 5px !important;}
  .desctext          {min-height: 80px;}
  .posttags          {min-height: 16px;}
  .videothumb        {max-height: 260px;}
  .titletext         {min-height: 54px;}
}

.k_news  {height: 290px; min-height: 290px !important;}

@media (max-width: 1024px) {
  .body              {overflow: hidden !important;}
  .wirecontainer     {position: absolute; left: 0px; width:100vw; height:100vh; margin-top: -8px; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; padding-bottom: 100px;}
  .searchfilter      {position: fixed; top: 8px; left: 25px; z-index: 9999999;}
  .maincontainer     {padding-left: 0px; padding-right: 0px;}
  .wiresearch        {position: fixed; top: 11px; right: 79px; color: #FFFFFF; z-index: 99999; font-size: 33px; font-family: 'icomoon'; -webkit-font-smoothing: antialiased; cursor: pointer;}
   #search-input     {position: fixed; top: 11px; left: 14px; min-width: 264px; height: 50px; border-radius:6px !important;}
  .wirecard          {min-height: 504px;}
  .category-middle   {padding-top: 10px;} 
  .doubleheight      {min-height: 852px;}
  .tripleheight      {min-height: 960px;}
  .card-doubleheight {min-height: 852px;}
  .card-tripleheight {min-height: 960px;}
  .wirepages         {position: absolute; background-color: #000000; left:0px; bottom: 0px; height: 35px; z-index: 9999; width: 100vw; overflow: hidden;}
  .wirepages span    {width:50vw; color: #1f2937; border-radius:0px !important; margin: 0px; border:0px;}
  .wirepages button  {display: inline-block; width:50vw; color: #FFFFFF !important; border-radius:0px !important; margin: 0px; border:0px;}
  .c_aatventure-progressive-web-apps {min-height: 820px;}
}

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

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

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

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

/* filtergrid */
.filtergrid  {display:flex;flex-basis:0;width:100%;min-width:100%;background-color:#090b14;}
.filtergrid  {align-items: flex-start; justify-content: space-evenly; align-content: center; flex-wrap: nowrap; flex-direction: row;}
.filter-1of3 {padding-right:5px; padding-left:5px;}

@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: 768px) {
  .smallgrid .size-1of8 .card {align-items: center; height: 240px;}
}

@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-left: 5px; padding-right: 5px;}
.size-1of2 {width: 50%;     padding-left: 5px; padding-right: 5px;}
.size-1of3 {width: 33.333%; padding-left: 5px; padding-right: 5px;}
.size-1of4 {width: 25%;     padding-left: 4px; padding-right: 4px;}
.size-1of5 {width: 20%;     padding-left: 5px; padding-right: 5px;}
.size-1of6 {width: 16.666%; padding-left: 5px; padding-right: 5px;}
.size-1of7 {width: 14.285%; padding-left: 5px; padding-right: 5px;}
.size-1of8 {width: 12.5%;   padding-left: 5px; padding-right: 5px;}

@media screen and (max-width: 768px) {
  .size-1of1 {padding-right: 17px; padding-left: 17px;}
}

/* containers */
.container {width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto}
.container-fluid, .container-lg, .container-md, .container-sm, .container-xl {width: 100%; margin-right: auto; margin-left: auto;}
.aatventuregridcontainer .youtube .change-ratio{max-height:initial;}
.notube .change-ratio {max-height:initial; margin: 0 0 !important;}
#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;}
@media screen and (min-width: 1200px)  {.maincontainermargin {max-width: 98vw;}}
@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 (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;}}

/* pagination */
.pagination        {position: relative !important; display: flex; padding-left: 0; list-style: none; border-radius: .25rem; margin-left: 0px; margin-bottom: 40px; overflow-y: hidden;}
#pagination span   {background-color: #000000 !important;}
#pagination button {background-color: #000000 !important;}
.page-item                   {z-index: 3;}
.page-link                   {position: relative; display: block; text-decoration: none; color: #9198a5; padding: .5rem .75rem; margin-left: -1px; width: 50px; height: 50px; line-height: 2; text-align: center;}
.page-link:hover             {color: #FFFFFF; z-index: 2;}
.page-item.active .page-link {color: #FFFFFF; z-index: 2;}
.disabled                    {opacity: 0 !important; pointer-events: none !important;}
.leading-5 span              {padding-top: 2px;}
.leading-5 span:first-child  {display: inline-block; padding-top: 9px;}
.blog-footer                 {display: none !important;}
/* modal */
.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; padding-left: 0px !important;}
.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-header{display:flex;height:50px;padding:22px;background-color:#5B6E7E;border-bottom:1px solid #000000;box-shadow:0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
.modal-title{width:100%;line-height:1.42857143;margin:0;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;text-align:left;width:100%;}
.modal-open .modal{overflow-x:hidden;overflow-y:auto;}
.modassgroupheader{height:56px;height:60px!important;}
.modal-title {width: 100%; line-height: 1.42857143; margin: 0; text-overflow: ellipsis; display: -webkit-box; text-align: left;width: 100%;}
.modaltitle-aatventure {font-family: "Myriad Regular" !important; font-size: 26px !important; padding-left: 10px; margin-top: -10px;font-family: "Myriad Regular" !important;font-weight: 700; text-transform: uppercase;}
.modassgroupheader {height: 60px;}

@media screen and (max-width:760px) {.modal{top:68px!important;} .modal-dialog{margin:0px !important;} .modal-open .modal{height:100vh;background-color:#000000;}}
@media screen and (width: 768px) and (orientation : portrait){.modal-dialog{margin-top:100px !important;}}
@media (max-width: 768px)  {.modal-content {border-radius:0 !important;}}
@media (max-width: 600px)  {.modal-dialog {position:absolute; width:100%;}}
@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;}}
@media screen and (max-width: 600px) {.modal{height:100vh;}}

/* modal list */
.w3-ul li {font-family: "Roboto Light"; min-height: 60px; padding: 8px 16px; -webkit-font-smoothing: antialiased; cursor: pointer;}
.w3-large {font-size: 18px !important; margin-top: 0px;}
.w3-small {display: block; font-size: 15px; margin-top: -5px;}
.w3-left {float:left!important;}
.w3-hoverable li img {height: 45px; width: auto; max-width: 66px; border-radius: 8px;}
.w3-margin-right {float: left !important; margin-right:16px!important;}
.w3-ul {color:#FFFFFF!important;}
.w3-ul a {color: #FFFFFF;}
.td-aatventure li:hover {background-color: #136DC6;}
@media only screen and (min-width : 768px) and (max-width : 1024px) {.w3-large{font-size:14px!important;} .w3-small{font-size:11px!important;}}

/* cards */
.card {position: relative; display: flex; flex-direction: column; width: 100% !important; word-wrap: break-word; border-radius: .25rem; border: 0px; margin-bottom: 10px; user-select: none;}
.card-img{object-fit:cover;}
.card-img, .card-img-bottom, .card-img-top {flex-shrink: 0; width: 100%;}
.card-img-overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 1.25rem;}
.c_wiki {border: 1px solid #000000 !important; background-image: none !important; margin-bottom: -34px !important;}
.card-img {object-fit:cover;}
.card-aatventure {background-image: url('../../boot/subtle.webp'); background-size: 100% 700px;}
.cats .card {border-bottom: 2px solid #0e1319 !important;}

@media (min-width: 700px) {.card {transition: transform .5s; border-radius: 6px;}}
@media screen and (min-width: 1024px) {.card-body {padding: 50px !important;}}

/* card overlays */
.bottom-txt  {position: absolute; left: 1.25rem; right: 1.25rem; bottom: 4rem; margin-bottom: -42px; z-index: 0;opacity: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.2; height: 54px;}
.card-date   {position: relative; width: 100%; bottom: 44px; right: 1.25rem; text-align: right; opacity: 0.3 !important;}
.author      {position: relative; bottom: 20px; z-index: 3; margin-top: 14px; left: 15px;}
.author span {display: inline-block; margin-bottom: -13px; padding-left: 4px; color: #7f8188 !important; text-transform: lowercase; font-size: 13px;}
.playericon  {position: absolute; top: .6rem; right: 1.25rem; z-index: 3; font-size: 1.6rem;}
.category    {position: absolute; font-size: 12px; text-transform: uppercase; padding: .25rem; top: 1rem; right: 1rem; z-index: 3;}

/* legacy */
.cardx          {min-width: 0; background-clip: border-box; border-bottom: 40px solid transparent !important;}
.card-datex     {position: absolute !important; display: inline-block; right: 1.25rem !important; bottom: -28px !important;}
.authorx        {position: absolute !important; bottom: -34px !important; z-index: 3;}
.statusoverlayx {bottom: 100px !important;}
.overlay-onetag {display:none !important;}

/* categories*/
.tag-img         {height: 220px; object-fit: cover; border-radius: 5px;}
.link-over       {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; cursor: pointer;}
.bg-over         {background: rgba(0, 0, 0, 0.1); width: 100%;}
.bg-over:hover   {background: rgba(0,0,0,0);}
.aatfastsubtitle {display: block; font-weight: 300; font-size: 20px; color: #C0C0C0; line-height: 30px; margin-top: 0px; text-transform: uppercase;}
.aatsfasttitle   {display: block; font-size: 2rem; font-weight: 500; line-height: 30px; margin-top: 9px; text-transform: uppercase;}
p                {font-family: "Open Sans";}

/* likes*/
.card-like  {position: absolute;top: 0; left: 0; padding: .25rem; z-index: 3;}
.card-count {font-size: 16px; color: #999999; margin-top: 9px; margin-left: 40px;}
.heart {position: absolute; top:0px; left: 5px; background: url('../../images/heart.png'); background-position: left; background-repeat: no-repeat; background-size: 1450px;
        height: 50px; width: 50px; cursor: pointer;}
.heartguest { position: absolute; top: 0px; left:5px; background: url('../../images/heart.png'); background-position: left; background-repeat: no-repeat; height: 50px; width: 50px; cursor: pointer; background-size:1450px;}
.heart:hover {background-position: right;}
.heartliked  {background-position: right;}
.heartAnimation {animation-name: heartBlast; animation-duration: .8s; animation-iteration-count: 1; animation-timing-function: steps(28); background-position: right;}
@keyframes heartBlast {0% {background-position: left;} 100% {background-position: right;}}

/* tags */
.tagsbackground {position: fixed; width: 100vw; height: 100vh; background-image: url('../../img/backgrounds/filterbackground.webp'); background-repeat: no-repeat; background-position: -20px;}
.noise {pointer-events: none; position: absolute; width: 100%; height: 100%; background-image: url('/../../img/interface/404.gif');
        background-repeat: repeat; background-size: contain; z-index: 1; opacity: 0.04;}
.terminal {pointer-events: none; position: absolute; width: 100%; height: 100%; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
           background-size: auto 4px; z-index: 1;}
.terminal::before {content: ""; pointer-events: none; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
                   background-image: linear-gradient(0deg, transparent 0%, rgb(32 115 128 / 20%) 2%, rgb(2 97 165) 3%, rgb(22 85 112 / 20%) 3%, transparent 100%); background-repeat: no-repeat;
                   animation: scan 7.5s linear 0s infinite;}
@keyframes scan {0% {background-position: 0 -100vh;} 35%, 100% {background-position: 0 100vh;}}
.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;}
.tagsgrid       {padding-top:20px; padding-left:5px;  padding-right: 5px;}
.artistgrid     {padding-top:26px; padding-left:5px;  padding-right: 5px;}
@media screen and (max-width: 768px) {.goedmakertje {padding-top: 86px;} .smalltext {font-size: 12px !important;} .smallgrid .size-1of3 .card {height: 166px;}}
@media screen and (min-width: 768px) {.img180px  {width: 176px !important; height: 176px !important; padding: 4px;} .extrapadding {padding: 15px !important;}}

@media screen and (min-width: 768px) {
  .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {padding-right: 15px; padding-left: 15px;}}
@media screen and (max-width: 768px) {
  .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {width: 100%; padding-left: 5px; padding-right: 5px;}}

/* news */
.row {display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;}
.o_news {opacity: 0 !important;}
.bginstant-aatventure {background: linear-gradient(#0e0f13, #1b1e24, #1b1e24);}
.newstitle   {margin-left: 1.25rem; margin-right: 1.25rem; margin-top: -100px; margin-bottom: .5rem;}
.newstitle p {font-family: "Roboto Bold"; font-size: 27px; font-weight: 500; line-height: 1.2; color: #c0f941 !important;}
.newsitem {border: 1px solid #000000; margin-bottom: 124px;}
.newscontent {font-size: 20px; color: #bec8d2; line-height: 1.5 !important; 
              margin-left: 1.25rem; margin-right: 1.25rem; margin-bottom: 20px; margin-top: 10px;}
.newscontent p {font-family: "Open Sans"; font-size: 20px; color: #bec8d2; line-height: 1.5 !important; margin-bottom: 16px;}
.newscontent a {color: #c0f941; font-size: 20px;}
.linebreak     {margin-top: 20px; margin-bottom: 0px !important;}

@media (min-width: 768px) {.card:hover {transform: scale(1.01); filter: brightness(1.1);}}

/* webshops */
.text-uppercase {text-transform: uppercase !important;}
.bottomline {position: absolute; bottom: -40px; font-size: 20px; padding-left: 4px; margin-bottom: .5rem; font-weight: 500; line-height: 1.2;}
.bginstant-aatventure .bottomline {font-family: "Olivetti Valentine";}
.moviebottom {border-bottom: 40px solid #0c1117 !important;}

/* games */
@media (max-width: 768px) {.blockrow {display: block !important; margin-left: -15px; margin-right: -15px;}}
@media (min-width: 768px) {.blockrow {margin-left: 5px; margin-right: 20px;}}
.c_game             {background: #000000 !important;}
.c_game .notube     {overflow: visible !important; border-bottom: 90px transparent !important;}
.o_game .bottom-txt {opacity:0 !important}
.o_game .authorx    {bottom: 20px !important;}

/* tools */
.blockrow .route-webtools .card {min-height: 246px; background: #1e2736 !important;}
.toolslink          {border-bottom: 1px solid #c6af46 !important;}
.c_tool             {height: 270px !important;}
.c_tool .notube     {overflow: visible !important; border-bottom: 90px transparent !important;}
.c_tool .card-like  {display: none !important;}
.c_tool .bottom-txt {text-align: center; opacity: 0 !important;}

/* pandora's musicbox niet scrollen want inner scrollt al*/
.pandoras-box #maincontainer {overflow: hidden; padding-left: 20px; padding-right: 26px;}
.maincontainer-artists       {overflow: hidden; padding-left: 20px; padding-right: 26px;}

.pandoras-box    {background-image: url('../../img/backgrounds/bwtech.jpg');}
.grid-music      {background: transparent !important;}
.yearoverlay     {position: absolute; bottom: -30px; right: 22px; width: 60px; color: #737373; padding: 2px; text-align: center;}
.o_music         {opacity: 0 !important;}
.c_music         {background: #00000073 !important; border-bottom: 1px solid #000000; border-radius: 50% 50% 20% 50%; transform: rotate(354deg) !important;}
.c_music .notube {border-bottom: 0px !important; overflow: visible !important;}
.c_music .notube .change-ratio {padding-top: 10px;}

/* pandora's effects */
.pandoras-box #backgroundimagecontainer {position: fixed; left: 0px; top: 70px; width: 100%; height: 100%; opacity: 0.7;}

@media (min-width: 768px) {.pandoras-box {background-size: cover;}}
@media (max-width: 768px) {.pandoras-box {background-size: initial}}

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

@media  (max-width: 768px) {
    .c_music {height: 190px !important;}
    .pandoras-box #backgroundimagecontainer {
        animation: zoombahton 100s infinite linear;
        background-image: url("../../img/backgrounds/trapcode.gif");
        background-size: 400%;
        background-position: -600px;
    }
}

@media (min-width: 768px) {
    .c_music     {height: 270px !important; 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;}
}

/* behind the scenes */
@media (max-width: 768px) {
    .i_divider       {height:200px !important}
    .divider .notube {border-bottom: 0px !important;}
}

/* time machine */
.historybackgroundscroll {margin-top: -10px; padding-top: 20px; width: 100vw; overflow-x: hidden;
                          background-color: #1c1911 !important; background-image: url('../../uploads/companies/aatventure/years/background.webp'); background-repeat: repeat;}
@media (min-width: 768px) {.historybackgroundscroll {background-size: 50% 25%;}}
.thumb3d {padding-bottom: 8px !important;}
.yeardiv {width: 100%; font-family: "Oswald Bold";
    font-size: 50px !important;
    background-color: #1d190f;
    background-image: url('../../uploads/companies/aatventure/years/defaultyear.webp');
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #564c2e !important;
    box-shadow: inset 0px 0px 20px #251c02;
    padding: 0px !important;
}

.profilecontent {margin-top: 30px;}
.richcontent    {padding-left: 1.25rem; padding-right: 1.25rem; z-index: 0; margin-bottom: 34px; margin-top: 10px;}

/* time machine cards*/
.o_wiki                       {opacity: 0 !important;}
.c_wiki                       {border: 1px solid #000000 !important; background-image: none !important; margin-bottom: -34px !important;}
.c_wiki .notube               {border-bottom:0px !important; height: 466px !important;}
.c_wiki .notube .change-ratio {margin:0px !important;}

/* cocktail flyer cards*/
.o_flyer                       {opacity: 0 !important;}
.c_flyer                       {border: 1px solid #000000 !important; background-image: none !important; margin-bottom: -34px !important;}
.c_flyer .notube               {border-bottom:0px !important;}
.c_flyer .notube .change-ratio {margin:0px !important;}

/* cocktail flyer cards */
.card-doubleheight .o_blog     {opacity: 0 !important;}
.card-doubleheight .c_blog     {border: 1px solid #000000 !important; background-image: none !important; margin-bottom: -34px !important;}
.card-doubleheight .notube     {border-bottom:0px !important;}
.card-doubleheight .notube .change-ratio {margin:0px !important;}

/* movies */
.movietitle          {opacity: 0; margin-bottom: -30px;}
.moviecontent        {margin-top: 34px !important;}
.richcontent p       {font-family: "Open Sans"; font-weight: 300; font-size: 20px; line-height: 1.6; color: #d8d5d5; margin: 0px;}
.o_movie .bottom-txt {display: none;}

/* weather */
.c_aatventure-current-weather .change-ratio   {margin:0px !important;}
.o_aatventure-current-weather .overlayweather {font-family: "Nexa Bold" !important; font-size: 13px; line-height: 24px; text-transform: uppercase;}
.o_aatventure-current-weather .category       {opacity: 0 !important;}
.o_aatventure-current-weather .card-like      {display: none;}
lft                                           {float: left !important;}
rgt                                           {float: right !important;}

/* apps */
.o_app         {opacity: 0 !important;}
.c_app         {border-bottom: 0px !important; margin-bottom: -50px; background-image: none !important;}
.c_app .notube {height: 258px !important; margin-bottom: 0px !important; border-bottom: 0px !important;}

@media (max-width: 768px) {
  .c_app {margin-bottom: -135px !important;}
}

/* footer */
.blog-footer {display: none !important;}

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

.col {flex-basis: 0; flex-grow: 1; max-width: 100%;}

.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 100%; max-width: 100%; margin: auto auto;} /* aangepast 2025  */
  .col-md-2  {flex: 0 0 100%; max-width: 100%}
  .col-md-4  {flex: 1 0 100%; max-width: 100%; margin: auto auto; opacity: 1 !important;} /* aangepast 2025  */
  .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: 70%;} /* 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% */
@media (max-width: 768px)  {.col-md-3 {flex: 0 0 100%; max-width: 100%;}}
@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;}}
@media (min-width: 1025px) {.col-md-8 {flex: 0 0 73% !important; max-width: 73% !important;}}

#maincontainer .col-md-8 {padding-left: 2px; padding-right: 2px;}

/* ==========================================================================
   MASTERSHOW!
   ========================================================================== */

  .embed-responsive {position: relative; display: block; width: 100%; padding: 0; overflow: hidden;}
  .donthover        {transform: none !important; filter: none !important;}

  .card-body {flex: 1 1 auto; min-height: 1px; padding: 1.25rem; box-shadow: inset 0 90px 10px #161b28;}
  @media screen and (min-width: 1024px) {.card-body {padding: 50px !important;}}
  .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;
  }

  #timestampoverlay {display: none; position: fixed; user-select: none;}
  @media screen and (min-width: 768px) {
    #timestampoverlay {right: 37px; width: 26%; height: calc(100vh - 70px); z-index: 99; background-color: #090A0E; overflow: scroll;}
  }

  .card-body h1      {font-family: "Roboto Black"; text-transform: uppercase; font-size: 30px; margin-top: 40px; margin-bottom: 40px; line-height: 1; color: #cbff03; color: #bef359;}
  .tagsunderpost     {position: relative; width: calc(100% + 70px); right: 4px; margin-top: 20px; grid-gap: 87px !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;}
  .hiermoetietsvoor .horizontalcontent .nav-link {width: 100px; padding-left: 0px !important;}
  .hortxt            {width: 68px; text-align: center; font-size: 12px !important; margin-top: 6px; color: #FFFFFF;}
  .tagsunderpost .hortxt {width: 80px; line-height: 1.2;}
  .tagimg            {width: 60px !important; height: 60px !important;}
  .splitcolumn p     {font-family: "Open Sans"; font-weight: 300; font-size: 20px; line-height: 1.6; color: #d8d5d5; margin: 0px; padding-right: 10px !important;}
  .ataradescription  {font-family: "Roboto Bold" !important; font-weight: 600 !important; margin-bottom: 30px !important; break-inside: avoid; letter-spacing: -0.3px; break-inside: avoid; padding-right: 10px;}
  .ataradescription  {font-size: 20px !important; line-height: 1.6 !important; color: #d8d5d5 !important;}
  .signature         {font-family: "Oswald Bold" !important; font-size: 30px; text-transform: uppercase; letter-spacing: 2px;
                      color: #faff00; margin-top: 50px; text-align: right;}
  .signaturebottom   {font-family: "VCRMONO" !important; font-size: 16px; text-transform: uppercase;
                      letter-spacing: 1px; color: #a3f794; color: #bef359; margin-top: -8px; text-align: right;}

  .aatsname             {position: absolute; margin-top: 2px; font-size: 20px; color: #FFFFFF !important;}
  .aatsusername         {position: absolute; margin-top: 28px; color: #FFFFFF !important;}
  .aatschannel          {position: absolute; margin-top: 27px; right: 0px;} /* edited */
  .aatstimeago          {position: absolute; margin-top: 8px; right: 0px;}  /* edited */
  .card-body .list-left {padding-right: 10px !important;}
  .card-body a          {color: #70adff;}
  .card-footer          {background: #040c1e;}

  .horizontalcontent::-webkit-scrollbar {display: none !important;}
  .tagsunderpost::-webkit-scrollbar     {width: 0px !important; height: 0px !important;}

  /* horizontalcontent zoom on hover 2025 */
  .horizontalcontent .nav-item       {transform-origin: center; transition: all .5s;}
  .horizontalcontent .nav-item:hover {transform-origin: center; transform: scale(1.2); transition: all .5s; margin-left: -8px;}

  @media (min-width: 768px) {
    .splitcolumn           {column-count: 2; column-gap: 50px; column-rule: 1px solid #1766bc; padding-bottom: 10px;}
    .card-body             {border-top: 1px solid #3c4048; box-shadow: inset 0 70px 20px #161b28; margin-top: 1px;}
    .margintop-30          {margin-top: -34px;}
    .tagsunderpost .center {width: 100px;text-align: center !important;}
     .card-footer          {margin-top: -60px; padding: 50px;}
    .tagsunderpost .hortxt {width: 100px;}
  }

  @media (max-width: 768px) {
    .card-body     {border-top: 1px solid #3c4048; box-shadow: inset 0 70px 20px #161b28; margin-top: 1px;}
    .col-md-4      {padding-left:0px !important; padding-right:0px !important;}
    .margintop-30  {margin-top: -10px;}
    .splitcolumn a {font-size: 14px !important;}
}

div.lesspadding  {padding-right: 0px; padding-left: 0px; text-align: center;}
.like            {margin-top: 0px !important; background-color: #ef883c; cursor: pointer; border-radius: 0;}
.btn-face        {display: block !important;; background-color: #3b5998; fill: rgb(255, 255, 255); color: #FFFFFF !important; cursor: pointer; border-radius: 0 !important;}
.btn-face svg    {height: 18px; width: 18px; vertical-align: middle;}
.btn-twit        {display: block !important;; background-color: #2ba9e1; fill: rgb(255, 255, 255); color: #FFFFFF !important; cursor: pointer; border-radius: 0 !important;}
.btn-twit svg    {height: 18px; width: 18px; vertical-align: middle;}
.btn-aat         {display: block !important; background-color: #2FD64B; fill: rgb(255, 255, 255); color: #FFFFFF !important; cursor: pointer; border-radius: 0 !important;}
.btn-aat svg     {height: 18px; width: 18px; vertical-align: middle;}
.share           {margin: 0px !important;}
.d-nonx          {display: none !important;}
.ml-3 .heart     {display: block; top: -9px !important;}
.ml-3 .likeCount {margin-top: 3px !important; margin-left: 18px !important; color: #FFFFFF;}

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

/* ==========================================================================
   behind the scenes
   ========================================================================== */

@keyframes gradient {0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;}}

.divider          {border-bottom: 0px solid #000000 !important; margin-bottom: -30px !important; background-image: none !important;}
.divider .bg-over {display: none;}

.divider .i_blog {
    background: linear-gradient(-45deg, #FF0000, #ff00ad, #ff0000, #b20606);
    background-size: 400% 400% !important;
    animation: gradient 6s ease infinite;
}

@media (max-width: 800px) {.divider .i_blog {min-height: 150px !important; height: 150px; object-fit: cover; }}
@media (min-width: 800px) {.divider .i_blog {object-fit: cover; border-radius: 10% 50% 10% 50%;}}

/* ==========================================================================
   timestamps and subtitles
   ========================================================================== */

#timestampoverlay {display: none; position: fixed; user-select: none;}
#timestampbutton  {position: relative; padding: 8px;width: 100%; background-color: #0d1d3a; margin-top: 20px; 
                   border-radius: 4px; text-align: center; border: 2px solid #1d3e74; cursor:pointer; z-index:997}
.yttimestamp      {display: inline-block; width: 100%; font-size: 15px; margin: 0px; padding: 10px; cursor: pointer;
                   background: #182738; border: 2px solid #000000; border-radius: 8px;}
.yttimetop        {position: absolute; margin-top: 46px;}
.timestampheader  {position: fixed; display: block; font-family: "Rajdhani Regular"; font-size: 23px !important; background-color: #0a0e17; color: #bef359 !important;
                   margin-top: 0px; padding: 10px; padding-top: 6px; padding-bottom: 0px; z-index: 999; width: 25%;}
#realtime         {font-family: "Rajdhani Regular"; padding-right: 8px;}

#subtitleoverlay   {display: none; z-index: 900; pointer-events: none; width: 100%;}
#subtitletext      {margin-left: auto; margin-right: auto; color: #FFFFFF; line-height: 1.1; text-align: center;}
.ythighlight       {background-color: #2a496e !important; color: #ffffff !important;}
   
@media (min-width: 768px) {
    .tslist           {padding-left:5px; padding-right:15px;}
    #timestampoverlay {right: 37px; width: 26%; height: calc(100vh - 70px); z-index: 99; background-color: #090A0E; overflow: scroll;}
    #subtitleoverlay  {position: relative; bottom: 110px; height: 80px;}
    #subtitletext     {width: 70%; font-size: 34px; padding: 10px; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);}
}

@media (max-width: 768px) {
    #timestampoverlay {bottom: -15px; left: 15px; width: 99%; height: calc(100vh - 370px); z-index: 998; background-color: #090A0E; overflow: scroll;}
    .tslist           {padding-left: 5px; padding-right: 5px;}
    .timestampheader  {width: 100%; margin-top: -16px !important; padding: 10px !important;}
    #subtitleoverlay  {position: relative; height: 60px; bottom: 0px; background-color: #000000;}
    #subtitletext     {width: 90%; font-size: 16px; padding: 0px; padding-top: 10px;}
    .yttimestamp      {font-size: 14px !important;}
}

@media (min-width: 1025px) {
  #subtitleoverlay     {position: relative; bottom: 110px; height:80px;}
  #subtitletext        {width: 70%; font-size:34px; padding: 10px; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);}
  .subpos-playlistinfo {bottom: 720px !important;}
  .subpos-playlistinfo #subtitletext {background-color: #0000002b; border: 2px solid #000000; font-size:40px !important; border-radius: 9px;}
}

@media (max-width: 1025px) {
  #subtitleoverlay {position: relative; height: 60px; bottom: 0px; background-color: #000000;}
  #subtitletext    {width: 90%; font-size:16px; padding: 0px; padding-top: 10px;}
  .subpos-playlistinfo #subtitletext {background-color: #0000002b; border: 2px solid #000000; border-radius: 9px;}
  .timestamp-playlistinfo .timestampheader {margin-top: -22px !important;; padding-top: 6px !important;}
  .yttimetop {margin-top: 42px !important;}
}