@charset "UTF-8";
/*\*/

/*------------------------------
STORM OF VOID
July 5, 2017
Hostess K.K.
------------------------------*/


@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:600,700');

@font-face {
  font-family: 'Awesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#Awesome') format('svg');
  font-weight: normal;
  font-style: normal;
}


html, body {
	height: 100%;
	width: 100%;
	max-height: none;
	max-width: none;
	overflow: hidden;/*Prevent scrollbars in IE8*/
	margin: 0;
	-webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	color:#fff;
	background: #000;
}
:focus { 
	outline: none;
	opacity:0.8;
 }
body {
	margin: 0;
	padding:0;
	font-family: 'Cormorant Garamond', serif;
}
a {
	color:#fff;
	text-decoration:none;
}
a:hover {
	color:#494345;
}
#container {
    background: #121012 no-repeat url(../img/album-background1.jpg);
    background-position: center center;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/album-background1.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/album-background1.jpg', sizingMethod='scale')";
    position: absolute !Important;
    width: 100%;
    top: 0;
    bottom: 0;
	font-size:18px;
    text-align: center;
}
header {
    position: relative;
	height: 30%;
}
header h1 {
  position: absolute;
  bottom: 20%;
  width: 90%;
  margin: 0 5%;
}
header h1 img {
	display: block;
	max-width: 100%;
	width /***/: auto;
	_width: 100%;
	height: auto;
	margin: 0 auto;
	-ms-interpolation-mode: bicubic;
}
#watch {
    position: relative;
	height: 10%;
}
#watch .watchtext, #watch a {
    display: inline-table;
    margin: auto;
	cursor:pointer;
}
#watch .watchtext:hover, #watch a:hover {
	opacity:0.3;
	color:#eceed8;
}
#watch .watchtext:before {
    content: '\f04b';
    font-family: 'Awesome';
    float: left;
    padding-right: 10px;
    display: block;
}
footer {
    position: relative;
	height: 40%;
}
#touchvideo {
	display:none;
}
#playpause {
    display: none;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 30px;
    text-align: center;
	font-family:'Awesome';
	font-size:24px;
}
.controlswrapper {
	display:table;
	margin:auto;
}
.controlswrapper div {
	float:left;
	overflow:hidden;
	cursor:pointer;
	line-height: 40px;
}
.controlswrapper div:hover {
	color:#494345;
}
.controlswrapper span {
	position:absolute;
	margin:-5000px;
}
.controlswrapper .pause:before {
	content: '\f04c';
    padding-right: 30px;
    display: block;
}
.controlswrapper .mute:before {
	content:'\f026';
}
.controlswrapper .unmute:before {
	content:'\f027';
}
.unmute {
	display:none;
}
#watch a {
    margin-left: 30px;
}
#watch a:before {
    content:'\f145';
    font-family: 'Awesome';
    float: left;
    padding-right: 30px;
    display: block;
}

@media screen and (min-width:0px) and (max-width:736px){
	#container {
		overflow-y:scroll;
	}
	header,
	footer,
	#watch {
		height: auto;
	}
	header h1 {
	  position: relative;
	  bottom: inherit;
	  padding: 20px 0 20px;
	}
	#watch a {
		margin: auto;
		display: table;
	}
	#watch .watchtext:before, #watch a:before {
		background-position:left 12px bottom;
	}
	footer {
	    position: relative;
	  	padding: 20px 0 20px;
	}
}