body {
    background: rgb(0,0,0);
    background: -webkit-linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(150,55,164,1) 42%, rgba(255,150,45,1) 100%);
    background: -moz-linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(150,55,164,1) 42%, rgba(255,150,45,1) 100%);
    background: -o-linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(150,55,164,1) 42%, rgba(255,150,45,1) 100%);
    background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(150,55,164,1) 42%, rgba(255,150,45,1) 100%);
    background-size: cover;
    background-repeat: no-repeat;
}

/* big-shoulders-text-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Big Shoulders Text';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/tpl/fonts/big_shoulders/big-shoulders-text-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


#promo .heading {
    font-family: 'Big Shoulders Text';
    text-transform: uppercase;
    color: #fff;
    font-size: 8em;
    font-weight: 700;
    letter-spacing: .142rem;
    margin: 3rem 0.5rem 1rem 0.5rem;
    line-height: 1;
    font-display: swap;
}

#promo .lead {
    font-size: 5rem;
    font-family: 'Big Shoulders Text';
    text-transform: uppercase;
    margin: 1rem 0.5rem 1rem 0.5rem;
    line-height: 1;
    color: #fff;
}

@media only screen and (max-width: 576px) {
    #promo .heading {
        font-size: 6em;
    }
    #promo.lead{
        font-size: 2.8rem;
    }
}




h1, h2, h3, h4, h5, h6 {
    font-family: 'Big Shoulders Text';
    text-transform: uppercase;
    font-display: swap;
    letter-spacing: .112rem;
}


.btn-custom {
    background-color: #9e3e9c;
    color: #fff;
    font-weight: 600;
    font-size: 1.2em;
    padding: 14px 12px;
    margin-top: 1em;
    transition: .3s;
    border: 2px solid transparent;
}

.btn-custom:hover {
    color: #fff;
    background-color: transparent;
    border: 2px solid  rgb(240 137 62);
    transition: .3s;
}

.btn.custom:active {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    transition: .3s;
}

.btn-custom-outlined  {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    transition: .3s;
    padding: 14px 12px;
    margin-top: 1em;
}

.btn-custom-outlined:hover  {
    color: #fff;
    background-color: #9e3e9c;
    border: 2px solid #fff;
    transition: .3s;
    padding: 14px 12px;
    margin-top: 1em;
}

.btn-custom-outlined:active  {
    color: #fff;
    background-color: #9e3e9c;
    border: 2px solid #fff;
    transition: .3s;
    padding: 14px 12px;
    margin-top: 1em;
}


/* player */
.plane-block{
	height: 250px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	_margin-top: 35px;
}

@media only screen and (min-width: 1000px) {
    .plane-block {
        margin: 0 auto;
        margin-top:2rem;
    }
}

#plate{
	width: 100%;
	height: 100%;
	background: url('https://du-und-musik.de/assets/uploads/img/logo/dum-lgn3.webp');
	background-size: contain;
	background-position: center ;
	background-repeat: no-repeat;
	border: 50px solid #212529;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: spinPlate 20s linear infinite;
	animation-play-state: paused;
	outline: 5px solid  #fff; /* #adadad #A4C3B2 */
}

#plate::before{
	content:'';
	width: 7%;
	height: 7%;
	position: absolute;
	background: #fff;
	border-radius: 50%;
	border: 2px solid #000;
}

.circle{
	position: absolute;
	min-height: 10%;
	aspect-ratio: 1;
	border-radius: 50%;
	z-index: -1;
	transition: border-radius .3s;
	border: 2px solid #fff;
}

.circle:nth-child(1){
	height: 10%;
	background-color:  #9637a4;
}

.circle:nth-child(2){
	height: 15%;
	background-color: #ff962d;
}


.circle:nth-child(3){
	height: 22%;
	background-color: #ae4d88;
}

#plate:hover{
	cursor: pointer;
}

@keyframes spinPlate {
	to{
		transform: rotate(360deg);
	}
}
.plate-wrapper{
   background: transparent; 
   justify-content: center;
   display: flex;
}

#mix-list .list-group{
    padding-right: 0;
    border-radius: 0;
    border: none;
    margin-bottom: 0;
    margin-right: 0;
    
}
#mix-list .list-group-item{
    transition: .5s;    
    border: none;
    padding: 15px 15px;
    letter-spacing: 0.1em;
    _color: #445F54;
   
}
#mix-list .list-group-item:hover {
    color: #212529;
    letter-spacing: 0.15em;
}

#mix-list .nav-item {
    color: #445F54;
    text-decoration: none;
}

