* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height:100%;
  background:#121212;
}

#filmintro{
	background:url("../images/phonebg1.jpg");
	background-repeat:no-repeat;
    background-size:cover;
	 background-position: center bottom;
	}

@media (orientation: landscape) {
  #filmintro{	background:url("../images/phonebg2.jpg");
	background-repeat:no-repeat;
    background-size:cover;}
  }

#menuopen{width:40px;position:absolute;top:10px;right:10px}

#menuclose{width:25px;position:absolute;top:15px;right:15px}

#menu{
position:fixed;
text-align:center;
margin:auto;
padding-top:20%;
width:100%;
height:100%;
  background-color: rgba(0,0,0,0.9);
 font-size:20px;
 letter-spacing:4px;
 list-style-type:none;
 display:none;
}

#menu li {
    font-family: Aquire;
	display: block;
	margin-bottom:40px;
	margin-left:-30px; padding-left: 0;
}

#menu a{
	color:#fff;
	text-decoration:none;
	text-shadow: 1px 1px #000;
	}
	
#menu a:hover{
	color:#ccc;
	}
	
#social,#creditsbg,#infobg,#fofbg,#filmbg,.videowrapper{display:none}
	

@font-face {
  font-family: Aquire;
  src: url(../Aquire.otf);
}

@font-face {
  font-family: Bahnschrift;
  src: url(../BAHNSCHRIFT.TTF);
}


.desc{
  text-align:center;
	margin: 0 auto;
  position: absolute;
  top: 50%;
  width:100%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding:30px;
  background-color: rgba(0,0,0,0.8);
  color:#ccc;
}

@media (orientation: landscape) {
  .desc {
   width:100%;height:100%;  background-color: rgba(0,0,0,0.5);padding-top:40px;
  }
  
  #menu{margin-top:5px;font-size:15px;padding-top:50px;}
  #menu li{margin-bottom:20px}

}

.mobileplay{width:50px}

h1{
  font-family: Aquire;
  font-size:100%;
  margin: 0 0 20px 0;
  text-shadow: 2px 2px #000;
  letter-spacing:4px;
  color:#ccc
}

.desc p{
	font-family:Bahnschrift;
	font-size:20px;
	text-shadow: 2px 2px #000;
	margin-bottom:3px;
	line-height: 18pt;
	color:#ccc;
	letter-spacing:-1px;
}

.play{
  background-color:#202020;
	font-family:Aquire;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 10px;
  cursor: pointer;
}

.content{
  margin:auto;
  padding:10px;
  width:100%
  color:#ccc
}

.content p,td{
	font-family:Bahnschrift;
	font-size:20px;
	text-shadow: 2px 2px #000;
	margin-bottom:5px;
	color:#ccc;
}

table{width:100%}
table td{padding:10px;font-size:14px}
table .l{text-align:right;width:50%}
table .r{text-align:left;wdith:50%}

.content h1{
	font-size:30px;
	margin-top:20px;
	}
	
.content a{
	color:#fff;
	text-decoration:none;
}

.content a:hover{
	color:gray;
	}
	
.poster{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
   padding:5%;
}

.tree{width:100%;padding:10px}

#eko{
	width:100%;
	height:100%;
	position:fixed
}

#social2{text-align:center;margin-top:20px}

#social2 img{margin:10px;width:16px;height:16px;}

#social2 img:hover{opacity: 0.3;}