@charset "UTF-8";
/* Modified Poor Man’s Reset
 * -------------------------------------------------------
 */
html,
body {
  padding: 0;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

html {
  font-size: 1em; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

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

/* Utilities
 * -------------------------------------------------------
 */
.alpha-0 {
  opacity: 0; }

.invisible {
  visibility: hidden; }

.gpu {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0) rotate(0.1deg);
          transform: translateZ(0) rotate(0.1deg); }

.abs-center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

.horizontal-center {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0; }

/* Variables
 * -------------------------------------------------------
 */
/* Ad content
 * -------------------------------------------------------
 */
#ad_content {
  background: #0f133c;
  border: 1px solid black;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  width: 300px;
  height: 250px; }

#img1 {
  background: url("img123.jpg") 0 0 no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 250px; }

#img2 {
  background: url("img123.jpg") 0 -250px no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 250px; }

#img2mask {
  background: url("img2mask.png") 0 0 no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 250px; }

#img2dark {
  background: url("img2dark.png") 0 0 no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 250px; }

#img3 {
  background: url("img123.jpg") 0 -500px no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 250px; }

.fauxctabutton {
  width: 152px;
  height: 30px;
  border-radius: 15px; }

.ctabutton {
  width: 171px;
  height: 30px;
  border-radius: 15px; }

.cta-off {
  background-color: #4d9fda;
  color: #4d9fda; }

#cta {
  position: absolute;
  width: 171px;
  height: 30px;
  left: 18px;
  top: 160px; }

#ctafaux {
  position: absolute;
  left: 18px;
  top: 202px; }

#ctashadow {
  position: absolute;
  left: 19px;
  top: 203px; }

#ctatext {
  position: absolute;
  left: 0;
  top: 0; }

#arrow {
  position: absolute;
  right: 2px;
  top: 1px; }

.innerfauxctaholder {
  width: 130px;
  height: 15px; }

.innerctaholder {
  width: 150px;
  height: 15px; }

#contactlens {
  position: absolute;
  left: 0;
  top: -25px; }

#leftholder {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 250px;
  overflow: hidden; }

#rightholder {
  position: absolute;
  left: 150px;
  top: 0;
  width: 150px;
  height: 250px;
  overflow: hidden; }

.blacktint {
  position: absolute;
  width: 300px;
  height: 500px;
  background-color: black;
  opacity: .25; }

#leftblack {
  left: -150px;
  top: -125px;
  -webkit-transform-origin: right center;
          transform-origin: right center; }

#rightblack {
  left: 0;
  top: -125px;
  -webkit-transform-origin: left center;
          transform-origin: left center; }

#uptext1 {
  position: absolute;
  left: 91px;
  top: 122px; }

#uptext2 {
  position: absolute;
  left: 84px;
  top: 121px; }

#uptext3 {
  position: absolute;
  left: 72px;
  top: 122px; }

#uptext4 {
  position: absolute;
  left: 18px;
  top: 77px; }

#dotholder1 {
  position: absolute;
  left: 200px; }

#dotholder2 {
  position: absolute;
  left: 208px; }

#dotholder3 {
  position: absolute;
  left: 218px; }

.dotholder {
  position: absolute;
  width: 14px;
  height: 4px;
  top: 131px; }

.dot1 {
  position: absolute;
  left: 0;
  top: 0; }

.dot2 {
  position: absolute;
  left: 4px;
  top: 0; }

.dot3 {
  position: absolute;
  left: 8px;
  top: 0; }

#eftext1 {
  position: absolute;
  left: 18px;
  top: 74px; }

#eftext2 {
  position: absolute;
  left: 18px;
  top: 117px; }

#whiteblock {
  position: absolute;
  background-color: white;
  width: 300px;
  height: 250px; }

#bluearc {
  position: absolute;
  left: 214px;
  top: -2px; }

#logo {
  position: absolute;
  left: 18px;
  top: 18px;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(0.5);
          transform: scale(0.5); }

#logowhite {
  position: absolute;
  left: 21px;
  top: 21px;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(0.5);
          transform: scale(0.5); }

#legal {
  position: absolute;
  cursor: pointer;
  left: 10px;
  top: 213px; }

#frame1 {
  position: absolute;
  width: 300px;
  height: 250px; }

#frame2 {
  position: absolute;
  width: 300px;
  height: 250px; }

#frame3 {
  position: absolute;
  width: 300px;
  height: 250px; }

.back-up {
  background: url("backup.png") 0 0 no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 250px; }

/*
Icon classes can be used entirely standalone. They are named after their original file names.

```html
<!-- `display: block` sprite -->
<div class="icon-home"></div>

<!-- `display: inline-block` sprite -->
<img class="icon-home" />
```
*/
.contactlens {
  background-image: url(spritesheet.png);
  background-position: 0px 0px;
  width: 300px;
  height: 300px;
}
.ctashadow {
  background-image: url(spritesheet.png);
  background-position: -310px -152px;
  width: 156px;
  height: 33px;
}
.logo {
  background-image: url(spritesheet.png);
  background-position: -310px 0px;
  width: 272px;
  height: 66px;
}
.logowhite {
  background-image: url(spritesheet.png);
  background-position: -310px -76px;
  width: 272px;
  height: 66px;
}

.svg-arrow {
	background: url("svgsprite.svg") 86.77884615384616% 9.53191489361702% no-repeat;
	width: 10px;
	height: 14px;
}

.svg-bluearc {
	background: url("svgsprite.svg") 0 0 no-repeat;
	width: 88px;
	height: 254px;
}

.svg-ctatext {
	background: url("svgsprite.svg") 46.70665039010668% 72.72888762567946% no-repeat;
	width: 133.59px;
	height: 14.53px;
}

.svg-dot {
	background: url("svgsprite.svg") 88.84493670886076% 9.26896551724138% no-repeat;
	width: 6px;
	height: 6px;
}

.svg-eftext1 {
	background: url("svgsprite.svg") 63.19569120287253% 10.580177910729748% no-repeat;
	width: 182.75px;
	height: 41.94px;
}

.svg-eftext2 {
	background: url("svgsprite.svg") 54.77405701481389% 25.59220557063701% no-repeat;
	width: 161.34px;
	height: 27.09px;
}

.svg-fauxctatext {
	background: url("svgsprite.svg") 96.36924637558646% 40.64495300954158% no-repeat;
	width: 85.41px;
	height: 17.22px;
}

.svg-legal {
	background: url("svgsprite.svg") 99.61512338691419% 0 no-repeat;
	width: 233.66px;
	height: 26.88px;
}

.svg-logo {
	background: url("svgsprite.svg") 48.35164835164835% 43.74903474903475% no-repeat;
	width: 140px;
	height: 37px;
}

.svg-logowhite {
	background: url("svgsprite.svg") 48.35164835164835% 58.034749034749034% no-repeat;
	width: 140px;
	height: 37px;
}

.svg-uptext1 {
	background: url("svgsprite.svg") 44.11027568922306% 78.69346733668341% no-repeat;
	width: 122.5px;
	height: 17.4px;
}

.svg-uptext2 {
	background: url("svgsprite.svg") 47.26100966702471% 67.23259152907393% no-repeat;
	width: 135.8px;
	height: 17.4px;
}

.svg-uptext3 {
	background: url("svgsprite.svg") 53.789731051344745% 34.42569992821249% no-repeat;
	width: 158.4px;
	height: 17.4px;
}

.svg-uptext4 {
	background: url("svgsprite.svg") 0 99.88988516595879% no-repeat;
	width: 127.94px;
	height: 41.72px;
}