<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/**
 * White theme for reveal.js. This is the opposite of the 'black' theme.
 *
 * By Hakim El Hattab, http://hakim.se
 */
/*@import url(fonts/source-sans-pro/source-sans-pro.css);*/
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
  color: #fff; }

/*********************************************
 * GLOBAL STYLES
 *********************************************/
:root {
  --background-color: #fff;
  --main-font: 'Raleway', sans-serif;
  --main-font-size: 42px;
  --main-color: #222;
  --block-margin: 20px;
  --heading-margin: 0 0 20px 0;
  --heading-font: 'Raleway', sans-serif;
  --heading-color: #222;
  --heading-line-height: 1.2;
  --heading-letter-spacing: normal;
  --heading-text-transform: uppercase;
  --heading-text-shadow: none;
  --heading-font-weight: 600;
  --heading1-text-shadow: none;
  --heading1-size: 2.5em;
  --heading2-size: 1.6em;
  --heading3-size: 1.3em;
  --heading4-size: 1em;
  --code-font: monospace;
  --link-color: #2a76dd;
  --link-color-hover: #6ca0e8;
  --selection-background-color: #98bdef;
  --selection-color: #fff; }

.reveal-viewport {
  background: #fff;
  background-color: #fff; }

.reveal {
  font-family: 'Raleway', sans-serif;
  font-size: 42px;
  font-weight: normal;
  color: #222; }

.reveal ::selection {
  color: #fff;
  background: #98bdef;
  text-shadow: none; }

.reveal ::-moz-selection {
  color: #fff;
  background: #98bdef;
  text-shadow: none; }

.reveal .slides section,
.reveal .slides section &gt; section {
  line-height: 1.3;
  font-weight: inherit; }

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  text-shadow: none;
  word-wrap: break-word;
}

.reveal h1 {
  font-size: 1.8em;
}

.reveal h2 {
  font-size: 1.2em;
}

.reveal h3 {
  font-size: 0.8em;
}

.reveal h4 {
  font-size: 0.6em;
}

.reveal h1 {
  text-shadow: none;
}

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
  font-size: 0.6em;
  margin: 20px 0;
  line-height: 1.3;
  font-weight: 300;
  color: #fff;
}

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%; }

.reveal strong,
.reveal b {
  font-weight: bold; }

.reveal em {
  font-style: italic; }

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em; }

.reveal ol {
  list-style-type: decimal; }

.reveal ul {
  list-style-type: disc; }

.reveal ul ul {
  list-style-type: square; }

.reveal ul ul ul {
  list-style-type: circle; }

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 40px; }

.reveal dt {
  font-weight: bold; }

.reveal dd {
  margin-left: 40px; }

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: 20px auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block; }

.reveal q {
  font-style: italic; }

.reveal pre {
  display: block;
  position: relative;
  width: 90%;
  margin: 20px auto;
  text-align: left;
  font-size: 0.55em;
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

.reveal code {
  font-family: monospace;
  text-transform: none; }

.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
  word-wrap: normal; }

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0; }

.reveal table th {
  font-weight: bold; }

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid; }

.reveal table th[align="center"],
.reveal table td[align="center"] {
  text-align: center; }

.reveal table th[align="right"],
.reveal table td[align="right"] {
  text-align: right; }

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
  border-bottom: none; }

.reveal sup {
  vertical-align: super;
  font-size: smaller; }

.reveal sub {
  vertical-align: sub;
  font-size: smaller; }

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top; }

.reveal small * {
  vertical-align: top; }

.reveal img {
  margin: 20px 0; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: #2a76dd;
  text-decoration: none;
  transition: color .15s ease; }

.reveal a:hover {
  color: #6ca0e8;
  text-shadow: none;
  border: none; }

