/*
GLOBAL/STRUCTURAL ELEMENTS 
============================================================================
*/


/*
__________________________________________________Fonts
*/
@font-face {
	font-family: 'ProximaNova-Light';
	src: url('../fonts/27AC33_0_0.woff') format('woff');
}

@font-face {
	font-family: 'ProximaNova-Semibold';
	src: url('../fonts/27AC33_1_0.woff') format('woff');
}

@font-face {
	font-family: 'ProximaNova-Regular';
	src: url('../fonts/27AC33_2_0.woff') format('woff');
}

@font-face {
	font-family: 'ProximaNova-Bold';
	src: url('../fonts/27AC33_3_0.woff') format('woff');
}



/*
__________________________________________________Elements
*/
*{
	outline-width:0px;
	outline-style:none;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none; 
}

body{
	padding:0px;
	margin:0px;
	border:0px;
	overflow:hidden;
	width:100%;
	height:100%;
	
	user-select:none;
	-moz-user-select: none;
	-webkit-user-select: none;
	
	font-family: 'ProximaNova-Light','Helvetica Neue', Arial, Helvetica, sans-serif;
	background-color:#121314;
}

img{
	border:0px;
	margin:0px;
	padding:0px;
	width:100%;
	height:auto;
}

/*
div{
	-webkit-transform: translate3d(0,0,0);	
}
*/


/*
__________________________________________________Outer Structure
*/
#demoAreaWindow{
	position:absolute;
	/*
	width:320px;
	height:569px;
	*/
	
	width:37.6vh;
	height:66.75vh;
	
	overflow:hidden;
	background-color:#000000;
}

#demoArea{
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
	visibility:hidden;
	opacity:0;
	
}

#loadingAnimation{
	position:relative;
}

#wallpaper{
	width:100%;
	height:100%;	
	display:none;
}

#timeFastForward{
	width:7vh;
	height:7vh;
	position:absolute;
	right:-3vh;
	top:7vh;	
	cursor:pointer;
	display:none;
}


/*
__________________________________________________Global Styles
*/
.hotspot{
	background-color:#ff00ff;
	opacity:0;
	cursor:pointer;
	position:absolute;
	/*
	opacity:.4
	*/
}

.bkgBlur{
	filter:blur(18px);
	-webkit-filter:blur(18px);
	-webkit-transform: translate3d(0,0,0);
	opacity:.4;	
}




/*
PROTOTYPE CONTENT 
============================================================================
*/

/*
__________________________________________________Home/Structural
*/
.statusBar{
	position:absolute;
	top:0px;
	left:0px;
	z-index:100000;
	width:100%;	
}

#contentArea{
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	-webkit-box-shadow: rgba(0,0,0,.9) 0px 0px 20px;
	-moz-box-shadow: 0px 0px 20px rgba(0,0,0,.9);
	box-shadow:0px 0px 20px 3px rgba(0,0,0,.9);
}

.panel{
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
}

#homeScreen{
	background-color:#0f1113;
	top:0px;
	left:0px;
}

#homeScreen img{
	width:auto;
	height:100%;
}

#contentArea{
	top:0px;
	left:0px;
}

.controlMainMenu{
	position:absolute;
	/*
	top:22px;
	left:2px;	
	width:28px;
	height:28px;
	*/
	top:3.75%;
	left:1.5%;	
	width:8%;
	
	cursor:pointer;
	z-index:1000;
	
}

#powerBtnHotspot{
	width:26%;
	height:10vh;
	position:absolute;	
	left:37%;
	bottom:7%;
}

.navigationBack{
	position:absolute;
	cursor:pointer;
	opacity:.8;
	
	top:2.4%;
	left:0%;	
	width:11%;
	z-index:400;
}


/*
__________________________________________________CONTENT SECTIONS SECTIONS
*/
#momentsScreen{
	top:0px;
	left:0px;
	background-color:#121315;
}

