/*
 * (c) by Jens Heidrich <info@tulix.de>
 * for srb.fm
 */

:root {
 --srb-orange: #ff7a28;
 --srb-blue: #201d4c;
 --onairwidth: 348px;
}

/* michroma-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/michroma-v21-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/michroma-v21-latin_latin-ext-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

.bankgothic {
 font-family: 'Michroma', sans-serif;
 font-size:12px;
}

body {
 background: #3d5e93 url(/static/img/background/1.jpg) no-repeat;
 background-size: cover;
 background-attachment: fixed;
}

section {
 margin-top: 2rem;
}

section > .container,
section > .countainer-fluid {
}

.container,
.container-fluid {
 background-color: rgba(255, 255, 255, 0.95);
}

.single-post article {
 border-bottom: 0;
}

.header .header-top .container {
 background-color: var(--srb-orange);
}

.bg-theme-colored2 {
  background-color: var(--srb-orange) !important;
}

.color-srb-orange {
 color: var(--srb-orange);
}

.btn-srb-orange {
 color: #ffffff;
 background-color: var(--srb-orange);
}

.btn-srb-orange:focus,
.btn-srb-orange:hover {
 color: #ffffff;
 background-color: var(--srb-blue);
}

.color-srb-blue {
 color: var(--srb-blue);
}

.bg-srb-blue {
 background-color: var(--srb-blue);
}

.btn-srb-blue {
 color: #ffffff;
 background-color: var(--srb-blue);
}

.btn-srb-blue:focus,
.btn-srb-blue:hover {
 color: var(--srb-blue);
 background-color: #ff7a28;
}

ul, ol {
 list-style: disc;
 margin-block-start: 1em;
 margin-block-end: 1em;
 padding-inline-start: 40px;
}

.menuzord-brand {
 margin-top: 0;
}

.menuzord-responsive .menuzord-brand {
 margin: 0 30px 0 0;
 font-size: 20px;
 line-height: 1.55;
}

.menuzord-responsive .menuzord-menu.scrollable {
 margin-top: 10px;
}

/* Dropdown */
.menuzord-menu ul.dropdown{
 top: 80px;
}

.card.news-card:focus,
.card.news-card:hover {
 /*transform: translateY(-1px); */
 /*filter: drop-shadow(5px 5px 5px gray);*/
}

.card.news-card img.card-img:focus,
.card.news-card img.card-img:hover {
 filter: brightness(110%) opacity(80%);
 transition: all .3s linear;
}

#topnews_slider .carousel-item {
 padding: 0.7rem;
}

#topnews_slider .carousel-caption h2,
.news-card h2 {
 background-color: rgba(255, 255, 255, 0.85);
}

#topnews_slider .carousel-caption a:hover h2,
#topnews_slider .carousel-caption a:focus h2 {
    color: var(--srb-orange);
}

#topnews_slider .carousel-control-prev,
#topnews_slider .carousel-control-next {
 background-color: rgba(32, 29, 76, 0.1);
}

/* newsslider in latest news */

#NewsCarousel .carousel-inner .carousel-item.active,
#NewsCarousel .carousel-inner .carousel-item-next,
#NewsCarousel .carousel-inner .carousel-item-prev {
    display: flex;
}

#NewsCarousel .carousel-control-prev,
#NewsCarousel .carousel-control-next {
  width: 3rem;
}
/* end newsslider */

/* eventsslider in latest news */

#EventsCarousel .carousel-inner .carousel-item.active,
#EventsCarousel .carousel-inner .carousel-item-next,
#EventsCarousel .carousel-inner .carousel-item-prev {
    display: flex;
}

#EventsCarousel .carousel-control-prev,
#EventsCarousel .carousel-control-next {
  width: 3rem;
}
/* end eventsslider */

/*
#topnews_slider .carousel-control-prev:focus,
#topnews_slider .carousel-control-prev:hover,
#topnews_slider .carousel-control-next:focus,
#topnews_slider .carousel-control-next:hover {
 background-color: rgba(32, 29, 76, 0.3);
}
*/

.media-left,
.media-body {
 display: table-cell;
 vertical-align: top;
}

h1.section {
 font-size: 1.75rem;
}

h1.widget-title {
 font-size: 1.2rem;
}

a.playlistday {
 padding: 0.25rem;
 border: 1px solid var(--bs-border-color);
}

a.playlistday:hover,
a.playlistday.active {
 padding: 0.25rem;
 color: var(--bs-secondary);
 border: 1px solid var(--bs-secondary);
}

/* Calendar */

#footer {
  margin-top: 60px;
}

/* ==================================== */
              /* Program */
/*      Jens Heidrich 2018-08-13        */
/* ==================================== */

.event-filled,
.workshop-filled {
    position: relative;
}
.event-filled::before,
.workshop-filled::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 100%;
    height: 300px;
    transform-origin: top left;
    transform: rotate(30deg);
    background-image: url(/static/img/ausgebucht.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
}

