html,body {
	width:100%;
	height:100%;
	min-height:100%;
	background-color:#000;
	background-image:url('../media/bg.jpg');
	background-repeat:repeat-y;
	background-position:center 0;
}
section{
	background-image:url('../media/bg.jpg');
	background-repeat:repeat-y;
	background-position:center 0;
}

.shadow1 {
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.8);
	box-shadow: 0 0 10px -3px rgba(0,0,0,.8);
}

.show-on-hover:hover > ul.dropdown-menu {
    display: block;    
}

.container {
	width:90%;
}
.panel {
	width:90%;
	margin: 50px auto;
}

.btn {
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.8);
	box-shadow: 0 0 10px -3px rgba(0,0,0,.8);
}

.greyscale_disabled {
	-webkit-filter: grayscale(70%);
	-moz-filter: grayscale(70%);
	-ms-filter: grayscale(70%);
	-o-filter: grayscale(70%);
	filter: grayscale(70%);
	opacity:.5;
}

/*
::-webkit-scrollbar {
	width: 5px;
}
::-webkit-scrollbar-track {
	background-color: #111;
	-webkit-box-shadow: inset 0 0 5px 0px rgba(0,0,0,1);
}
::-webkit-scrollbar-thumb {
	background-color: #333;
	border-radius:2px;
	-webkit-box-shadow: inset 0 0 0px 3px rgba(17,17,17,1);
}
::-webkit-scrollbar-thumb:hover {
	-webkit-box-shadow: inset 0 0 0px 1px rgba(17,17,17,1);
}
*/

/*
input {
    background:#fff;
    border-radius:5px;
    border:0;
    margin:3px;
    color:#444;
    font-family:calibri light;
    font-size:18px;
    text-align:center;
    width:200px;
    height:40px;
    text-shadow:0px 1px 1px #000;
}
*/


/*
::-webkit-input-placeholder {
    color:    #0af;
}
:-moz-placeholder { 
   color:    #0af;
   opacity:  1;
}
::-moz-placeholder {
   color:    #0af;
   opacity:  1;
}
:-ms-input-placeholder {
   color:    #0af;
}
*/

#headline {
	margin:0 auto;
	height:35px;
	width:970px;
	background-image:url('../media/logo.png');
	background-repeat:no-repeat;
	background-position:0px 7px;
	border:0px #fff solid;
	text-align:right;
}

a.nav {
    text-decoration:none;
    color:#fff;
    display:block;
    float:right;
    padding:15px;
    padding-bottom:5px;
    padding-top:5px;
    margin:2px;
    margin-top:5px;
    background:#666;
    opacity:.9;
    text-shadow:0 1px 2px #000;
}
a.nav:hover {
    opacity:1;
}

#head{
	margin:0px auto;
	width:1000px;
	text-align:center;
	line-height:60px;
	font-size:80px;
	color:#fff;
	text-shadow: 1px 1px 7px #333, -1px -1px 7px #333;
	padding-top:250px;
}