#newMomentOverlay{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:250;
	/*
	************************
	
	BOOM! Allow events to pass through this div 
	(we still want dragging and clicking to work while visible)
	
	************************
	*/
	pointer-events: none;
	opacity:0;
}

#momentTitle{
	position:absolute;
	z-index:300;
	top:	0px;
	width:100%;
	height:10%;
	background-color:#1a1a1a;/*rgba(0,0,0,.57);*/
}

#momentTitle .text{
	position:absolute;
	top:50%;
	width:100%;
	font-size:1.5vh;
	letter-spacing:.24vh;
	text-transform:uppercase;
	color:#ffffff;
	text-align:center;
	line-height:1.6vh;
	white-space: nowrap;	
}

.momentSubTitle{
	position:absolute;
	bottom:79%;
	width:72%;
	left:15%;
	font-size:16px;
	color:#ffffff;
	height:38px;
	overflow:hidden;
	text-align:center;
}

.momentSubTitle .text{
	position:absolute;
	bottom:0px;
	text-align:center;
	width:100%;
}




/*
__________________________________________________Playlist screen
*/
#playlistScreen{
	background-color:#000000;
	top:0px;
	left:0%;
	z-index:1050;
}

.nowPlayingTrackHighlight{
	color:#1ed760 !important;	
}

#playlistHeader{
	position:absolute;
	
	width:100%;
	background-color:#1a1a1a;/*rgba(0,0,0,.57);*/
	height:12.7%;
	top:0%;
}

#playlistHeaderText{
	position:absolute;
	top:5%;
	width:100%;
	font-size:1.5vh;
	letter-spacing:.24vh;
	text-transform:uppercase;
	color:#ffffff;
	text-align:center;
	line-height:1.6vh;
	white-space: nowrap;	
}

#shuffleButton{
	width:65%;
	position:absolute;
	top:9.5%;
	left:17.5%;
	cursor:pointer;
	z-index:50000;
}

#playlistScrollingArea{
	position:absolute;
	width:100%;
	height:87.3%;
	top:12.7%;
	
	/*
	overflow:hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	*/
	overflow:auto;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	
	/*position: absolute;
	width: 300px;
	height: 300px;
	overflow: hidden;
	border:1px solid red;
	*/

	/* Prevent native touch events on Windows 
	-ms-touch-action: none;*/

	/* Prevent the callout on tap-hold and text selection 
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;*/

	/* Prevent text resize on orientation change, useful for web-apps 
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;*/
	
	
}

#playlistTracks{
	position:relative;
	margin-top:0px;
	background-color:#121314;
	margin-bottom:4.5%;
	/* WARNING!! WON'T SCROLL WITH HEIGH SET TO 100% 
	height:100%;*/

	/* Prevent elements to be highlighted on tap */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Put the scroller into the HW Compositing layer right from the start */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}

.playlistTrackButton{
	/*
	border-bottom:1px solid #2e2f33;
	*/ /* - apparently there is no underline on free - or could be old version of spotify, idk*/
	width:90%;
	margin-left:5%;
	margin-right:5%;
	position:relative;
	height:6.4vh;
	cursor:pointer;
}

.playlistTrackButton .more{
	width:11.6%;
	position:absolute;
	top:1vh;
	right:-2.1%;
	
}

.playlistTrackButton .trackTitle{
	position:absolute;
	top:1.25vh;
	color:#adaeb3;/*#ffffff;*/
	font-size:1.9vh;
	font-family: 'ProximaNova-Regular';
	overflow:hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
	width:67.2%;
}

.nowPlayingTrackHighlight{
	color:#84bd00 !important;	
}

.playlistTrackButton .artistAlbum{
	position:absolute;
	top:3.5vh;
	color:#adaeb3;	
	font-size:1.5vh;
	font-family: 'ProximaNova-Regular';
	overflow:hidden;
	text-overflow: ellipsis;
	width:67.2%;
}

.firstButton{
	margin-top:20px;	
}

