html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  user-select: none;
  -moz-user-select: none;
  cursor:none;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* particleground demo */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
$player_bg: #3a4e47;
$player_width: 380px;
$player_radius: 6px;
$player_top_height: 70px;
$player_bottom_height: 190px;
$player_cube_height: 380px;
$player_height: $player_top_height + $player_bottom_height + $player_cube_height;
$global_perspective: 800px;
$transition_time: 300ms 200ms;
$tilt_angle: 30deg;

$face_bg: pink;


// Styles

.shadow_right {
	width: 90px;
	height: 380px;
	transition: all $transition_time;
	top: 0px;
	position: absolute;
	pointer-events: none;
	box-shadow: 0px 0px 0px #303f45 inset;
}

i {
	transition: all .3s;
	cursor: none;
}

i:hover {
	color: #44f5b7
}

.shadow_left {
	width: 90px;
	height: 380px;
	transition: all $transition_time;
	top: 0px;
	position: absolute;
	right:0;
	pointer-events: none;
	box-shadow: 0px 0px 0px #303f45 inset;
}
.r_trim {
	width: 260px;
	height: 660px;
	position: absolute;
	left: 380px;z-index:2;
	right: 0;
	top: -82px;
	margin: auto;
	background: #4cb892;
}
.l_trim {
	width: 260px;
	height: 660px;
	position: absolute;z-index:2;
	left: -640px;
	right: 0;
	top: -33px;
	margin: auto;
	background: #4cb892;
}
body {
	font-family: 'Open Sans', sans-serif;
	background: #4cb892;
}
%center {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: auto;
}

%face {
	width: $player_width;
	height: $player_width;
	background: $face_bg;
	position: absolute;
	transform-style: preserve-3D;
}

@mixin traverse($n, $x, $y, $ox, $oy, $oz, $l, $r, $to, $b, $w, $h) {

	$t : '';


	& .trigger--#{$n} {
		@extend %trigger;

		left: $l;
		right: $r;
		top: $to;
		bottom: $b;
		width: $w;
		height: $h;

		@for $i from 1 through ($n) {
			$t: $t + 'input +';
		}

		&:checked {
			& + #{$t} .cube {
				transform: translateY(-50%) rotateX($x) rotateY($y);	
				transform-origin: $ox $oy $oz;
				transition: transform $transition_time, transform-origin 0s ;
			}
		}
	}
}