#searchbar {
	margin:0 auto;
	height: 45px;
	width:970px;
	border:0px #fff solid;
	opacity: 1
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.searchinput {
    position:relative;
    top:45px;
	box-sizing: border-box;
	height:45px;
	background-image: -moz-linear-gradient(top,#00bfdf 0, #006d88 100%);
	background-image: -ms-linear-gradient(top,#00bfdf 0, #006d88 100%);
	background-image: -o-linear-gradient(top,#00bfdf 0, #006d88 100%);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #00bfdf),color-stop(100%, #006d88));
	background-image: -webkit-linear-gradient(top,#00bfdf 0,#006d88 100%);
	background-image: linear-gradient(to bottom,#00bfdf 0,#006d88 100%);
	/*box-shadow:inset 0 0 6px 2px #000;*/
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 5px;
	border-width: 1px;
	border-color: #0053a6 #0053a6 #000;
	color:#fff;
    text-shadow: 0px 1px 0px #bbb, 0 2px 5px rgba(0,0,0,.8);
	font-size:20px;
	text-align:center;
	line-height:45px;
	font-family:impact;
	vertical-align:middle;
	margin-top:10px;
	margin-bottom:10px;
	transition: all .2s ease-out; /* explorer 10 */
    -webkit-transition: all .2s ease-out; /* chrome & safari */
    -moz-transition: all .2s ease-out; /* firefox */
    -o-transition: all .2s ease-out; /* opera */
    box-shadow:inset 0px -1px 0px 0 rgba(0,0,0,.4), 0px 40px 7px -19px rgba(0,0,0,.5);
    vertical-align: middle;
    transform: rotatex(2deg);
    cursor:pointer;
}
.searchinput:hover {
    top:40px;
    box-shadow:inset 0px -3px 0px 0 rgba(0,0,0,.4), 0px 45px 7px -19px rgba(0,0,0,.5);
    transform: rotatex(5deg);
}


#filtertable {
    width:900px;
    height:200px;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:30px;
    margin-right:30px;
    border:0px #fff solid; 
    color:#fff;
    font-size:18px;
    text-shadow:0 1px 0 #999, 0 2px 3px #000;
	background:transparent;
}
td {
    vertical-align:middle;   
}

/*00bfdf*/

.metro_tile {
	float:left;
	height:310px;
	margin:0;
	padding:10px;
}
.metro_tile_content {
	background-position:center;
	background-size:cover;
	border-radius:3px;
	color:#fff;
	font-weight:bold;
	width:100%;	height:100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	font-size:24px;
	filter: grayscale(80%);
	-webkit-filter: grayscale(80%);
	transition: all .15s ease-out; /* explorer 10 */
	-webkit-transition: all .15s ease-out; /* chrome & safari */
	-moz-transition: all .15s ease-out; /* firefox */
	-o-transition: all .15s ease-out; /* opera */
	text-shadow: 1px 1px 10px #000;
	box-shadow: 0px 0px 3px #000, 0px 0px 3px #000;
	border: inset 1px #000 solid;
	border-radius:3px;
	cursor:pointer;
}
.metro_tile_content:hover {
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	font-size:30px;
}

.metro_avatar {
	width:120px;
	height:120px;
	border:5px rgba(255,255,255,.5) solid;
	border-radius:50%;
	box-shadow:0 0 5px 0px rgba(0,0,0,.5);
}

@keyframes animatedBackground {
    0% { background-position: left center; }
    50% { background-position: right center; }
    100% { background-position: left center; }
}
@-moz-keyframes animatedBackground {
   0% { background-position: left center; }
    50% { background-position: right center; }
    100% { background-position: left center; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: left center; }
    50% { background-position: right center; }
    100% { background-position: left center; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: left center; }
    50% { background-position: right center; }
    100% { background-position: left center; }
}
@-o-keyframes animatedBackground {
    0% { background-position: left center; }
    50% { background-position: right center; }
    100% { background-position: left center; }
}

.animatedBackground {
    animation: animatedBackground 40s linear infinite;
    -moz-animation: animatedBackground 40s linear infinite;
    -webkit-animation: animatedBackground 40s linear infinite;
    -ms-animation: animatedBackground 40s linear infinite;
    -o-animation: animatedBackground 40s linear infinite;   
}

#footer {
	box-shadow:inset 0px 0px 5px 0px #000;
	border:4px transparent solid;
	opacity:.8;
}

#footercontents{
	width:920px;
	margin:0 auto;
	font-family:Calibri light;
	font-size:14px;
	color:#aaa;
	background: transparent;
}

.loginbox {
    display:none;
    position:absolute;
    top:80px;
    left:50%;
    margin-left:-260px;
	width:500px;
    padding:20px;
	background: rgb(126, 126, 126);
	box-shadow:inset 0 1px 2px 0px rgba(255, 255, 255, 0.5), 0 0 3px 0 #000;
	border-radius:10px;
	color:#111;
	text-align:center;
    z-index:999;
    color:#000;
    height:200px;
    color:#fff;
    text-shadow:0 1px 3px #000;
}


#cover {
	box-shadow:inset 0 0 1px 1px #000; 
	border:10px rgba(0,70,70,1) solid;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	margin: 50px auto;
	width:930px; 
	height:300px;
	background-size:1010px; 
	padding:30px;
	margin-bottom:0px;
    border-bottom:0;
}

#profilepic {
	position:relative;
	top:165px;
    left:-15px;
	float:left;  
	border:10px rgba(255,255,255,.3) solid;
	width:200px;
	height:200px;
	z-index:999;
	opacity:1;
    
	box-shadow: 0 1px 5px 1px #000,
            inset 0 0 3px 1px #000;
}
#profiletabs {
	width:740px;
	height:60px;
	margin:0px auto;
	background-color: rgba(0,100,100,.7);
	box-shadow:inset 0 0 1px 0px #000; 
	padding-left:270px;
	padding-top:10px;
    border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
    margin-bottom:15px;
}

