/* Baseline Stuff
============================================ */

body {
  overflow: hidden;
  width: 100%;
  height: 800px;
  margin: 40px 0 auto 0;
  padding: 0;
  background-color: transparent;
/*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */
  background-attachment: fixed;  
  background: linear-gradient(-45deg, #D3534E, #9E696B, #4E7F6A, #1C5D37, #27A17A, #C6A298, #FFFCEC, #F3EAEC, #D0BF9E);
	background-size: 400% 400%;
	-webkit-animation: Gradient 100s ease infinite;
	-moz-animation: Gradient 100s ease infinite;
	animation: Gradient 100s ease infinite;
}

/* Audio
============================================ */
.audio {
  font-size: 20px;
  font-family: courier;
  position: absolute;
  left: 0px;
  right: 0;
  top: 20px;
  margin: -0 auto;
  border-radius: 2px;
  padding: 10px 25px;
  background-color: rgba(255, 255, 255, 0.40);
  color: rgba(0, 0, 0, .9);
  cursor: pointer;
  width: 180px;
  z-index: 100;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, .9);
  opacity: .9;
  box-shadow: 0px 1px 0px;
  transition: .2s;
}

.audio:hover {
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background-color: rgba(255, 255, 255, .8);
  color: rgba(0,0,0,.9);
  transition: .2s;
}

.audio:active {
  margin-top: 1px;
  box-shadow: 0px 0px 0px;
  transition: .2s;
  
}

.audio .sound-on {
  display:none;
}

.show {display:inline-block !important;}
.hide {display: none !important;}


/* Video
============================================ */

video {
  position: relative;
  right: 0;
  top:0;
}

.video-wrapper {
  margin: 50px;
  text-align: center;
  position: absolute;
  top: 50px;
  height: auto;
}

.embed-container {
  padding-bottom: 41.66666667%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 90%;
border-radius: 5px;
max-width: 1500px;
padding: 0;
height: 100%;
-webkit-animation: fadein 20s;
-moz-animation: fadein 20s;
-ms-animation: fadein 20s;
-o-animation: fadein 20s;
animation: fadein 20s;
}

.player .vp-player-layout {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
}

/* Animations & 
============================================ */

/* ----- Fade In ----- */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ----- Background Gradient ----- */
@-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%
	}
}