<style type="text/css">
   html, body {
      overflow: hidden;
   }
   html {
	   height: 100%;
	   width: 100%;
	   color: black;
	   font-family: Helvetica;
	   text-transform: uppercase;
   }
   a {
      margin-bottom: 2px;
      color: #000000;
      text-decoration: none;
   }
   a:link, a:visited, a:hover, a:active {
      color: #000000;
   }
   a:hover, a:active {
      color: white;
   }
   a.profile-link {
      float: right;
      clear: right;
   }
	body {
		margin:0;
		padding:0;
		width: 100%;
		height: 100%;
		background-color: black;
	}
	.hello {
		font-size:13px; 
		text-align: center;
		width: 500px;
		left: 100%;
		top: 100%;
		margin-top:-135px;
		position: fixed;
		margin-left: -33px;
      opacity: .85;
	}
	#profile-pic {
	   background-image: url(/apple-icon-180x180.png);
	   width: 90px;
	   height: 90px;
	   background-size: contain;
	   border-radius: 100px;
	   position: absolute;
	   top: 5px;
	   left: 5px;
	   border-style: solid;
      border-color: #ff1d8e;
      border-width: 5px;
   }
   .play-icon {
       display: none;
       width: 200px;
       height: 200px;
       position: absolute;
       left: 50%;
       top: 50%;
       margin-left: -100px;
       margin-top: -100px;
       background-color: transparent;
       border: 5px solid white;
       border-radius: 120px;
       opacity: .5;
   }
   body.paused .play-icon {
      display: block;
   }
   .play-icon div {
      border-top: 50px solid transparent;
      border-left: 110px solid white;
      border-bottom: 50px solid transparent;
      margin-left: 53px;
      margin-top: 50px;
   }
   #profile-pic:hover, #profile-pic:active {
      border-color: white;
   }
	.hello, .rotated, #hidden-content, #shown-content {
	   -webkit-transition: all .3s ease-out;
      -moz-transition: all .3s ease-out;
      -o-transition: all .3s ease-out;
      transition: all .3s ease-out;
   }
   #note-content {
      padding-top: 15px;
   }
   #shown-content {
      display: block;
      opacity: 0;
   }
   .hello:not(.hidden) .contact {
      display: inline;
   }
   body.paused .hello, body.active .hello, .hello:hover, .hello:focus {
      margin-left: -265px;
      opacity: 1;
   }
   body.paused #hidden-content, body.active #hidden-content, .hello:hover #hidden-content, .hello:focus #hidden-content {
      opacity: 0;
   }
   body.paused #shown-content, body.active #shown-content, .hello:hover #shown-content, .hello:focus #shown-content {
      opacity: 1;
   }
   body.paused .icon, body.active .icon, .hello:hover .icon, .hello:focus .icon {
      opacity: 1;
   }
 
   .hello.hidden .rotated {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
   }
	.rotated {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      -webkit-transform: rotate(3deg);
      -moz-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      -o-transform: rotate(3deg);
      transform: rotate(3deg);
   }
   .lifted {
      -moz-border-radius: 4px;
      border-radius: 4px;
   }
   .drop-shadow {
      width:270px;
      height:108px;
      position: relative;
      float: left;
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   #shown-content {
      padding: 0 20px;
   }
   #hidden-content {
      position: absolute;
      left: -27px;
      top: 45px;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      font-size: 16px;
      text-transform: uppercase;
   }
   /* drop shadow */
   .lifted::before, .lifted::after {
      bottom: 15px;
      left: 10px;
      width: 50%;
      height: 20%;
      max-width: 300px;
      -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      -webkit-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      transform: rotate(-3deg);
   }
   .drop-shadow::before, .drop-shadow::after {
      content: "";
      position: absolute;
      z-index: -2;
   }
   .lifted::after {
      right: 10px;
      left: auto;
      -webkit-transform: rotate(3deg);
      -moz-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      -o-transform: rotate(3deg);
      transform: rotate(3deg);
   } 
   .drop-shadow p {
      font-size: 12px;
   }
   .rotated > :first-child::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #ff1d8e;
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   }
  #big-video-wrap {
 		display: none;
  }
  .icon {
     position: absolute;
      width: 24px;
      height: 24px;
      cursor: pointer;
      opacity: .3;
      filter: brightness(1000%);
     -webkit-filter: brightness(1000%);
     -moz-filter: brightness(1000%);
     -o-filter: brightness(1000%);
     -ms-filter: brightness(1000%);
     -webkit-filter: brightness(1000%);
  }
  .fullscreen {
      background-image: url(/newvidsite/fullscreen.png);
      bottom: 15px;
      left: 15px;
  }
  .next {
      background-image: url(/newvidsite/next.png);
      bottom: 15px;
      left: 60px;
      filter: brightness(1000%) invert(100%);
     -webkit-filter: brightness(1000%) invert(100%);
     -moz-filter: brightness(1000%) invert(100%);
     -o-filter: brightness(1000%) invert(100%);
     -ms-filter: brightness(1000%) invert(100%);
    }
  .icon:hover {
     opacity: 1;
  }
  
</style>