body, html{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background-color: white;
    overflow: hidden;
}

#loading {
    opacity:1;
    -webkit-transition:opacity 0.2s ease-out;
    transition:opacity 0.6s ease-out;
    margin:0 auto;
}

#loading img {
   width:10%;
   height:10%;

}

#container {
    width:100%;
    height: 100%;
}

/*----------landing page---------------------------------------------------------------------------*/
#wrapper {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow: hidden;
    min-width:1000px;
    mim-height:768px;
}

#videoContainer {
    position:absolute;
    left:0;
    top:0;
    width:1280px;
    height:720px;
    z-index:1;
}

#videoContainer #startVideo {
  position:absolute;
  left: 45vw;
  top: 35vh;
  cursor: pointer;
}

video {
    width:100%;i
    height:100%;
}

#nav {
    position:absolute;
    left:3vw;
    top:3vw;
    z-index:99;
}


#timeline {
    position: absolute;
    float: left;
    width: 60vw;
    left: 60vw;
    font-family: monospace;
    z-index: 98;
    font-size: 0.5625vw;
    margin: 0 auto;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    bottom: 10%;
}

#timeline #toggle {
    position: relative;
    float:left;
    cursor: pointer;
    color:black;
}

#timeline #toggle:hover {
    color:white;
}

#timeline #skip {
    position: relative;
    float:left;
    cursor: pointer;
    color:black;
}

#timeline #skip:hover {
    color:white;
}

#timeline .dot {
    position: relative;
    float:left;
}

#columnsGroup {
    position:absolute;
    top:0px;
    left:0px;
    width:100vw;
    height:40vw;
    padding: 8vw 28vw;
    font-family: monospace;
    font-size: 0.675vw;
    line-height: 1.8em;
    opacity:0;
    z-index:90;
    column-width: 10em;
    -moz-column-width: 15em;
    -webkit-column-width: 15em;
    column-gap: 5em;
    -moz-column-gap: 5em;
    -webkit-column-gap: 5em;
    /*max-height: 75vw;*/
}

#columnsGroup div.columnItem {
  clear: both;
  -moz-transition: opacity 2s;
  -webkit-transition: opacity 2s;
  /*transition: opacity 2s;*/
}

#columnsGroup div.name {
  cursor: pointer;
}

#searchName {
  border: 0;
  float: left;
  /*border-bottom: 1px solid black;*/
  background: transparent;
  outline: none;
  font-family: monospace;
  font-size: 0.9vw;
  line-height: 1.8em;
  font-weight: bolder;
  width: 5.5em;
  margin-top: -0.2vw;
}

#projectsVisual {
    position: absolute;
    left: 3vw;
    top: 20vw;
    width: 17vw;
    text-align: center;
    line-height: 1.125vw;
}

#projectsVisual .nameChar{
  display: block;
  float: left;
  width: 0.5625vw;
  height: 1.125vw;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 94.5vw 0.9vw;
  margin-left: -0.05625vw;
}


#logo {
  margin-left: 0.3vw;
  display: block;
  cursor: pointer;
  width: 3vw;
  background: url('../images/logo.png') no-repeat;
  background-size: 3vw 3vw;
}

#logo img{
  width: 3vw;
}

#logo:hover {
  background: url('../images/logo_red.png') no-repeat;
  background-size: 3vw 3vw;
}

#logo img{opacity: 0;}

#caption {
  position: absolute;
  top: 47vw;
  left: 30.5vw;
  width: 39vw;
  z-index: 999;
}

#share {
  float: right;
}

.red {
  color: #FF0000 !important;
}

#portraitAnimation{
  position: absolute;
  width: 100%;
  height: 100%;
  /*opacity: 0;*/
  /*display:hidden;*/
}

#portraitClose {
  cursor: pointer;
  position: absolute;
  /*float: right;*/
  top: 7vw;
  left: 65.7vw;
  z-index: 999;
}

#portraitClose:hover span.nameChar {
  background-image: url("../font/font-red.png");
}

#portraitsLink {
  cursor: pointer;
  margin-left: 0.3vw;
}

#portraitsLink span.char_plus{
  margin-right: 0.3vw;
}

#portraitsLink:hover span.nameChar {
  background-image: url("../font/font-red.png");
}

