@charset "utf-8";
/* CSS Document */

/*custom font - Montserrat*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
/*forcing the body to take 100% height*/
html, body {min-height: 100%;}

/*Thumbnail Background*/
.thumb {
	width: 602px; height: 322px; margin:30px 50px 0 0;
	-webkit-perspective: 1000px; perspective: 1000px;
	float:right;
}
.thumb a {
	display: block; width: 100%; height: 100%;
	/*double layered BG for lighting effect*/
	background: 
		linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/DSSoundCloudMusicPlayer3.png);
	/*disabling the translucent black bg on the main image*/
	background-size: 0, cover;
	/*3d space for children*/
	-webkit-transform-style: preserve-3d; transform-style: preserve-3d;
	-webkit-transition: all 0.5s; transition: all 0.5s;
	cursor: default;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 0.5s;
	-webkit-cursor: default;
}
.thumb:hover a {-webkit-transform: rotateX(40deg); -webkit-transform-origin: bottom; transform: rotateX(40deg);transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
	/*36px high element positioned at the bottom of the image*/
	content: ''; position: absolute; left: 0; bottom: 0; 
	width: 100%; height: 30px;
	/*inherit the main BG*/
	background: inherit; background-size: cover, cover; -webkit-background-size: cover, cover;
	/*draw the BG bottom up*/
	-webkit-background-position: bottom; background-position: bottom;
	/*rotate the surface 90deg on the bottom axis*/
	-webkit-transform: rotateX(100deg); -webkit-transform-origin: bottom; transform: rotateX(100deg); transform-origin: bottom;
}
/*label style*/
.thumb a span {
	color: white; text-transform: uppercase;
	position: absolute; top: 100%; left: 0; width: 100%;
	font: bold 12px/36px Montserrat; text-align: center;
	/*the rotation is a bit less than the bottom surface to avoid flickering*/
	-webkit-transform: rotateX(-89.99deg); -webkit-transform-origin: top; transform: rotateX(-89.99deg); transform-origin: top;
	z-index: 1;
}
/*shadow*/
.thumb a:before {
	content: ''; position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5); 
	box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
	-webkit-transition: all 0.5s; transition: all 0.5s; 
	/*by default the shadow will be almost flat, very transparent, scaled down, */
	opacity: 0.15;
	-webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform: rotateX(95deg) translateZ(-80px) scale(0.75);
	-webkit-transform-origin: bottom; -webkit-transform-origin: bottom;
}
.thumb:hover a:before {
	opacity: 1;
	/*blurred effect using box shadow as filter: blur is not supported in all browsers*/
	box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
	/*pushing the shadow down and scaling it down to size*/
	-webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);transform: rotateX(0) translateZ(-60px) scale(0.85);
}

/*** ------------------------- END OF Main box style ------------------------- ***/
.leftBit, .rightBit{
	width:300px;
	height:320px;
	color: #000;
}
.rightBit{}
.leftBit, .rightBit, .playRec, .previousRec, .nextRec, .repeatRec, .listRec, .hitsRec, .fbRec, .twRec, .barRec{
	float:left;
}
.playRec, .dlRec{
	width:150px;
	height:150px;
}
.previousRec, .nextRec, .fbRec, .twRec{
	width:75px;
	height:75px;
}
.nextRec{
}
.listRec{
	width:300px;
	height:320px;
}
.repeatRec, .hitsRec{
	width:150px;
	height:75px;
}
.hitsRec{}
.dlRec{
	float:right;
	
}
.fbRec{}
.twRec{}
.barRec{
	width:300px;
	height:20px;
}

