@font-face {
  font-family: 'Gotham-Thin';
  src: url('../font/Gotham/Thin.otf') format('opentype');
}
@font-face {
  font-family: 'Gotham-XLight';
  src: url('../font/Gotham/XLight.otf') format('opentype');
}
@font-face {
  font-family: 'Gotham-Light';
  src: url('../font/Gotham/Light.otf') format('opentype');
}
@font-face {
  font-family: 'Gotham-Book';
  src: url('../font/Gotham/Book.otf') format('opentype');
}
@font-face {
  font-family: 'Gotham-Medium';
  src: url('../font/Gotham/Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Gotham-Bold';
  src: url('../font/Gotham/Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Gotham-Black';
  src: url('../font/Gotham/Black.otf') format('opentype');
}
@charset "utf-8";


/**********************/
/*	 COMMON STYLING	  */
/**********************/


::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track-piece {
    background-color: rgba(255,255,255,0.8);
}

::-webkit-scrollbar-thumb:vertical {
    height: 6px;
    background-color: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:horizontal {
    width: 6px;
    background-color: rgba(0,0,0,0.2);
}

.font--thin{
	font-family:Gotham-Thin, Geneva, Arial, Helvetica, sans-serif;
}
.font--xlight{
	font-family:Gotham-XLight, Geneva, Arial, Helvetica, sans-serif;
}
.font--light{
	font-family:Gotham-Light, Geneva, Arial, Helvetica, sans-serif;
}
.font--book{
	font-family:Gotham-Book, Geneva, Arial, Helvetica, sans-serif;
}
.font--medium{
	font-family:Gotham-Medium, Geneva, Arial, Helvetica, sans-serif;
}
.font--bold{
	font-family:Gotham-Bold, Geneva, Arial, Helvetica, sans-serif;
}
.font--black{
	font-family:Gotham-Black, Geneva, Arial, Helvetica, sans-serif;
}


.shadow--top,
.shadow--bottom{
	position:relative;
}
.shadow--top:before,
.shadow--bottom:after{
	content:'';
	width:100%;
	height:3px;
	position:absolute;
	left:0px;;
}
.shadow--top:before{
	top:0px;
	background:rgba(0,0,0,0.1);
}
.shadow--bottom:after{
	bottom:0px;
	background:rgba(0,0,0,0.05);
}



/**********************/
/*	   RESPONSIVE 	  */
/**********************/

@media only screen 
and (min-width : 1100px) {
	
	.mobile{display:none !important;}
	
}

@media only screen 
and (max-width : 1099px) {
	
	.desktop{display:none !important;}
	
	.page__text{
		font-size:50px;
	}
	
}


/**********************/
/*	 CORE STYLING	  */
/**********************/

html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
	
	font-family: Gotham-Book, Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000;
	text-decoration:none;
	font-weight: normal;
	
	background-position:center center;
	
	cursor:default;
}

b {
	font-weight:normal;
	font-family:Gotham-Bold;
}

a > img {
	border:none;
}

input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
}
.content--anim {
	-webkit-transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	-moz-transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	-o-transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@charset "utf-8";


/**********************/
/* ROOM & USER STATES */
/**********************/

.room--public,
.room--private,
.user--listener,
.user--dj,
.user--mod,
.user--admin,
.room--public-b,
.room--private-b,
.user--listener-b,
.user--dj-b,
.user--mod-b,
.user--admin-b{
	display:none !important;
}

.public-room .room--public,
.private-room .room--private,
.listener-user .user--listener,
.dj-user .user--dj,
.mod-user .user--mod,
.admin-user .user--admin{
	display:inline-block !important;
}

.public-room .room--public-b,
.private-room .room--private-b,
.listener-user .user--listener-b,
.dj-user .user--dj-b,
.mod-user .user--mod-b,
.admin-user .user--admin-b{
	display:block !important;
}

/**********************/
/*	    TOOLTIP 	  */
/**********************/

.tooltip,
.tooltip__arrow{
	position:fixed;
	display:none;
	pointer-events: none;
}
.tooltip{
	line-height:24px;
	white-space:nowrap;
	
	font-size:12px;
	font-family:Gotham-Bold;
	text-transform:uppercase;
	color:#FFF;
	background:rgba(0,0,0,0.9);
	border-radius:3px;
	padding:0px 10px;
}
.tooltip__arrow{
	margin-left:-4px;
	
	border-top:5px solid rgba(0,0,0,0.9);
	border-left:4px solid transparent;
	border-right:4px solid transparent;
}


/**********************/
/* 	 LOADING STATE    */
/**********************/

.setup-page{
	z-index:100;
	position:fixed;
	top:0px; bottom:0px;
	left:0px; right:0px;
	background:#00CC75;
	overflow:auto;
	transition:all .3s ease;
}
.load-complete .setup-page{
	top:100%; bottom:-100%;
}
.setup-page > IMG{
	width:100px;
	height:100px;
	position:absolute;
	top:50%;left:50%;
	margin-top:-50px;
	margin-left:-50px;
	
	-webkit-animation: flash linear 1s infinite;
	animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .5;} 
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .5;} 
	100% { opacity: 1; }
}
.admin-setup > IMG{
	display:none;
}
.room-setup{
	display:none;
}
.admin-setup .room-setup{
	display:block;
}
.room-setup{
	position:absolute;
	top:30%;left:0px;right:0px;
}
.room-setup .setup__options{
	width:90%;
	max-width:500px;
	margin:auto;
	
	color:#FFF;
	font-family:Gotham-Book;
	text-align:center;
}
.room-setup .setup__title{
	font-size:20px;
	font-family:Gotham-Black;
	margin-bottom:5px;
}
.room-setup .setup__subtitle{
	font-size:12px;
	color:rgba(255,255,255,0.9);
	margin-bottom:20px;
}
.room-setup .setup__btn{
	position:relative;
	margin-top:10px;
	
	color:#FFF;
	font-size:15px;
	text-align:left;
	
	background:rgba(0,0,0,0.1);
	border:1px solid rgba(0,0,0,0.12);
	border-radius:6px;
	padding:15px;
	padding-left:80px;
	box-sizing:border-box;
	
	transition:all .3s ease;
	cursor:pointer;
}.room-setup .setup__btn:hover{
	background:rgba(0,0,0,0.15);
	border-color:rgba(0,0,0,0.17);
}
.room-setup .setup__btn > IMG{
	position:absolute;
	top:50%;left:15px;
	margin-top:-25px;
}
.room-setup .setup__btn B{
	font-family:Gotham-Black;
}
.room-setup .setup__btn I{
	display:block;
	font-size:11px;
	margin-top:4px;
	color:rgba(255,255,255,0.85);
}

