/* ==========================================================
Desenvolvido por Cross Host
http://www.crosshost.com.br/
========================================================== */
html, body {width: 100%; height: 100%;font-family: 'Arvo', serif;}


/* ==========================================================
Player
========================================================== */
.player {
    width: 768px; height: 550px; position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; margin: auto;
    background: #000; border-radius: 5px; overflow: hidden;
    text-transform: uppercase;
    -webkit-box-shadow: 0px 0px 30px 15px rgba(0,0,0,0.5);
       -moz-box-shadow: 0px 0px 30px 15px rgba(0,0,0,0.5);
            box-shadow: 0px 0px 30px 15px rgba(0,0,0,0.5);
}

/* ==========================================================
Player Body
========================================================== */
.player-body {
    height: 450px; overflow: hidden;
}

.player-body .radio-info {position: absolute; top: 0; margin: 15px; z-index: 2}
.player-body .radio-info .logo {width: 100px; height: 100px; float: left; background: #fff;}
.player-body .radio-info .logo img {width: 100%;}
.player-body .radio-info h1 {float: left; color: #fff; font-size: 24px; font-weight: 700; margin: 8px 15px; line-height: 1.2;}
.player-body .radio-info h1 span {font-size: 16px; color: #c7c7c7;}

.player-body .music-info .status {color: #c7c7c7; font-weight: 700}
.player-body .music-info .musica {color: #fff; font-weight: 700;}
.player-body .music-info .artista {color: #b55400; font-weight: 700;}

.player-body li.musica,
.player-body li.artista {text-overflow: ellipsis; overflow:hidden; white-space: nowrap;}

.player-body .previous-music {background: rgba(0,0,0,0.5); margin: 25px; line-height: 1.3; padding: 0 0 0 15px; position: absolute; top: 0; right: 0; z-index: 2; border-radius: 5px}
.player-body .previous-music .capa-da-musica {width: 50px; height: 50px; float: right; margin-left: 12px;}
.player-body .previous-music ul {float: right; margin-top: 4px;}
.player-body .previous-music li {text-align: right;}
.player-body .previous-music .status {font-size: 10px;}
.player-body .previous-music .musica {font-size: 12px;}
.player-body .previous-music .artista {font-size: 10px;} 

.player-body .current-music {position: absolute; bottom: 115px; left: 15px; z-index: 2;}
.player-body .current-music .capa-da-musica {width: 100px; height: 100px; float: left; margin-right: 15px;}
.player-body .current-music ul {float: left; margin-top: 12px;}
.player-body .current-music li {line-height: 1.4}
.player-body .current-music li.musica,
.player-body .current-music li.artista  {max-width:300px;}
.player-body .previous-music li.musica,
.player-body .previous-music li.artista {max-width: 200px;}

.player-body .current-music .btn {padding: 5px 8px; border-radius: 5px;}
.player-body .current-music .btn-facebook {background: #3f51b5; color: #fff;font-size: 9px; font-weight: 700; text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); text-decoration: none;}
.player-body .current-music .btn-facebook:hover {background: #5064d3;}
.player-body .current-music .btn-facebook i {font-size: 14px; margin-right: 10px;}
.player-body .current-music .status {font-size: 10px; margin-top: 4px}
.player-body .current-music .musica {font-size: 16px;}
.player-body .current-music .artista {font-size: 12px;}


/* ==========================================================
Player Controls
========================================================== */
.player-body .player-controls {position: absolute; bottom: 100px; right: 0; margin: 15px; z-index: 2;}
.player-body .player-controls i {color: #fff;}
.player-body .player-controls .volume {float: left; width: 210px; height: 45px; background: rgba(0,0,0,0.6); border-radius: 5px; position: relative; padding-left: 10px}


.player-body .player-controls .btn-play-stop {width: 80px; height: 45px; background: rgba(181,84,0,0.5); float: right; border-radius: 5px; margin-left: 15px; text-align: center; cursor: pointer;}
.player-body .player-controls .btn-play-stop:hover {background: rgba(181,84,0,0.8);}
.player-body .player-controls .btn-play-stop i{line-height: 1.6; font-size: 20px;}

/*VOLUME*/
.player-body .player-controls .volume i.volume-icon {
    opacity: 0.9;
    position: absolute;
    margin-top: -8px;
    left: 10px;
    top: 20px;
    font-size: 22px;
}
#volume {
  position: absolute;
  top: 20px;
  left: 40px;
  margin: 0 auto;
  height: 5px;
  width: 160px;
  background: #555;
  border-radius: 15px;
}
#volume .ui-slider-range-min {
  height: 5px;
  width: 150px;
  position: absolute;
  background: #5d2c0d;
  border: none;
  border-radius: 10px;
  outline: none;
}
#volume .ui-slider-handle {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #FFF;
  position: absolute;
  margin-left: -8px;
  margin-top: -8px;
  cursor: pointer;
  outline: none;
}


/* ==========================================================
Player Footer
========================================================== */
.player-footer {background: #fff; height: 100px; z-index: 2;}

.player-footer .event {float: left; width:33%; height: 34px; margin: 8px 0 8px;}
.player-footer .event:first-child {border-right: 1px solid #999;}
.player-footer .event:last-child {border-left: 1px solid #999;}
.player-footer .event a {text-decoration: none; padding-left: 20px; line-height: 2;}
.player-footer .event a:hover {color: #b55400;}
.player-footer .event a:hover .event-name {color: #b55400;}
.player-footer .event .event-date {font-size: 16px; font-weight: 700; color: #b55400; margin-right: 10px}
.player-footer .event .event-name {font-size: 12px; font-weight: 700; color: #000;}

.player-footer .signature {text-align: center; width: 100%; clear: both; padding: 10px 0}
.player-footer .signature small {font-size: 11px; color: #666; font-family: sans-serif; text-transform: none;}
.player-footer .signature img {width: 120px; vertical-align: middle; margin-left: 10px}

/* ==========================================================
FX-Gradient 0/\0
========================================================== */
.fx-gradient-top {
z-index: 1; width: 100%; height: 150px; position: absolute; top: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.fx-gradient-bottom {
z-index: 1; width: 100%; height: 150px; position: absolute; bottom: 100px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

/* ==========================================================
Carousel
========================================================== */
.carousel {z-index: 1;}
.carousel-inner {height:  450px;}
.carousel .item {position: absolute;width: 768px;;height: 450px;
        -webkit-animation: kenburns-left 10s ease-in-out both;
	-moz-animation: kenburns-left 10s ease-in-out both;
	animation: kenburns-left 10s ease-in-out both;
}
.carousel .item img{min-width: 100%;}
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* ==========================================================
Animações
========================================================== */
/*Display & Hide*/
.player.exibindo .player-body .radio-info h1,
.player.exibindo .player-body .player-controls, 
.player.exibindo .player-body .previous-music,
.player.exibindo .fx-gradient-top {opacity: 1!important; transition-delay: 0s!important;}

@media only screen and (min-width: 768px) {
    .player .player-body .radio-info h1{    
        opacity: 0;   
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
        transition-delay: 3s;
        -webkit-transition-delay: 3s;
    }
    .player .player-body .player-controls {
        opacity: 0;   
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
        transition-delay: 3s;
        -webkit-transition-delay: 3s;
    }
    .player .player-body .previous-music {
        opacity: 0;   
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
        transition-delay: 3s;
        -webkit-transition-delay: 3s;
    }
    .player .fx-gradient-top {
        opacity: 0;   
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
        transition-delay: 3s;
        -webkit-transition-delay: 3s;
    }

    .player:hover .player-body .radio-info h1{
        opacity: 1;   
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
        transition-delay: 0s;
        -webkit-transition-delay: 0s;
    }
    .player:hover .player-body .player-controls {
        opacity: 1;   
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
        transition-delay: 0s;
        -webkit-transition-delay: 0s;
    }
    .player:hover .player-body .previous-music {
        opacity: 1;   
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
        transition-delay: 0s;
        -webkit-transition-delay: 0s;
    }
    .player:hover .fx-gradient-top {
        opacity: 1;   
        transition: opacity 1s;
        -webkit-transition: opacity 1s;
        transition-delay: 0s;
        -webkit-transition-delay: 0s;
    }

}

/* ----------------------------------------------
 * Generated by Animista on 2017-3-20 10:20:4
 * http://animista.net
 * T: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation kenburns-left
 * ----------------------------------------
 */
@-webkit-keyframes kenburns-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 50%;
            transform-origin: 16% 50%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(-20px, 15px);
            transform: scale(1.25) translate(-20px, 15px);
    -webkit-transform-origin: left;
            transform-origin: left;
  }
}
@keyframes kenburns-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 50%;
            transform-origin: 16% 50%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(-20px, 15px);
            transform: scale(1.25) translate(-20px, 15px);
    -webkit-transform-origin: left;
            transform-origin: left;
  }
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@-webkit-keyframes fade-out {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes fade-out {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
/* ==========================================================
Responsive
========================================================== */
@media only screen and (max-width: 768px) {
    .player {width: 95%;}
    .player-body .current-music li.musica,
    .player-body .current-music li.artista  {max-width: 270px}
}

@media only screen and (min-width: 768px) {
    body {background: url(../img/background.jpg) center center no-repeat #000; background-size: cover}
}

@media only screen and (max-width: 490px) {
    body {background: none;}
    .player {width: 100%; height: 100%; border-radius: 0px;}
    /*Carousel*/
    .carousel-inner {height:  100vh;}
    .carousel .item {width: 100%;height: 100%;}
    .carousel .item img{min-height: 100%; max-width: none;}
    /*Player Body*/
    .player-body {background-size: cover; height: 100%;}
    .player-body .radio-info .logo {width: 80px; height: 80px;}
    .player-body .radio-info h1 {font-size: 20px;}
    .player-body .previous-music {display: none;}
    .player-body .current-music {bottom: 50px; left: 10px;}
    .player-body .current-music .capa-da-musica {width: 80px; height: 80px; margin-right: 10px; display: none;}
    .player-body .current-music li.musica,
    .player-body .current-music li.artista {max-width: 210px}
    
    /*Player Controls*/
    .player-body .player-controls {position: absolute; width: 300px; margin: 10px; bottom: 40px;}
    .player-body .player-controls .volume {display: none;}
    /*FOOTER*/
    .player-footer {position: absolute; bottom: 0; width: 100%; height: 40px;}
    .player-footer .event {display: none;}
    /*Fx-Gradient*/
    .fx-gradient-bottom {bottom: 40px;}
}

@media only screen and (max-height: 490px) {
    body {background: none;}
    .player {width: 100%; height: 100%; border-radius: 0px;}
    /*Carousel*/
    .carousel-inner {height: 100vh;}
    .carousel .item {width: 100%;height: 100%;}
    .carousel .item img {min-width: 100%}
    /*Player Body*/
    .player-body .radio-info .logo {width: 80px; height: 80px;}
    .player-body .radio-info h1 {font-size: 20px;}
    .player-body .previous-music {display: none;}
    .player-body .current-music {bottom: 50px; left: 10px;}
    .player-body .current-music .capa-da-musica {display: none;}
    .player-body .current-music li.musica,
    .player-body .current-music li.artista {max-width: 370px}
    /*Player Controls*/
    .player-body .player-controls {position: absolute; width: 300px; margin: 10px; bottom: 40px;}
    .player-body .player-controls .volume {display: none;}
    /*FOOTER*/
    .player-footer {position: absolute; bottom: 0; width: 100%; height: 40px;}
    .player-footer .event {display: none;}
    /*Fx-Gradient*/
    .fx-gradient-bottom {bottom: 0px;}
}
/* ==========================================================
Goodbye!
========================================================== */
.hidden {display: none;}
.item {
   position: relative;
   width: 100%;
   border: 1px solid black;
   height: 450px;
}

img.image {
   opacity: 0.7;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   min-height:100%;
}

.notransition{opacity:1 !important;transition:opacity 0s !important;-webkit-transition:opacity 0s !important;transition-delay:0s !important;-webkit-transition-delay:0s !important}