/* -------------------------------------------------------------
*  style sheet for cuul.ch
*  (c) Apr 2019 by designsia.ch / sia
------------------------------------------------------------- */

@font-face {
  font-display: swap;
  font-family: 'Oswald Regular';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/oswald-v53-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Oswald Medium';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/oswald-v53-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Special Elite';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/special-elite-v10-latin-regular.woff2') format('woff2');
}

body {
    font-family: 'Oswald Regular', sans-serif;
    font-size: 1.1rem;
    color: #ffffff;
    letter-spacing: .05em;
    line-height: 1.4;
    background: #111111 url(../images/bg-wall.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body, wrapper {
  min-height:100vh;
}

.flex-fill {
  flex:1 1 auto;
}

header {
    background-color: rgba(0, 0, 0, 0.9)!important;
    min-height: 80px;
    z-index: 99999 !important;
}

.logo img {
    max-width: 200px;
    padding-bottom: .2rem;
}

.float-right {
    float: right !important;
    position: relative;
}

#content {
    margin: 1rem 0rem 2rem 0rem;
}

.bg-black {
    background-color: rgba(0, 0, 0, 0.3) !important;
    margin: 3rem 0rem;
    padding: 3rem 0rem;
}

footer {
    background-color: rgba(0, 0, 0, 0.7)!important;
    padding: 2rem 0rem 1rem 0rem;
}


/* --------------
  FONT STYLES
----------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Special Elite', cursive;
    font-weight: normal;
    font-size: 1rem;
    color: #ffffff;
    margin: 2rem 0rem 1.5rem 0rem;
    line-height: 1.2em;
 }

h1 {
    font-size: calc(2rem + 1vw);
    text-transform: uppercase;
    text-shadow: 0.075em 0.08em 0.1em rgba(0, 0, 0, .25);
}

h2 {
    font-size: calc(1.5rem + 0.4vw);
    text-transform: none;
}

h3 {
    font-size: calc(1rem + 0.5vw);
    text-transform: none;
}

.next-gig h3, .next-gig p {
    font-size: 1.1rem;
}


a {
    color: #ffffff;
}

a:hover, a:focus, a:link {
    color: #ffffff;
    text-decoration: none;
}

#content a, .section-slider-content a, .impressum a {
    color: #ffffff;
    padding: 0px 1px;
    border-bottom: 2px solid rgba(255, 255, 255, .5);
}

#content a:hover, .section-slider-content a:hover, .impressum a:hover {
    color: #ffffff;
    padding: 0px 1px;
    border-bottom: 2px solid rgba(255, 255, 255, 1);
}

ul.list {
    list-style: none;
}

ul.list li:before {
    content: '';
    display: inline-block;
    height: 1rem;
    width: 1rem;
    background-image: url('../images/ul-li.gif');
    background-size: 1rem;
    background-repeat: no-repeat;
    margin-left: -2rem;
    margin-right: 7px;
}

.section-slider-content {
    position: absolute;
    top: 0px;
    height: 100vh;
    width: 100%;
}

.itemid-101 .moduletable.next-gig, .itemid-111 .moduletable.next-gig {
    position: absolute;
    top: 18vh !important;
    right: 5%;
    max-width: 300px;
    width: 90%;
    z-index: 9999!important;
}

.moduletable.slogan {
    position: absolute;
    display: none;
    top: 60vh;
    left: 10%;
    z-index: 999!important;
}

.moduletable.slogan p {
    font-family: 'Special Elite', cursive;
    font-size: 3.1rem;
    text-transform: uppercase;
    line-height: 1.1em;
    color: rgba(255, 255, 255, 1);
    border: .3rem solid rgba(255, 255, 255, 1);
    border-radius: .5rem;
    padding: 2rem 0rem 1rem 1rem;
    background: rgba(0, 0, 0, .03);
    text-shadow: 0.075em 0.08em 0.1em rgba(0, 0, 0, .35);
    box-shadow: 0.075em 0.08em 0.1em rgba(0, 0, 0, .15);
    transform:rotate(-5deg);
}


.box-black .custom {
    height: 100%;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, .35);
    background: rgba(0, 0, 0, 0.7);
    transform:rotate(1.5deg);
    padding: 1rem;
    margin: 1.5rem 0rem 0rem 0rem;
}

.next-gig h3, .next-gig p {
    font-size: .9rem;
    line-height: 1.1em;
    margin: .7rem 0rem;
}

.next-gig h3 {
    text-transform: uppercase;
    font-family: 'Special Elite', cursive;
}

/* SLIDER STYLES  */
.section-slider {
    height: 100vh;
    min-height: 100vh;  /*  */
    margin-top: -100px;  /* same height as header  */
    position: relative;
    width: 100%;
}

.section-slider .carousel-item {
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 99 !important;
  -webkit-animation: thing 20s;
  -o-animation: thing 20s;
  animation: thing 20s;
}

