/* CSS Document */
/* CSS Document */
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 100;
  src: local("Roboto Thin"), local("Roboto-Thin"), url(../fonts/roboto-v16-latin-100.woff2) format("woff2"), url(../fonts/roboto-v16-latin-100.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 100;
  src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"), url(../fonts/roboto-v16-latin-100italic.woff2) format("woff2"), url(../fonts/roboto-v16-latin-100italic.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"), url(../fonts/roboto-v16-latin-300.woff2) format("woff2"), url(../fonts/roboto-v16-latin-300.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 300;
  src: local("Roboto Light Italic"), local("Roboto-LightItalic"), url(../fonts/roboto-v16-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-v16-latin-300italic.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular"), url(../fonts/roboto-v16-latin-regular.woff2) format("woff2"), url(../fonts/roboto-v16-latin-regular.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 400;
  src: local("Roboto Italic"), local("Roboto-Italic"), url(../fonts/roboto-v16-latin-italic.woff2) format("woff2"), url(../fonts/roboto-v16-latin-italic.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"), local("Roboto-Medium"), url(../fonts/roboto-v16-latin-500.woff2) format("woff2"), url(../fonts/roboto-v16-latin-500.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 500;
  src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url(../fonts/roboto-v16-latin-500italic.woff2) format("woff2"), url(../fonts/roboto-v16-latin-500italic.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold"), local("Roboto-Bold"), url(../fonts/roboto-v16-latin-700.woff2) format("woff2"), url(../fonts/roboto-v16-latin-700.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 700;
  src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"), url(../fonts/roboto-v16-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-v16-latin-700italic.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 900;
  src: local("Roboto Black"), local("Roboto-Black"), url(../fonts/roboto-v16-latin-900.woff2) format("woff2"), url(../fonts/roboto-v16-latin-900.woff) format("woff"); }

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 900;
  src: local("Roboto Black Italic"), local("Roboto-BlackItalic"), url(../fonts/roboto-v16-latin-900italic.woff2) format("woff2"), url(../fonts/roboto-v16-latin-900italic.woff) format("woff"); }

img {
  border: 0; }

.h2, h2, img {
  padding: 0;
  margin: 0; }

.h2, h2 {
  font-family: Roboto;
  font-size: 28px;
  color: #5d8dac; }

/* roboto-slab-regular - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-slab-v7-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Slab Regular"), local("RobotoSlab-Regular"), url("../fonts/roboto-slab-v7-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-slab-v7-latin-regular.woff2") format("woff2"), url("../fonts/roboto-slab-v7-latin-regular.woff") format("woff"), url("../fonts/roboto-slab-v7-latin-regular.ttf") format("truetype"), url("../fonts/roboto-slab-v7-latin-regular.svg#RobotoSlab") format("svg");
  /* Legacy iOS */ }

/** moved from test-lenses.css **/
html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
  overflow: auto; }

#screen-container {
  width: 832px;
  height: 502px;
  position: relative;
  margin: 50px auto 10px;
  border: 1px solid #ccc; }

#screen-container:focus {
  outline: none; }

.eyepiece-cross-sim {
  /*width: 32px;*/
  /*height: 32px;*/
  position: absolute;
  top: 325px;
  left: 223px; }

.stage-photo {
  width: 830px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0; }

#device-canvas,
#mire-canvas {
  width: 830px;
  height: 500px;
  /*touch-action: none;*/
  position: absolute;
  top: 0;
  left: 50px;
  outline: none;
  /*touch-action: none;*/ }

#device-canvas {
  left: 30px; }

#mire-cover, #device-cover {
  position: absolute;
  width: 830px;
  height: 500px;
  top: 0;
  left: 0;
  display: block; }

#mire-cover {
  background-color: white; }

#mire-cover.off, #device-cover.off {
  display: none; }

#device-cover.white {
  background-color: #fff;
  opacity: 0.5; }

#patient-k-reading {
  position: absolute;
  top: 0;
  left: 30px;
  display: none; }

#mire-zoom {
  position: absolute;
  top: 0;
  left: 0;
  display: none; }

body {
  font-family: Roboto,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.42857143; }