.playlistTrackHeader{
	border-bottom:1px solid #2e2f33;
	width:90%;
	margin-left:5%;
	margin-right:5%;
	position:relative;
	height:7vh;
}


.playlistTrackHeader .title{
	position:absolute;
	top:4.2vh;
	color:#adaeb3;
	text-transform:uppercase;
	font-size:1.5vh;
	letter-spacing:.24vh;
}




/*
__________________________________________________Minimzed Playbar
*/
#playbar{
	position:absolute;
	background-color:#111111;
	left:0%;
	width:100%;
	height:7.1%;
	bottom:0%;
	z-index:21100;
	overflow:hidden;
	border-top:1px solid #35383b;
}

#playbarBkg{
	position:absolute;
	width:110%;
	height:110%;
	overflow:hidden;
}

#playbarBkg img{
	position:absolute;
	top:-40%;
}


#playbarAlbumArt{
	position:absolute;
	width:40px;
	height:40px;	
	top:0px;
	left:0px;
}

#playbarTrackName{
	position:absolute;
	top:18%;
	left:12%;
	color:#ffffff;
	font-size:1.5vh;
	overflow:hidden;
	white-space: nowrap;
	width:65%;
}

#playbarArtist{
	position:absolute;
	top:54%;
	left:12%;
	color:#b5b1af;
	font-size:1.5vh;
	overflow:hidden;
	white-space: nowrap;
	width:65%;
}

#playbarPlayButton{
	position:absolute;
	top: 18.5%;
    right: 3.3%;
    width:7.2%;
	
	cursor:pointer;
	
	z-index:200;
}

#playbarPlayButton img{
}

#playbarHotspot{
	width:100%;
	height:100%;	
	z-index:100;
}



/*
__________________________________________________Maximized Player Screen
*/
#maximizedPlayer{
	background-color:#000000;
	top:100%;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:21200;
	
	display:none;
}

#maximizedPlayerBkg{
	height:100%;	
	width:100%;
	overflow:hidden;
	position:relative;
}

#maximizedPlayerBkg img{
	position:absolute;
	left:-38%;
	height:100%;
	width:auto;
}

.bkgImageOverlay{
	position: absolute;
	width:100%;
	height:100%;
	
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#141213+9,141213+100&0.2+9,1+100 */

background: -moz-linear-gradient(top,  rgba(20,18,19,0.2) 9%, rgba(20,18,19,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(9%,rgba(20,18,19,0.2)), color-stop(100%,rgba(20,18,19,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(20,18,19,0.2) 9%,rgba(20,18,19,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(20,18,19,0.2) 9%,rgba(20,18,19,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(20,18,19,0.2) 9%,rgba(20,18,19,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(20,18,19,0.2) 9%,rgba(20,18,19,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33141213', endColorstr='#141213',GradientType=0 ); /* IE6-9 */



}

#controlCloseMaxPlayer{
	position:absolute;
	cursor:pointer;
	opacity:.8;
	
	top:2.2%;
	left:1%;	
	width:11%;
}


#maximizedAlbumArt{
	position:absolute;
	width:74%;
	left:13%;
	top:12%;	
}

#dummyMaximizedAlbumArt{
	position:absolute;
	width:74%;
	left:13%;
	top:12%;	
}

#advertText{
	position:absolute;
	bottom:180px;
	width:84%;
	left:8%;	
	
	display:none;
}

#trackTitleArtist{
	position:absolute;
	bottom:0px;
	width:84%;
	left:8%;	
	height:35%;
}

#trackTitleArtist .title, #advertText .brand{
	/*
	font-size:16px;
	*/
	
	font-size:2vh;
	
	color:#ffffff;
	text-align:center;
	height:2.5vh;
	line-height:2.5vh;
	
	position:absolute;
	top:0px;
	width:80%;
	left:10%;
	overflow:hidden;
	white-space: nowrap;
}

#trackTitleArtist .artist, #advertText .tagline{
	/*
	font-size:13px;
	*/
	font-size: 1.5vh;
	
	color:#b5b1af;
	text-align:center;
	height:1.8vh;
	line-height:2vh;
	
	position:absolute;
	top:11%;
	width:80%;
	left:10%;
	overflow:hidden;
	white-space: nowrap;
}

#maximizedDummyControls{
	width:90%;
	left:5%;
	position:absolute;
	top:66%;
}

