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

body {
  vertical-align: baseline;
  margin: 0;
  border: 0;
  outline: 0;
  padding: 0;
  text-align: center;
}

#border {
  cursor: pointer;
  position: absolute;
  opacity: 1;
  border: 1px solid #000000;
  width: 300px;
  height: 600px;
  top: 0px;
  left: 0px;
  overflow: hidden;
  z-index: 600;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#container {
  position: absolute;
  width: 300px;
  height: 600px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
}

.fsize{
  position: absolute;
  width: 300px;
  height: 600px;
  top: 0px;
  left: 0px;
  background-size: 300px 600px;
}

#bg1 {
  background-color: #7538F5;
}

#bg2 {
  background-color: #F7D3FE;
}

#bg3 {
  background-color: #ffaf8a;
}

#bg4 {
  background-color: #7538F5;
}

/*#bg2 {
  background-image: url("bg2.jpg");
  background-image: url("bg2.png");
  clip-path: inset(0px 0px 0px 0px);

}*/

.hide{
  opacity: 0;
}

#cta {
  background-image: url("cta.png");
}

#logo {
  background-image: url("logo.png");
}

#logo4 {
  background-image: url("logo.png");
}

#logo2 {
  background-image: url("logo2.png");
}


/*Insert CSS Here*/
#tac {
  background-image: url("tac.png");
}

#tac2 {
  background-image: url("tac2.png");
}

#tac4 {
  background-image: url("tac.png");
}

#object1 {
  background-image: url("object1.png");
}

#object2 {
  background-image: url("object2.png");
}

#object3 {
  background-image: url("object3.png");
}


#c1 {
  background-image: url("c1.png");
  clip-path: inset(0px 0px 434px 0px);
}
#c2 {
  background-image: url("c1.png");
  clip-path: inset(170px 0px 374px 0px);
}
#c3 {
  background-image: url("c1.png");
  clip-path: inset(227px 0px 316px 0px);
}
#c4 {
  background-image: url("c1.png");
  clip-path: inset(285px 0px 254px 0px);
}
#c5 {
  background-image: url("c1.png");
  clip-path: inset(344px 52px 204px 0px);
}
#c6 {
  background-image: url("c1.png");
  clip-path: inset(403px 0px 107px 0px);
}

#c7 {
  background-image: url("c2.png");
  clip-path: inset(104px 0px 436px 0px);
}
#c8 {
  background-image: url("c2.png");
  clip-path: inset(165px 0px 378px 0px);
}
#c9 {
  background-image: url("c2.png");
  clip-path: inset(223px 0px 322px 0px);
}
#c10 {
  background-image: url("c2.png");
  clip-path: inset(281px 0px 254px 0px);
}

#c11 {
  background-image: url("c3.png");
  clip-path: inset(0px 0px 430px 0px);
}
#c12 {
  background-image: url("c3.png");
  clip-path: inset(173px 0px 370px 0px);
}
#c13 {
  background-image: url("c3.png");
  clip-path: inset(230px 0px 314px 0px);

}
#c14 {
  background-image: url("c3.png");
  clip-path: inset(283px 0px 254px 0px);
}

.pngSeq {
  position: absolute;
  opacity: 0;
}

#png-sequence {
  top: 413px;
  left:  58px;
  width: 193px;
  height: 193px;
}

#png-sequence2 {
  top: 413px;
  left:  74px;
  width: 153px;
  height: auto;
}

#phone {
  background-image: url(phone.png);
}

#guide {
  position: absolute;
  background-image: url(guide2.jpg);
  width: 300px;
  height: 600px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  z-index: 100;
}