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


@font-face {
    font-family: 'helvetica_neuebold_condensed';
    src: url('../webfonts/helveticaneue-boldcond-webfont.eot');
    src: url('../webfonts/helveticaneue-boldcond-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/helveticaneue-boldcond-webfont.woff') format('woff'),
         url('../webfonts/helveticaneue-boldcond-webfont.ttf') format('truetype'),
         url('../webfonts/helveticaneue-boldcond-webfont.svg#helvetica_neuebold_condensed') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'helveticaneueregular';
    src: url('../webfonts/helveticaneue-h55-webfont.eot');
    src: url('../webfonts/helveticaneue-h55-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/helveticaneue-h55-webfont.woff') format('woff'),
         url('../webfonts/helveticaneue-h55-webfont.ttf') format('truetype'),
         url('../webfonts/helveticaneue-h55-webfont.svg#helveticaneueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}




body {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
input {
    line-height: 14px;
	font-size: 10px;
	letter-spacing: .5px;
}
td {
    line-height: 12px;
}

#Background {
	position: absolute;
}
#BackgroundCanvas {
	position: absolute;
	width: 3000px;
	height: 3000px;
}
#Main {
	/*background: url(../images/eyePopEyeLayers_Eye.png);
	background-repeat: no-repeat;
	background-position: center center;*/
	position: absolute;
	height: 624px;
	width: 898px;
	overflow:hidden;
	opacity: 0.0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
	/*border: 1px solid #000;*/
}
#NavArea {
	position: absolute;
	height: 624px;
	width: 172px;
	/*border: 1px solid #000;*/
}
#Header {
	position: absolute;
	height: 64px;
	width: 898px;
	right: 0px;
	/*border: 1px solid #000;*/
}
#Content {
	position: absolute;
	height: 498px;
	width: 726px;
	top: 64px;
	right: 0px;
	/*border: 1px solid #000;*/
}
#Footer {
	position: absolute;
	height: 62px;
	width: 898px;
	bottom: 0px;
	right: 0px;
	overflow: hidden;
	/*border: 1px solid #000;*/
}
#FooterNav {
	position: absolute;
	right: 0px;
	/*border: 1px solid #000;*/
}
#Nav {
	position: absolute;
	height: 498px;
	width: 172px;
	top: 64px;
	/*border: 1px solid #000;*/
}
#Logo {
	position: absolute;
	width: 726px;
	height: 62px;
	bottom: 0px;
	right: 0px;
	float: right;
	/*border: 1px solid #000;*/
	background: url(../images/headerLogoEyepop.png);
}
#ArtworkNav {
	float: left;
}
#ArtworkNav a :hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
#beforeAfterDirections {
	float: left;
	left: 50px;
	opacity: 0.0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
}

#Opening {
	position: absolute;
	width: 666px;
	height: 666px;
}
#openingEyeballShadow {
	background: url(../images/eyePopEyeLayers_Shadow.png);
}
#openingEyeballGrey {
	background: url(../images/eyePopEyeLayers_Eye.png);
}
#openingEyeball {
	background: url(../images/eyePopEyeLayers_Eye.png);
}
#openingTitle {
	background: url(../images/eyePopEyeLayers_Title.png);
	opacity: 0.0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
}
#openingEnter {
	background: url(../images/eyePopEyeLayers_Enter.png);
	opacity: 0.0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
}

#beforeAfterText {
	opacity: 0.0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
}
#beforeText {
	right: 390px;
}
#afterText {
	left: 390px;
}

#photoLink {
	position: absolute;
	width: 726px;
	height: 24px;
	bottom: 0px;
	background-color:rgba(255, 255, 255, 0.75);
	text-align: center;
	font-size: 12px;
	line-height: 18px;
}

.reg-text {
	color: #ffffff;
}
.error {
	color: rgb(255, 100, 100);
}
.alt-text {
	display: none;
}

.main-text {
 	font-family: 'helveticaneueregular';
	font-style: normal;
	/* font-size: 10.25px;*/
	font-size: 10px;
	letter-spacing: .5px;
}
.main-text-bold {
  font-weight: bold;
}
.nav a {
  text-decoration: none;
  color: #000;
}
.nav :hover {
  text-decoration: none;
  color: #AAA;
}
.nav-clicked a {
  text-decoration: none;
  color: #999;
}
.nav-clicked :hover {
  text-decoration: none;
  color: #AAA;
}
.nav-photo {
  vertical-align: top;
  line-height:54px;
  height: 44px;
}
.nav-photo-ecs {
  vertical-align: top;
  line-height:54px;
  height: 49px;
}
.nav-info {
	float: left;
	line-height:38px;
	height: 38px;
	padding-left: 6px;
	padding-right: 6px;
}
.nav-site {
	float: left;
	line-height:38px;
	left:172px;
	padding-left: 0px !important;
}

.spacer {
	float: left;
	width: 26px;
	height: 38px;
}
.forard-back-button {
	background-position: center;
	background-repeat: no-repeat;
	float: left;
	width: 18px;
	height: 38px;
}

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

.opening {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	width: 666px;
	height: 666px;
}

.openingGrey {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.beforeAfterText {
 	font-family: 'helvetica_neuebold_condensed';
	font-style: normal;
	/* font-size: 10.25px;*/
	font-size: 16px;
	letter-spacing: 1px;
	color: #FFF;
	position: absolute;
	top: 240px;
}

.fadePhoto {
	position: absolute;
	top:0px;
	left:0px;
	width: 726px;
	height: 498px;
}