section#members .owl-carousel-7col img {
 filter: grayscale(100%);
}

section#members .owl-carousel-7col img:focus,
section#members .owl-carousel-7col img:hover {
 filter: none;
}

#button_offcanvassSideMenu {
 position: absolute;
 top: 0;
 left: -50px;
 width: 50px;
 min-width: 50px;
 max-width: 50px;
 height: 54px;
 border: none;
 visibility: visible;
 color: #ffffff;
 background-color: var(--srb-orange);
 padding: 5px;
}

#button_offcanvassSideMenu > span {
 font-weight: bold;
}

#offcanvassidemenu {
 top: 20%;
 bottom: auto;
 width: auto;
 color: #fff;
 background-color: var(--srb-orange);
}

#offcanvassidemenu > .offcanvas-header {
 /*cursor: move;*/
}

#offcanvassidemenu .offcanvas-body .list-group-item {
 color: var(--srb-blue);
}

#offcanvassidemenu .offcanvas-body .list-group-item.active {
 background-color: var(--srb-blue);
 color: white;
}

.onair {
}

.onair > .carousel-inner > .carousel-item > div {
 width: var(--onairwidth);
 animation: move 10s linear infinite forwards;
}

/* animations */
@keyframes backAndForth {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); }
  45% { transform: translateX(calc(-100% + 200px)); }
  55% { transform: translateX(calc(-100% + 200px)); }
  90% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes move {
  0%,
  10%,
  90%,
  100% {
    transform: translateX(0px);
  }
  40%,
  60% {
    transform: translateX(calc(-1 * max(0px, 100% - var(--onairwidth))));
  }
}

#header {
 position: static;
 top: 0;
 right: 0;
 left: 0;
}

#header.srb-navbar {
 position: fixed;
 top: 0;
 right: 0;
 left: 0;
 z-index: 1030;
}

#header,
.header-top,
.header-nav .header-nav-wrapper .menuzord,
.header-nav .header-nav-wrapper .menuzord .menuzord-brand img,
.menuzord-menu {
 transition: all 0.4s ease;
}

#header.srb-navbar .header-nav .header-nav-wrapper .menuzord .menuzord-brand img{
 max-height: 60px;
}

#header.srb-navbar .menuzord-menu > li{
    padding: 10px 0;
}

.menuzord-menu > li > a,
.menuzord-menu ul.dropdown li a {
    font-size: 18px;
}

.menuzord.default .menuzord-menu > li.active > a,
.menuzord.default .menuzord-menu > li:hover > a,
.menuzord.default .menuzord-menu ul.dropdown li:hover > a,
.menuzord.default .menuzord-menu ul.dropdown li.active > a {
  background: #ff7a28;
  color: #fff;
}
/* members carousel 
 * from https://github.com/Coding-with-Robby/infinite-logo-carousel/blob/main/index.html
 */

.member-carousel {
  overflow: hidden;
  padding: 30px 0;
  background: white;
  white-space: nowrap;
  position: relative;
}

.member-carousel:hover .member-group {
  animation-play-state: paused;
}

.member-group {
  display: inline-block;
  animation: 35s member_scrolling infinite linear;
  margin: 0 40px;
}

.member-group .member-card {
 display: inline-block;
 cursor: pointer;
 background: white;
 padding: 20px;
 margin: 0 40px;
}

.member-group .member-card img {
 height: 80px;
 filter: grayscale(1);
}

.member-group .member-card img:hover{
 filter: grayscale(0);
}

@keyframes member_scrolling {
 from {
   transform: translateX(0);
 }
 to {
   transform: translateX(-100%);
 }
}

/* end members carousel */

/* showslider in latest news */

#ShowCarousel .carousel-inner .carousel-item.active,
#ShowCarousel .carousel-inner .carousel-item-next,
#ShowCarousel .carousel-inner .carousel-item-prev {
    display: flex;
}

#ShowCarousel .carousel-control-prev,
#ShowCarousel .carousel-control-next {
  width: 3rem;
}
/* end showslider */

@media (hover:hover) {
 .dropdown:hover > .dropdown-menu {
  display: block;
  margin-top: 0;
 }
}

/* Programm  */

.event-calendar{
    overflow:visible;
}

.event-calendar{
    margin: 0;
}

.event-calendar,
.event-calendar tr,
.event-calendar td,
.event-calendar th,
.event-calendar tr:hover{
    background:none;
}

.event-calendar tr:hover>th{
    background:#e2eaf2;
}

.event-calendar{
    border:none;
    table-layout: fixed;
    width: 90%;
}

.event-calendar th{
    background:#e2eaf2;
    font-weight:400;
    padding:18px 20px;
    font-size:16px;
    border:2px solid #f2f4f9;
    border-radius:6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    overflow:hidden;
    text-align:center;
}