#trackControls{
	position:absolute;
	bottom:0px;
	height:21%;
	width:100%;
}

#controlREW{
	position:absolute;
	width:18%;
	left:18%;
	top:6%;
	opacity:.4;
}

#controlPlay{
	position:absolute;
	width:22%;
	left:39%;
	cursor:pointer;
}

#controlFFWD{
	position:absolute;
	width:18%;
	right:18%;
	top:6%;
	cursor:pointer;
}

#scrubBar{
	position:absolute;
	top:74%;
	width:90%;
	left:5%;
	height:5%;	
}

#playcontrolProgressBkg{
	height:6.6%;
	width:100%;
	left:0%;
	top:50%;
	position:absolute;
	background-color:#2f2a36;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;		
}

#playcontrolProgress{
	height:6.6%;
	width:0%;
	left:0%;
	top:50%;
	position:absolute;
	background-color:#ffffff;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;	
}

#playcontrolProgressHotspot{
	height:100%;
	width:100%;
	left:0%;
	top:0%;	
}

#scrubHandle{
	position:absolute;
	left:0px;/*13%;*/
	top:43.4%;
	width:2%;
}

#scrubHandle img{
	position:absolute;
	left:-50%;
	top:-50%;
}

#timeDisplayCurrent{
	left:0%;
	opacity:.75;
}

#timeDisplayTotal{
	right:0%;
	text-align:right;
	opacity:.75;
}

#scrubBar .time{
	position:absolute;
	color:#ffffff;
	font-size: 1.4vh;
	top:-.7vh;
}

.maximizeArrow{
	position:absolute;
	/*
	width:34px;
	height:34px;	
	top:1px;
	left:4px;
	*/
	top:4.5%;
	left:1.5%;	
	width:9%;
}

.maximizeArrow img{
	width:100%;
	height:100%;
}

#miniStreamMeter{
	width:100%;
	background-color:#313035;
	height:2px;
	position:absolute;
	top:0px;
	left:0px;
}

.miniStreamProgress{
	background-color:#ffffff;
	width:1%;
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
}

#nowPlayingHeader{
	position:absolute;
	top:3%;
	width:100%;
	font-size:1.3vh;
	letter-spacing:.24vh;
	color:#ffffff;
	text-align:center;
	line-height:20px;
	white-space: nowrap;
}

#nowPlayingHeader .headerTitle{
	font-size:1.1vh;
	text-transform:uppercase;
	color:#b5b1af;
	text-align:center;
	line-height:1.7vh;	
}

#nowPlayingHeader .playlistTitle{
	font-size:1.3vh;
	color:#b5b1af;
	text-align:center;
	line-height:2vh;	
}


/*
-------------------------- PROTOTYPE START SCREEN
*/
#beginPrototypeScreen{
	background-color:#000000;
	top:0%;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	/*
	z-index:21200;
	
	display:none;
	*/
	z-index: 110000;
}

#prototypeVersionNum{
	position:absolute;
	top:2%;
	width:80%;
	left:10%;
	font-size:1.75vh;
	color:#ffffff;
	text-align:center;	
}

#buttonStartPrototype{
	width:80%;
	position:absolute;
	top:45%;
	left:10%;
	height:10%;
	background-color:#ffffff;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	text-align:center;
	font-size:1.95vh;
	line-height:7vh;
	font-family: 'ProximaNova-Semibold';
	cursor:pointer;
	letter-spacing:.18vh;
	text-transform:uppercase;
}



/*
--------------------------- LOCK SCREEN 
*/
#lockScreen{
	top:0%;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	display:none;
	
	z-index: 90000;	
}