#profilecontents {
	width:950px;
	margin:50px auto;
	background-color: rgba(0,255,255,.05);
	box-shadow:0 0 10px 0px #000; 
	margin-bottom:20px;
	padding:20px;
    color:#cff;
    font-family:helvetica;
    font-size:14px;
    border:9px rgba(100,255,255,.3) solid;
    box-shadow:inset 0px 0px 1px 0px #000, 20px -20px 35px -25px #000, 20px 30px 30px -30px #000;
    border-radius:3px;
}

.text3d {
    font-weight:bold;
  text-shadow:     0 1px 0 hsl(174,5%,80%),
                     0 2px 0 hsl(174,5%,75%),
                     0 5px 5px hsl(0,0%,0%),

    
                     0 0 5px rgba(0,0,0,.05),
                    0 1px 3px rgba(0,0,0,.2),
                    0 3px 5px rgba(0,0,0,.2),
                   0 5px 10px rgba(0,0,0,.2),
                  0 10px 10px rgba(0,0,0,.2),
                  0 20px 20px rgba(0,0,0,.3);
}

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
    color:#fff;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}



.stage {
    margin:50px auto;
    position:relative;
    width: 800px; height: 300px;
    border:0px #fff solid;
}

.profile3d {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-perspective: 5000; -webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s;
    animation: backandfourth 5s ease-out infinite;
    -moz-animation: backandfourth 5s ease-out infinite;
    -webkit-animation: backandfourth 5s ease-out infinite;
    -ms-animation: backandfourth 5s ease-out infinite;
    -o-animation: backandfourth 5s ease-out infinite; 
    /*-webkit-perspective-origin: 50% 220px;*/
}


@keyframes backandfourth {
    0% { -webkit-perspective: 5000; -webkit-transform-style: preserve-3d; }
    50% { -webkit-perspective: 2000; -webkit-transform-style: preserve-3d; }
    100% { -webkit-perspective: 5000; -webkit-transform-style: preserve-3d; }
}
@-moz-keyframes backandfourth {
   0% { -webkit-perspective: 5000; -webkit-transform-style: preserve-3d; }
    50% { -webkit-perspective: 2000; -webkit-transform-style: preserve-3d; }
    100% { -webkit-perspective: 5000; -webkit-transform-style: preserve-3d; }
}
@-webkit-keyframes backandfourth {
    0% { -webkit-perspective: 5000; -webkit-transform-style: preserve-3d; }
    50% { -webkit-perspective: 2000; -webkit-transform-style: preserve-3d; }
    100% { -webkit-perspective: 5000; -webkit-transform-style: preserve-3d; }
}
@-ms-keyframes backandfourth {
    0% { -webkit-perspective: 5000; -webkit-transform-style: preserve-3d; }
    50% { -webkit-perspective: 2000; -webkit-transform-style: preserve-3d; }
    100% { -webkit-perspective: 5000; -webkit-transform-style: preserve-3d; }
}
@-o-keyframes backandfourth {
    0% { -webkit-perspective: 5000; -webkit-transform-style: preserve-3d; }
    50% { -webkit-perspective: 2000; -webkit-transform-style: preserve-3d; }
    100% { -webkit-perspective: 5000; -webkit-transform-style: preserve-3d; }
}



.cover {
    margin:0;
    position:absolute;
    width:800px;
    height:300px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-transform: rotatey(-15deg);
    border:15px rgba(255,255,255,.1) solid;
    border-radius:3px;
    box-shadow:inset 0px 0px 0px -1px #000, 0px 0px 5px 0px #000;
}

.coverpic {
    background-size: 100% 100%; 
    box-shadow: inset 0px 0px 2px rgba(255,255,255,.6);
}

.covername {
    margin:0;
    position:absolute;
    -webkit-transform: translatey(260px)
                        translatex(77px)
                        translatez(100px)
                        rotatey(-15deg);
	text-shadow:0 0 5px rgba(0,0,0,.7);
    font-size:28px;
}

.covergenre {
    margin:0;
    position:absolute;
    -webkit-transform: translatey(35px)
                        translatex(175px)
                        translatez(100px)
                        rotatey(-15deg);
    color:rgba(255,255,255,.8);
	text-shadow:0 0 2px rgba(0,0,0,.9);
	
    font-size:14px;
    font-family:sans-serif;
}

.ava {
    margin:0;
    position:absolute;
    width:200px;
    height:200px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-transform:  translatey(35px)
                        translatex(-60px)
                        rotatey(15deg);
    border:9px rgba(255,255,255,.1) solid;
    box-shadow:inset 0px 0px 0px -1px #000, 20px -20px 35px -25px #000, 20px 30px 30px -30px #000;
    border-radius:2px;
}