.reveal .roll span:after {
  color: #fff;
  background: #1a53a1; }

/*********************************************
 * Frame helper
 *********************************************/
.reveal .r-frame {
  border: 4px solid #222;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

.reveal a .r-frame {
  transition: all .15s linear; }

.reveal a:hover .r-frame {
  border-color: #2a76dd;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls {
  color: #2a76dd; }

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2);
  color: #2a76dd; }

/*********************************************
 * PRINT BACKGROUND
 *********************************************/
@media print {
  .backgrounds {
    background-color: #fff; } }


.container{
    display: flex;
    margin-left: 0;
}
.col{
    /*flex: 1;*/
    flex: 50%;
    border: 1px solid pink;
}

select {
  /*height: 20% !important;*/
  height: 64px !important;
  /*width: auto !important;*/
  display: inline-block !important;
  color: #351B5A !important;
  text-transform: uppercase;
  background: url(/cart/images/onlinevisiontest/drop-arrow-down.png) no-repeat right #fff !important;
  background-color: #f2f2f2 !important;
  width: 200px !important;
  font-size: 0.45em !important;
  -moz-appearance: none;
  -webkit-appearance:none; /* Safari and Chrome */
  appearance:none;
  width: 84% !important;
}

.controls-arrow {
  display: none;
}

.ovt-header {
  position: absolute !important;
  width: 100%;
  z-index: 999999;
}

.prescription-type-slide li {
  list-style-type: none;
  float: left;
}

.prescription-type-slide li img {
  width: 20%;
}

.contacts-slide select {
  max-width: 87%;
}

.button.button-xlarge {
    font-size: 0.4em;
    background-color: #90E5C6;
    border-radius: 0;
}

.button {
  text-shadow: none;
}

.button.button-3d {
    border-bottom: 0 !important;
}

/* INPUT FORMS */

.slide input {
  background-color: transparent !important;
  border: 1px solid white;
  padding: 7px;
}

.input__half-size {
  width: 48%;
}

.input__full-size {
  width: 98%;
}

.input__email-address {
  margin-top: 15px;
}

.slide::-webkit-input-placeholder { /* Edge */
  color: pink;
  font-size: 0.7em;
  margin-right: 50px;
}

.slide:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: pink;
  font-size: 0.7em;
  margin-right: 50px;
}

.slide::placeholder {
  color: pink;
  font-size: 0.7em;
  margin-right: 50px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #fff;
    opacity: 1; /* Firefox */
  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
  }

  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff;
  }

  .container-left {
    color: #fff;  
  }

  .container-right {
    color: #fff;  
  }

  .slide-background {
    background: rgb(104, 194, 171) !important;
    background-color: rgb(104, 194, 171) !important;
  }

  .reveal h1 {
    font-size: 1.7em;
  }

  .reveal p {
    font-size: 1.2em;
  }

  .reveal label {
    font-size: 0.6em;
  }

  .reveal small {
    font-size: 0.8em;
  }

  select, option {
    font-size: 0.9em !important;
    font-weight: 300;
    -moz-appearance: none;
  }

  .prescription-type-slide li {
    margin: 0;
    text-align: center;
  }

  .slide button {
    margin-top: 60px;
  }

  .personal-details-slide .container-right {
    margin-top: 60px;
  }

  .prescription-type-slide .container-right {
    margin-top: 60px;
  }

  .input__half-size {
    width: 98%;
  }

  .input__full-size {
    width: 98%;
  }

  .input__margin-right {
    margin-right: 2%;
  }

  .reveal h1 {
    font-size: 1.8em;
  }

  .reveal h2 {
    font-size: 1.5em;
  }

  .reveal h3 {
    font-size: 1.4em;
  }

  .reveal h4 {
    font-size: 1.3em;
  }

  .form-control {
    width: 80% !important;
    height: 2.2em !important;
    font-size: 1.3em !important;
    font-weight: 500;
    margin-bottom: 10px;
    padding-right: 102px;
  }

  select {
    background-size: 90px !important;
  }

  button {
    width: 80% !important;
    height: 3.2em !important;
    font-size: 1.2em !important;
    line-height: 138px !important;
  }

  .prescription-type-slide ol {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .prescription-type-slide li {
    list-style-type: none;
    float: none;
    clear: both;
  }

  .prescription-type-slide li img {
    width: 20%;
  }

  .scrollable-slide {
    overflow-y: scroll !important;
  }

  .slide input {
    float: left;
    margin-bottom: 20px;
    border: 3px solid white;
  }

  .input__email-address {
    margin-top: 0;
  }

  /*
   * Adjust backgrounds for these overflowing slides,
   * so we don't get white spots
   */
  .contacts-prescription-both-slide.slide-background,
  .contacts-prescription-different-right-slide.slide-background,
  .contacts-prescription-different-left-slide.slide-background,
  .select-glasses-prescription-right-slide.slide-background,
  .select-glasses-prescription-left-slide.slide-background
  {
    top: 0px !important;
  }

  /*
   * Move the slide content closer to header
   */
  .contacts-prescription-both-slide,
  .contacts-prescription-different-right-slide,
  .contacts-prescription-different-left-slide,
  .select-glasses-prescription-right-slide,
  .select-glasses-prescription-left-slide
  {
    top: -150px !important;
  }

  /*
   * Adjust buttons to align with dropdowns
   */
  .contacts-slide button,
  .contacts-prescription-both-slide button,
  .contacts-prescription-different-right-slide button,
  .contacts-prescription-different-left-slide button,
  .select-glasses-prescription-right-slide button,
  .select-glasses-prescription-left-slide button
  {
    margin-left: 83px;
  }

}




/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

  .section-content {
    margin-top: 15%;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .container-left {
    left: -8.33%;
    text-align: left;
    float: left;
    width:50%;
    z-index:-10;
    padding-right: 30px;
    color: #fff;
  }

  .container-right {
    left: 31.25%;
    top: 75px;
    float: right;
    text-align: right;
    z-index:-10;
    width:50%;
    padding-left: 30px;
    color: #000;
  }

  button img {
    margin: 0 !important;
  }

  .vision-test-passed-slide button, .vision-test-incomplete-slide button, .vision-test-failed-slide button {
    font-size: 0.3em !important;
  }

}

button img {
  float: left;
}

.eye__animated { 
  -webkit-animation-duration: 1s;
  animation-duration: 1s; 
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@-webkit-keyframes bounce { 
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
  40% {-webkit-transform: translateY(-30px);} 
  60% {-webkit-transform: translateY(-15px);} 
} 

@keyframes bounce { 
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
  40% {transform: translateY(-30px);} 
  60% {transform: translateY(-15px);} 
}

.eye__bounce { 
  -webkit-animation-name: bounce; 
  animation-name: bounce; 
}

.rotate__dropdown {
  transform:           rotate( -180deg );            
    -moz-transform:    rotate( -180deg );            
    -ms-transform:     rotate( -180deg );            
    -o-transform:      rotate( -180deg );            
    -webkit-transform: rotate( -180deg );            
  transition:           transform 550ms ease;
    -moz-transition:    -moz-transform 550ms ease;
    -ms-transition:     -ms-transform 550ms ease;
    -o-transition:      -o-transform 550ms ease;
    -webkit-transition: -webkit-transform 550ms ease;
}

.reset__dropdown {
  transform:           rotate( -360deg );            
    -moz-transform:    rotate( -360deg );            
    -ms-transform:     rotate( -360deg );            
    -o-transform:      rotate( -360deg );            
    -webkit-transform: rotate( -360deg );            
  transition:           transform 550ms ease;
    -moz-transition:    -moz-transform 550ms ease;
    -ms-transition:     -ms-transform 550ms ease;
    -o-transition:      -o-transform 550ms ease;
    -webkit-transition: -webkit-transform 550ms ease;

}

.button-text {
  background-color: transparent !important;
}

.section__first-last-name {
  margin-bottom: 20px;
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) {
  /* iPhone 6, 7, &amp; 8 in portrait */

  /*
   * Fix the height of the overflowing content section
   */
  .scrollable-slide {
    height: 1150px;
  }
}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) {
  /* iPhone 6, 7, &amp; 8 Plus in portrait */
  .scrollable-slide {
    height: 1350px;
  }
}

/* Mobile device specifc tweaks */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) {
  /* iPhone X in portrait */
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
  /* iPhone 5 &amp; 5S in portrait */
}

.reveal label {
  float: left !important;
  color: #fff;
  /*width: 0;*/
  width: 2.0em;
  display: inline;
  margin-top: 1.8em;
  /*margin-right: 1em !important;*/
}

.controls {
  display: none !important;
}

/* http://jsfiddle.net/ThinkingStiff/AEeWm/  */</pre></body></html>