* {
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

}

html {
  min-height: 100%;
  -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
}

body {
  background: #FFF;
  background-size: cover;
  font-family: "Open Sans", sans-serif;
   -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container {
  position: relative;
  width: 200px;
  height: 1040px;
  background: #FFF ;
  overflow: hidden;
  text-align: center;
  z-index: 0;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}




#OneByOne  {
  position: relative;
  width: 100px;
  height:104px;
  background: #777;
  overflow: hidden;
  }


#OneByOne  div {
  width: 100px;
  height: 104px;
  line-height: 104px;
  text-align: center;
}



#TwoByOne {

  width: 200px;
  height:104px;
  background: #888;
  overflow: hidden;
  text-align: center;

}

#TwoByOne  div {
  width: 200px;
  height: 104px;
  line-height: 104px;
  text-align: center;
}


#OneByTwo {

  width: 100px;
  height:208px;
  background: #999;
  overflow: hidden;
  text-align: center;

}


#OneByTwo  div {
  width: 100px;
  height: 208px;
  line-height: 208px;
  text-align: center;
}


#TwoByTwo {
  position: relative;
  top: 0%;
  width: 200px;
  height: 200px;
  overflow: hidden;
  text-align: center;

  }


#TwoByTwo  div {
  width: 200px;
  height: 208px;
  line-height: 208px;
  text-align: center;
}



#TwoByThree {

  width: 200px;
  height:312px;
  background: #CCC;
  overflow: hidden;
  text-align: center;

}

#TwoByThree  div {
  width: 200px;
  height: 312px;
  line-height: 312px;
  t