.srating {
    margin:0;
    position:absolute;
    -webkit-transform:  translatey(210px)
                        translatex(-25px)
                        translatez(5px)
                        rotatey(15deg);
    color:rgba(255,255,255,.7);
    border-radius:10px;
    font-size:28px;
    text-shadow:-1px -1px 6px #000;
}

#widgetpool {
    width:1000px; 
    margin:0px auto;
    border:0px #fff solid;
}

.profiletab {
    padding:15px; 
    border-bottom-left-radius:5px; 
    border-bottom-right-radius:5px; 
    background:#222;
}

.widget {
    background: rgba(255,255,255, 0.1);
	margin:10px;
	color:#fff;
	font-size:28px;
	text-align:center;
	vertical-align:middle;
	display:block;
    float:left;
	border-radius:2px;
    overflow:hidden;
}

iframe {
    box-shadow:0 0 3px 0 #000;
    border-radius:2px;
    border:0;
    width:100%;
    height:100%;
}


#shelve {
    margin:20px auto;
    width:900px;
    height:50px;
    background:rgba(255,255,255,.3);
    border-radius:7px;
    box-shadow:0px 2px 0px -1px rgba(230,230,230,.5),0px 4px 0px -2px rgba(230,230,230,.5),0px 30px 50px 10px rgba(0,0,0,.9);
    transform: rotatex(50deg);
    opacity:1;
}

/*
::-webkit-input-placeholder {
    color:    #444;
}
:-moz-placeholder { 
   color:    #444;
   opacity:  1;
}
::-moz-placeholder {
   color:    #444;
   opacity:  1;
}
:-ms-input-placeholder {
   color:    #444;
}*/

.button3d {
  display: inline-block;
  color: white;
  width: 200px;
  border-radius: 5px;
  box-shadow:inset 0px -3px 0px 0 rgba(0,0,0,.4), 0 1px 3px 1px rgba(0,0,0,.3);
border-top:2px transparent solid;
  cursor:pointer;
  margin:3px;
}
.button3d[type="submit"] {
    color:#444;
}
.button3d[type="submit"]:hover {
  box-shadow:inset 0px -1px 0px 0 rgba(0,0,0,.5), 0 1px 1px 0px rgba(0,0,0,.3),inset 0 10px 25px -15px rgba(0, 118, 255, 0.7);
}
div.button3d:hover {
    margin-top:5px;
  box-shadow:inset 0px -1px 0px 0 rgba(0,0,0,.5), 0 1px 1px 0px rgba(0,0,0,.3);
    border-top:0;
}
.button3d:hover > .buttonText {
  text-shadow:0 1px 0 #000;
  position:relative;
  top:1px;
}
.button3d:hover > .icon {
  position:relative;
  top:1px;
}
span.icon {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
}
span.buttonText {
  display: inline-block;
  vertical-align: middle;
  padding-left: 40px;
  padding-right: 40px;
  font-family:calibri light;
  text-shadow:0 2px 0px rgba(0,0,0,.5);
}