#screen-container {
  overflow: hidden;
  /** Text Prompts for the user **/
  /** Next and back nav **/
  /** White Cover **/
  /** Intro screen **/
  /** Intro transition **/
  /** Story **/
  /** Eyepiece Focusing **/
  /** Vertical Positioning **/
  /** Horizontal Positioning **/ }
  #screen-container .instructions, #screen-container .reading {
    font-family: 'Roboto Slab','Arial',serif;
    font-size: 16px;
    text-align: center;
    line-height: 1.2;
    display: none; }
  #screen-container .instructions.incorrect {
    color: #ff9b00;
    display: none; }
  #screen-container a.instructions.complete {
    display: block;
    display: none;
    color: #000;
    text-decoration: none !important;
    display: none; }
  #screen-container a.instructions.complete.white {
    color: #fff;
    text-shadow: 1px 1px 15px black; }
  #screen-container #nextback {
    width: 100px;
    height: 32px;
    left: 21px;
    bottom: 17px;
    position: absolute;
    z-index: 999; }
    #screen-container #nextback #nav-next {
      background: url("../images/btn-next.png");
      width: 29px;
      height: 32px;
      display: inline-block;
      overflow: hidden;
      text-indent: -999px; }
    #screen-container #nextback #nav-back {
      background: url("../images/btn-back.png");
      width: 29px;
      height: 32px;
      display: inline-block;
      overflow: hidden;
      text-indent: -999px; }
    #screen-container #nextback #nav-next.disabled, #screen-container #nextback #nav-back.disabled {
      cursor: not-allowed;
      opacity: 0.5; }
  #screen-container #cover {
    width: 830px;
    height: 500px;
    background: #fff;
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0; }
  #screen-container #intro {
    width: 830px;
    height: 500px;
    /*background:url('../images/patient-1.jpg') 260px -30px no-repeat $white;*/
    position: absolute;
    left: 0;
    top: 0;
    z-index: 998; }
    #screen-container #intro .intro-part-1 {
      width: 400px;
      position: absolute;
      left: 36px;
      top: 65px; }
      #screen-container #intro .intro-part-1 p {
        margin-bottom: 8px; }
      #screen-container #intro .intro-part-1 ol {
        padding-left: 27px; }
        #screen-container #intro .intro-part-1 ol li {
          line-height: 27px; }
    #screen-container #intro .instructions {
      display: block;
      text-align: left;
      cursor: pointer;
      position: absolute;
      left: -17px;
      font-family: roboto;
      font-size: 12px;
      border: 2px solid orange;
      background: #fff;
      padding: 6px 10px;
      border-radius: 5px;
      top: 320px;
      box-shadow: 1px 1px 1px #888888;
      display: none; }
      #screen-container #intro .instructions .pointer {
        background: url("../images/keratometer/callout-pointer.png");
        width: 22px;
        height: 19px;
        position: absolute;
        left: 31px;
        top: 26px; }
  #screen-container #intro-out {
    width: 830px;
    height: 500px;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    background: #fff;
    /*.photo.large {
			transform:scale(1);
			top:16px;
			left:-336px;
		}*/ }
    #screen-container #intro-out .photo {
      display: block;
      position: absolute;
      /*left:-336px;
			top:16px;*/
      top: -126px;
      left: -210px;
      /*transform:scale(0.67);*/
      transform: matrix(0.67, 0, 0, 0.67, 0, 0); }
  #screen-container #story {
    width: 350px;
    position: absolute;
    left: 35px;
    top: 19px;
    z-index: 99; }
    #screen-container #story h2 {
      margin-top: 0;
      padding-top: 0;
      color: #5d8dac;
      font-weight: 400;
      font-size: 24px;
      margin-bottom: 10px;
      margin-top: 0; }
    #screen-container #story hr {
      padding: 0;
      margin: 0;
      border: none;
      height: 1px;
      margin-bottom: 7px;
      position: relative;
      left: -40px;
      width: 100%;
      background: -moz-linear-gradient(left, #608fad 0%, #608fad 82%, rgba(96, 143, 173, 0) 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(left, #608fad 0%, #608fad 82%, rgba(96, 143, 173, 0) 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to right, #608fad 0%, #608fad 82%, rgba(96, 143, 173, 0) 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#608fad', endColorstr='#00608fad',GradientType=1 );
      /* IE6-9 */ }
    #screen-container #story ol {
      display: none;
      margin-left: 14px;
      padding-left: 0;
      -webkit-column-count: 2;
      -moz-column-count: 2;
      -ms-column-count: 2;
      -o-column-count: 2;
      column-count: 2;
      -webkit-column-gap: 3em;
      -moz-column-gap: 3em;
      -ms-column-gap: 3em;
      -o-column-gap: 3em;
      column-gap: 3em; }
    #screen-container #story li {
      margin-bottom: 0px;
      transition: all 0.4s ease-out;
      white-space: nowrap;
      line-height: 22px; }
    #screen-container #story li.past, #screen-container #story li span.past {
      color: #ccc; }
    #screen-container #story li.present, #screen-container #story li span.present {
      color: #212529;
      font-weight: bold; }
    #screen-container #story li.future, #screen-container #story li span.future {
      color: #212529;
      font-weight: normal; }
    #screen-container #story .intro-part-2 {
      position: absolute;
      left: 0;
      top: 105px;
      width: 400px;
      transition: all 0.4s ease-out; }
    #screen-container #story .intro-part-2.no-part-1 {
      top: 50px; }
      #screen-container #story .intro-part-2.no-part-1 li {
        margin-bottom: 2px; }
  #screen-container #sim-occluder {
    width: 830px;
    height: 500px;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: none; }
    #screen-container #sim-occluder .forehead-rest {
      width: 320px;
      height: 383px;
      background: url("../images/forehead-rest-sprite.png") no-repeat;
      position: absolute;
      left: 426px;
      top: 27px; }
    #screen-container #sim-occluder #occluder {
      position: absolute;
      width: 135px;
      height: 219px;
      background: url("../images/occluder.png") no-repeat;
      left: 519px;
      top: 11px;
      -ms-transform: rotate(75deg);
      /* IE 9 */
      -ms-transform-origin: 53% 14%;
      /* IE 9 */
      -webkit-transform: rotate(75deg);
      /* Chrome, Safari, Opera */
      -webkit-transform-origin: 53% 14%;
      /* Chrome, Safari, Opera */
      transform: rotate(75deg);
      transform-origin: 53% 14%; }
    #screen-container #sim-occluder #occluder.active {
      cursor: pointer; }
    #screen-container #sim-occluder .instructions {
      position: absolute;
      left: 745px;
      top: 145px;
      z-index: 2; }
    #screen-container #sim-occluder .instructions.complete, #screen-container #sim-occluder .instructions.incorrect {
      display: none; }
    #screen-container #sim-occluder .instructions.next {
      left: 10px;
      top: 406px;
      color: #5d8dac; }
  #screen-container #sim-eyepiece {
    display: none;
    width: 830px;
    height: 500px;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2; }
    #screen-container #sim-eyepiece label {
      position: absolute;
      top: 200px;
      left: 50px; }
    #screen-container #sim-eyepiece #eyepiece-markings {
      width: 109px;
      height: 109px;
      background: url("../images/eyepiece-markings.png") no-repeat;
      position: absolute;
      top: 115px;
      right: 189px;
      cursor: pointer; }
    #screen-container #sim-eyepiece #red-triangle {
      width: 9px;
      height: 10px;
      background: url("../images/red-arrow.png") no-repeat;
      position: absolute;
      top: 120px;
      right: 238px; }
    #screen-container #sim-eyepiece #eyepiece-view {
      position: absolute;
      left: 168px;
      top: 213px;
      width: 215px;
      height: 215px;
      border-radius: 50%;
      background: white;
      background: -moz-radial-gradient(center, ellipse cover, white 48%, #b3b3b3 100%);
      background: -webkit-radial-gradient(center, ellipse cover, white 48%, #b3b3b3 100%);
      background: radial-gradient(ellipse at center, white 48%, #b3b3b3 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b3b3b3',GradientType=1 );
      display: none; }
      #screen-container #sim-eyepiece #eyepiece-view svg {
        position: absolute;
        top: 68px;
        left: 68px; }
    #screen-container #sim-eyepiece #eyepiece-zoom {
      background: url("../images/zoom-02.png") no-repeat;
      width: 343px;
      height: 247px;
      position: absolute;
      left: 255px;
      top: 155px;
      display: none; }
    #screen-container #sim-eyepiece .instructions {
      position: absolute;
      left: 545px;
      top: 78px;
      color: #fff;
      text-shadow: 1px 1px 15px black;
      display: none; }
    #screen-container #sim-eyepiece .instructions.complete, #screen-container #sim-eyepiece .instructions.incorrect {
      display: none; }
    #screen-container #sim-eyepiece .instructions.next {
      left: 10px;
      top: 386px;
      color: #5d8dac;
      text-shadow: 0 0 0 #fff; }
  #screen-container #sim-vertical {
    display: none;
    width: 830px;
    height: 500px;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2; }
    #screen-container #sim-vertical label {
      position: absolute;
      top: 200px;
      left: 50px; }
    #screen-container #sim-vertical #vertical-customer-view {
      /** This may need to change for other customers **/ }
      #screen-container #sim-vertical #vertical-customer-view #vertical-customer {
        /*position:absolute;
				left:-198px;
				top:-95px;
				background:url('../images/patient-1.jpg');
				width:707px;
				height:583px;*/
        background: url(../images/patient-tutorial-position.jpg);
        width: 329px;
        height: 492px;
        left: -5px;
        top: -94px;
        position: absolute; }
      #screen-container #sim-vertical #vertical-customer-view #vertical-keratometer {
        width: 372px;
        height: 954px;
        display: block;
        background: url(../images/k-meter-updown-2.png);
        position: absolute;
        left: -5px;
        top: -40px;
        z-index: 5; }
      #screen-container #sim-vertical #vertical-customer-view #chinrest {
        width: 135px;
        height: 156px;
        background: url("../images/chin-rest.png");
        position: absolute;
        left: 84px;
        top: 390px; }
      #screen-container #sim-vertical #vertical-customer-view #foreheadrest {
        width: 372px;
        height: 313px;
        background: url(../images/forehead-rest.png);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        left: -40px; }
    #screen-container #sim-vertical #chin-rest-control {
      width: 91px;
      height: 91px;
      background: url("../images/chin-rest-control.png");
      cursor: pointer;
      position: absolute;
      left: 585px;
      top: 275px; }
    #screen-container #sim-vertical #vertical-control {
      width: 124px;
      height: 124px;
      background: url("../images/vertical-control.png") no-repeat;
      cursor: pointer;
      position: absolute;
      left: 530px;
      top: 363px; }
    #screen-container #sim-vertical .instructions {
      position: absolute;
      left: 660px;
      top: 345px; }
    #screen-container #sim-vertical .instructions.complete, #screen-container #sim-vertical .instructions.incorrect {
      display: none; }
    #screen-container #sim-vertical .instructions.next {
      left: 10px;
      top: 386px;
      color: #5d8dac; }
  #screen-container #sim-horizontal {
    display: none;
    width: 830px;
    height: 500px;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2; }
    #screen-container #sim-horizontal #foreheadrest {
      width: 372px;
      height: 313px;
      background: url(../images/forehead-rest.png);
      position: absolute;
      top: -20px;
      z-index: 2;
      left: -20px; }
    #screen-container #sim-horizontal label {
      position: absolute;
      top: 200px;
      left: 50px; }
    #screen-container #sim-horizontal #horizontal-customer {
      width: 100%;
      height: 100%;
      background: url("../images/patient-1-leftright.jpg") no-repeat;
      z-index: 1; }
    #screen-container #sim-horizontal #horizontal-keratometer {
      width: 380px;
      height: 325px;
      display: block;
      background: url(../images/k-meter-leftright.png);
      position: absolute;
      left: 105px;
      top: -3px;
      z-index: 2; }
    #screen-container #sim-horizontal #leftright-control {
      width: 50px;
      height: 50px;
      background: url("../images/leftright-control.png") no-repeat;
      background-position: center center;
      position: absolute;
      left: 175px;
      top: 75px;
      z-index: 3;
      cursor: pointer; }
    #screen-container #sim-horizontal #lightmire {
      position: absolute;
      top: 89px;
      left: 92px; }
    #screen-container #sim-horizontal .instructions {
      position: absolute;
      left: 283px;
      top: 200px;
      color: #fff;
      text-shadow: 1px 1px 15px black;
      z-index: 4; }
    #screen-container #sim-horizontal .instructions.complete, #screen-container #sim-horizontal .instructions.incorrect {
      left: 512px;
      top: 268px; }
    #screen-container #sim-horizontal .instructions.incorrect {
      color: #ff9b00;
      display: none; }
    #screen-container #sim-horizontal .instructions.extra {
      left: 283px;
      top: 279px; }
    #screen-container #sim-horizontal .instructions.next {
      left: 10px;
      top: 386px;
      color: #5d8dac;
      text-shadow: 0 0 0 #fff; }
  #screen-container #simulation {
    width: 830px;
    height: 500px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1; }
    #screen-container #simulation .instructions {
      position: absolute;
      left: 710px;
      top: 118px;
      display: none; }
    #screen-container #simulation .reading {
      position: absolute;
      left: 528px;
      top: 269px;
      color: #fff;
      text-shadow: 1px 1px 15px black;
      z-index: 4;
      display: none; }
    #screen-container #simulation .instructions.next {
      left: 10px;
      top: 386px;
      color: #5d8dac;
      text-shadow: 0 0 0 #fff; }
    #screen-container #simulation #vertical-control-refine {
      width: 124px;
      height: 124px;
      background: url("../images/vertical-control.png") no-repeat;
      cursor: pointer;
      position: absolute;
      left: 530px;
      top: 363px;
      display: none; }
    #screen-container #simulation #horizontal-control-refine {
      width: 210px;
      height: 210px;
      position: absolute;
      left: 565px;
      top: 160px;
      border-radius: 50%;
      background: url("../images/k-meter-background-refine.png") no-repeat;
      overflow: hidden;
      display: none;
      -webkit-mask-image: -webkit-radial-gradient(white, black); }
      #screen-container #simulation #horizontal-control-refine .inner {
        position: relative;
        width: 100%;
        height: 100%; }
      #screen-container #simulation #horizontal-control-refine #horizontal-keratometer-refine {
        position: absolute;
        width: 247px;
        height: 211px;
        display: block;
        background: url("../images/k-meter-leftright-refine.png") no-repeat;
        left: 30px;
        top: 0;
        z-index: 2; }
      #screen-container #simulation #horizontal-control-refine #leftright-control-refine {
        position: absolute;
        width: 36px;
        height: 37px;
        display: block;
        background: url("../images/leftright-control-refine.png") no-repeat;
        left: 74px;
        top: 48px;
        z-index: 3;
        cursor: pointer; }
  #screen-container .customer-view {
    width: 322px;
    height: 322px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    /*border:1px solid red;*/
    left: 107px;
    top: 163px; }
    #screen-container .customer-view .inner {
      position: relative;
      width: 100%;
      height: 100%; }

