body {
  font-family: Arial, Helvetica, sans-serif;
}

#clicktag {
  height: 100%;
  width: 100%;
  cursor: pointer;
  z-index: 100;
}

#border {
  height: 100%;
  width: 100%;
  border: 1px solid #000;
  z-index: 50;
}

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

#logos {
  width:100%;
  height:100%;
  position:absolute;
  z-index:20;
}

#z-7 {
  width:75px;
  height:auto;
  position:absolute;
  bottom:25px;
  left:44px;
}

#logo {
  width:50px;
  height:auto;
  position:absolute;
  top:26px;
  left:55px;
}

#assets {
  width:100%;
  height:100%;
  position:absolute;
  z-index:15;
}

#text1 {
  width:123px;
  height:auto;
  position:absolute;
  top:139px;
  left:19px;
  opacity:0;
}

#text2 {
  width:126px;
  height:auto;
  position:absolute;
  top:139px;
  left:20px;
  opacity:0;
}

#text3 {
  width:136px;
  height:auto;
  position:absolute;
  top:139px;
  left:13px;
  opacity:0;
}

#text4 {
  width:117px;
  height:auto;
  position:absolute;
  top:139px;
  left:19px;
  opacity:0;
}

#cam {
  position:absolute;
  top:240px;
  left:-280px;
}

#camera {
  width:270px;
  height:auto;
  position:absolute;
  top:0;
  left:0;
}

#len {
  width:165px;
  height:auto;
  position:absolute;
  top:38px;
  left:85px;
}

#camera2 {
  width:145px;
  height:auto;
  position:absolute;
  top:267px;
  left:-168px;
  transform:scale(1.17);
}

#cta {
  width:100%;
  height:100%;
  position:absolute;
  z-index:25;
  opacity:0;
}

#cta-text {
  width:118px;
  height:auto;
  position:absolute;
  top:140px;
  left:17px;
}

#cta-image {
  width:134px;
  height:auto;
  position:absolute;
  top:336px;
  left:13px;
}

#cta-btn {
  width:125px;
  height:auto;
  position:absolute;
  top:245px;
  left:17px;
  opacity:0;
  z-index:1000;
  cursor:pointer;
  display:none;
}

#cta-btn img {
  width:100%;
  height:auto;
}

#cta-btn:hover {
  opacity:1;
}

#capture {
  width:108px;
  height:auto;
  position:absolute;
  top:210px;
  left:35px;
  opacity:0;
}

#black {
  width:17px;
  height:40px;
  background:#000;
  position:absolute;
  top:221px;
  opacity:0;
}

#replay {
  width:11px;
  height:11px;
  position:absolute;
  top:9px;
  left:9px;
  z-index:1000;
  cursor:pointer;
  display:none;
  opacity:0;
}

#replay img {
  width:100%;
  height:auto;
}

html,
body {
  padding: 0;
  margin: 0;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  font-size: 1em;
}

body {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJBQkFGRUZFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBQkFGRjBFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MkFCQUZFREU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MkFCQUZFRUU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtrV+I8AAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC', sizingMethod=crop);
  zoom: 1;
}

a img,
:link img,
:visited img {
  border: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

div,
img,
svg {
  position: absolute;
}

body {
  height: 600px;
  width: 160px;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
  width: 160px;
}

svg.hide { 
  display:none;
}

svg path {
  stroke: rgba(255, 255, 255, 0.8);
  fill: transparent;
}

#main {
  position: relative;
  display: none;
  height: 600px;
  width: 160px;
  overflow: hidden;
  background:#000;
}

#ad #mainCanvas {
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
  width: 480px;
}