#lockScreenStatus{
	top:0% !important;	
}

#lockScreenPlaceholder{
	width:100%;
	height:auto;
	position:absolute;
	top:0px;
	left:0px;	
}

#slideToUnlock{
	font-size:2.75vh;
	text-align:center;
	width:100%;
	position:absolute;
	bottom:8%;
	left:0%;
	font-family:"helvetica neue", helvetica, arial, sans-serif;
	cursor:default;
}

#slideToUnlock img{
	width: 100%;
	height:auto;
}

#lockScreenAlbumArt{
	position:absolute;
	width:74%;
	left:13%;
	top:31%;	
}

#lockScreenSlideHandle{
	width:11%;
	height:1.5%;
	position:absolute;
	left:44.5%;
	bottom:1.5%;
	background-color:rgba(255,255,255,.5);	
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

#lockScreenSlidingAssets{
	width:100%;
	height:100%;	
	position:absolute;
	top:0px;
	left:0px;
}

#lockScreenTrackInfo{
	position:absolute;
	top:8.5%;
	width:84%;
	left:8%;	
	height:35%;
}

#lockScreenSongTitle{
	font-size:2vh;
	color:#ffffff;
	text-align:center;
	height:2.5vh;
	line-height:2.5vh;
	position:absolute;
	top:0px;
	width:80%;
	left:10%;
	overflow:hidden;
	white-space: nowrap;
}

#lockScreenArtistAlbum{
	font-size: 1.5vh;
	color:#b5b1af;
	text-align:center;
	height:1.8vh;
	line-height:2vh;
	position:absolute;
	top:11%;
	width:80%;
	left:10%;
	overflow:hidden;
	white-space: nowrap;
}

#lockScreenPlaytControls{
	position:absolute;
	width:100%;
	height;
	top:15.5%;	
}

#lockScreenPlaytControls img{
	width:100%;
	height:auto;
}

#lockScreenCamera{
	width:9.3%;
	position:absolute;
	right:1.8%;
	bottom:1.5%;
}

#lockScreenCamera img{
	width:100%;
	height:auto;
}



/*
__________________________________________________Advertising
*/
#advertScreen{
	background-color:rgba(0,0,0,.85);
	z-index: 60000;
	display:none;
	opacity:0;
}

.button3{
	width:50%;
	position:absolute;
	left:25%;
	height:7%;
	background-color:rgba(0,0,0,.6);
	border:1.5px solid #ffffff;
	color:#ffffff;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	text-align:center;
	font-size:1.3vh;
	line-height:3.75vh;
	font-family: 'ProximaNova-Semibold';
	cursor:pointer;
	letter-spacing:.18vh;
	text-transform:uppercase;
}

.button10, .button11, .button12{
	width:65%;
	position:absolute;
	left:17.5%;
	text-align:center;
	font-size:1.5vh;
	cursor:pointer;
	letter-spacing:.18vh;
	font-family: 'ProximaNova-Semibold';
	text-transform:uppercase;
	color:#ffffff;
}

.button11{
	font-family: 'ProximaNova-Light';
}

.button12{
	width:80%;
	left:10%;
	font-family: 'ProximaNova-Light';
	font-size:1.25vh;
}

#advertSkipButton{
	bottom:10%;
}

.header5{
	position:absolute;
	top:3%;
	width:100%;
	font-size:1.3vh;
	letter-spacing:.2vh;
	color:#ffffff;
	text-align:center;
	line-height:1.8vh;
	white-space: nowrap;
	text-transform:uppercase;
}

.advertContent{
	position:absolute;
	width:90%;
	left:5%;
	height:75%;
	top:7%;
	background-color:#111111;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;	
	border:1px solid #333333;
	/*
	overflow:hidden;
	*/
}

#advertScreenBkg{
	position:absolute;
	width:100%;
	height:100%;	
}

