@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";


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


body{
	text-align:center;
}

.top{
	text-align:center;
	background:#00CC75;
	
	position:relative;
}
.top__header,
.top__footer{
	position:relative;
	overflow:hidden;
}
.top__header{
	height:500px;
}
.top__footer{
	height:300px;
}
.top__header DIV,
.top__footer DIV{
	position:absolute;
	width:100%;
}
.top__header .logo{
	bottom:300px;
}
.top__header .icons{
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	background:url('../img/splash/icon_mix_2.png');
	background-position:center center;
	background-repeat:none;
}
.top__header .light{
	bottom:-30px;
}
.top__header .screen{
	z-index:1;
	bottom:-3px;
}
.top__footer .light{
	bottom:-250px;
}
.top__footer .screen{
	z-index:1;
	top:0px;
}

.top .logo IMG{
	width:70%;
	max-width:300px;
}
.top .screen IMG{
	width:90%;
	max-width:1350px;
}



.page__title{
	display:inline-block;
	
	font-size:40px;
	color:rgba(0,0,0,0.6);
	
	text-transform:uppercase;
	border:2px solid rgba(0,0,0,0.2);
	padding:20px;
	
	margin-top:100px;
}
.page__desc{
	width:55%;
	max-width:730px;
	margin:auto;
	
	font-family:Gotham-Book, Arial;
	font-size:17px;
	line-height:28px;
	color:rgba(0,0,0,0.7);
	
	padding-bottom:20px;
}
.page__desc b{
	font-weight:normal;
	font-family:Gotham-Bold;
	text-transform:uppercase;
	font-size:13px;
}



.features{
	padding-top:70px;
	overflow-x:hidden;
}
.live-page .features{
	padding-top:40px;
}
.feature{
	box-sizing:border-box;
	padding:90px 0px 0px 0px;
	/*border-bottom:1px dashed rgba(0,0,0,0.2);*/
	width:90%;
	max-width:1000px;
	min-height:500px;
	margin:auto;
	
	position:relative;
	padding-left:550px;
	padding-right:0px;
	
	text-align:justify;

}.feature--right{
	padding-left:0px;
	padding-right:550px;
}
.feature > IMG{
	position:absolute;
	top:40px;
	right:520px;
}.feature--right > IMG{
	right:auto;
	left:520px;
}

.feat__title{
	color:rgb(0,203,115);
	font-size:21px;
	font-family:Gotham-Light;
	
	margin-bottom:10px;
}
.feat__desc{
	color:rgba(0,0,0,0.7);
	font-size:12px;
	line-height:20px;
	font-family:Gotham-Book;
	
	padding-left:13px;
	margin-bottom:20px;
}

.follow {
	margin-top:20px;
	background:#00CC75;
	color:#FFF;
	overflow:hidden;
}
.follow .twitter{
	position:relative;
	max-width:1000px;
	width:100%;
	margin:auto;
	padding:100px 0px 100px 500px;
	box-sizing:border-box;
}
.twitter > DIV,
.twitter > IMG,
.twitter > A{
	position:relative;
}
.twitter__title{
	margin-top:20px;
	
	font-size:30px;
	font-family:Gotham-Light;
}
.twitter__subtitle{
	margin-top:10px;
	
	font-size:14px;
	font-family:Gotham-Black;
	text-transform:uppercase;
}
.twitter a:link,
.twitter a:visited{
	margin-top:15px;
	
	text-decoration:none;
	text-transform:uppercase;
	
	font-size:18px;
	font-family:Gotham-Bold;
	color:rgb(0,204,116);
	background:#FFF;
	
	transition:all .3s ease;
	
	display:inline-block;
	padding:10px 30px;
	border-radius:4px;
}
.twitter a:hover,
.twitter a:active{
	background:rgba(255,255,255,0.8);
}
.follow .twitter .light{
	position:absolute;
	bottom:-230px;
	right:-225px;
	z-index:0;
}
.twitter .globe{
	position:absolute;
	top:50px;
	left:0px;
	width:450px;
	height:300px;
}

.extra {
	background:rgb(0,40,23);
	color:#FFF;
	font-size:14px;
	line-height:18px;
	padding:50px 0px;
}
.extra > DIV {
	display:inline-block;
	margin:auto;
	width:90%;
	max-width:500px;
	text-align:justify;
	vertical-align:top;
	box-sizing:border-box;
}
.signature{
	padding:30px;
	padding-left:0px;
}
.sig__email{
	font-size:21px;
	font-family:Gotham-Light;
}
.sig__copy{
	margin-top:15px;
	text-transform:uppercase;
	font-family:Gotham-Bold;
	color:rgba(255,255,255,0.6);
}
.sig__credit {
	margin-top: 5px;
	color: #777;
}
.sig__credit a {
	color: #aaa;
	text-decoration: none;
}
.sig__terms {
	margin-top: 30px;
	font-size:11px;
	text-transform: uppercase;
	color: rgba(255,255,255,.2);
}
.sig__terms a {
	color: rgba(255,255,255,.4);
	text-decoration: none;
}
.sig__terms a:hover {
	color: rgba(255,255,255,.9);
}
.issues{
	padding:30px;
	padding-right:0px;
	border-left:1px dashed rgba(255,255,255,0.3);
	color:rgba(255,255,255,0.9);
}
.issue__title{
	text-transform:uppercase;
	font-family:Gotham-Black;
}
.issue{
	margin-top:20px;
	padding:10px 0px 10px 15px;
	margin-left:15px;
	
	border-left:2px solid rgba(255,255,255,0.5);
}
.issue B{
	font-family:Gotham-Bold;
	font-weight:normal;
}
.issue__text{
	margin-top:20px;
}


