@charset "utf-8";
/* CSS Document */

body {
	font-family: sans-serif;
}

.slider--container {
	position: relative;
	height: 100vh; 
	width: 100%; 
	margin: 0 auto;
	overflow: hidden;
	border-radius: .125rem;
	box-shadow: 0 0 .1rem .125rem rgba(0, 0, 0, 0.25);
}


.slider--image {
	position: absolute;
	z-index: 1;
	left:0;
	top:0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	animation: 45s ease-in-out infinite;
} 

.slider--image:nth-of-type(1) {
	animation-name: slide-01;
}
.slider--image:nth-of-type(2) {
	animation-name: slide-02;
}
.slider--image:nth-of-type(3) {
	animation-name: slide-03;
}


@-webkit-keyframes slide-01 {
	0%  { opacity:1; -webkit-transform: scale(1.4) translate(0, 0);}
	16%  {opacity:1; -webkit-transform: scale(1.2) translate(-20px, -10px);}
	33%  {opacity:0; -webkit-transform: scale(1.4) translate(0, 0);}
	50%  {opacity:0;}
	67%  {opacity:0;}
	84%  {opacity:0;}
	100%  {opacity:1; -webkit-transform: scale(1.4) translate(0, 0);}
}
@-webkit-keyframes slide-02 {
	0%  { opacity:0;}
	16%  {opacity:0; -webkit-transform: scale(1.2) translate(-20px, -10px);}
	33%  {opacity:1; -webkit-transform: scale(1.4) translate(0, 0);}
	50%  {opacity:1; -webkit-transform: scale(1.2) translate(-20px, 10px);}
	67%  {opacity:0; -webkit-transform: scale(1.4) translate(0, 0);}
	84%  {opacity:0;}
	100%  {opacity:0;}
}
@-webkit-keyframes slide-03 {
	0%  { opacity:0;}
	16%  {opacity:0;}
	33%  {opacity:0;}
	50%  {opacity:0; -webkit-transform: scale(1.4) translate(0, 0);}
	67%  {opacity:1; -webkit-transform: scale(1.4) translate(-20px, 10px);}
	84%  {opacity:1; -webkit-transform: scale(1.2) translate(20px, -10px);}
	100%  {opacity:0; -webkit-transform: scale(1.4) translate(0, 0);}
}

	/* Styles for all other browsers */
@keyframes slide-01 {
	0%  { opacity:1; transform: scale(1.4) translate(0, 0);}
	16%  {opacity:1; transform: scale(1.2) translate(-20px, -10px);}
	33%  {opacity:0; transform: scale(1.4) translate(0, 0);}
	50%  {opacity:0;}
	67%  {opacity:0;}
	84%  {opacity:0;}
	100%  {opacity:1; transform: scale(1.4) translate(0, 0);}
}
@keyframes slide-02 {
	0%  { opacity:0;}
	16%  {opacity:0; transform: scale(1.2) translate(-20px, -10px);}
	33%  {opacity:1; transform: scale(1.4) translate(0, 0);}
	50%  {opacity:1; transform: scale(1.2) translate(-20px, 10px);}
	67%  {opacity:0; transform: scale(1.4) translate(0, 0);}
	84%  {opacity:0;}
	100%  {opacity:0;}
}
@keyframes slide-03 {
	0%  { opacity:0;}
	16%  {opacity:0;}
	33%  {opacity:0;}
	50%  {opacity:0; transform: scale(1.4) translate(0, 0);}
	67%  {opacity:1; transform: scale(1.4) translate(-20px, 10px);}
	84%  {opacity:1; transform: scale(1.2) translate(20px, -10px);}
	100%  {opacity:0; transform: scale(1.4) translate(0, 0);}
}


.equalizer {
	position: absolute;
	right: 20px;
	top: 30px;
  font-size: 0;
  text-align: center;
  padding: 24px;
}
.equalizer-bar {
  transition: transform 150ms linear;
  display: inline-block;
  background: #ff6000;
  width: 5px;
  height: 30px;
  border-radius: 1px;
  margin: 0 1px;
  transform: scaleY(0.1);
  transform-origin: center center;
}
.radyo-hom{position:relative; z-index: 2000; color:#FFF; max-width: 490px; min-height: 300px; margin: auto; margin-top: -590px;}
@media (min-width: 992px) { .radyo-hom { margin-top: -620px;}}
.hom-dec-one{font-size: 20px; text-align: right; font-weight: bold;color: #ff6000; padding-right: 20px;}
@media (min-width: 992px) { .hom-dec-one { font-size: 30px;}}
.hom-dec-two{font-size: 15px; text-align: left; font-weight: bold;color: #000; margin-top: 10px;}
@media (min-width: 992px) { .hom-dec-two { font-size: 20px;}}
h1 span{color: #ff6000;}
h1{font-size: 25px;}
@media (min-width: 992px) { h1 { font-size: 30px;}}
.hom-link{width: 300px; min-height: 50px; margin: auto;}
@media (min-width: 992px) { .hom-link { float: left;}}
.hom-link a{ color: #FFF;}
.hom-link a:hover{ text-decoration: none;  opacity: 0.9;}
.hom-link-one{width: 150px; min-height: 50px; background-color: #ff6000; text-align: center; color: #FFF; padding-top: 7px; font-size: 22px;}
.hom-link-two{width: 150px; min-height: 50px; background-color: #000;text-align: center; color: #FFF; padding-top: 7px; font-size: 22px;}

.hom-player{width: 300px; min-height: 60px; margin-top: 20px; margin-bottom: 20px;}
.hom-player button{outline: none;}


#playButton{ float:left; width:60px; height:60px; margin-right:56px; margin-top:-2px; background-image:url("../images/player-button.png"); border:none; background-color: transparent; outline:none; background-size:cover; }
#playButtons{  width:50px; height:50px; margin-top:-2px; background-image:url("../images/player-button.png"); border:none; background-color: transparent; outline:none; background-size:cover; }
#currentTime{ float:left; margin-left:15px; font-size:10px; margin-top:17px; color:#FFF;}
#fullDuration{ float:left; margin-left:15px; font-size:10px; margin-top:17px; color:#FFF;}
#muteButton{ float:left; width:32px; height:32px;margin-right:15px; margin-top: 15px; background-image:url(../images/vol.png); margin-left:15px;border:none; background-color: transparent; outline:none;}