@font-face {
    font-family: Berlin;
    src: url(images/Berlin.TTF);
}
@font-face {
    font-family: Berlin;
    src: url(images/BerlinDemi.TTF);
	font-weight:bold;
}
body{
margin:0;
border:0;
font-size:2em;
font-family:Berlin;
}

h1{
	margin:0 5% 0 5%;
	font-weight:bold;
	text-align:center;
}

h2{
text-align:center;
}

#header{
	background-image:url("images/skytop.jpg");/*high sky image with clouds*/
	text-align:left;
}

#middle{
	background-image:url("images/skymid.jpg");/*flying sky image with distant clouds*/
	text-align:center;
}

#backfoot{
	background-image:url("images/skylow.jpg"); /*horizon type sky with few whispy clouds*/
	vertical-align: bottom;
	  
	
}
#backfootsky{
	background-image:url("images/skymid.jpg"); /*horizon type sky with few whispy clouds*/
	
}

#footer{
	color:black;
	text-align:right;
}
#Vidwrapper{position: relative;padding-bottom: 56.25%; clip-path: inset(2px 2px); }
#Vidframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border:0;background:white;}
#Vidframe{width:100%;height:100%;border:0;}
#Japanmasthead{width:100%; margin-bottom:-5%; margin-left:auto; margin-right:auto;}
#masthead{width:25%;vertical-align:bottom; margin-bottom:-5%;margin-top:5%; margin-left:0; margin-right:auto;z-index:-1;float: left;}
#title{margin-left:auto; margin-right:auto;}
#title .heading{ width:75%;text-shadow: 0px 0px 5px black; font-weight:bold;margin-top:5%;}
#title .dheading{ width:70%;text-shadow: 0px 0px 5px black; font-weight:bold;margin-top:5%;}
#title .jheading{position:absolute; left:15%;top:0%; width:70%;text-shadow: 0px 0px 5px black; font-weight:bold;margin-top:5%}
#doublemasthead{width:30%;vertical-align:bottom; margin-bottom:-5%;margin-top:5%; margin-left:0; margin-right:auto;z-index:-1;float: left;}
#pair{width:30%; margin-top:20px; margin-bottom:-5%; margin-left:auto; margin-right:auto;}
.topbutton{text-align:right;clear:both;display:block;margin-top:-1em;}
.Portrait{width:30%; margin-top:10px; margin-bottom:15px; margin-left:0px ; margin-right:15px ;float:left}
.text{
    padding: 20px;
}
.inner{
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 0px;
    padding-bottom: 0px;
	text-align:justify;
    
}
a{
	text-decoration:none;
	color:#4499ff;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}
a:hover{
	text-decoration:none;
	color:#99ccff;
	text-shadow: 1px 1px 0px #4499ff, -1px -1px 0px #4499ff,-1px 1px 0px #4499ff, 1px -1px 0px #4499ff;
}
.cloud{
	color:white;
	margin-top:50px;
	margin-bottom:50px;
	text-shadow: 0px 0px 10px #8888ff;

	transform-style: preserve-3d;
	transform:translateZ(1em); 
}
.copyright{
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
	text-align:right;


}
.legals{
	clear:both;
	color: black;
	padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px ;
    padding-bottom: 15px ;
	text-align:justify;
}

.signup{
	font-size:0.7em;
	width:50%;
}
.textinput{
	overflow:hidden
	display:table-cell;
	border:2px #99ccff solid;
	border-radius: 4px;
	padding:4px 10px 4px 10px;
	font-family:Berlin;
	font-size:1em;
	width:100%;
	margin:0;
}
 .buttoninput{overflow:hidden
	display:table-cell;
	border:1px solid white;
	background:#4499ff;
	color:white;
	border-radius: 4px;
	padding:4px 10px 4px 10px;
	font-family:Berlin;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
	width: 100px;
	float:right;
	font-size:1em;
	margin:0;
}
.textbox{
	border:2px #99ccff solid;
	border-radius: 4px;
	padding:4px 10px 4px 10px;
	font-family:Berlin;
	width:100%;
	height:30%;
	font-size:1em;
}

.signup .buttoninput:hover{
	border:1px solid #4499ff;
	background:#99ccff;
}

.ctop{width:100%}
.cbase{width:100%}
.flipped{
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
.parallax{
	position: relative;
	overflow:hidden;
	margin:0;
	border:0;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white
}
.fix{
	position: relative;
	overflow:hidden;
	margin:0;
	border:0;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	
}

/* Style the navigation menu */
#topnav {
/*  overflow: hidden;*/
 pointer-events: none;
   position: fixed;
  right: 0;
  top: 0;
  z-index:10;
  display:block;
  text-align:right;
  filter:drop-shadow(0px 0px 5px black);
  width:100%; height:100%;
}
#burger {
	
 pointer-events: auto;
  display:block;
  position: fixed;
  right: 0;
  top: 0;
  font-size: 2em;
  height:1.5em;
  z-index:6;
  background-image:url("images/burgerback2.png");
  background-size:contain;
}
/* Hide the links inside the navigation menu (except for logo/home) */
#topnav #myLinks {
	 position: fixed;
  right:0;
  top:7%;
  z-index:6;
  display: none;
    font-size: 24px;
	
}

/* Style navigation menu links */
.item {
  
 pointer-events: auto;
  z-index:6;
  padding: 0;
  text-decoration: none;
  font-size: 50px;
  display: block; clear:both;
  float:right;
}
.item a {
  z-index:6;
background:white;
  color: black;
margin:0;
height:65px;
display:inline-block; 
padding-right:20px;
}

/* Style the hamburger menu */


/* Add a grey background color on mouse-over */
.item a:hover {
  color: #9cf;
}
.item img{
 height:65px; margin:0;
	vertical-align:top;
}
#icon{
	
	height:100%;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}
#icon:hover{
	filter: invert()  brightness(20%) sepia(100%) saturate(4) invert() drop-shadow(-1px 1px 1px #49f) drop-shadow(1px -1px 1px #49f) drop-shadow(1px 1px 1px #49f) drop-shadow(-1px -1px 1px #49f);
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}
/* Style the active link (or home/logo) */
.active {
  text-shadow: 0px 0px 5px #2244ff;
}

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}