/** - - - - - - - - - - - - - - - - - - - - - - - - **/
/** Practice  **/
.practice #screen-container {
  width: 968px;
  overflow: hidden !important; }
  .practice #screen-container #cover {
    width: 968px;
    left: -70px; }
  .practice #screen-container #intro-out {
    width: 968px; }
  .practice #screen-container section {
    margin-left: 70px; }
  .practice #screen-container #story hr {
    left: -110px;
    width: 120%; }
  .practice #screen-container #nextback {
    left: 31px;
    bottom: 37px; }
  .practice #screen-container #intro .instructions {
    left: -77px;
    top: 303px; }
  .practice #screen-container #sim-occluder .instructions {
    left: 812px; }
  .practice #screen-container #sim-occluder .forehead-rest {
    left: 496px; }
  .practice #screen-container #sim-occluder #occluder {
    left: 589px; }
  .practice #screen-container #sim-occluder .instructions.next {
    left: -53px;
    top: 386px; }
  .practice #screen-container #sim-eyepiece #eyepiece-zoom {
    left: 325px; }
  .practice #screen-container #sim-eyepiece #eyepiece-view {
    left: 238px; }
  .practice #screen-container #sim-eyepiece #eyepiece-markings {
    right: 119px; }
  .practice #screen-container #sim-eyepiece #red-triangle {
    right: 168px; }
  .practice #screen-container #sim-eyepiece .instructions {
    left: 612px; }
  .practice #screen-container #sim-eyepiece .instructions.next {
    left: -53px;
    top: 368px; }
  .practice #screen-container #sim-vertical .instructions {
    left: 720px; }
  .practice #screen-container #sim-vertical .instructions.next {
    left: -53px;
    top: 368px; }
  .practice #screen-container #sim-vertical #vertical-control {
    left: 600px; }
  .practice #screen-container #sim-vertical #chin-rest-control {
    left: 655px; }
  .practice #screen-container #sim-horizontal .instructions.next {
    left: -53px;
    top: 368px; }
  .practice #screen-container #simulation .instructions {
    left: 785px;
    top: 98px; }
  .practice #screen-container #simulation .instructions.next {
    left: -53px;
    top: 368px; }
  .practice #screen-container #simulation #vertical-control-refine {
    left: 600px; }
  .practice #screen-container #simulation #horizontal-control-refine {
    left: 635px; }

.practice #device-canvas {
  left: 100px; }

::-webkit-scrollbar {
  height: 1px !important;
  width: 1px !important; }

#preloader {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  overflow: hidden; }