#advertVideoArea{
	width:100%;
	height:38%;
	/*
	background-color:rgba(0,0,0,.4);
	*/
	position:absolute;
	top:30%;
	left:0%;
	cursor:pointer;
}

#advertVideoHolder{
	width:100%;
	height:100%;
}

#advertVideo{
	width:100%;
	height:auto;	
	display:none;
}

#advertCTAButton{
	bottom:10%;
	display:none;
}

#equalizerAnimation{
	width:24px;
	height:24px;
	position:absolute;
	
	bottom:2%;
	left:2%;
	background-color:rgba(0,0,0,.50);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display:none;
}

.equalizerBar{
	background-color:rgba(255,255,255,.75);
	width:4px;
	height:6px;
	position:absolute;
	bottom:4px;
}

#equalizerBar1{
	left:4px;
	height:2px;
}

#equalizerBar2{
	left:10px;
	height:14px;
}

#equalizerBar3{
	left:16px;
	height:4px;
}

#advertVideoOptions{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background-color:rgba(0,0,0,.75);
	display:none;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

#advertVideoShare{
	top:40%;
}

#advertVideoReplay{
	top:40%;
}

#advertOfferText{
	width:88%;
	position:absolute;
	top:36%;
	left:6%;
	color:#ffffff;
	display:none;
	cursor: default;
}

#advertOfferText .offerTitle{
	font-size:3.25vh;
	font-family: 'ProximaNova-Light';
}

#advertOfferText .offerSubTitle{
	font-size:1.75vh;
	padding-top:1.25vh;
	font-family: 'ProximaNova-Light';
	opacity:.75;
}

#advertOfferText .thankYouMessage{
	padding-top:1.25vh;
	font-size:3.2vh;
	/*
	letter-spacing:.2vh;
	*/
	font-family: 'ProximaNova-Light';
	display:none;
}

.highlight{
	color:#f59b23;	
}



/*
pointer-events: none;
*/

#videoMaximize{
	position:absolute;
	top:1%;
	right:1%;
	width:25px;
	cursor:pointer;
	backface-visibility: hidden;
	display:none;
}

#videoMaximize img{
	width:100%;
	height:auto;
	margin:0px;
	padding:0px;
	line-height:0px;	
	background-color:rgba(0,0,0,.4);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/*
---------- video ad scrub controls
*/
#videoScrubBar{
	position:absolute;
	bottom:2%;
	width:94%;
	left:3%;
	height:10px;
	/*
	background-color:rgba(0,0,0,.4);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	*/
	backface-visibility: hidden;
	z-index:100;
	display:none;
}

#videoPlaycontrolProgressBkg{
	height:2px;
	width:100%;
	left:0%;
	top:4px;
	position:absolute;
	background-color:#2f2a36;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;		
}

#videoPlaycontrolProgress{
	height:2px;
	width:0%;
	left:0%;
	top:4px;
	position:absolute;
	background-color:#ffffff;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;	
}

#videoPlaycontrolProgressHotspot{
	height:100%;
	width:100%;
	left:0%;
	top:0%;
	display:none;
}

#videoScrubHandle{
	position:absolute;
	left:0px;/*13%;*/
	top:3px;
	width:4px;
}

#videoScrubHandle img{
	position:absolute;
}

#videoTimeDisplayCurrent{
	left:0%;
	opacity:.75;
}

#videoTimeDisplayTotal{
	right:0%;
	text-align:right;
	opacity:.75;
}

#videoScrubBar .time{
	position:absolute;
	color:#ffffff;
	font-size: 1.4vh;
	top:-150%;
}

#videoTapIcon{
	position:absolute;
	width:100%;
	top:-20%;/* 20% */
	text-align:center;
	pointer-events: none;
	opacity:0;
	backface-visibility: hidden;
}

#videoTapIcon img{
	width:80%;/* 35% */
	height:auto;	
}


#advertVideoLabel{
	position:absolute;
	width:80%;
	top:7%;
	left:10%;
	cursor:pointer;
	display:none;	
}