#mix-list .small {
    font-size: 0.7em;
}

@media only screen and (max-width: 578px) {
    #mix-list .list-group {
        padding-bottom: 2em;    
    }
    
}

@media only screen and (max-width: 576px) {
    .bg-green-light .lead {
        font-size: 0.8rem;
    }
    .list-inner {
        font-size: 0.8rem;
    }
}

.container-list{
    _background: rgba(255,255,255,0.15);
    -webkit-backdrop-filter: blur(6px);
    _backdrop-filter: blur(4px);
    margin-top: -3.6rem;
    background: rgb(240 137 62);
}
@media only screen and (max-width: 576px) {
    .list-wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}


 .event-promo-badge {
        background: rgb(240 137 62);
        z-index: 2;
        position: relative;
        margin-left: -6px;
    }
    .event-promo {
        z-index: 1; 
        position: relative;
        margin-top: -1rem;
    }


#footer .list-group{
    _padding-bottom: 4em;
    margin-top: -6rem;
    border-radius: 0;
    border: none;
    background: rgba(255,255,255,0.15);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(4px);
    color: #fff;
}
#footer .list-group-item{
    transition: .5s;    
    border: none;
    padding: 15px 15px;
    letter-spacing: 0.2em;
    background: transparent;
    color: #fff;
}
#footer .list-group-item:hover {
    color: #212529;
    letter-spacing: 0.3em;
    background: #F6FFF8;
}
#footer i{
    color: #fff;
    font-size: 1.8em;
    margin-top: 2em;
}
#footer i:hover {
    color: rgb(240 137 62)!important;
}

#footer .icon-list {
    padding: 2em .5em 4em .5em;    
}
#footer .list-misc {
    text-align: right;
    padding-bottom: 2em;
    
}

@media only screen and (max-width: 578px) {
    #footer .list-group {
        padding-bottom: 2em; 
        margin-top: -1.624em;
    }
    #footer .list-misc {
        display: flex;
        justify-content: center;
    }
    #footer .list-misc li {
        padding: .5em;
    }
}
@media only screen and (min-width: 1000px) {
    #footer .bg-trans-1 {
        min-height: 362px;
    }
}

.turntable{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 310px;
  height:280px;
  background: rgb(240 137 62);
  border-radius: 5%;
  box-shadow: inset 0 0 3px rgba(0,0,0,1);
}

.record {
  position: absolute;
  left: 35px;
  top: 35px;
  width: 200px;
  height: 200px;
  background: black;
  border-radius: 50%;
  animation: spin 3s infinite linear;
}

@keyframes spin {
  0% {
    transform: none;
  }
  
  100% {
    transform: rotate(360deg);
  }
}

.record::before {
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 180px;
  height: 180px;
  background: repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
  border-radius: 50%;
}

.overlay {
  content: '';
  left: 35px;
  top: 35px;
  position: absolute;
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.35), 60%, transparent);
  border-radius: 50%;
}


.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 55px;
  height: 55px;
  background: linear-gradient(white, white 50%, #9e3e9c 50%, #9e3e9c);
  border-radius: 50%;
}

.inner::before {
  content: '404';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
}

.inner::after {
  content: 'Du + Musik';
  width: 55px;
  text-align: center;
  font-family: sans-serif;
  font-size: 8px;
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
}

.arm-holder {
  position: absolute;
  width: 40px;
  height: 40px;
  background: gray;
  border-radius: 50%;
  right: 20px;
  top: 40px;
}

.arm-holder::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background: #939393;
  border-radius: 50%;
}

.arm {
  position: absolute;
  right: 13px;
  width: 60px;
  top: 10px;
  height: 110px;
  border: 10px solid #939393;
  transform: skew(-20deg, -20deg);
  transform-origin: top right;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 0 0 30% 0;
  animation: armTwitch 0.5s infinite;
  animation-direction: alternate-reverse;
}

@keyframes armTwitch {
  0% {
     transform: skew(-20deg, -20deg);
  }
  
  100% {
    transform: skew(-20deg, -20deg) rotate(1deg);
  }
}

.arm::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 30px;
  background: gray;
  transform: skew(20deg, 20deg) rotate(75deg);
  top: 98px;
  left: -10px;
  border-radius: 20%;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

.dial {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 25px;
  height: 25px;
  background: #333642;
  border-radius: 50%;
}

.dial::before {
  content: '';
  left: 50%;
  transform: translateX(-50%);
  top: 2px;
  position: absolute;
  width: 2px;
  height: 5px;
  background: white;
  border-radius: 50%;
}