body {

  .wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
   }
  .main {
    flex: 1;
  }
  .footer {
   flex: 0;
  }
	& .player {
		&_inner {
			@extend %center;

			background: $player_bg;
			width: $player_width;
			height: $player_height;
			border-radius: $player_radius;
			perspective: $global_perspective;
			//box-shadow: 0px 0px 12px #255645;
			&__top {
				height: $player_top_height;
				padding: 24px;
				background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/koan.png');
				background-size: 103% !important;
				margin-bottom: 0px;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;

				i,
				h1 {
					position: relative;
					//top: 4px;
					color: white;
					font-weight: 600;
				}

				& .t_left {
					width: 25%;
					float: left;
				}

				& .t_mid {
					float: left;
					text-align: center;
					width: 50%;

					h1 {
						margin: 0;
						font-size: 12px;
					}
				}

				& .t_right {
					float: right;
					width: 25%;
					text-align: right;
				}
			}

			&__middle {
				position: relative;
				height: 380px;
				background: #40555f;
				box-shadow: 0px 0px 110px #181f23 inset;

				.empty {
					display: none;
				}

				input {
					-webkit-appearance: none;
					-moz-appearance: none;
					background: transparent !important;
					outline: none;
					transition: all .3s;


					width: 60px !important;
					height: 50px !important;
					line-height: 16px;



					&:hover {
						background: #00000061 !important;
						&:after {
							color:#44f5b7 !important;
						}
					}
					&:not(:checked) {
						//transition: all .3s .3s;
					}
					&:nth-of-type(1){
						width: 130px !important;
						top: 40px;
						height: 320px !important;

						&:hover {
							background: none !important;
						}
						&::after {
							font-family: 'Open Sans', sans-serif, 'fontawesome';
							content: '\f001   Now Playing';
							display: block;
							left: 0 !important;
							color: white;
							font-size: 13px;
							cursor: none;
						}
					}
					&:nth-of-type(2){
						display: none;
						&::after {
							font-family: 'fontawesome';
							content: '\f001';
							display: block;
							color: white;
							font-size: 18px;
							cursor: none;
						}

					}
					&:nth-of-type(3){
						BORDER-TOP-LEFT-RADIUS:50PX;
						border-bottom-left-radius:50px;

						&::after {
							font-family: 'fontawesome';
							content: '\f028';
							display: block;
							color: white;
							font-size: 18px;
							cursor: none;
						}

						&:checked  {
							opacity: 0;
							right:-50px;box-shadow: 0px 0px 0px 100px #00000061;
							pointer-events: none;
							& + input {
								//opacity: 0;
								//left:-50px;
								//pointer-events: none;
								& + input + div > .cube_inner > .cube_inner__right i {
									opacity: 1;
									top: 8px;
									transition: all .3s .3s;
								}
								& + input + div + div + div + div {
									display: block;
									box-shadow: 60px 10px 50px -17px #303f45 inset
								}
								& + input + div + div + div + div + div{
									display: block;
									box-shadow: -60px 10px 50px -17px #303f45 inset
								}
							}
						}
					}
					&:nth-of-type(4){
						BORDER-TOP-right-RADIUS:50PX;
						border-bottom-right-radius:50px;
						&::after {
							font-family: 'fontawesome';
							content: '\f1de';
							display: block;
							color: white;
							font-size: 18px;
							cursor: none;left: 4px;
						}
						&:checked  {
							opacity: 0;
							left:-50px;
							pointer-events: none;
							box-shadow: 0px 0px 0px 100px #00000061;


							& + input + div + div + div + div {
								display: block;
								box-shadow: 60px 10px 50px -17px #303f45 inset
							}
							& + input + div + div + div + div + div{
								display: block;
								box-shadow: -60px 10px 50px -17px #303f45 inset
							}
						}
					}

				}

				%trigger {
					background: black;
					width: 20px;
					//opacity: 0;
					cursor: none;
					height: 400px;
					position: absolute;
					z-index: 2;
					margin: auto;
					text-align: center;

					&::after {
						position: relative;
						top: 18px;
						left: -6px;
						transition: all .3s;
					}
				}

				@include traverse(1, 0, $tilt_angle, 200px, 0px, -200px, 0px, auto, 0, 0, 20px, 40px);
				@include traverse(2, 0, -$tilt_angle, 200px, 0px, -200px, auto, 0px, 0, 0, 20px, 40px);
				@include traverse(3, -0, 0, 200px, 200px, -200px, 0, 0, 0px, auto, 40px, 20px);
				@include traverse(4, -0, 0, 200px, 200px, -200px, 0, 0, 0px, auto, 40px, 20px);

				& .cube {
					@extend %center;

					top: 190px;
					height: $player_cube_height;
					transform-style: preserve-3D;
					perspective-origin: ($player_cube_height / 2) ($player_cube_height / 2);
					transition: all $transition_time cubic-bezier(0.1, 1.94, 0.32, 1.02), transform-origin 0ms;


					&_inner {
						height: $player_cube_height;
						transform-style: preserve-3D;

						& > div {
							@extend %face;

							@for $i from 1 through 4 {
								&:nth-of-type(#{$i}) {
									background: darken($face_bg, 2 * $i);
								}
							}
						}

						&__front {
							background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/koan.png') !important;
							background-size: 103% !important;
							background-position-y: -71px !important;
							.bars {
								position: absolute;
								left:0;
								bottom: 0;
								transform: rotatez(180deg);
								width: 100%;
								z-index: 1;


								&_bar {
									width: 10px;
									//height: 100px;
									background: white;
									opacity: 0.1;
									float: left;
									width: 10%;


									//	opacity: 1;
									@for $i from 1 through 100 {
										&:nth-of-type(#{$i}) {
											animation: eq 1s $i * random(40) + 0ms infinite ease-in-out;
										}
									}
								}
							}
							& .details {
								position: absolute;
								z-index: 10;
								width: 100%;
								top:50%;
								transform: translateY(-50%);

								color: white;
								text-align: center;

								&_album {
									width: 90px;
									height: 90px;
									background-size: cover !important;
									background: white;
									border-radius: 4px;
									margin: 0 auto;
									background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/koanalbum.png');
									margin-bottom: 20px;
								}

								h2 {
									font-size: 12px;
									font-weight: 600;
									margin:0;
								}

								h3 {
									font-size: 10px;
									margin:0;
									opacity: 0.6;
									font-weight: 400;
								}
							}
						}

						&__top {
							transform: rotateX(-90deg);
							transform-origin: 0 0;
							background: yellow !important;


						}

						&__bottom {
							transform: rotateX(90deg);
							background: purple !important;
							transform-origin: 0 ($player_cube_height);
						}

						&__left {
							background: #354752 !important;
							transform: rotateY(90deg);
							transform-origin: 0 0;

							.options {
								left: 150px;
								top: 60px;
								position: absolute;
								transform: rotatey(254deg) translatez(57px);

								i {    color: white;
									font-size: 24px;
									display: block;
									margin-bottom: 53px;
									transition: all .3s;
									cursor: none;

									&:hover {
										color: #44f5b7
									}
								}
							}
						}

						&__right {
							background: #354752 !important;
							transform: rotateY(-90deg);
							transform-origin: ($player_cube_height) 0;
							.volume {
								left: 210px;
								top: 60px;
								position: absolute;
								&_pip {
									width: 40px;
									height: 6px;

									margin-bottom: 10px;
									background: #ffffff2e;

									&:nth-of-type(14),
									&:nth-of-type(13),
									&:nth-of-type(12),
									&:nth-of-type(11){
										background: #44f5b7;
									}

									&:nth-of-type(10),
									&:nth-of-type(9),
									&:nth-of-type(8),
									&:nth-of-type(7){
										background: #f5c844;
									}

									&:nth-of-type(6),
									&:nth-of-type(5){
										background: #f54444;
									}
								}
								i {
									transform: rotatez(180deg) rotatey(89deg);
									color: white;
									font-size: 20px;
									position: relative;
									left: 10px;
									top: 24px;
									opacity: 0;
									transition: all .3s;
								}
							}
						}
					}
				}
			}

			&__bottom {
				height: $player_bottom_height;
				padding: 30px;
				& .controls {
					clear: left;
					margin-top: 26px;
					&_left {
						float: left;
						width: 30%;
						text-align: right;
						font-size: 20px;
						color: white;    
						position: relative;
						top: 20px;
					}
					&_middle {
						float: left;
						width: 40%;
						font-size: 50px;
						color: white;
						text-align: center;
					}
					&_right {
						float: right;    
						position: relative;
						top: 20px;
						width: 30%;
						font-size: 20px;
						color: white;
						text-align: left;
					}
				}

				& .options {
					text-align: center;
					color: white;font-size: 12px;
					margin-bottom: 20px;
					i {
						padding: 5px;
						&:nth-of-type(1){
							color:#44f5b7;
						}
						&:nth-of-type(2){
							opacity: 0.4
						}
					}
				}
				& .playbar {
					width: 100%;
					background: #2c3e38;
					height: 4px;
					position: relative;
					border-radius: 10px;

					&_inner {
						position: absolute;
						width: 40%;
						height: 100%;
						border-radius: 10px;
						background:#44f5b7;
					}

					&_left {
						float: left;
						position: relative;
						top: 8px;
					}

					&_right {
						position: relative;
						top: 8px;
						float: right;
					}

					span {
						color: white;
						font-size: 10px;
					}

				}
			}
		}
	}
}

