@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'skywalk';
    src: url('../font/skywalk-webfont.eot');
    src: url('../font/skywalk-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/skywalk-webfont.woff') format('woff'),
         url('../font/skywalk-webfont.ttf') format('truetype'),
         url('../font/skywalk-webfont.svg#utilityboldcondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
  
    height: 100%;
    width: 100%;
    font-family: skywalk;
    line-height: 40px;
    font-size: 28px;
    line-height: 7vw;
    font-size: 6vw;
    overflow: hidden !important;
}


#background {
    position: fixed;
    min-width:100%;
   
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/background.jpg) no-repeat center center;
    -webkit-background-size: cover; /* Add in these */
    -moz-background-size: cover;    /* four lines to */
    -o-background-size: cover;      /* remove the white space*/
    background-size: cover;         /* around images */
    z-index: -1;
}


#bottom {
  	position: fixed;
  	height: 20%;
  	width: 100%;
  	bottom: 0;
  	right: 20px;
  	background: white;
  	background-size: auto 6%;
    background-repeat: no-repeat;
    z-index: 2000;
    pointer-events: none;

}

#skywalking {
  	position: fixed;
  	height: 100%;
  	width: 100%;
  	top: 82%;
  	left: 3%;
  	background: url(../img/skywalking.jpg);
  	background-size: auto 6%;
    background-repeat: no-repeat;
    z-index: 2001;
    pointer-events: none;

}


#main {
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
    margin-left: 0;
    margin-right: 0;
    overflow: auto;
    overflow-x:hidden;

}


#inner {

    max-width:90%;
    background-color: transparent;
  	margin: 0 auto 0 auto;
    height: 100%;



}

.info {
  	position: relative;
    background-color: transparent;
    width: 100%;
    height: auto;
    margin: 20px auto 100px auto;
    text-align: center;
    white-space: nowrap;
  	
}

#blank {
  	position: relative;
    /*background: rgba(0, 255, 0, 0.2);*/
  	height: 81%;
  	margin: auto;
  	text-align: center;
  	
}

#end {
    position: relative;
    /*  	background: rgba(0, 0, 255, 0.2);*/
    height: 20%;
    margin: auto;
    text-align: center;

}

h1 {
    text-align: center; 

}
h1 span { 
    text-align: center; 
    background-color: white;
    padding: 7px 0 2px 0;
    box-shadow: 20px 20px  18px black;
    white-space: nowrap;
     


}

.rotate {

/* Safari */
-webkit-transform: rotate(-10deg);

/* Firefox */
-moz-transform: rotate(-10deg);

/* IE */
-ms-transform: rotate(-10deg);

/* Opera */
-o-transform: rotate(-10deg);


}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 700px or less */
@media screen and (max-width: 700px) {

  html, body {
    /*line-height: 1.2em;
    font-size: 1em;*/
    line-height: 5vw;
    font-size: 4vw;

  }

  .info{
    white-space: normal;
    margin-bottom: 80px;
     /* line-height: 1.2em;
    font-size: 1em;*/
  }

  #bottom{
    right: 0px;
  }
}