.event-calendar td{
    border:2px solid #f2f4f9;
    background:#fafbfd;
    height:155px;
    vertical-align:top;
    padding: 10px;
    border-radius:6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    transition:background 0.3s;
    -webkit-transition:background 0.3s;
    -moz-transition:background 0.3s;
}

.event-calendar td>div.day {
    position: relative;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

.event-calendar td>div.day>span.day{
    position: absolute;
    left: 0;
    bottom: 0;
    color: #f2f4f9;
    font-size: 10vh;
    line-height: 10vh;
    font-weight:700;
    display:block;
    transition:color 0.3s;
    -webkit-transition:color 0.3s;
    -moz-transition:color 0.3s;
}

.event-calendar td>div.day>div.hour {
    position: relative;
}

.event-calendar td.no-events>span.day{
    color:#dee0e5;
}

.event-calendar td .events{
    list-style:none;
    margin:0;
    padding:0;
    font-size:13px;
}

.event-calendar td .events li{
    border-bottom:1px solid #ecedf1;
    padding:5px 0;
    transition:border 0.3s;
    -webkit-transition:border 0.3s;
    -moz-transition:border 0.3s;
    position:relative;
}

.event-calendar td .events li:last-child{
    padding-bottom:0;
    border:none;
}

/*
.event-calendar td:hover{
    background:#8a86a1;
}
*/
.event-calendar td:hover .events li{
    border-color:#81c7f8;
}

.event-calendar td:hover .events>li>a{
    color:#fff;
}

/*
.event-calendar td:hover>span.day{
    color:#fff;
}
*/

.event-calendar td.not-this-month{
    opacity:0;
}

.event-popover{
    position:absolute;
    bottom:130px;
    background:#fff;
    display:none;
    width:320px;
    vertical-align:top;
    padding:15px 10px;
    transition:all 0.4s;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    z-index:100;
    box-shadow:0 1px 1px rgba(0,0,0,.1);
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,.1);
}

.event-calendar td:last-child .event-popover,
.event-calendar td:nth-child(6) .event-popover{
    right:0;
}

.event-calendar td:last-child .event-popover:after,
.event-calendar td:nth-child(6) .event-popover:after{
    left:auto;
    right:20px;
}

.csstransforms .event-popover{
    display:block;
    opacity:0;
    transform:scale(0);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
}

.event-popover:after{
    content:'';
    display:block;
    width:15px;
    height:15px;
    position:absolute;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:8px solid #fff;
    bottom:-15px;
    left:20px;
}

.event-popover h6{
    margin:5px 0 10px;
}

.event-popover .event-meta{
    list-style:none;
    margin:0;
    padding:0;
    margin-bottom:10px;
}

.event-popover img.align-left{
    margin-bottom:10px;
}

.event-popover .event-meta li{
    border:none!important;
    padding:0!important;
    color:#95999e;
    font-size:13px;
}

.event-popover p{
    font-size:13px;
    line-height:22px;
}

.event-calendar td .events li:hover .event-popover{
    display:block;
    bottom:120%;
    opacity:1;
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
}

.program .carousel-control-next,
.program .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    /*background: 0 0;*/
    filter: none;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
}

.program .carousel-control-next:focus,
.program .carousel-control-next:hover,
.program .carousel-control-prev:focus,
.program .carousel-control-prev:hover {
 text-decoration: none;
 outline: 0;
 opacity: .9;
}

.program .carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}

/*
.program .carousel-control-prev-icon {
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
}

.program .carousel-control-next-icon {
 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}
*/

.team-member {
    margin-bottom: 1rem;
}

.team-member-image {
	width: 100%;
}

.team-member-more {
    padding-top: 0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

ul.pagination.srb-archive-pagination > li > a {
 color: var(--srb-blue);
}

ul.pagination.srb-archive-pagination > li:hover > a,
ul.pagination.srb-archive-pagination > li:focus > a,
ul.pagination.srb-archive-pagination > li.active > a {
 color: #fff;
 background-color: var(--srb-blue);
 border-color: var(--srb-blue);
}

@media(max-width:767px){
 .events-calendar,
 .events-calendar tbody,
 .events-calendar tr,
 .events-calendar td{
    display:block;
 }
 
 .events-calendar th,
 .event-calendar .calendar-days, */
 .events-calendar .not-this-month{
    display:none;
 }
 
 .event-calendar td{
    /*height:auto;*/
    min-height:155px;
 }
 
 .event-calendar td>div.day>span.day{
     font-size: 15vh;
     line-height: 15vh;
 }
 
 .calendar-header .align-right{
    text-align:left;
 }
 
 .calendar-header .filter-dropdown{
    margin-top:20px;
 }
 
 .event-popover{
    width:auto;
 }
}