.fBtn { background: #3b5998; }
span.fBtn { background: url('../media/social/facebook.png') transparent 10px 50% no-repeat; }
.gBtn { background: #dd4b39; }
span.gBtn { background: url('../media/social/googleplus.png') transparent 10px 50% no-repeat; }
.sBtn { background: #f75e0e; }
span.sBtn { background: url('../media/social/soundcloud.png') transparent 10px 50% no-repeat; }


/* Social Media Brand Colors

twitter:     #00aced     rgb(0, 172, 237)
facebook:    #3b5998     rgb(59, 89, 152)
googleplus:  #dd4b39     rgb(221, 75, 57)
pinterest:   #cb2027     rgb(203, 32, 39)
linkedin:    #007bb6     rgb(0, 123, 182)
youtube:     #bb0000     rgb(187, 0, 0)
vimeo:       #aad450     rgb(170, 212, 80)
tumblr:      #32506d     rgb(50, 80, 109)
instagram:   #517fa4     rgb(81, 127, 164)
flickr:      #ff0084     rgb(255, 0, 132)
dribbble:    #ea4c89     rgb(234, 76, 137)
quora:       #a82400     rgb(168, 36, 0)
foursquare:  #0072b1     rgb(0, 114, 177)
forrst:      #5B9A68     rgb(91, 154, 104)
vk:          #45668e     rgb(69, 102, 142)
wordpress:   #21759b     rgb(33, 117, 155)
stumbleupon: #EB4823     rgb(235, 72, 35)
yahoo:       #7B0099     rgb(123, 0, 153)
blogger:     #fb8f3d     rgb(251, 143, 61)
soundcloud:  #ff3a00     rgb(255, 58, 0)

*/


#home {
background-image:url("media/videobg.jpg");
background-size:100% 100%;
}
.player {font-size: 1px;}
.pattern-overlay {
	min-height: 90%; 
	background:transparent;
	width:100%;
	margin:0 auto;
	box-shadow:inset 0 3px 5px -3px rgba(0,0,0,.5);
}

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right,  #070707 8%,#111 18%,#070707 33%);
    background-size: 800px 104px;
    height: 42px;
    position: relative;
}

.background-masker {
    background: #222;
    position: absolute;
	height:6px;
	width:auto;
	right:0px;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 10px;
}

.list-n-inline li {
  display: block;
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 20px;
}
/*---- Genral classes end -------*/
/*Change icons size here*/

.social-icons .fa {
  font-size: 1.8em;
}
/*Change icons circle size and color here*/

.social-icons .fa {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #FFF;
  color: rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  cursor:pointer;
}

.social-icons.icon-rounded .fa {
  border-radius: 5px;
}

.social-icons .fa:hover,
.social-icons .fa:active {
  color: #FFF;
  text-shadow:0 0 2px rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0 0 2px rgba(255,255,255,.5);
  -moz-box-shadow: inset 0 0 2px rgba(255,255,255,.5);
  box-shadow: inset 0 0 2px rgba(255,255,255,.5);
}


.social-icons .fa-adn {
  background-color: #504e54;
}

.social-icons .fa-apple {
  background-color: #aeb5c5;
}

.social-icons .fa-android {
  background-color: #A5C63B;
}

.social-icons .fa-bitbucket,
.social-icons .fa-bitbucket-square {
  background-color: #003366;
}

.social-icons .fa-bitcoin,
.social-icons .fa-btc {
  background-color: #F7931A;
}

.social-icons .fa-css3 {
  background-color: #1572B7;
}

.social-icons .fa-dribbble {
  background-color: #F46899;
}

.social-icons .fa-dropbox {
  background-color: #018BD3;
}

.social-icons .fa-facebook,
.social-icons .fa-facebook-square {
  background-color: #3C599F;
}

.social-icons .fa-flickr {
  background-color: #FF0084;
}

.social-icons .fa-foursquare {
  background-color: #0086BE;
}

.social-icons .fa-github,
.social-icons .fa-github-alt,
.social-icons .fa-github-square {
  background-color: #070709;
}

.social-icons .fa-google,
.social-icons .fa-google-plus,
.social-icons .fa-google-plus-square {
  background-color: #CF3D2E;
}


.social-icons .fa-html5 {
  background-color: #E54D26;
}

.social-icons .fa-instagram {
  background-color: #A1755C;
}

.social-icons .fa-linkedin,
.social-icons .fa-linkedin-square {
  background-color: #0085AE;
}

.social-icons .fa-linux {
  background-color: #FBC002;
  color: #333;
}

.social-icons .fa-maxcdn {
  background-color: #F6AE1C;
}

.social-icons .fa-pagelines {
  background-color: #241E20;
  color: #3984EA;
}

.social-icons .fa-pinterest,
.social-icons .fa-pinterest-square {
  background-color: #CC2127;
}

.social-icons .fa-renren {
  background-color: #025DAC;
}

.social-icons .fa-skype {
  background-color: #01AEF2;
}

.social-icons .fa-stack-exchange {
  background-color: #245590;
}

.social-icons .fa-stack-overflow {
  background-color: #FF7300;
}

.social-icons .fa-trello {
  background-color: #265A7F;
}

.social-icons .fa-tumblr,
.social-icons .fa-tumblr-square {
  background-color: #314E6C;
}

.social-icons .fa-twitter,
.social-icons .fa-twitter-square {
  background-color: #32CCFE;
}

.social-icons .fa-vimeo-square {
  background-color: #229ACC;
}

.social-icons .fa-vk {
  background-color: #375474;
}

.social-icons .fa-weibo {
  background-color: #D72B2B;
}

.social-icons .fa-windows {
  background-color: #12B6F3;
}

.social-icons .fa-xing,
.social-icons .fa-xing-square {
  background-color: #00555C;
}

.social-icons .fa-youtube,
.social-icons .fa-youtube-play,
.social-icons .fa-youtube-square {
  background-color: #C52F30;
}

.social-icons .fa-soundcloud {
	background-color: #ff3a00;
}

.social-icons .fa-mixcloud {
	background-color: #fff;
	color:#000;
}
.social-icons .fa-mixcloud:before  {
    content:url('../media/mixcloud.png');
}