@font-face {
	font-family: 'Conv_Myriad-Pro-Semibold-Condensed';
	src: url('fonts/Myriad-Pro-Semibold-Condensed.eot');
	src: local('☺'), url('fonts/Myriad-Pro-Semibold-Condensed.woff') format('woff'), url('fonts/Myriad-Pro-Semibold-Condensed.ttf') format('truetype'), url('fonts/Myriad-Pro-Semibold-Condensed.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  /* for touch screen */
  touch-action: none; 
  font-family: Conv_Myriad-Pro-Semibold-Condensed, Arial;
}

body {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  background: #fff;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.container {
	max-width: 1200px;
	width: 100%;
	margin: 10px auto;
}
header {
	margin: 0 0 50px 0;
	display: flex;
	padding:0 2%;
}
.leds {
	margin: 0 0 80px 0;
}
.leds img {
	width: 100%;
}
.w-40 {
	width: 40%;
}
.w-60 {
	width: 60%;
}
.w-50 {
	width: 50%;
}
.flex {
	display: flex;
	flex: 1;
}
.px-1 {
	padding-right: 5px;
	padding-left: 5px;
}
.pl-0 {
	padding-left: 0 !important;
}
.pr-0 {
	padding-right: 0 !important;
}
#logo {
	max-width: 295px;
}
#lead {
	max-width: 520px;
}
img.responsive {
	width: 100%;
	height: auto;
}
.lead {
	color: #676766;
	font-size: 60px;
	font-weight: bold;
	text-align: right;
	flex-direction: column;
	flex-shrink: 1;
	letter-spacing: .2rem;
	line-height: 55px;
}
.lead span {
	font-size: 56px;
}
.pink {
	color: #da66ad;
}
.blue {
	color: #66c4eb;
}
.darkblue {
	color: #222d80;
}
footer {
	max-width: 1200px;
	width: 100%;
	margin: auto;
	color: #4e4e4d;
	text-align: right;
	padding: 20px 10%;
}
a {color: #4e4e4d; text-decoration: none;}

#drag-container, #spin-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(-15deg);
          transform: rotateX(-15deg);
}

#drag-container img, #drag-container video {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 103px;
  height: auto;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  padding: 0 2px;
  background-color: #000;
  /* -webkit-box-shadow: 0 0 8px #fff; */
  /* box-shadow: 0 0 8px #fff; */
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}
#drag-container img:before {
	content:"→";
	width: 146px;
	height: 10px;
	position: absolute;
	top: -10p;
	left: -73px;
	background-color: red;
}
#drag-container img:hover, #drag-container video:hover {
  /* -webkit-box-shadow: 0 0 15px #fffd; */
  /* box-shadow: 0 0 15px #fffd; */
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}

#drag-container p {
  font-family: Serif;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);
          transform: translate(-50%,-50%) rotateX(90deg);
  color: #fff;
}

#ground {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) rotateX(90deg);
          transform: translate(-50%,-50%) rotateX(90deg);
  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
}

#music-container {
	display: none;
  position: absolute;
  top: 0;
  left: 0;
}

@-webkit-keyframes spin {
  from{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  } to{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes spin {
  from{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  } to{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes spinRevert {
  from{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  } to{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes spinRevert {
  from{
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  } to{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}

@media screen and (max-width: 708px) {
	.lead, .lead span {
		font-size: 7vw;
		line-height: 7vh;
	}
	header {
		padding: 0;
	}
	header div {
		display: block;
		text-align: center;
	}
}
@media screen and (max-width: 545px) {
	.lead, .lead span {
		font-size: 7vw;
		line-height: 7vh;
	}
	.w-40, .w-60, .w-50 {
		width: 100%;
	}
	header {
		display: block;
		padding: 0;
		margin: 5px 0;
	}
	.flex {
		display: block;
	}
	img.responsive {
		//max-width: 150px;
		width: 100%;
	}
}