#advertVideoLabelText{
	color:#ffffff;
	font-size:1.6vh;
	font-family: 'ProximaNova-Regular';
	text-align:center;
	position:absolute;
	width:100%;
	padding-top:1.6vh;
}

#advertVideoLabelSubText{
	color:#ffffff;
	font-size:1.4vh;
	text-align:center;
	position:absolute;
	width:100%;
	padding-top:4vh;
}

#advertVideoLabel img{
	width:100%;
	height:auto;
}

#advertVideoMutedArea{
	position:absolute;
	width:100%;
	height:100%;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	overflow: hidden;
	-webkit-transform: translate3d(0,0,0);	
	transform: translate3d(0,0,0);
}

#advertVideoMuted{
	position:absolute;
	height:140%;
	width:auto;
	left:-50%;
	top:-20%;
}

#videoBlurredBkg{
	position:absolute;
	width:110%;
	height:auto;
	top:-2%;	
	left:-5%;
	
	filter:blur(18px);
	-webkit-filter:blur(18px);
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	opacity:.4;

}

#videoBkgOverlay{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+60,1+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */	
}


#countdownTimerUnit{
	position:absolute;
	width:88%;
	left:7%;
	top:53%;
	color:#ffffff;
	height:6vh;
	display:none;
}

#countdownTimerUnit .message{
	position:absolute;
	width:75%;
	left:0%;
	top:0%;
	font-size:1.4vh;
	padding-top:1.25vh;
	line-height:1.75vh;
	letter-spacing:.1vh;
	opacity:.8;
}

#countdownTimer{
	position:absolute;
	width:6vh;
	height:6vh;
	right:0%;
	top:0%;
}

#countdownTimerTime{
	font-size:1.25vh;
	padding-top:1.25vh;
	line-height:3.5vh;
	letter-spacing:.1vh;
	font-family: 'ProximaNova-Semibold';
	width:100%;
	text-align:center;
}

#countdownPie{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	
	/* rotate since circle starts at 50,0 */
	-ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}

#countdownTimerSVG{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;	
}

#countdownTimerSVGBkg{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;	
}

#countdownCircle{
	
}


#bottomUtilityArea{
	position:absolute;
	bottom:-3.5%;
	width:100%;
	height:3.5%;
	background-color:#000000;
	
	z-index:58400;
	cursor:pointer;
	color:#dddddd;
	font-size:1.25vh;
	line-height:2.5vh;
	text-align:center;
}

.utilityLink{
	text-decoration:underline;
	color:#ffffff;
}



/*
-------------------------- IN APP BROWSER
*/
#inAppBrowserScreen{
	background-color:#3d3d40;
	z-index:70000;
	left:105%;
}

#inAppBrowserClose{
	position:absolute;
	top:4%;
	left:3%;
	width:8%;	
	cursor:pointer;
	background-color:transparent;
	border:1px solid;
	border-color:rgba(61,61,64,0);
}

#inAppBrowserClose img{
	width:100%;
	height:auto
}

#inAppBrowserBack{
	position:absolute;
	top:3.5%;
	left:18%;
	width:10%;
	cursor:pointer;
	border:1px solid;
	border-color:rgba(61,61,64,0);
}

#inAppBrowserBack img{
	width:100%;
	height:auto
}

#inAppBrowserNext{
	position:absolute;
	top:3.5%;
	right:18%;
	width:10%;
	opacity:.5;
}

#inAppBrowserNext img{
	width:100%;
	height:auto;
}

#inAppBrowserContent{
	position:absolute;
	width: 106%;
	height: 90%;	
	top:10%;
	overflow:auto;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

/*
scroll bar not hiding for whatever reason
*/
#inAppBrowserContent::-webkit-scrollbar {
    -webkit-appearance: none;
}

#inAppBrowserHeader{
	position:absolute;
	top:4.5%;
	width:80%;
	left:10%;
}

#inAppBrowserHeader .title{
	font-size:1.3vh;
	color:#ffffff;
	text-align:center;
	line-height:1.7vh;	
}