@keyframes eq {
	0% {height: 30px}
	50% {height: 100px;}
	100% {height: 30px;}
}

body {
  
  width: 100wh;
	height: 90vh;
	color: #fff;
	background: linear-gradient(-45deg, #42bcf4,#00aefc,#00ffe9,#0026ff,#d105ff);
	background-size: 400% 400%;
	-webkit-animation: Gradient 9s ease infinite;
	-moz-animation: Gradient 9s ease infinite;
	animation: Gradient 9s ease infinite;

  font-family: 'Montserrat', sans-serif;
  color: #fff;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

p {
  color: white;
  font: 300 4em/150% Montserrat;
  text-align: center;}


/* loading dots */

.loading:after {
  content: '.';
  animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 rgb(255, 255, 255),
      .5em 0 0 white;}}

#particles {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#intro {
  position: absolute;
  left: 0;
  top: 50%;
  padding: 0 20px;
  width: 100%;
  text-align: center;
}
h1 {
  text-transform: uppercase;
  font-size: 85px;
  font-weight: 700;
  letter-spacing: 0.015em;
}
h1::after {
  content: '';
  width: 80px;
  display: block;
  background: #fff;
  height: 10px;
  margin: 30px auto;
  line-height: 1.1;
}
p {
  margin: 0 0 30px 0;
  font-size: 24px;
}
.btn {
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid rgb(0, 0, 0);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: rgb(0, 183, 255);
  text-decoration: none;
  -webkit-transition: all 0.4s;
     -moz-transition: all 0.4s;
       -o-transition: all 0.4s;
          transition: all 0.4s;
}
.btn:hover {
  color: #1a638d;
  border-color: rgb(0, 0, 0));
}

@media only screen and (max-width: 1000px) {
  h1 {
    font-size: 70px;
  }
}

@media only screen and (max-width: 800px) {
  h1 {
    font-size: 48px;
  }
  h1::after {
    height: 8px;
  }
}

@media only screen and (max-width: 568px) {
  #intro {
    padding: 0 10px;
  }
  h1 {
    font-size: 30px;
  }
  h1::after {
    height: 6px;
  }
  p {
    font-size: 18px;
  }
  .btn {
    font-size: 16px;
  }
}

@media only screen and (max-width: 320px) {
  h1 {
    font-size: 28px;
  }
  h1::after {
    height: 4px;
  }
}