/* Player overlay voor website v1.2 (10/01/2024) - (c) 2024, AllRoundRadio */

.stack-top{
	z-index: 1000000;
	
}

iframe {
    display: block;       /* iframes are inline by default */
    background-color: transparant;
    border: none;         /* Reset default border */
    width: 100%;
	height: 1500px;
}

.site{
	z-index: 2;
	position: absolute;
}

.content{
	z-index: 2;
}

html, body {
	/* overflow-x: hidden; */ /* blocked for sticky */
}

body {
    margin: 0;
	background: none transparent;
	position: relative;
}

.arrplay {
	display:block;
    margin-top: 0px;
	left: 0;
	z-index: 1000000;
	/* position: sticky;*/
	 position: absolute;
	top: 0px;
}

.dj_cast {
	display:block;
	position: absolute;
	margin-top: 0px;
	left: 0;
	z-index: 1000000;
	/* position: sticky;*/
	 position: absolute;
	top: 565px;
}
	
/* slide in en slide out player */
#slider1 {
	
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);	
}
/* slide in en slide out dj photo */
#slider2 {
	
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);	
}
	

	
/* slide in en slide out button */
#btn {
    position: absolute;
	display: flex;
	font-family: Oswald;
	top: 76px;
	margin-left: 20px;
    -webkit-transform: translateX(-80%);
    transform: translateX(-80%);	
}

.btn-in {
    -webkit-animation: btn-in 1.0s forwards;
    animation: btn-in 1.0s forwards;	
	z-index: 1000001;
}

.btn-out {
    -webkit-animation: btn-out 1.0s forwards;
    animation: btn-out 1.0s forwards;	
	z-index: 1000001;
}
    
@keyframes btn-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes btn-in {
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes btn-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-80%); }
}

@-webkit-keyframes btn-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-80%); }
}


/* styling button */
.btn_hide {
  /* background: linear-gradient(to bottom,  #038bd3 0%,#1692d4 3%,#357aaf 45%,#357aaf 45%,#025798 49%,#01306c 100%); */
  background: transparant;
  border: 2px solid black;
  border-color: #FFFFFF;
  /*position: absolute; */
  top: 108px;
  height: 40px;
  border: none;
  /*border-color: blue; */
  color: #FFFFFF;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 10px;
  padding-left: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: Oswald;
  font-size: 16px;
  margin: 4px 2px;
  z-index: 1000001;
}

.btn_hide {
	border-radius: 6px;
	border: 2px solid black;
	color: #FFFFFF;
    border-color: #FFFFFF;
	opacity: 1.0;
}

.btn_hide:hover {
  /* background: linear-gradient(to bottom,  #1756a4 0%,#1756a4 3%,#01306c 5%,#038bd3 100%); */
  background: transparant;
  transition: 0.5s background;
  border-color: #0388CF;
  color: #0388CF;
  
}

/* auroraChatButton slider  */
#auroraChatButton {
    -webkit-transform: translateX(150%);
    transform: translateX(150%);	
}

.auroraChatButton-in {
    -webkit-animation: auroraChatButton-in 1.0s forwards;
    animation: auroraChatButton-in 1.0s forwards;	
	z-index: 100001;
}

.auroraChatButton-out {
    -webkit-animation: auroraChatButton-out 1.0s forwards;
    animation: auroraChatButton-out 1.0s forwards;	
	z-index: 100001;
}

    
@keyframes auroraChatButton-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes auroraChatButton-in {
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes auroraChatButton-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(150%); }
}

@-webkit-keyframes auroraChatButton-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(150%); }
}