#inAppBrowserHeader .url{
	font-size:1.1vh;
	color:#b5b1af;
	text-align:center;
	line-height:1.3vh;
}

#inAppBrowserContent .landingPageMockup{
	width:100%;
	height:auto;
}





/*
--------------------------- OVERLAYS AND UTILITIES
*/
#utilityOverlay{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.75);
	
	z-index:300000;
}

#utilityIframeWindow{
	width:80%;
	height:60vh;
	position:absolute;
	top:20vh;
	left:10%;
	background-color:#ffffff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	margin:0 auto;
	overflow:hidden;
}

#utilityOverlayClose{
	position:absolute;
	width:60px;
	height:60px;
	top:0px;
	right:0px;
	cursor:pointer;
}

#sendToText{
	position:absolute;
	bottom:0px;
	right:0px;
	width:60px;
	cursor:pointer;
	background-color:#222326;
	border:1px solid #666666;
	border-right:none;
	border-bottom:none;
}

#sendToText .label{
	text-transform:uppercase;
	color:#ffffff;
	font-size:10px;
	text-align:center;
	padding:4px;	
}

#utilityIframeWindow iframe{
	width:100%;
	height:100%;
	position:absolute;	
}



/*
__________________________________________________Facebook and App Swap
*/

#facebookAppArea{
	background-color:#d3d6db;
	left:100%;
	top:0%;
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden;
	visibility:hidden;
	opacity:0;
}


.statusBarFB{
	position:absolute;
	top:0px;
	left:0px;
	z-index:100000;
	width:100%;	
	background-color:#4d6aa4;
	/*
	height:25px;
	*/
}

#facebookScrollingArea{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	overflow:hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;

	/* Prevent native touch events on Windows 
	-ms-touch-action: none;*/

	/* Prevent the callout on tap-hold and text selection 
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;*/

	/* Prevent text resize on orientation change, useful for web-apps 
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;*/
}


#facebookFeed img{
	width:100%;
	height:auto;	
}

#facebookNav{
	width:100%;
	position:absolute;
	bottom:0px;
	left:0px;
}

#facebookNav img{
	width:100%;
	height:auto;
	display:block;
}

.recentFriend{
	position:absolute;
	top:30px;
	left:10px;
	color:#ffffff;
	text-align:center;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:12px;
}

.friendBubble{
	width:44px;
	height:44px;
	overflow:hidden;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	border-radius: 22px;
	background-color:#666666;	
}


.fbContentBox{
	margin:8px;
	border:1px solid #c3c4c9;
	background-color:#ffffff;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:12px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.fbAdLogo{
	width:29px;
	height:29px;	
	margin:8px;
}

.fbAdLogo img{
	width:100%;
	height:auto;
}

#fbSyncedVideo{
	position:relative;	
}

.fbVideoHolder{
	position:relative;
	width:110%;
	height:177px;
	background-color:#000000;
	left:-5%;
	margin-top:10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	overflow:hidden;
	margin:8px;

	width:314px;
	height:177px;
	position:relative;
}

#advertVideo{
	/*
	width:100%;
	top:120px;
	left:0px;
	position:absolute;
	display:none;
	*/
	position:absolute;
	top:0px;
	left:0px;
}

.fbBrandName{
	position:absolute;
	top:8px;
	left:43px;
	font-weight:bold;
	
}

.fbSponsored{
	position:absolute;
	top:24px;
	left:43px;
	color:#aaaaaa;
}

.fbIntroText{
	margin:8px;
}

.fbLikesComments{
	color:#aaaaaa;
	font-size:11px;
	margin:8px;
}

.fbLikeCommentButtons{
	position:relative;
	margin-top:8px;
	background-color:#fafafa;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

.appSwapShield{
	z-index:1000000;
	width:100%;
	height:100%;
	display:none;
	
}

#demoAreaShield{	
}

#facebookAreaShield{	
}