#aboutLink {
  display: block;
  cursor: pointer;
  margin-top: 0.2vw;
}

#aboutLink span.char_plus{
  margin-right: 0.3vw;
}

#aboutLink:hover span.nameChar {
  background-image: url("../font/font-red.png");
}

#about {
  position: absolute;
  left: 30vw;
  top: 7.5vw;
  width: 50vw;
  height: 40vw;
  overflow: hidden;
}

#aboutCaption {
  float: left;
}

#aboutClose {
  cursor: pointer;
  float: right;
}

#aboutBox {
  clear: both;
  width: 100%;
}

#aboutContent {
  clear: both;
  padding: 0 1vw;
  height: 34.5vw;
  width: 46.5vw;
  overflow-y: scroll;
  /*overflow: hidden;*/
}

#aboutContent::-webkit-scrollbar{
  width: 1vw;
}

#aboutContent::-webkit-scrollbar-track{
  /*background-image: url("../font/num.png");*/
  background-color: transparent;
  background-repeat: repeat-y;
}

#aboutContent::-webkit-scrollbar-thumb{
  background-image: url("../font/plus.png");
  background-color: transparent;
  background-repeat: repeat-y;
  background-position: 0.5vw 0;
  height: 5vw;
}

#aboutLeftWall {
  position: absolute;
  top: 2vw;
  left: 0vw;
  width: 0.8vw;
  height: 37vw;
  background-image: url("../font/excl.png");
  background-color: transparent;
  background-repeat: repeat-y;
}

#aboutRightWall {
  position: absolute;
  top: 2vw;
  right: 0vw;
  width: 0.8vw;
  height: 33vw;
  background-image: url("../font/excl.png");
  background-color: transparent;
  background-repeat: repeat-y;
  /*background-size: 94.5vw 0.9vw;*/
  /*background-position:1.125vw 0;*/
}

#aboutBottomWall {
  position: absolute;
  bottom: 0vw;
  left: 0vw;
  width: 100%;
}

#aboutCorner {
  position: absolute;
  bottom: 0vw;
  right: 0vw;
  width: 2.5vw;
}
/*
#aboutScroll {
  position: absolute;
  top: 2vw;
  right: 1vw;
  height: 32vw;
  width: 0.8vw;
  background-image: url("../font/num.png");
  background-color: transparent;
  background-repeat: repeat-y;
}*/

#nav span.nameChar {
  width: 0.5625vw;
  height: 0.9vw;
  background-size: 94.5vw 0.7vw;
  margin-left: -0.05625vw;
}