/** LEFT BIT ELements **/
.titRec, .waveRec, .singRec, .dueRec{
	width:302px;
	height:55px;
}
.titRec{}
.waveRec{}
.singRec{}
.dueRec{}
.listRec{
	width:302px;
	height:100px;
}
/************ End of Right Bit ***********/
.playRec, .previousRec, .nextRec, .repeatRec, .listRec, .hitsRec, .fbRec, .twRec, .barRec, .titRec, .waveRec, .singRec, .dueRec, .dlRec{
	-webkit-transition:box-shadow 1s ease-in-out;
	transition:box-shadow 1s ease-in-out;
}
.playRec:hover, .previousRec:hover, .nextRec:hover, .repeatRec:hover, .listRec:hover, .hitsRec:hover, .fbRec:hover, .twRec:hover, .barRec:hover, .titRec:hover, .waveRec:hover, .singRec:hover, .dueRec:hover, .dlRec:hover{
    -webkit-box-shadow: inset 0px 0px 20px 8px rgba(0,0,0,0.75); 
	box-shadow: inset 0px 0px 20px 8px rgba(0,0,0,0.75);   
}
.playLine1, .playLine2, .previousLine1, .previousLine2, .nextLine1, .nextLine2, .repeatLine1, .repeatLine2, .hitsLine1, .hitsLine2, .dlLine1, .dlLine2, .fbLine1, .fbLine2, .twLine1, .twLine2, .barLine1, .barLine2, .titLine1, .titLine2, .waveLine1, .waveLine2, .singLine1, .singLine2, .dueLine1, .dueLine2, .listLine1, .listLine2{
	border-bottom: 1px solid #000;
    position: absolute;
    opacity: 0;
    -webkit-transition:opacity 1s ease-in-out; transition:opacity 1s ease-in-out;
	/** font-family: 'Didact Gothic', sans-serif; **/
	font-family:Arial;
	font-weight:bold;
	
}
.playLine2, .previousLine2, .nextLine2, .repeatLine2, .hitsLine2, .dlLine2, .fbLine2, .twLine2, .barLine2, .titLine2, .waveLine2, .singLine2, .dueLine2, .listLine2{
	font-size:18px !important;
}

/************ Lines  ************/
.playLine1{
    width: 70px;
    height: 45px;
    -webkit-transform:
        translateY(-20px)
        translateX(-30px)
        rotate(37deg); 
	transform:
        translateY(-20px)
        translateX(-30px)
        rotate(37deg); 
}
.playLine2{
    width:110px;
    height:22px;
    margin-left:-146px;
    margin-top:-23px;
}