/**********************/
/*	      LIST	      */
/**********************/

.room__preview{
	-background:rgb(0,40,23);
	background:rgba(0,0,0,0.1);
	padding:50px 0px;
}
.room__preview .page__desc{
	max-width:400px;
}
/*.btn--green,*/
.room__list{
	width:90%;
	max-width:700px;
	margin:auto;
}
.room__list{
	min-height:120px;
	max-height:320px;
	overflow:auto;
	
	margin-bottom:20px;
	
	background:rgba(255,255,255,0.7);
	border:1px solid rgba(255,255,255,1);
	box-sizing:border-box;
	
	position:relative;
}
.room__list:empty{
	display:none;
}
.room__item:link,
.room__item:visited{
	display:block;
	text-align:left;
	box-sizing:border-box;
	padding-right:15px;
	
	border-bottom:1px solid rgba(0,0,0,0.05);
	line-height:40px;
	
	transition:all .3s ease;
}
.room__item:hover{
	background:rgba(210,210,210,0.4);
}
.room__title{
	display:inline-block;
	text-transform:lowercase;
	font-family:Gotham-Black;
	color:rgba(0,0,0,0.8);
	padding-left:45px;
	
	position:relative;
}.room__item--inactive .room__title{
	color:rgba(0,0,0,0.5);
}
.room__title:before{
	content:'jukebox.today/';
	font-family:Gotham-Book;
	color:rgba(0,0,0,0.5);
}
.room__stat{
	float:right;
	font-family:Gotham-Black;
	color:rgba(0,0,0,0.4);
	
	margin-left:5px;
	padding-left:35px;
	position:relative;
}
.room__title:after,
.room__stat:before{
	content:'';
	position:absolute;
	top:0px; left:0px;
	width:40px; height:40px;
	opacity:0.3;
}
.room__title:after{
	background-image:url('../img/icon_speaker-black.png');
	opacity:0.5;
}.room__item--inactive .room__title:after{
	background-image:url('../img/icon_pause_small.png');
	opacity:0.35;
}
.room__songs:before{
	background-image:url('../img/icon_song.png');
}
.room__users:before{
	background-image:url('../img/icon_users.png');
}

.btn--green,
.btn--green:link,
.btn--green:visited{
	display:inline-block;
	padding:10px 20px;
	
	font-size:14px;
	font-family:Gotham-Bold;
	text-transform:uppercase;
	text-align:center;
	text-decoration:none;
	
	color:rgb(0,40,23);
	color:#FFF;
	background:rgba(255,255,255,1);
	background-color:#0EE278;
	border-bottom:2px solid rgba(0,0,0,0.1);
	border-radius:3px;
	
	transition:all .3s ease;
	cursor:pointer;
}
.btn--green:hover,
.btn--green:active{
	background:rgba(255,255,255,0.8);
	background-color:rgba(14,226,120,0.7);
}



/**********************/
/*	  SIGNUP FORM 	  */
/**********************/

FORM{
	margin-bottom:0px !important;
}

.request_form{
	width:90%;
	max-width:1000px;
	margin:auto;
	
	background:rgba(0,0,0,0.1);
	border-radius:4px;
	margin-top:50px;
	margin-bottom:90px;
	
	border-bottom:2px solid rgba(0,0,0,0.1);
	
	text-align:center;
}
.form{
	padding:60px 0px;
	position:relative;
}

.form__signup,
.form__create{
	text-align:center;
}
.create{
	width:90%;
	max-width:600px;
	position:relative;
	display:inline-block;
	white-space:nowrap;
}


.top__form{
	padding:90px 0px;
	background:#F5F5F5 url('../img/splash/form_bg.png') center center no-repeat;
	
}
.social__btns{
	padding-top:20px;
}