span.animation {position: absolute;}
span.nameChar span{opacity: 0; line-height: 1.8em}
span.nameChar {
  display: block;
  float: left;
  width: 0.5625vw;
  height: 1.125vw;
  background-image: url("../font/font.png");
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 94.5vw 0.9vw;
  background-position:1.125vw 0;
  margin-left: -0.05625vw;
  /*border: 1px solid red;*/
}
span.nameChar.char_0 {background-position:-0vw 0;}
span.nameChar.char_1 {background-position:-1.125vw 0;}
span.nameChar.char_2 {background-position:-2.25vw 0;}
span.nameChar.char_3 {background-position:-3.375vw 0;}
span.nameChar.char_4 {background-position:-4.5vw 0;}
span.nameChar.char_5 {background-position:-5.625vw 0;}
span.nameChar.char_6 {background-position:-6.75vw 0;}
span.nameChar.char_7 {background-position:-7.875vw 0;}
span.nameChar.char_8 {background-position:-9vw 0;}
span.nameChar.char_9 {background-position:-10.125vw 0;}
span.nameChar.char_A {background-position:-11.25vw 0;}
span.nameChar.char_B {background-position:-12.375vw 0;}
span.nameChar.char_C {background-position:-13.5vw 0;}
span.nameChar.char_D {background-position:-14.625vw 0;}
span.nameChar.char_E {background-position:-15.75vw 0;}
span.nameChar.char_F {background-position:-16.875vw 0;}
span.nameChar.char_G {background-position:-18vw 0;}
span.nameChar.char_H {background-position:-19.125vw 0;}
span.nameChar.char_I {background-position:-20.25vw 0;}
span.nameChar.char_J {background-position:-21.375vw 0;}
span.nameChar.char_K {background-position:-22.5vw 0;}
span.nameChar.char_L {background-position:-23.625vw 0;}
span.nameChar.char_M {background-position:-24.75vw 0;}
span.nameChar.char_N {background-position:-25.875vw 0;}
span.nameChar.char_O {background-position:-27vw 0;}
span.nameChar.char_P {background-position:-28.125vw 0;}
span.nameChar.char_Q {background-position:-29.25vw 0;}
span.nameChar.char_R {background-position:-30.375vw 0;}
span.nameChar.char_S {background-position:-31.5vw 0;}
span.nameChar.char_T {background-position:-32.625vw 0;}
span.nameChar.char_U {background-position:-33.75vw 0;}
span.nameChar.char_V {background-position:-34.875vw 0;}
span.nameChar.char_W {background-position:-36vw 0;}
span.nameChar.char_X {background-position:-37.125vw 0;}
span.nameChar.char_Y {background-position:-38.25vw 0;}
span.nameChar.char_Z {background-position:-39.375vw 0;}
span.nameChar.char_a {background-position:-40.5vw 0;}
span.nameChar.char_b {background-position:-41.625vw 0;}
span.nameChar.char_c {background-position:-42.75vw 0;}
span.nameChar.char_d {background-position:-43.875vw 0;}
span.nameChar.char_e {background-position:-45vw 0;}
span.nameChar.char_f {background-position:-46.125vw 0;}
span.nameChar.char_g {background-position:-47.25vw 0;}
span.nameChar.char_h {background-position:-48.375vw 0;}
span.nameChar.char_i {background-position:-49.5vw 0;}
span.nameChar.char_j {background-position:-50.625vw 0;}
span.nameChar.char_k {background-position:-51.75vw 0;}
span.nameChar.char_l {background-position:-52.875vw 0;}
span.nameChar.char_m {background-position:-54vw 0;}
span.nameChar.char_n {background-position:-55.125vw 0;}
span.nameChar.char_o {background-position:-56.25vw 0;}
span.nameChar.char_p {background-position:-57.375vw 0;}
span.nameChar.char_q {background-position:-58.5vw 0;}
span.nameChar.char_r {background-position:-59.625vw 0;}
span.nameChar.char_s {background-position:-60.75vw 0;}
span.nameChar.char_t {background-position:-61.875vw 0;}
span.nameChar.char_u {background-position:-63vw 0;}
span.nameChar.char_v {background-position:-64.125vw 0;}
span.nameChar.char_w {background-position:-65.25vw 0;}
span.nameChar.char_x {background-position:-66.375vw 0;}
span.nameChar.char_y {background-position:-67.5vw 0;}
span.nameChar.char_z {background-position:-68.625vw 0;}
span.nameChar.char_gt {background-position:-69.75vw 0;}
span.nameChar.char_lt {background-position:-70.875vw 0;}
span.nameChar.char_amp {background-position:-72vw 0;}
span.nameChar.char_ast {background-position:-73.125vw 0;}
span.nameChar.char_num {background-position:-74.25vw 0;}
span.nameChar.char_sol {background-position:-75.375vw 0;}
span.nameChar.char_apos {background-position:-76.5vw 0;}
span.nameChar.char_bsol {background-position:-77.625vw 0;}
span.nameChar.char_dash {background-position:-78.75vw 0;}
span.nameChar.char_excl {background-position:-79.875vw 0;}
span.nameChar.char_lpar {background-position:-81vw 0;}
span.nameChar.char_plus {background-position:-82.125vw 0;}
span.nameChar.char_quot {background-position:-83.25vw 0;}
span.nameChar.char_rpar {background-position:-84.375vw 0;}
span.nameChar.char_semi {background-position:-85.5vw 0;}
span.nameChar.char_comma {background-position:-86.625vw 0;}
span.nameChar.char_quest {background-position:-87.75vw 0;}
span.nameChar.char_commat {background-position:-88.875vw 0;}
span.nameChar.char_dollar {background-position:-90vw 0;}
span.nameChar.char_equals {background-position:-91.125vw 0;}
span.nameChar.char_percnt {background-position:-92.25vw 0;}
span.nameChar.char_period {background-position:-93.375vw 0;}



/*****************************************************************************/