@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
html, body, * {
  font-family: "Open Sans", sans-serif;
}

body {
  overflow: hidden;
}

body.lazyload {
  overflow: auto;
}

.square-container {
    position: relative;
    width: 100%; /* Breite auf 100% setzen */
    overflow: hidden; /* Überlauf verstecken, falls der Inhalt größer ist */
    aspect-ratio: 1; /* Ein Quadrat erstellen */
}

.clear {
  clear: both;
}

.w-90 {
  width: 90%!important;
}

.onlymobil {
  display: none;
}

.grecaptcha-badge {
  display: none !important;
}

.listpaginationparent {
  display: none;
}

#scrollbar2 {
  display: none;
}
#leftnavscroll {
  position: relative;
  overflow-x: hidden !important;
}

.pagination {
    display: -ms-flexbox;
    display: inline-flex;
    padding-left: 0;
    list-style: none;
}

.pagination > li > a {
    background-color: #252530;
    color: #8c8c8c;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: purple;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a:hover
{
    background-color: #51515e;
    border: solid 1px #252530;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #51515e;
    border-color: #252530;
}

.pagination-sm .page-link, .pagination-xl .page-link {
    border: solid 1px #1E1E29;
    background: #b0b000;
    color: #000;
    font-weight: 700!important;
}


/* customize scrollbar css */
#art-content::-webkit-scrollbar{
  width:12px;
  background-color:#cccccc;
}
#art-content::-webkit-scrollbar:horizontal{
  height:12px;
}
#art-content::-webkit-scrollbar-track{
  border:1px #000000 solid;
  border-radius:10px;
  -webkit-box-shadow:0 0 6px #000000 inset;
}
#art-content::-webkit-scrollbar-thumb{
  background-color:#b03c3f;
  border:1px solid #000000;
  border-radius:16px;
}
#art-content::-webkit-scrollbar-thumb:hover{
  background-color:#bf4649;
  border:1px solid #333333;
}
#art-content::-webkit-scrollbar-thumb:active{
  background-color:#a6393d;
  border:1px solid #333333;
}
#art-content {
  padding: 0;
  padding-top: 15px;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin: 0;
}

iframe.youtubeframe {
  margin: 0 !important;
  padding: 0 !important;
  padding-bottom: 1px!important;
}

.lazyload .art-app {
  margin-top: -15px;
  margin-left: -10px;
  height: auto !important;
}

.art-blog-card {
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-bottom: 0px;
}

.art-blog-card .art-post-description {
  padding: 10px;
  margin-bottom: 50px;
  bottom: 0;
}

.leftside.art-menu-bar-btn {
    margin: 0;
    width: auto;
    height: auto;
    padding: 0;
}

.art-info-bar-btn.leftside span {
    font-size: 9px;
    color: #f00 !important;
}
.art-info-bar-btn.leftside i {
    color: #f00 !important;
}

@media (max-width:1024px){
  #art-menu-bar-right .art-menu-bar-btn span {
    background: #252530 !important;
  }
  #art-menu-bar-right .art-menu-bar-btn span:before,
  #art-menu-bar-right .art-menu-bar-btn span:after {
    background: #8c8c8c !important;
  }
}

.text-align-right {
  text-align: right;
}

.8c8c8c {
  color: #8c8c8c;
}

.playerh1 {
  filter: none !important;
  font-size: 12px !important;
  font-weight: normal !important;
}


.breadcrumb {
  Xbackground-color: #252530;
  background-color: #b0b000;
}

button.art-share {
  background: #252530;
  color: #8c8c8c;
}

button.art-share i {
  font-size: 24px;
}

.coverimage {
  position:relative;
  overflow:hidden;
  padding-bottom:100%;
}

.coverimage img{
  position:absolute;
  width: 100%;
}

.art-app {
  background-color: #0f0f14;
  padding: 5px;
  position: absolute;
}

button, .btn {
  font-size: 12px;
}

.art-scroll-frame {
  height: calc(100vh - 10px);
}

.art-app .art-app-wrapper .art-app-container .art-info-bar {
  height: calc(100vh - 10px);
}

.audioplayer-bar-played {
  background: #03cc18;
}

table {
  color: #ffffff !important;
}

table td {
  border-top: 0 !important;
  border-bottom: 1px solid #252530 !important;
}

.art-menu-bar-header * {
  color: #f00 !important;
}

.art-menu-bar .art-current-page {
  z-index: 999;
}

.art-menu-bar .art-current-page span {
  color: #f00;
  cursor: pointer;
}

.menu-verticaltext {
  display: none;
}

#containerAudio {
  display: none;
}

body.ismobile .row {
  margin: 0;
}

body.ismobile #headerplayer .containerAudio {
  height: 50px !important;
  overflow: hidden;
}
body.ismobile #headerplayer .containerAudio canvas {
  height: 50px !important;
}
body.ismobile .art-app {
  padding: 0;
}