@keyframes thing {
  from {
     transform: scale(1, 1);
  }
  to {
    transform: scale(1.33, 1.33);
  }
}

.carousel-indicators {
    bottom: 4rem;
    list-style: none;
    z-index: 9999!important;
}

.carousel-indicators li {
    background-color: #ffffff;
    height: 4px;
}

.carousel-indicators li.active {
    background-color: #ff0000;
}

.carousel-inner .carousel-item:first-of-type {
  position: relative;
}
.carousel-inner .active {
  opacity: 1;
}

.btn, .btn-primary {
    padding: .4rem .8rem !important;
    font-size: 1rem !important;
    line-height: 1.5;
}

.bfFormDiv {
  padding-top: 1.5rem;
}

.bfSubmitButton {
  margin-right: .35rem;
  min-width: 120px;
}

.btn-outline-light, .btn-outline-primary, .btn-primary {
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, .3) !important;
    background: transparent;
}

.btn-outline-light:hover, .btn-outline-primary:hover, .btn-primary:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, .05);
    border: 2px solid rgba(255, 255, 255, 1) !important;
}

/* -------------------
SCROLL DOWN BTN/EFFECT
---------------------- */

#back-top {
    display: none;
}

#scrollup {
    padding: 2.5rem 0rem 1.3rem 0rem;
    position: relative;
}

#scrolldown {
  position: absolute;
  bottom: 4.5rem;
  z-index: 999 !important;
}

#scrolldown a, #scrollup a {
  padding-top: 0px;
  width: 100%;
  border-bottom: none!important;
}
#scrolldown a span, #scrollup a span {
  position: absolute;
  z-index: 9999!important;
  top: 0;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border: 3px solid #ffffff;
  border-radius: 100%;
  box-sizing: border-box;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}

#scrolldown a:hover span, #scrollup a:hover span {
  border: 3px solid #ff0000;
}

#scrolldown a span::after, #scrollup a span::after {
  position: absolute;
  z-index: 9999!important;
  top: 50%;
  left: 50%;
  content: '';
  width: 16px;
  height: 16px;
  margin: -12px 0 0 -8px;
  border-left: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}

#scrollup a span::after {
  margin: -5px 0 0 -8px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

#scrolldown a:hover span::after, #scrollup a:hover span::after {
  border-left: 3px solid #ff0000;
  border-bottom: 3px solid #ff0000;
}

#scrolldown a span::before, #scrollup a span::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 0 rgba(255,255,255,.15);
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: sdb03 5s infinite;
  animation: sdb03 5s infinite;
  box-sizing: border-box;
}

@-webkit-keyframes sdb03 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.15);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb03 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.15);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* -------------------
LISTEN TO AUDIOS
---------------------- */
.audiojs {
    width: 100%;
    max-width: 350px;
    height: auto;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
    font-family: 'Oswald Regular', sans-serif;
    font-size: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3) !important;
}

.playerbox .audiojs {
    padding: 0rem;
    background: none !important;
}

.audiojs .loaded, .audiojs .scrubber {
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
}

.audiojs .progress {
    background: rgba(255, 255, 255, 1) !important;
}

.audiojs .scrubber {
    float: right;
    width: 75%;
}

.audiojs .time {
    border: none !important;
    text-shadow: none !important;
    float: clear;
    width: 97%;
    text-align: right;
    font-size: .7em;
    height: auto;
    line-height: 1em;
    padding: 0px;
    margin: 0px;
}

.audiojs .time em, .audiojs .time strong, .audiosongs li a {
    color: #ffffff;
}

.audiojs p {
    width: 40px;
}

.audiojs .play {
    background: url("../images/icon-play.png") no-repeat 0px 0px;
    background-size: 36px;
    margin: 0px;
}

.audiojs .pause {
    background: url("../images/icon-pause.png") no-repeat 0px 0px;
    background-size: 36px;
    margin: 0px;
}

.audiojs .play-pause {
    height: 40px;
    padding: 0px;
    margin: 0px;
    float: left;
    overflow: hidden;
    border-right: 0px solid #000;  important;
    width: 16%;
}

ol.audiosongs, .audiosongs ol {
    list-style-type:            none;
    padding:                    .4rem .6rem;
}

.audiosongs li {
    padding:                    .2rem 0 .2rem 1.5rem;
    list-style:                 none;
    background:                 url("../images/icon-song.png") no-repeat left center;
    background-size:            20px;
}

.audiosongs li.playing {
  padding:                      .2rem 0 .2rem 1.9rem;
  background:                   url("../images/icon-song-playing.gif") no-repeat left center;
  background-size:              20px;
}

.audiosongs li a  {
    text-decoration:            none;
}

.container-fluid.bg-random  {
   width: 100vw;
   position: absolute;
   top: 0px;
   left: 50%;
   margin-left: -50vw;
   padding: 0px;
   z-index: -999 !important;
}

.container-fluid.bg-random img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
}