.previousLine1{
	width: 80px;
    height: 45px;
	margin-top:30px;
    -webkit-transform:
        translateY(-80px)
        translateX(-10px)
        rotate(57deg);
	transform:
        translateY(-80px)
        translateX(-10px)
        rotate(57deg);
}
.previousLine2{
	width:90px;
    height:22px;
    margin-left:-99px;
    margin-top:-70px;
}
.nextLine1{
	width: 80px;
    height: 45px;
	margin-top:30px;
    -webkit-transform:
        translateY(-80px)
        translateX(-10px)
        rotate(-57deg);
	transform:
        translateY(-80px)
        translateX(-10px)
        rotate(-57deg);
}
.nextLine2{
	width:100px;
    height:22px;
    margin-left:70px;
    margin-top:-70px;
}
.repeatLine1{
	width: 170px;
    height: 5px;
	margin-left:-100px;
	margin-top:20px;
    -webkit-transform:
        translateY(-75px)
        translateX(10px)
        rotate(57deg);
	transform:
        translateY(-75px)
        translateX(10px)
        rotate(57deg);
}
.repeatLine2{
	width:70px;
    height:22px;
    margin-left:-122px;
    margin-top:-144px;
}
.hitsLine1{
	width: 60px;
    height: 45px;
    -webkit-transform:
        translateY(-20px)
        translateX(-30px)
        rotate(37deg); 
	transform:
        translateY(-20px)
        translateX(-30px)
        rotate(37deg); 
}
.hitsLine2{
	width:100px;
    height:22px;
    margin-left:-137px;
    margin-top:-19px;
}
.dlLine1{
	width: 220px;
    height: 5px;
    -webkit-transform:
        translateY(35px)
        translateX(-190px)
        rotate(20deg); 
	transform:
        translateY(35px)
        translateX(-190px)
        rotate(20deg); 
}
.dlLine2{
	width:100px;
    height:22px;
    margin-left:-284px;
    margin-top:-20px;
}
.fbLine1{
	width: 65px;
    height: 45px;
    -webkit-transform:
        translateY(-20px)
        translateX(-30px)
        rotate(37deg);
	transform:
        translateY(-20px)
        translateX(-30px)
        rotate(37deg); 
}
.fbLine2{
	width:100px;
    height:22px;
    margin-left:-137px;
    margin-top:-22px;
}
.twLine1{
	width: 120px;
    height: 5px;
    -webkit-transform:
        translateY(10px)
        translateX(-101px)
        rotate(20deg); 
	transform:
        translateY(10px)
        translateX(-101px)
        rotate(20deg); 
}
.twLine2{
	width:75px;
    height:22px;
    margin-left:-172px;
    margin-top:-28px;
}
.barLine1{
	width: 53px;
    height: 5px;
    -webkit-transform:
        translateY(-9px)
        translateX(-40px)
        rotate(37deg); 
	transform:
        translateY(-9px)
        translateX(-40px)
        rotate(37deg); 
}
.barLine2{
	width:80px;
    height:22px;
    margin-left:-115px;
    margin-top:-42px;
}
.titLine1{
	width: 65px;
    height: 5px;
	margin-top:75px;
	margin-left:50px;
    -webkit-transform:
        translateY(-90px)
        translateX(-10px)
        rotate(-57deg);
	transform:
        translateY(-90px)
        translateX(-10px)
        rotate(-57deg);
}
.titLine2{
	width:95px;
    height:22px;
    margin-left:91px;
    margin-top:-60px;
}
.waveLine1{
	width: 140px;
    height: 5px;
	margin-left:250px;
    margin-top:20px;
    -webkit-transform:
        translateY(-20px)
        translateX(-50px)
        rotate(-17deg);
	transform:
        translateY(-20px)
        translateX(-50px)
        rotate(-17deg);
}
.waveLine2{
	width:105px;
    height:22px;
    margin-left:338px;
    margin-top:-38px;
}
.singLine1{
	width: 250px;
    height: 5px;
	margin-left:140px;
    margin-top:30px;
    -webkit-transform:
        translateY(-20px)
        translateX(-50px)
        rotate(-10deg);
	transform:
        translateY(-20px)
        translateX(-50px)
        rotate(-10deg);
}
.singLine2{
	width:140px;
    height:22px;
    margin-left:339px;
    margin-top:-29px;
}
.dueLine1{
	width: 70px;
    height: 5px;
	margin-left:305px;
    margin-top:7px;
    -webkit-transform:
        translateY(-20px)
        translateX(-50px)
        rotate(-37deg); 
	transform:
        translateY(-20px)
        translateX(-50px)
        rotate(-37deg); 
}
.dueLine2{
	width:78px;
    height:22px;
    margin-left:318px;
    margin-top:-51px;
}
.listLine1{
	width: 70px;
    height: 5px;
	margin-left:305px;
    margin-top:48px;
    -webkit-transform:
        translateY(-20px)
        translateX(-50px)
        rotate(-37deg); 
	transform:
        translateY(-20px)
        translateX(-50px)
        rotate(-37deg); 
}
.listLine2{
	width:100px;
    height:22px;
    margin-left:319px;
    margin-top:-10px;
}
/************ END OF Lines  ************/
.playRec:hover > .playLine1, .playRec:hover > .playLine2, 
.previousRec:hover > .previousLine1, .previousRec:hover > .previousLine2,
.nextRec:hover > .nextLine1, .nextRec:hover > .nextLine2,
.repeatRec:hover > .repeatLine1, .repeatRec:hover > .repeatLine2,
.hitsRec:hover > .hitsLine1, .hitsRec:hover > .hitsLine2,
.dlRec:hover > .dlLine1, .dlRec:hover > .dlLine2,
.fbRec:hover > .fbLine1, .fbRec:hover > .fbLine2,
.twRec:hover > .twLine1, .twRec:hover > .twLine2,
.barRec:hover > .barLine1, .barRec:hover > .barLine2,
.titRec:hover > .titLine1, .titRec:hover > .titLine2,
.waveRec:hover > .waveLine1, .waveRec:hover > .waveLine2,
.singRec:hover > .singLine1, .singRec:hover > .singLine2,
.dueRec:hover > .dueLine1, .dueRec:hover > .dueLine2,
.listRec:hover > .listLine1, .listRec:hover > .listLine2
{
    opacity: 1;
}