.transition-fade {
  -webkit-transition: none !important;
  transition: none !important;
}

.faplayicon {
  cursor: pointer;
}

.faplayicon.fa-circle-pause {
  color: #b03c3f;
}

.buy-message {
  color: #b0b000;
}

.breadcrumb-nav-text {
  color: #000000;
}

@media (max-width:1024px){
  .without1024 {
    display: none;
  }
}

@media (max-width:576px){
  .phoneleft {
    float: left;
    width: auto;
  }
}

@media (max-width:800px){
  .onlymobil {
    display: block;
  }
}


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

  .mobile100 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.art-a.art-blog-card .col {
  padding-left: 1px;
  padding-right: 1px;
}
.art-a.art-blog-card .col button {
  padding: 0;
}
.art-a.art-blog-card img {
  filter":grayscale(1);
  -moz-filter:grayscale(1);
  -webkit-filter:grayscale(1);
}
.art-a.art-blog-card:hover img {
  filter":grayscale(0);
  -moz-filter:grayscale(0);
  -webkit-filter:grayscale(0);
}
.art-a.art-blog-card button[play='play'] {
  background-color: #b03c3f;
}

.input-group-xs > .btn, .btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.display-blockx {
  display: block !important;
  margin: 0;
}
.display-blockx a {
  padding: 0;
}
.video-sub-share {
    border: 0;
    width: auto;
    display: block;
}