.thumbnail-container a,
.event-thumbnails a,
.thumbnail-container a:hover,
.event-thumbnails a:hover {
    color: #ffffff;
    padding: 2px 1px 0px 1px;
    border-bottom: 0px solid rgba(255, 255, 255, 1) !important;
}

.img-thumbnail {
    background-color: transparent !important;
    border: 0px solid #dee2e6 !important;
}

.eventgallery-events-imagelist .event-content {
    line-height: 1.2em;
    background-color: transparent;
}

.eventgallery-events-imagelist .event-content .title {
    font-size: 1.5rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-family: 'Special Elite', cursive;
    font-weight: normal;
    background-color: rgba(0, 0, 0, 0.4);
    float: left;
}

.breadcrumb {
    background: transparent;
    padding: 0rem .5rem;
    margin: 0rem;display: flex;
    justify-content: flex-end !important;
}

.breadcrumb .divider {
    display: none;
}

.breadcrumb-item {
    font-size:.8em !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .5);
    content: ">";
}

.breadcrumb-item.active {
    color: rgba(255, 255, 255, .5);
}

.container-header .grid-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0em;
}

.offcanvas-body {
  justify-content: flex-end;
}

.container-header .mod-languages {
    flex-direction: row;
    flex: 1;
    display: flex;
  justify-content: flex-end !important;
}

div.mod-languages li {
  margin: 0rem;
}

.socialmedia, .impressum {
    padding-bottom: 1.5rem;
}

.navbar li a {
    font-family: 'Special Elite', cursive;
    color: #ffffff !important;
    font-size: 1.5rem !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .4rem 0rem .4rem!important;
    border: 2px dashed transparent;
    text-decoration: none!important;
}

.navbar li a:hover, .navbar li.active a, div.mod-languages a:hover {
    color: #ff0000 !important;
    transition: all 0.5s ease;
}

.navbar li .dashed {
    border: 2px dashed #ffffff;
    border-radius: .25rem;
}

.navbar li a.dashed:hover, .navbar li.active .dashed {
    border: 2px dashed #ff0000;
    transition: all 0.5s ease;
}

@media (min-width: 992px) {

.container-header {
  z-index: 99999!important;
  position: sticky!important;
}

.logo img {
  max-width: 280px;
}

.navbar {
    padding: .5rem 0rem;
}

.navbar ul {
    margin-bottom: -1.8rem!important;
}

.navbar li {
    margin: 0rem .3rem!important;
    padding: 0rem;
}

.container-header .mod-menu > li::after {
    display: none!important
}

#topmenu .navbar li a {
    font-size: 1rem !important;
}

.moduletable.slogan {
    display: block;
}

.moduletable.slogan div {
    max-width: 600px;
}

.socialmedia {
    text-align: right;
}
}

@media (max-width: 991.98px) {
#scrolldown, .carousel-indicators, .container-fluid.breadcrumbs {
  display: none !important;
}
.navbar li {
    padding-left: 0rem;
}

ul.lang-inline {
  display: block;
  margin-top: 2rem;
}

.offcanvas.offcanvas-start {
  left: auto;
  right: 0px;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  background: rgba(0, 0, 0, .85);
  z-index: 9999999!important;
}

.offcanvas ul li {
  position: relative;
  width: 100%;
  margin: .5rem 0;
  text-align: right;
}

.offcanvas ul li li {
  margin: .25rem 0;
}

.offcanvas li a {
  line-height: 1.6rem;
  font-size: 1.2rem;
  text-decoration: none;
}

.offcanvas li li a {
  line-height: 1.4rem;
  font-size: .85rem;
}

.icon-menu {
    font-size: 2.5rem;
}

.btn-close {
  background: url(../images/menu-close.png) no-repeat 0px 0px;
  background-size: 2.2rem;
  --btn-close-opacity: .75;
  --btn-close-hover-opacity: 1;
}

.navbar {
  padding: var(--border-width) 0;
  margin-top: 0.5rem!important;
}

.container-header .navbar-toggler {
  padding: .3rem;
  line-height: 1;
  border: none!important;
}
}

@media (min-height:800px) {
#itemid-101 .moduletable.next-gig {
    top: 18% !important;
    right: 5%;
}

}

 @media (min-width: 1700px) {
.moduletable.slogan {
    left: 100px;
}
}

@media(max-width:991px){


}
@media(max-width:767px){


/* Make Flex work for old Safari, iPhone4 etc. */
 .row {
    display:                    block;
    width:                      100% !important;
    margin:                     0rem !important;
    padding:                     0rem !important;
    -webkit-box-flex:           1;
    flex-grow:                  1;
    min-height: 0rem !important;
}

.row [class*="col-"] {
    display:                    inline-block !important;
    vertical-align: top !important;
    width:                      100% !important;
    padding-right:              0rem;
    padding-left:               0rem;
    -webkit-box-flex:           0;
    -ms-flex:                   0 0 100%;
    flex:                       0 0 100%;
    max-width:                  100%;
}
}