body {
	background-color: black;
}

header {
	position: relative;
	text-align: center;
	overflow: hidden;
}

.detect.no-flash {
	display: none !important;
}

.background {
	background-position: center center;
	background-size: 100%;
	background-repeat: no-repeat;
	background-attachment: scroll;
	
	position: fixed;
	left: -50px;
	right: -50px;
	top: -50px;
	bottom: -50px;
	opacity: 0.6;

	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-o-filter: blur(20px);
	-ms-filter: blur(20px);
	filter: blur(20px);
	z-index: -1;
}

.clip {
	box-sizing: border-box;
	margin: 0px 0px 1% 0px;
	position: relative;
	display: inline-block;
	max-width: 640px;
	width: 100%;
	font-size: 1em;
	text-align: center;
	word-spacing: 0px;
}

.image {
	display: block;
	position: relative;
	width: 100%;
	height: 0px;
	
	background-size: cover;
	
	-webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
	-o-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
	-ms-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
}

.image>h1 {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	color: white;
	margin-top: -100%;
	margin-left: 10%;
	margin-right: 10%;
	width: 80%;
	
	text-shadow: 0px 0px 30px rgba(0, 0, 0, 1), 0px 0px 30px rgba(0, 0, 0, 1), 0px 0px 30px rgba(0, 0, 0, 1), 0px 0px 30px rgba(0, 0, 0, 1);
}

.image{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

.flowplayer {
	-webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
	-o-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
	-ms-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
}

.topContentLogo {
	height: 7vh;
	min-height: 30px;
	max-height: 100px;
}

.phone {
	display: none;
}

.section {
	max-width: 1050px;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 1%;
	padding-bottom: 1%;
}

.inlineImage, .inlineImageDark, .inlineImageBright {
	height: 0.8em;
}

.inlineImageBright {
	display: none;
}

.column1, .column2, .column3, .column4 {
	display: table-column;
}

.column2 {
	width: 2%;
}

.column3, .column4 {
	width: 49%;
}

.filler {
	border-top: 1px solid #b7b7b7;
	display: block;
	width: 100%;
}

.smallVerticalPadding {
	padding-top: 1%;
	padding-bottom: 1%;
}

.userInfo1 {
	text-align: left;
	vertical-align: middle;
}

.userInfo2 {
	text-align: right;
	vertical-align: middle;
}

.avatar {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 15px;
	border-color: white;
	border-width: 3px;
	border-style: solid;
	
	background-position: center center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-image: url("../images/player/no_avatar.png");
}

.verified {
	position: absolute;
	display: block;
	width: 22px;
	height: 22px;
	top: -9px;
	right: -9px;
}

.user {
	font-size: 1.2em;
}

.song {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.shareButton {
	width: 50px;
	height: 50px;
	margin-left: 5px;
	cursor: pointer;
}

.copyLink, .embedCode {
	color: white;
	padding: 0px 15px;
	border-radius: 16px;
	height: 50px;
	margin-left: 5px;
}

.copyLink {
	background-color: #37a8e1;
}

.embedCode {
	background-color: #35e185;
}

#copyLink, #embedCode {
	display: table-cell;
	font-size: 1.2em;
	vertical-align: middle;
	height: 50px;
}

.avatar, .shareButton {
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.bottomCaption {
	display: table-caption;
	caption-side: bottom;
}

.bottomCaption div {
	display: inline-block;
	vertical-align: middle;
}

#downloadApp {
	padding: 5%;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	
	background-color: rgba(38, 43, 56, 0.9);
	/*background-color: rgba(255,255,255,0.9);*/
	background-image: url('../images/noise_transparent_new.png');
	z-index: 999;
	
	border-top: 1px solid rgba(0,0,0,0.5);
	
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#downloadApp .appInfo .appIcon {
	display: inline-block;
	width: 60px;
	height: 60px;
	
	border-radius: 15px;
	background-size: contain;
	text-align: right;
	margin-right: 10px;
}

#downloadApp .appName {
	font-weight: 900;
	font-family: 'TitilliumSemiBold';
	font-size: 22px;
	text-align: left;

}

#downloadApp .availableOn {	
	font-size: 15px;
	text-align: left;
	line-height: 15px;
}

#downloadApp .column1 {
	width: 30%;
}

#downloadApp .column2 {
	width: 70%;
}

#downloadApp .close {
	position: absolute;
	width: 25px;
	height: 25px;
	display: block;
	right: 5px;
	top: 5px;
	
	background-color: transparent;
	background-image: url('../images/svg/close-icon.svg');
	background-size: contain;
}

#downloadApp a {
	color: #ffffff;
	text-decoration: none;
}

@keyframes fadein {
    0% { opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    0% { opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    0% { opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    0% { opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    0% { opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; }
}

@media screen and (max-width:640px) {
	
	.clip.wow {
	  	visibility: visible !important;
	  	-webkit-animation: none !important; 
	    -moz-animation: none !important;
	    -o-animation: none !important;
	    -ms-animation: none !important;
	    animation: none !important;
	}
	
	.phone {
		display: table;
	}
	
	.clip {
		margin-bottom: -5px;
		margin-top: 0px;
		background-color: rgb(38, 43, 56)
	}
	
	.background {
		background-color: #218ee0;
		background-image: none !important;
		-webkit-filter: none;
		-moz-filter: none;
		-o-filter: none;
		-ms-filter: none;
		filter: none;
		opacity: 1;
	}
	
	.videoInfo {
		background-color: rgb(38, 43, 56);
		color: white;
		padding-bottom: 5%;
	}
	
	.userInfo2 {
		display: none !important;
	}
	
	.avatar, .filler {
		border-color: rgb(58, 63, 76); 
	}
	
	.avatar {
		width: 50px;
		height: 50px;
	}
	
	.verified {
		width: 16px;
		height: 16px;
		top: -5px;
		right: -5px;
	}
	
	.inlineImageDark {
		display: none;
	}
	
	.inlineImageBright {
		display: inline-block;
	}
	
	.shareButton {
		width: 40px;
		height: 40px;
	}
	
	.copyLink, .embedCode, #copyLink, #embedCode {
		height: 40px;
	}
	
	.copyLink, .embedCode {
		border-radius: 13px;
	}
	
	.column2 {
		width: 4%;
	}
	
	.column3 {
		width: 96%;
	}
}