.loading{
	position:relative;
}
.loading:after,
.loading:empty:after{
	content:'' !important;
	position:absolute!important;
	top:50%!important; left:50%!important;
	width:50px!important; height:50px!important;
	margin-top:-25px!important; margin-left:-25px!important;
	padding:0px !important;
	
	background:url('../img/icon_loading.png') !important;
	
	
    -webkit-animation-name: spin;
    -webkit-animation-duration: 700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 700ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 700ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 700ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}


/**********************/
/*	  PAGE LAYOUT	  */
/**********************/

body,
.url--public:before{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.allow-highlight{
    -webkit-touch-callout: text !important;
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

.action-msg__wrapper{
	pointer-events: none;
    display:none;
	position:fixed;
	left:0px;bottom:70px;
	width:100%;
	text-align:center;
}
.action-msg{
	display:inline-block;
	background:rgba(0,0,0,0.6);
	border-radius:100px;
	padding:15px 30px;
	
	color:#FFF;
	text-transform:uppercase;
}


body{
	background:#E5E5E5;
}

.header,
.jukebox,
.tabs,
.remote{
	position:fixed;
}

.header{
	top:30px; left:30px; right:30px;
}
.header__title,
.header__title DIV{
	float:left;
	font-size:24px;
	color:rgba(0,0,0,0.6);
}
.header__slogan{
	margin-left:10px;
}
.header__share{
	float:right;
	font-size:21px;
	color:rgba(0,0,0,0.4);
}
.share__url{
	position:relative;
}
.url--public:before{
	content:url('../img/icon_public.png');
	opacity:0.3;
	position:absolute;
	right:100%;
	top:-7px;
	pointer-events: none;
}
.header__add{
	opacity:0.2;
	float:right;
	width:20px;
	height:20px;
	padding:3px 6px;
	
	transition:all .3s ease;
	cursor:pointer;
}
.header__add:hover{
	opacity:0.5;
}
.header__back{
	display:none;
	float:right;
	
	font-size:12px;
	padding:6px 10px;
	margin-top:4px;
	color:#E5E5E5;
	background-color:rgba(0,0,0,0.4);
	border-radius:3px;
	
	transition:all .3s ease;
	cursor:pointer;
}
.header__back:hover{
	color:#E5E5E5;
	background-color:rgba(0,0,0,0.6);
}


.jukebox,
.tabs{
	top:80px; bottom:80px; 
}
.jukebox{
	left:30px; right:50%;
	margin-right:10px;
}
.tabs{
	left:50%; right:30px;
	margin-left:10px;
}
.jukebox__list,
.search__results,
.playlist__music,
.users__list,
.tab__page{
	overflow-x:hidden;
	overflow-y:auto;
}
.tab__page{
	display:none;
	position:absolute;
	top:30px; bottom:0px; left:0px; right:0px; 
}
.search{
	display:block;
}
.listener-user .search{
	display:none;
}


.jukebox__current,
.jukebox__list,
.jukebox__history,
.search__results,
.playlist__music,
.users__list{
	position:absolute;
	top:0px; bottom:0px; left:0px; right:0px;
}
.jukebox__list{
	top:220px;
}
.jukebox__current{
	bottom:auto;
	height:220px;
}
.search__results,
.playlist__music{
	top:45px;
}
.jukebox__list,
.playlist__music{
	bottom:36px;
}

.current__video{
	position:absolute;
	top:10px; left:10px;
	width:240px;
	height:200px;
}
.current__info{
	position:absolute;
	top:10px; left:260px; right:10px;
}
.current__options{
	position:absolute;
	bottom:10px; left:270px; right:10px;
}


.jukebox__list:empty:after,
.search__results:empty:after,
.playlist__music:empty:after,
.users__list:empty:after{
	position:absolute;
	top:50%; left:0px;right:0px;
	padding-top:100px;
	padding-right:20%;
	padding-left:20%;
	background:no-repeat center top;
	
	color:rgba(0,0,0,0.6);
	text-align:center;
	font-size:15px;
	line-height:20px;
	
	margin-top:-50px;
}
.jukebox__list:empty:after{
	content:"Bem vindo à JukeIndoor";
	background-image:url('../img/icon_music_large.png');
}
.jukebox__history:empty:after{
	content:'Nenhuma Música Tocando';
}
.search__results:empty:after{
    content:"Adicione músicas do YouTube pesquisando o nome de uma música ou colando uma URL de vídeo ou Playlist";
	background-image:url('../img/icon_youtube_large.png');
	background-position:center 20px;
	margin-top:-80px;
}
.playlist__music:empty:after{
	content:"Selecione uma lista de reprodução acima";
	background-image:url('../img/icon_playlist_large.png');
}
.users__list:empty:after{
	content:"Convite amigos compartilhando seu link: " attr(data-link);
	background-image:url('../img/icon_users_large.png');
	background-position:center 20px;
	margin-top:-70px;
}


/**********************/
/* CURRENTLY PLAYING  */
/**********************/

.jukebox__current{
	background:rgba(255,255,255,0.5);
}
.current__video{
	box-shadow:1px 1px 4px rgba(0,0,0,0.3);
}
.current__info{
	padding:10px;
}
.current__title{
	color:rgba(0,0,0,0.6);
	font-size:21px;
	font-family:Gotham-Light;
	overflow:hidden;
    text-overflow:ellipsis;
	white-space:nowrap;
	width:100%;
}
.current__subtitle{
	color:rgba(0,0,0,0.3);
	font-size:11px;
	font-family:Gotham-Black;
	text-transform:uppercase;
	padding-top:5px;
}

.current__options > DIV, .current__options > A{
	display:inline-block;
	height:40px;
	
	opacity:0.3;
	transition:all .3s ease;
	cursor:pointer;
}
.current__options > DIV:hover, .current__options > A:hover{
	opacity:0.6;
}
.current__vote{
	padding-left:35px;
	
	color:#000;
	line-height:40px;
	font-family:Gotham-Black;
	
	background-repeat:no-repeat;
	background-position:0px 0px;
	
	vertical-align:top;
}

.current__upvote{
	margin-right:5px;
	background-image:url('../img/icon_upvote.png');
}
.current__downvote{
	background-image:url('../img/icon_downvote.png');
}
.current__save{
	float:right;
	width:40px;
	margin-left:2px;
	background-image:url('../img/icon_save_large.png');
}

.current__link{
	height:40px;
	width:90px;
	opacity:1 !important;
	background-image:url('../img/icon_youtube_4.png');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

.jukebox__current:after{
	content:'JUKEINDOOR PAUSADO';
	position:absolute;
	top:0px; bottom:0px; left:0px; right:0px;
	
	color:rgba(0,0,0,0.3);
	font-size:21px;
	font-family:Gotham-Black;
	text-align:center;
	padding-top:100px;
	box-sizing:border-box;
	
	background-color:rgba(255,255,255,0.9);
	
	display:none;
	opacity:0;
	transition:all .3s ease;
}
.jukebox--paused:after{
	display:block;
	opacity:1;
}


/**********************/
/*  JUKEBOX HISTORY   */
/**********************/


.jukebox__history{
	z-index:1;
	display:none;
	margin:10px;
	margin-bottom:0px;
	bottom:36px;
	
	background:rgba(255,255,255,0.95);
	border-bottom:2px solid rgba(0,0,0,0.7);
	box-shadow:1px 1px 4px rgba(0,0,0,0.3);
	border-radius:4px;
}
.menu__btn--history{
	position:absolute;
	bottom:0px;
	left:50%;
	width:120px;
	margin-left:-60px;
	box-sizing:border-box;
	text-align:center;
}
.menu__btn--history:before{
	content:'';
	position:absolute;
	top:0px;left:50%;
	margin-left:-6px;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:5px solid rgba(0,0,0,0.7);
	opacity:0;
	transition:all .3s ease;
}
.menu__btn--history:hover:before,
.menu__btn--history.hover:before{
	opacity:1;
}


/**********************/
/*     TAB STYLES     */
/**********************/

.tab__btns{
	display:absolute;
	top:0px;bottom:30px; left:0px; right:0px;
}
.tab__btn{
	position:relative;
	display:inline-block;
	vertical-align:top;
	
	text-transform:uppercase;
	font-family:Gotham-Black;
	font-size:12px;
	color:rgba(0,0,0,0.3);
	
	box-sizing:border-box;
	height:30px;
	line-height:16px;
	padding:7px;
	padding-right:10px;
	padding-left:35px;
	
	transition:all .3s ease;
	cursor:pointer;
}
.tab__btn:before{
	position:absolute;
	left:5px; top:0px;
	width:30px; height:30px;
	opacity:0.3;
	transition:all .3s ease;
}
.tab--search:before{
	content:url('../img/tab_search.png');
}
.tab--playlists:before{
	content:url('../img/tab_playlists.png');
}
.tab--users:before{
	content:url('../img/tab_users.png');
}
.tab--feed:before{
	content:url('../img/tab_chat.png');
}
.tab--settings:before{
	content:url('../img/icon_settings.png');
}
.tab__btn:hover{
	color:rgba(0,0,0,0.5);
}
.tab__btn:hover:before{
	opacity:0.5;
}
.tab__btn--active{
	cursor:default;
	color:rgba(0,0,0,0.5);
	background:rgba(0,0,0,0.1);
	margin-right:10px;
}
.tab__btn:after{
	content:'';
	position:absolute;
	left:100%;top:0px;
	
	border-left:10px solid transparent;
	border-top:30px solid transparent;
	
	transition:all .3s ease;
}
.tab__btn--active:after{
	border-left:10px solid rgba(0,0,0,0.1);
}
.tab__btn--active:before{
	opacity:0.5;
}
.tab__btn--active:hover:before{
	opacity:0.5;
}
.tab--count .tab__count{
	display:inline-block;
	margin-left:5px;
	background:rgba(0,0,0,0.25);
	color:#E5E5E5;
	padding:0px 4px;
	border-radius:3px;
	transition:all .3s ease;
}
.tab--count:hover .tab__count{
	background:rgba(0,0,0,0.4);
}
.feed__count{
	background:#00CC75 !important;
}

.user__status{
	position:absolute;
	top:0px;right:0px;
	
	font-size:12px;
	font-family:Gotham-Black;
	text-transform:uppercase;
	text-align:center;
	
	padding:8px 2px;
	
	color:rgba(0,0,0,0.3);
}
.user__login DIV{
	display:inline-block;
	
	transition:all .3s ease;
	cursor:pointer;
	
	margin-left:15px;
}
.signup__link{
	color:rgba(0,183,105,0.8);
	font-family:Gotham-Bold;
}
.user__login DIV:hover{
	color:rgba(0,0,0,0.8);
}
.user__badge{
	display:none;
}
.user--true .user__login{
	display:none;
}
.user--true .user__badge{
	display:inline-block;
}

.user__badge{
	position:relative;
	transition:all .3s ease;
	padding-right:20px;
	cursor:pointer;
}
.user__badge:after{
	content:'';
	width:12px;
	height:14px;
	background:url('../img/icon_logout.png');
	position:absolute;
	right:2px;
	top:0px;
	opacity:0.3;
	transition:all .3s ease;
}

.user__badge:hover{
	color:rgba(0,0,0,0.4);
}
.user__badge:hover:after{
	opacity:0.6;
}


/**********************/
/*	   LIST MENU	  */
/**********************/

.list__menu{
	display:none;
	position:absolute;
	bottom:0px; left:0px; right:0px;
	height:36px;
	overflow:hidden;
}
.list__menu,
.menu__btn{
	text-transform:uppercase;
	font-size:12px;
	line-height:20px;
}
.jukebox__menu{
	background:rgba(255,255,255,0.8);
}
.playlist__menu{
	background:rgba(0,0,0,0.07);
}

.menu__total,
.menu__btn{
	padding:8px;
}
.menu__total{
	color:rgba(0,0,0,0.5);
}
.menu__total SPAN{
	font-family:Gotham-Bold;
	color:rgba(0,0,0,0.6);
}
.menu__btn{
	color:rgba(0,0,0,0.4);
	font-family:Gotham-Bold;
	transition:all .3s ease;
	cursor:pointer;
}
.menu__btn:hover,
.menu__btn.hover{
	font-family:Gotham-Bold;
	color:rgba(0,0,0,0.8);
}

.menu--left{
	float:left;
}
.menu--right{
	float:right;
}
.menu--center{
	display:inline-block;
}
.menu--1,
.menu--2{
	position:absolute;
	left:0px; right:0px;
	height:100%;
	
	text-align:center;
	transition:all .3s ease;
	margin:0px 7px;
}
.menu--1{
	top:0px;
}
.menu--2{
	top:100%;
}

.selection--active .menu--1{
	top:-100%;
}
.selection--active  .menu--2{
	top:0px;
}


/**********************/
/*	 LIST ELEMENTS	  */
/**********************/

.list__item{
	position:relative;
	width:100%;
	border-bottom:1px solid rgba(0,0,0,0.1) !important;
	padding:10px;
	padding-left:40px;
	box-sizing:border-box;
	transition:background-color .2s ease;
}
.list__item:hover{
	background:rgba(0,0,0,0.05);
}
.list__item:hover:before{
	opacity:.3;
}
.jukebox__item{
	cursor:default;
}
.admin-user .jukebox__item--sortable,
.mod-user .jukebox__item--sortable{
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.admin-user .jukebox__item--sortable:active,
.mod-user .jukebox__item--sortable:active{ 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.jukebox__history .jukebox__item{ 
	cursor:default;
}
.playlist__item{
	width:98%;
	margin:auto;
	cursor:pointer;
}
.search__item{
	width:98%;
	margin:auto;
	padding:15px;
	padding-left:65px;
	cursor:pointer;
}
.user__item,
.jukebox__item{
	border-left:3px solid;
	border-color:transparent;
}
.search__item:hover,
.playlist__item:hover,
.user__item:hover{
	background:none;
}
.search__item:hover .item__title,
.playlist__item:hover .item__title{
	color:rgba(0,0,0,0.8)
}
.listener-user .jukebox__item,
.dj-user .jukebox__item{
	cursor:default !important;
}
.jukebox__item--active{
	background:rgba(0,204,117,.1);
	cursor:default;
	border-bottom:2px solid rgba(0,0,0,0.1) !important;
}.jukebox__item--active:hover{
	background:rgba(0,204,117,.15);
}.jukebox__item--active:hover:before{
	opacity:.7;
}
.item__play{
	position:absolute;
	left:0px;top:0px;
	width:40px;height:40px;
	
	background:url('../img/icon_play_small.png');
	
	cursor:pointer;
	transition:all .3s ease;
	transform:translateX(-30px);
	opacity:0;
}.admin-user .jukebox__item--show-play:hover .item__play,
 .mod-user   .jukebox__item--show-play:hover .item__play{
	transform:translateX(0px);
	opacity:0.6;
}.admin-user .jukebox__item--show-play:hover .item__play:hover,
 .mod-user   .jukebox__item--show-play:hover .item__play:hover{
	opacity:1;
}
.jukebox__item--active .item__play{
	display:none !important;
}
.item__title{
	color:rgba(0,0,0,0.6);
	font-size:13px;
	line-height:20px;
	overflow:hidden;
    text-overflow:ellipsis;
	white-space:nowrap;
	width:83%;
	
	transition: all .2s ease;
}
.users__list .item__title{
	text-transform:lowercase;
}
.jukebox__item--active .item__title{
	font-family:Gotham-Bold;
}
.jukebox__item:hover .item__title{
	width:60%;
}
.item__time,
.item__subtitle,
.item__username{
	color:rgba(0,0,0,0.5);
	position:absolute;
	top:10px; right:15px;
	font-size:11px;
	line-height:20px;
	transition:all .2s ease;
}
.item__time SPAN{
	display:none;
}
.item__subtitle,
.item__username{
	font-family:Gotham-Bold;
	text-transform:uppercase;
	color:rgba(0,0,0,0.4);
	right:15px;
}
.item__username SPAN{
	font-family:Gotham-Medium;
	color:rgba(0,0,0,0.3);
}

.item__username{
	visibility:hidden;
	right:0px;
	opacity:0;
}
.jukebox__item:hover .item__username{
	visibility:visible;
	right:105px;
	opacity:1;
}
.listener-user .jukebox__item:hover .item__username{
	visibility:visible;
	right:45px;
	opacity:1;
}
.dj-user .jukebox__item:hover .item__username{
	visibility:visible;
	right:85px;
	opacity:1;
}
.dj-user .jukebox__item:hover.item--show-delete .item__username{
	right:105px;
}
.jukebox__item--active:hover .item__username{
	
}


.item__btn,
.playlist__delete{
	position:absolute !important;
	top:5px; right:0px;
	width:30px; height:30px;
	opacity:0;
	
	transition:all .2s ease;
	cursor:pointer;
}
.item__delete,
.playlist__delete{
	background-image:url('../img/icon_delete.png');
}
.dj-user .item--show-delete .item__delete {
	display:block !important;
}
.dj-user .item--show-delete:before {
	opacity:0.5;
}
.item__re-add{
	background-image:url('../img/icon_re-add.png');
}
.item__save{
	background-image:url('../img/icon_save.png?v2');
}
.playlist__edit{
	background-image:url('../img/icon_edit.png');
}
.item--song:hover .item__delete{
	right:5px;
}
.item--song:hover .item__save{
	right:35px;
}.listener-user .jukebox__item:hover .item__save,
 .dj-user .jukebox__item:hover .item__save{
	right:10px;
}.dj-user .jukebox__item:hover.item--show-delete .item__save{
	right:35px;
}
.item--song:hover .item__re-add{
	right:65px;
}.dj-user .jukebox__item:hover .item__re-add{
	right:42px;
}.dj-user .jukebox__item:hover.item--show-delete .item__re-add{
	right:65px;
}

.jukebox__item:hover .item__time{
	right:95px;
	opacity:0;
}.playlist__item:hover .item__time{
	right:45px;
}.selection--active .list__item:hover .item__time{
	display:block !important;
	right:15px !important;
}
.selection--active .list__item:hover .item__username{
	display:block;
	right:15px !important;
}
.selection--active .jukebox__item--active{
	cursor:pointer !important;
}
.item--song:hover .item__btn{
	opacity:0.3;
}
.item__btn:hover{
	opacity:0.8 !important;
}

.admin-user .jukebox__history .item__username,
.admin-user .jukebox__history .item__btn,
.mod-user .jukebox__history .item__username,
.mod-user .jukebox__history .item__btn{
	margin-right:-25px;
}

.user__roles{
	position:absolute;
	right:40px;
	top:5px;
	height:30px;
	background:none;
	border:1px solid rgba(0,0,0,0.1);
	padding:0px 5px;
	
	font-family:Gotham-Black;
	text-transform:uppercase;
	font-size:11px;
	color:rgba(0,0,0,0.4);
	
	transition:all .3s ease;
}
.user__roles:hover{
	background:rgba(0,0,0,0.1);
}
.user__item .item__subtitle{
	right:40px;
}
.user__roles,
.user__item .item__subtitle,
.listener-user .user__item .item__subtitle,
.dj-user .user__item .item__subtitle{
	right:15px;
}

.user__settings{
	display:none !important;
	visibility:hidden !important;
	opacity:0 !important;
	z-index:-1 !important;
	
	content:url('../img/icon_settings.png');
	opacity:0.2;
	
	position:absolute;
	top:5px; right:5px;
	width:30px; height:30px;
	
	transition:all .3s ease;
	cursor:pointer;
}
.user__settings:hover{
	opacity:0.5;
}

.item__info{
	color:rgba(0,0,0,0.5);
	font-size:11px;
	font-family:Gotham-Medium;
	padding-top:3px;
}
.item__duration{
	margin-left:5px;
}
.item__info SPAN{
	position:relative;
	display:inline-block;
	padding-left:15px;
}
.item__info SPAN:before{
	position:absolute;
	top:0px; left:0px;
	opacity:0.4;
	transition:all .2s ease;	
}
.item__viewcount:before{
	content:url('../img/icon_viewcount.png');
}
.item__duration:before{
	content:url('../img/icon_time.png');
}
.jukebox__item--active .item__time SPAN{
	display:inline;
}
.jukebox__item:before,
.playlist__item:before,
.user__item:before{
	content:url('../img/icon_song.png');
	position:absolute;
	top:0px; left:0px;
	opacity:0.2;
	transition:all .2s ease;	
}
.admin-user .jukebox__list--main
 .jukebox__item--show-play:hover:before,
.mod-user   .jukebox__list--main
 .jukebox__item--show-play:hover:before{
	opacity:0;
}
.jukebox__item--active:before{
	opacity:0.7 !important;
}
.playlist__item:before{
	content:url('../img/icon_add_small.png');
}
.playlist__item:hover:before{
	opacity:0.6;
}
.user__item:before{
	content:url('../img/icon_user.png');
	opacity:0.5;
}.user__item--guest:before{
	opacity:0.2;
}.user__item--dj:before{
	content:url('../img/icon_dj.png');
}.user__item--mod:before{
	content:url('../img/icon_mod.png');
}.user__item--admin:before{
	content:url('../img/icon_admin.png');
}
.user__item:hover:before{
	opacity:0.5;
}.user__item--guest:hover:before{
	opacity:0.2;
}


.user__item .item__title{
	font-family:Gotham-Bold;
	text-transform:capitalize;
}
.user__item--guest .item__title{
	font-style:italic;
	font-family:Gotham-Book;
}
.user__item--guest .item__title{
	color:rgba(0,0,0,0.4);
}
.user--current,
.user--current:hover{
	font-family:Gotham-Bold;
	background:rgba(168,219,197,0.5);
}
.user--current:before{
	opacity:0.5;
}
.user__item--guest.user--current .item__title{
	display:inline-block;
	width:auto;
	overflow:visible;
	
	padding-right:13px;
	
	position:relative;
	cursor:pointer;
}
.user__item--guest.user--current .item__title:after{
	content:url('../img/icon_edit.png');
	
	position:absolute;
	top:-4px; left:100%;
	
	opacity:0.3;
	transition:all .3s ease;
}
.user__item--guest.user--current:hover .item__title {
	color:rgba(0,0,0,0.8);
}
.user__item--guest.user--current:hover .item__title:after {
	opacity:0.5;
}
.user__item--guest.user--current:hover:before{
	opacity:0.7;
}

.user__edit{
	display:none;
}
.user--current .user__edit{
	display:inline-block;
	
}

.selection--active .list__item:before{
	content:url('../img/icon_unselected.png');
}
.selection--active .list__item[data-selected='true']:before{
	opacity:1 !important;
	content:url('../img/icon_selected.png');
}
.selection--active .list__item .item__btn{
	display:none !important;
}


.search__item:before{
	content:'';
	background:url('../img/icon_add.png');
	background-size:cover;
	width:24px; height:24px;
	position:absolute;
	top:50%; left:18px; margin-top:-12px;
	opacity:0.2;
	transition:all .2s ease;	
}
.search__item:hover:before{
	opacity:0.6;
}
.search__item .item__save,
.search__item:hover .item__save{
	top:50%;
	margin-top:-15px;
	right:25px;
	display:block;
	opacity:.2;
}
/*
.search__item:after{
	content:'';
	display:block;
	position:absolute;
	top:50%; right:20px; margin-top:-10px;
	width:20px; height:20px;
	background-size: 20px 20px;
	background-image:url('../img/icon_add.png');
	opacity:0.3;
	transition:all .2s ease;	
}.search__item:hover:after{
	opacity:0.7;
}*/

.item__bar{
	display:none;
	
	position:absolute;
	bottom:-2px;
	left:0px;
	width:0%;
	height:2px;
}
.jukebox__item--active .item__bar{
	display:block;
}

.search__box,
.playlists__select{
	z-index:1;
	position:absolute;
	top:3px; left:3px; right:3px;
}
.search__input{
	color:rgba(0,0,0,0.7);
	font-size:15px;
	line-height:20px;
	padding:10px 40px 10px 10px;
	box-sizing:border-box;
	
	width:100%;
	
	background:rgba(255,255,255,0.5);
	border:1px solid rgba(0,0,0,0.1);
	
	transition: all .2s ease;
}
.search__input:hover,
.search__input:focus,
.search__box:hover .search__input{
	background:rgba(255,255,255,0.7);
	border:1px solid rgba(0,0,0,0.2);
}
.search__box__icon{
	position:absolute;
	top:1px; right:0px;
	width:40px; height:40px;
	opacity:0.3;
	transition:all .2s ease;
	cursor:pointer;
}
.search__box__icon:hover{
	opacity:0.5;
}

.playlists__select{
	color:rgba(0,0,0,0.7);
	font-size:15px;
	line-height:20px;
	padding:10px 10px 10px 15px;
	box-sizing:border-box;
	
	background:rgba(255,255,255,0.5);
	border:1px solid rgba(0,0,0,0.1);
	
	transition: all .2s ease;
	cursor:pointer;
}.playlists__select:hover{
	background:rgba(255,255,255,0.7);
	border:1px solid rgba(0,0,0,0.2);
}
.playlists__selected{
	color:rgba(0,0,0,0.5);
}
.playlists__selected:empty:after{
	content:'Selecione uma Playlist';
}
.playlists__select:after{
	content:'';
	position:absolute;
	right:20px; top:16px;
	
	border-top:8px solid rgba(0,0,0,0.3);
	border-left:5px solid transparent;
	border-right:5px solid transparent;
}
.playlists__select:hover:after{
	border-top:8px solid rgba(0,0,0,0.6);
}
.playlists__options{
	display:none;
	box-sizing:border-box;
	
	position:absolute;
	top:100%;
	left:0px;
	width:100%;
	
	/*
	border:1px solid rgba(0,0,0,0.1);
	border-top:none;
	*/
}

.playlist__edit{
	opacity:0.2;
	right:40px;
}
.playlist__delete{
	opacity:0.1;
	right:10px;
}
.playlists__option .item__subtitle{
	right:75px;
}
/*
.playlist__add{
	position:absolute;
	right:10px; top:10px;
	
	box-sizing:border-box;
	line-height:20px;
	height:20px;
	padding:0px 5px 0px 30px;
	
	font-family:Gotham-Black;
	font-size:12px;
	
	color:rgba(0,0,0,0.2);
	
	transition:all .2s ease;
	cursor:pointer;
}
.playlist__add:hover{	
	color:rgba(0,0,0,0.6);
}
.playlist__add:before{
	content:url('../img/icon_add_small.png');
	position:absolute;
	top:-10px; left:-5px;
	opacity:0.2;
	transition:all .2s ease;	
}
.playlist__add:hover:before{
	opacity:0.6;
}

.playlists__select:hover
.playlists__options{
	display:block;
}
*/
.playlists__option{
	position:relative;
	box-sizing:border-box;
	padding:10px 10px 10px 40px;
	
	background:rgba(240,240,240,0.9);
	border-bottom:1px solid rgba(0,0,0,0.1);
	
	transition: all .2s ease;
	cursor:pointer;
}
.playlists__option:hover{
	color:rgba(0,0,0,0.9);
	background:rgba(210,210,210,0.9);
}
.playlists__option:before{
	content:url('../img/icon_playlist.png');
	position:absolute;
	top:0px; left:0px;
	opacity:0.4;
	transition:all .2s ease;
}
.playlists__option--add:before{
	content:url('../img/icon_add_new.png');
}
.playlists__option:hover:before{
	opacity:0.7;
}


/**********************/
/*	 FEED ELEMENTS    */
/**********************/

.feed__list{
	overflow:auto;
	overflow-x: hidden;
	position:absolute;
	top:0px; bottom:40px; left:0px; right:0px;
	padding:20px 0px;
}
.feed__list .feed__item--event,
.feed__list .feed__item--announcement{
	display:block;
	text-align:center;
	
	font-weight:normal;
	font-family:Gotham-Black;
	font-size:11px;
	text-transform:uppercase;
	line-height:20px;
	
	color:rgba(0,0,0,0.5);
	background:rgba(0,0,0,0.07);
	margin:10px 0px;
}
.feed__list .feed__item--announcement{
	background:rgba(255,0,0,0.18);
}
.feed__list .feed__item--message{
	display:inline-block;
	position:relative;
	
	min-width:40%;
	
	box-sizing:border-box;
	padding:10px 20px;
	margin:0px 20px;
	margin-top:5px;
	margin-bottom:5px;
	
	font-size:14px;
	
	border-radius:6px;
	border-top-left-radius:0px;
	background:#CCC;
	
	border-bottom:2px solid rgba(0,0,0,0.05);
}
.feed__item--user{
	text-align:right;
}
.feed__item--user .feed__item--message{
	background:#A8DBC5;
    text-align:left;
	border-radius:6px;
	border-top-right-radius:0px;
}
.feed__list .feed__item--message:before{
	content:'';
	
	display:none;
	position:absolute;
	top:0px;
	left:-7px;
	
	border-right:12px solid #CCC;
	border-bottom:15px solid transparent;
}
.feed__list .feed__item--user .feed__item--message:before{
	left:auto;
	right:-7px;
	
	border-right:none;
	border-left:12px solid #A8DBC5;
	border-bottom:15px solid transparent;
}
.feed__list .feed__item--message > B{
	display:block;
	font-size:11px;
	font-weight:normal;
	font-family:Gotham-Black;
	text-transform:uppercase;
	color:rgba(0,0,0,0.3);
	margin-bottom:5px;
}

.feed__item I{
    text-transform: uppercase;
    font-style: normal;
    font-family: Gotham-Medium;
    font-size: 9px;
    color: rgba(0,0,0,0.3);
}.feed__list .feed__item--message > I{
	display:block;
	position:absolute;
	top:10px;right:20px;
}.feed__item--event I,
 .feed__item--announcement I {
    position: absolute;
    right: 10px;
}



.feed__input,
.feed__submit{
	display:block;
	position:absolute;
	bottom:0px;
	line-height:20px;
	padding:10px;
	
	box-sizing:border-box;
	border:none;
	outline:none;
	
	transition:all .3s ease;
}
.feed__input{
	left:0px; width:100%;
	padding-right:90px;
	border-top:1px solid rgba(0,0,0,0.1);
	font-family:Gotham-Book;
	font-size:14px;
	
	background:rgba(255,255,255,0.6);
}.feed__input:hover,
 .feed__input:focus{
	background:rgba(255,255,255,0.8);
}
.feed__submit{
	bottom:5px;	right:0px;
	width:80px;
	text-align:center;
	
	padding-top:5px;
	padding-bottom:5px;

	font-size:12px;
	font-family:Gotham-Black;
	text-transform:uppercase;
	color:rgba(0,0,0,0.5);
	border-left:1px solid rgba(0,0,0,0.15);
	
	
	cursor:pointer;
	
}.feed__submit:hover{
	color:rgba(0,0,0,0.7);
}


/**********************/
/*	 ADMIN SETTINGS   */
/**********************/

.admin-settings{
	padding:20px;
}
.setting__item{
	padding:15px;
	border-bottom:1px solid rgba(0,0,0,0.1);
	box-sizing:border-box;
	width:100%;
}
.setting__help,
.setting__title,
.setting__options,
.setting__option{
	display:inline-block;
}
.setting__help:after{
	content:'?';
	display:block;
	border-radius:20px;
	line-height:16px;
	width:16px;
	text-align:center;
	
	margin-top:5px;
	margin-right:5px;
	
	font-size:12px;
	color:rgba(0,0,0,0.4);
	background:rgba(0,0,0,0.1);
	font-family:Gotham-Bold;
	
	transition:all .2s ease;
	cursor:pointer;
}
.setting__help:hover:after{
	background:rgba(0,0,0,0.15);
}
.setting__title,
.setting__option{
	font-size:12px;
	font-family:Gotham-Black;
	text-transform:uppercase;
	line-height:25px;
	vertical-align:top;
}
.setting__title{
	color:rgba(0,0,0,0.6);
}
.setting__options,
.setting__input{
	float:right;
}
.setting__option{
	padding:0px 10px;
	
	color:#DFDFDF;
	background:rgba(0,0,0,0.2);
	
	transition:all .2s ease;
	cursor:pointer;
}.setting__option:hover{
	background:rgba(0,0,0,0.25);
}
.option--selected,
.option--selected:hover{
	background:#00A35E;
	cursor:default;
}
.setting__input{
	font-size:14px;
	line-height:19px;
	
	height:25px;
	padding:3px 10px;
	width:150px;
	box-sizing:border-box;
	
	background:rgba(255,255,255,0.6);
	border:1px solid rgba(0,0,0,0.2);
	outline:none;
	
	transition:all .3s ease;
}
.setting__input:hover,
.setting__input:focus{
	background:rgba(255,255,255,0.9);
}
.setting__input--number{
	padding:3px 0px;
	text-align:center;
	width:50px;
	font-family:Gotham-Black;
}
.setting__desc{
	display:none;
	margin-top:10px;
	color:rgba(0,0,0,0.8);
	line-height:20px;
}



/**********************/
/*	REMOTE ELEMENTS   */
/**********************/

.remote{
	bottom:0px; left:30px; right:30px;
	height:60px;
}
.remote--local,
.remote--global{
	position:absolute;
	bottom:0px;
}.remote--local{
	left:0px; right:0px;
	height:57px;
}.remote--global{
	left:80px; right:80px;
	height:60px;
	transition:all .3s ease;
}.speaker--enabled .remote--global{
	left:180px;
}
.remote__seekbar{
	position:absolute;
	top:-10px; left:1px; right:1px;
	
	height:3px;
	background:rgba(0,122,70,0.2);
	
	transition:all .2s ease;
}
.admin-user .remote__seekbar:hover,
.mod-user .remote__seekbar:hover{
	cursor:pointer;
	top:-12px;
	height:6px;
}
.remote__seekbar DIV{
	height:100%;
	background:rgba(0,122,70,1);
	transition:all 1s linear;
}
.remote__seekbar:after,
.remote__seekbar:before{
	content:'';
	position:absolute;
	left:0px;
	width:100%;
	height:8px;
}
.remote__seekbar:after{
	top:100%;
}
.remote__seekbar:before{
	bottom:100%;
}
.remote__controls{
	text-align:center;
	position:relative;
	top:10px;
}
.btn--round{
	position:relative;
	border-radius:100px;
	background:#FFF;
	box-shadow: 2px 2px 0px rgba(0,0,0,0.3);
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
}
.btn--round:hover{
	top:-1px; left:-1px;
	box-shadow: 3px 3px 0px rgba(0,0,0,0.3);
}.btn--round:active{
	top:1px; left:1px;
	box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
}
.btn--small{
	width:30px;
	height:30px;
	margin:5px;
}
.btn--large{
	width:40px;
	height:40px;
}
.play_btn{
	content:url('../img/icon_play.png');
}
.paused{
	content:url('../img/icon_pause.png') !important;
}


.remote__screen{
	display:none;
}
.speaker--enabled .remote__screen{
	display:block;
	position:absolute;
	left:90px;
	top:1px;
	padding:10px;
	cursor:pointer;
	opacity:0.5;
	
	transition:all .3s ease;
}
.listener-user .speaker--enabled .remote__screen,
.dj-user .speaker--enabled .remote__screen{
	left:50px;
}
.remote__speaker{
	content:url('../img/icon_power-off.png') !important;
	
	position:absolute;
	left:-5px;
	top:1px;
	padding:10px;
	opacity:0.35;
	
	transition:all .2s ease;
	cursor:pointer;
}
.listener-user .remote__speaker,
.dj-user .remote__speaker{
	left:50%;
	margin-left:-30px;
}
.speaker--active{
	content:url('../img/icon_power.png') !important;
	opacity:1;
}
.remote__volume--local{
	display:none;
}.speaker--enabled .remote__volume--local{
	display:block;
}
.remote__volume{
	position:absolute;
	left:43px;
	top:1px;
	padding:10px;
}
.remote__volume--global{
	left:87px;
	top:0px;
	padding:10px 6px;
	transition:all .3s ease;
}
.speaker--enabled .remote__volume--global{
	left:187px;
}
.listener-user .remote__volume,
.dj-user .remote__volume{
	left:0px;
}
.volume__icon{
	opacity:0.6;
	transition:all .2s ease;
}
.remote__volume:hover .volume__icon,
.remote__screen:hover{
	opacity:1;
}
.volume__icon.volume--mute{
	content:url('../img/icon_mute.png');
}
.volume__icon--global.volume--mute {
	content:url('../img/icon_global_mute.png');
}
.volume__slider{
	visibility:hidden;
	opacity:0;
	
	position:relative;
	top:-150px;
	left:3px;
	z-index:2;
	
	background:rgba(255,255,255,0.8);
	border:1px solid rgba(0,0,0,0.1);
	border-radius:100px;
	
	overflow:hidden;
	
	padding:10px;
	width:10px;
	height:100px;
	
	transition:all .2s ease;
}
.remote__volume--global .volume__slider{
	left:6px;
}
.volume__slider INPUT{	
	position:relative;
	top:92px;
	left:2px;
	
	-webkit-appearance: none;
	height: 2px;
	width: 100px;
	background:rgba(0,0,0,0.4);
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: top left;
}
.volume__slider INPUT::-webkit-slider-thumb {  
    -webkit-appearance: none;  
    background:rgba(0,0,0,0.6);
    width: 12px;
    height: 12px;
    border-radius:100px;
	
	transition:all .2s ease;
	cursor:pointer;
} 
.volume__slider INPUT::-webkit-slider-thumb:hover{
    background:rgba(0,0,0,0.9);
}
.remote__volume:hover .volume__slider{
	visibility:visible;
	opacity:1;
	top:-160px;
}

.remote__repeat{
	position:absolute;
	right:0px;
	top:0px;
	padding:10px;
	opacity:0.5;
	
	transition:all .2s ease;
	cursor:pointer;
	
	content:url('../img/icon_loop.png');
}
.repeat--all{
	opacity:1;
}
.repeat--one{
	content:url('../img/icon_loop_once.png');
	opacity:1;
}


.remote--local:before,
.remote--local:after,
.remote--global:before,
.remote--global:after{
	content:'';
	position:absolute;
	bottom:0px;
	width:0px;height:0px;
}
.remote--local:before,
.remote--local:after{
	border-bottom:57px solid #333333;
}
.remote--global:before,
.remote--global:after{
	border-bottom:60px solid #00CC75;
}
.remote--local:before,
.remote--global:before{
	left:-30px;
	border-left:30px solid transparent;
}
.remote--local:after,
.remote--global:after{
	right:-30px;
	border-right:30px solid transparent;
}
.remote__shadow:after{
	z-index:1;
	content:'';
	position:absolute;
	bottom:0px; left:1px; right:1px;
	height:3px;
	background:rgba(0,0,0,0.2);
}

.remote--local .remote__shine:after,
.remote--global .remote__shine:after{
	content:'';
	position:absolute;
}
.remote--local .remote__shine:after{
	bottom:55px; left:1px; right:1px;
	height:1px;
	background:rgba(255,255,255,0.25);
}
.remote--global .remote__shine:after{
	bottom:58px; left:1px; right:1px;
	height:1px;
	background:rgba(255,255,255,0.4);
}

/**********************/
/* 	   BG STYLING 	  */
/**********************/

.bg--light{
	background:rgba(255,255,255,0.3);
	border:1px solid #FFF;
}.bg--dark{
	background:rgba(0,0,0,0.03);
	border:1px solid rgba(0,0,0,0.1);
}.bg--green{
	background:#00CC75;
}.bg--black{
	background:#333333;
}


/**********************/
/*  	 POPUPS 	  */
/**********************/

.popup{
	display:none;
	z-index:10;
	position:fixed;
	top:0px; bottom: 0px;
	left:0px; right:0px;
	
	background:rgba(0,0,0,0.8);
}
.popup__close{
	position:fixed;
	top:0px; bottom:0px; left:0px; right:0px;
}
.popup__close SPAN{
	display:block;
	position:fixed;
	top:15px;
	right:15px;
	padding:20px;
	
	font-size:50px;
	font-family:Gotham-XLight;
	line-height:30px;
	color:rgba(255,255,255,0.9);
	
	transition:all .3s ease;
	cursor:pointer;
}
.popup__close:hover SPAN{
	color:#FFF;
}
.popup__box{
	position:fixed;
	top:50%; left:50%;
	width:300px;
	margin-left:-150px;
	
	box-sizing:border-box;
	padding:20px;
	
	background:rgba(255,255,255,0.7);
	border:1px solid #FFF;
}
.popup__content{
	position:fixed;
	top:50%; left:0px;
	width:100%;
	margin-top:-170px;
	
	color:#FFF;
	text-align:center;
}
.error__title{
	font-family:Gotham-Black;
	font-size:50px;
	margin-top:5px;
}
.error__text{
	font-size:18px;
	line-height:25px;
	
	width:90%;
	max-width:400px;
	margin:auto;
	margin-top:10px;
}
.btn--white,
.btn--white:link,
.btn--white:visited{
	display:inline-block;
	padding:10px 20px;
	margin-top:15px;
	
	font-size:15px;
	font-family:Gotham-Bold;
	text-transform:uppercase;
	text-align:center;
	text-decoration:none;
	
	color:#000;
	background:rgba(255,255,255,0.8);
	border-bottom:2px solid rgba(0,0,0,0.3);
	border-radius:3px;
	
	transition:all .3s ease;
	cursor:pointer;
}
.btn--white:hover,
.btn--white:active{
	background:rgba(255,255,255,1);
}
.signup__box{
	margin-top:-100px;
}
.login__box{
	margin-top:-70px;
}
.playlists__box:before{
	content:'Selecione uma Playlist:';
	position:absolute;
	top:-35px; left:5px;
	width:100%;
	
	font-size:18px;
	font-family:Gotham-Book;
	
	color:rgba(255,255,255,0.7);
}
.playlists__box{
	margin-top:-150px;
	padding:0px;
}
.playlists__list{
	height:300px;
	overflow:auto;
	background:rgba(240,240,240,0.9);
}
.playlists__list .playlists__option:before{
	top:-2px;
}

.popup__logo{
	position:absolute;
	top:-43px;
	left:0px;
	
	width:100%;
	height:26px;
	
	background:url('../img/logo_small.png') no-repeat center center;
}

.form INPUT{
	box-sizing:border-box;
	width:100%;
	padding:10px;
	margin-bottom:5px;
	
	font-size:14px;
	color:rgba(0,0,0,0.6);

	transition:all .3s ease;
}
.form INPUT:hover,
.form INPUT:focus{
	color:rgba(0,0,0,0.9);
}
.form__submit{
	width:100%;
	box-sizing:border-box;
	padding:8px;
	
	font-size:15px;
	font-family:Gotham-Bold;
	text-transform:uppercase;
	text-align:center;
	
	color:#FFF;
	background:#00CC75;
	border-bottom:2px solid rgba(0,0,0,0.3);
	
	transition:all .3s ease;
	cursor:pointer;
}
.form__submit:hover{
	background:rgba(0,122,70,1);
}

.form__link,
.popup__btn{
	position:absolute;
	width:100%;
	left:0px;
	bottom:-35px;
	box-sizing:border-box;
	padding:5px;
	
	font-size:12px;
	font-family:Gotham-Bold;
	text-transform:uppercase;
	text-align:center;
	
	color:rgba(255,255,255,0.7);
	
	transition:all .3s ease;
	cursor:pointer;
}
.form__link:hover{
	color:#FFF;
}

.popup__btn{
	bottom:-45px;
	line-height:25px;
	background:rgba(0,0,0,0.5);
	border:1px solid rgba(0,0,0,0.8);
}
.popup__btn:hover{
	color:#FFF;
	background:rgba(0,0,0,0.8);
	border:1px solid rgba(0,0,0,1);
}


/**********************/
/* RESPONSIVE STYLING */
/**********************/


@media only screen 
and (max-height : 300px) {
	.remote{
		display:none;
	}
	
	.jukebox,
	.tabs{
		bottom:20px; 
	}
	
}

@media only screen 
and (min-width : 1100px) {
	/* DESKTOP */
	
	
	/* USERVOICE STYLING */
	.remote__repeat{right:80px;}
	.uv-icon{bottom:8px !important;right:38px !important;}
	/* USERVOICE STYLING */
	
}

@media only screen 
and (max-width : 1099px) {
	/* MOBILE */
	
	
	.room-setup{
		top:0px;
		padding:50px 0px;
	}.room-setup .setup__btn{
		padding-left:15px;
	}.room-setup .setup__btn > IMG{
		display:none;
	}
	
	.header{
		top:20px; left:20px; right:20px;
	}
	.add_music .header__add{
		display:none;
	}
	.add_music .header__back{
		display:block;
	}
	
	.jukebox,
	.tabs{
		top: 60px; 
		margin:0px 20px;
		transition:all .3s ease;
	}
	.jukebox,
	.add_music .tabs{
		left:0px; right:0px;
	}
	.tabs{
		left:100%; right:-100%;
	}
	.add_music .jukebox{
		left:-100%; right:100%;
	}
		
	.jukebox__current{
		height:130px;
	}
	.jukebox__list{
		top:130px;
	}
	.current__video{
		left:-2000px;
	}
	.current__info{
		left:10px;
	}
	.current__options{
		left:20px;
	}
	
	.item__title{
		width:70%;
	}
	
	.jukebox__item:hover .item__title{
		width:60%;
	}
	.item__username{
		display:none;
	}
	
	
	.admin-settings{
		padding:10px;
		text-align:left;
	}
	.setting__options,
	.setting__input{
		float:none;
		display:block;
	}
	.setting__option{
		margin-top:3px;
	}
	
	
	.remote{
		left:20px; right:20px;
	}
	.remote--global{
		left:60px;
		right:0px;
	}
	.speaker--enabled .remote--global{
		left:110px;
	}
	.remote--local:before,
	.remote--global:before{
		left:-20px;
		border-left:20px solid transparent;
	}
	.remote--local:after,
	.remote--global:after{
		right:-20px;
		border-right:20px solid transparent;
	}
	.remote__speaker{
		left:-10px;
		padding-right:0px;
	}
	.remote__volume{
		left:40px;
		padding-left:5px;
	}
	.remote__volume--global{
		left:65px;
	}
	.speaker--enabled .remote__volume--global{
		left:115px;
	}
	
	.remote__screen{
		display:none !important;
	}
	
	.remote__controls{
		margin-left:65px;
		transition:all .3s ease;
	}.speaker--enabled .remote__controls{
		margin-left:115px;
	}
	
	.user__status{
		top:-38px;right:70px;
	}
	.jukebox__current:after{
		padding-top:55px;
	}
	
	
	
	/* USERVOICE */
	.uv-icon{
		display:none !important;
	}
}

@media only screen 
and (max-width : 370px) {
	
	.speaker--enabled .remote__controls{
		margin-left:125px;
	}.speaker--enabled .remote__controls .prev{
		display:none;
	}
	
}

@media only screen 
and (max-width : 330px) {
	
	.remote__controls{
		margin-left:75px;
	}.remote__controls .prev{
		display:none;
	}.speaker--enabled .remote__controls{
		margin-left:115px;
	}.speaker--enabled .remote__controls .next{
		display:none;
	}
	
}