.input-group-text {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.bcktop {
  position: fixed;
  bottom: 80px;
  right: 120px;
  background: rgba(0,0,0,.8);
  color: #fff;
  visibility: hidden;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align:center;
  transition-property: all;
}

.bcktop.bcktop-on {visibility: visible;}

.bcktop.fade{opacity: 0; display: block;}

.bcktop-on.fade{opacity: 1;}

.rightToLeft {right : -50px;}

.bcktop-on.rightToLeft{right: 1rem;}

.bottomToTop {bottom: -50px;}

.bcktop-on.bottomToTop {bottom:1rem;}

.bcktop-leftToRight {left: -50px;}

.bcktop-on.leftToRight {left:1rem;}

.topToBottom {top: -50px;}

.bcktop-on.topToBottom {top:1rem;}

body.isphone .bcktop {
  bottom: 0;
  right: 0;
}

body.istablet .bcktop {
  right: 80px;
}

.cardurlbutton {
  text-transform: none;
}

.art-blog-card.thumb {
  margin-bottom: 0;
}

.yBoxOverlay button:focus {
  outline: none !important;
}

.video-js {
  width: 93%;
  margin: 15px;
  object-fit: contain;
}

.video-js.art-port-cover {
  padding-bottom: 0;
  margin: 0;
  width: 100%;
}

.art-a.art-blog-card.image-card >.art-port-cover {
  padding-bottom: 100%;
}

.art-a.art-blog-card.image-card .art-post-description >.art-port-cover {
  padding-bottom: 0;
}

.art-link .yt {
  font-size: 16px;
}

.art-menu-bar-btn span {
  background: #f00!important;
}
.art-menu-bar-btn span:after {
  background: #f00!important;
}
.art-menu-bar-btn span:before {
  background: #f00!important;
}

button a {
  width: 100%;
  display: block;
}

@media (min-width: 992px){
  .container {
      max-width: 990px;
      padding-left: 5px;
      padding-right: 5px;
  }
}

.fas.fa-caret-square-down {
  font-size: 40px !important;
}

.no-border-radius {
  border-radius: 0!important;
}

.imageboxshadow {
  border-radius: 25px;
  border: 1px solid #000;
  background-color: #BA1100;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.imageboxshadow:hover {
  border-color: #BA1100;
  background-color: #000;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

.imageboxshadow2 {
  border-radius: 12px;
  border: 1px solid #000;
  background-color: #BA1100;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.imageboxshadow2:hover {
  border-color: #BA1100;
  background-color: #000;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

iframe#videocontframe, iframe.youtubeframe, .tiktok-embed-wrap iframe, blockquote.tiktok-embed {
  border-radius: 25px;
  border: 2px solid #000;
  background-color: transparent;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  animation: border-animation 1s ease-in-out infinite;
  border-bottom:0!important;
}

iframe#videocontframe:hover, iframe.youtubeframe:hover {
  animation: none;
}

.cover.anim, .cover.animcard {
  border-radius: 25px !important;
}

iframe.youtubeframe.anim {
  border-radius: 25px;
  border: 1px solid #000;
  background-color: #BA1100;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  animation: none;
}

iframe.youtubeframe.anim:hover {
  animation: border-animation 1s ease-in-out infinite;
}

.youtubeframe.animvid {
  animation: border-animation 1s ease-in-out infinite;
}

.youtubeframe.animvid:hover {
  border-radius: 25px;
  border: 1px solid #000;
  background-color: #BA1100;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  animation: none;
}

@keyframes border-animation {
  0% {
    border-color: #BA1100;
  }
  50% {
    border-color: #ffc107;
  }
  100% {
    border-color: #000;
  }
}

.coverimg-container {
    position: relative;
    overflow: hidden;
}

.coverimg-effect {
    object-fit: cover;
    border: 0px solid transparent;
    border-image: linear-gradient(#BA1100, black);
    border-image-slice: 1;
    transition: border-image 0.5s ease, transform 0.5s ease, filter 0.5s ease;
    background-color: black;
    transition: background-color 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}

.coverimg-effect:hover {
    border-image: linear-gradient(yellow, black);
    filter: brightness(2.0);
    transform: scale(1.1);
    background-color: black;
}

.coverimgglow-effect:hover {
    border-image: linear-gradient(yellow, black);
    filter: brightness(1.3);
    background-color: black;
}

.coverimgglowbox-effect {
  border-radius: 25px;
  border: 1px solid #000;
  background-color: #BA1100;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  animation: none;
}
.coverimgglowbox-effect:hover {
    filter: brightness(1.3);
    border: 1px solid #BA1100;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    border-image: linear-gradient(yellow, black);
}

.container-bottom-frame {
  border-bottom: 1px dashed #BA1100;
  border-top: 0;
  border-radius: 25px !important;
  width: 95%;
}

.container-bottom-frame-anim {
  animation: border-frame-animation 2s ease-in-out infinite;
}

@keyframes border-frame-animation {
  0% {
    border-color: #BA1100;
  }
  50% {
    border-color: #911105;
  }
  100% {
    border-color: transparent;
  }
}

.container-bottom-frame .container-bottom-text {
  margin-left: 25px;
}

.image-hover-flip {
  overflow: hidden;
}

.image-hover-flip img {
  transition: transform 1s;
}

.image-hover-flip:hover img {
  transform: scaleX(-1);
}

.image-hover-flip2 {
  overflow: show;
}

.image-hover-flip2 img {
  transition: transform 0.2s ease-in-out;
}

.image-hover-flip2:hover img {
  transform: translateX(-20px) translateY(-20px) rotate(10deg) skew(-5deg);
}

.image-hover-flip-y {
  overflow: hidden;
}

.image-hover-flip-y img {
  transition: transform 1s;
}

.image-hover-flip-y:hover img {
  transform: scaleY(-1);
}

.image-hover-flip-rot45 {
  overflow: hidden;
}

.image-hover-flip-rot45 img {
  transition: transform 1s;
}

.image-hover-flip-rot45:hover img {
  transform: rotate(45deg);
}

.image-hover-flip-rot180 {
  overflow: hidden;
}

.image-hover-flip-rot180 img {
  transition: transform 1s;
}

.image-hover-flip-rot180:hover img {
  transform: rotate(180deg);
}

.image-hover-flip-rot315 {
  overflow: hidden;
}

.image-hover-flip-rot315 img {
  transition: transform 1s;
}

.image-hover-flip-rot315:hover img {
  transform: rotate(315deg);
}

.image-hover-flip-rot360 {
  overflow: hidden;
}

.image-hover-flip-rot360 img {
  transition: transform 1s;
}

.image-hover-flip-rot360:hover img {
  transform: rotate(360deg);
}


.image-hover-flip-rot11 {
  overflow: hidden;
}

.image-hover-flip-rot11 img {
  transition: transform 0.5s;
}

.image-hover-flip-rot11:hover img {
  transform: rotate(11deg);
}

.tiktok-embed {
  background-color: #20202a;
}
.tiktok-embed:before, .tiktok-embed:after {
  content:"";
  width:0;
  padding: 0;
  margin:0;
}
.tiktok-embed iframe {
  width: auto !important;
}
blockquote.tiktok-embed {
  border: 1px solid;
}
.tiktok-embed-wrap {
  display: flex;
  justify-content: center;
}

.dropdown-menu.audiolist {
  font-size: 12px;
}

.dropdown-item.audiolist .title {
  font-size: 10px;
}

.dropdown-item.audiolist .link {
  font-size: 12px;
  font-weight: bold;
}

.padding-bottom-100-p {
  padding-bottom: 100% !important;
}


#art-content {
  background: #111 !important;
}

.art-info-bar.leftside, .art-app .art-app-wrapper .art-app-container .art-info-bar, .art-header {
  background: #222 !important;
}

.art-app .art-app-wrapper .art-app-container .art-menu-bar, .art-menu-bar, footer, #scrollbar, .art-language-change, .art-menu-bar-header {
  background: #222 !important;
}

table.search, table.search th, table.search tr, table.search tr td {
  border: 0 !important;
  padding: 0 !important;
}
hr.search-hr {
  border: 1px dashed #333;
}
table.search b, table.search strong {
  font-weight: bold !important;
}