.form__email,
.form__name{
	
	vertical-align:top;
	
	max-width:500px;
	width:90%;
	padding:10px 15px;
	line-height:20px;
	height:40px;
	
	box-sizing:border-box;
	
	text-align:left;
	font-size:16px;
	color:#111;
	font-family:Gotham-Book;
	
	border:1px solid rgba(0,0,0,0.2);/*#08f17c;*/
	outline:none;
	
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
	
	text-transform:lowercase;
}
.create:after{
	content:'jukebox.today/';
	position:absolute;
	top:0px;
	left:17px;
	line-height:38px;
	font-size:16px;
	color:rgba(0,0,0,0.4);
	pointer-events:none;
}
.form__name{
	font-family:Gotham-Bold;
	color:rgba(0,0,0,0.8);
	padding-left:137px;
}
.form__email:hover,
.form__email:focus{
	
}
.form__submit{
	
    -webkit-appearance: none;
	
	display:inline-block;
	vertical-align:top;
	
	padding:0px 20px;
	line-height:40px;
	height:40px;
	text-align:middle;
	
	font-size:13px;
	font-family:Gotham-Black;
	
	color:#FFF;
	background-color:#0EE278;
	border:none;
	
	cursor:pointer;
	
	-webkit-border-radius:0px;
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
		
}.form__submit:hover{
	background-color:rgba(14,226,120,0.7);
}

.form__email,
.form__name,
.form__submit{
	border-bottom:2px solid rgba(0,0,0,0.2);
}

.form__desc{
	width:70%;
	max-width:600px;
	margin:auto;
	
	font-size:15px;
	line-height:21px;
	color:rgba(0,0,0,0.8);
	font-family:Gotham-Book;
	margin-bottom:15px;
}
.form IMG{
	position:absolute;
	top:-42px;
	left:50%;
	margin-left:-42px;
}

.rounded{
	-moz-border-radius: 100px;
	-khtml-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}

/**********************/
/*	    SUCCESS       */
/**********************/

.popup {
	display:none;
	text-align:center;
	z-index:3000;
	position:fixed;
	top:0px; left:0px;
	height:100%;
	width:100%;
	text-align:center;
	background:rgba(0,0,0,0.93);
	color:#FFF;
}

.popup__x{
	
	position:absolute;
	top:30px;
	right:30px;
	
	font-size:40px;
	line-height:20px;
	font-family:Gotham-Light,Arial;
	color:rgba(255,255,255,0.7);
	
	transition:all .3s ease;
	cursor:pointer;
	
}.popup__x:hover{
	color:#FFF;
}

.popup__content{
	position:relative;
	top:50%;
	margin-top:-150px;
}

.popup__title{
	font-size:50px;
}
.popup__subtitle{
	font-size:16px;
	display:inline-block;
	position:relative;
	padding:10px;
}.popup__subtitle:after,
.popup__subtitle:before{
	content:'';
	width:130px;
	height:1px;
	position:absolute;
	top:50%;
	background:rgba(255,255,255,0.7);
}
.popup__subtitle:after{
	left:100%;
}.popup__subtitle:before{
	right:100%
}
.popup__text{
	line-height:30px;
	width:80%;
	max-width:370px;
	font-size:18px;
	margin:auto;
	padding-top:10px;
	padding-bottom:20px;
}

.popup__share>DIV,
.popup__share>IFRAME,
.social__btns>DIV,
.social__btns>IFRAME {
    vertical-align: top;
}


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


@media only screen 
and (max-height : 400px) {
	
	
	
}

@media only screen 
and (min-width : 1100px) {
	/* DESKTOP */
	
	.feature--2,
	.feature--3{
		margin-top:-70px;
	}
	
}

@media only screen 
and (max-width : 1099px) {
	/* MOBILE */
	
	.desktop{display:none !important;}
	
	
	.page__title{
		font-family:Gotham-Black, Arial;
		font-size:18px;
		padding:10px;
		margin-top:60px;
	}
	.page__desc{
		font-size:14px;
		line-height:23px;
		width:80%;
	}
		
	.features{
		padding-top:50px;
		padding-bottom:30px;
	}
	.feature{
		padding:30px 0px 50px 0px;
		
		padding-left:0px;
		
		text-align:center;
	}.feature--right{
		padding-right:0px;
	}
	.feature > IMG{
		position:relative;
		top:0px;
		left:0px;
		
		width:auto;
		height:auto;
		max-width:360px;
		max-height:240px;
		
		margin-bottom:15px;
	}.feature--right > IMG{
		left:auto;
		right:0px;
	}
	
	
	.feature__title,
	.feature__desc{
		padding:0px;
	}
	
	.feature__title{
		font-family:Gotham-Black, Arial;
		font-size:27px;
		
		margin-bottom:10px;
	}
	.feature__desc{
		font-size:16px;
		line-height:25px;
		text-align:center;
		
		margin-left:0px;
	}
	
	.form__email,
	.form__name,
	.form__submit{
		border-radius:3px;
	}
	
	.form__email,
	.form__name{
		display:block;
		margin:auto;
		text-align:center;
	}
	.form__submit{
		margin-top:10px;
	}	

	.create:after{
		display:none;
	}
	.form__name{
		padding-left:10px;
	}
	
	.follow .twitter{
		padding:100px 0px;
		box-sizing:border-box;
	}
	.twitter .globe{
		display:none;
	}
	.twitter .light{
		left:-200px;
	}
	
	
	.signature{
		padding-top:30px;
		border-top:1px dashed rgba(255,255,255,0.3);
	}
	.issues{
		padding:0px;
		padding-bottom:30px;
		border-left:none;
	}
	
	.room__title:before{
		display:none;
	}
	
}