/** GENERAL STYLES**/
#content2 { position: relative; width: 100%; background: #e5f6ff;  }

#iframe-content { width: 100%;  }
#page #main .page-title {
	width: 100%;
}
#page #main .primary {
	width: 100%;
}

.ve-descr { width: 80%; margin-top: -10px; margin-bottom: 15px; color: #000;}
* { margin: 0; padding: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden; }
* html .clearfix { height: 1px; }
.clearfix { display: block;min-width: 0;}

button,
.vebutton {
	padding: 1%; display: block; border: 2px solid #c1c2c4; font-size: 12px; color: #000;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 42%, #f4f5f6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(42%,#ffffff), color-stop(100%,#f4f5f6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 42%,#f4f5f6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 42%,#f4f5f6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 42%,#f4f5f6 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 42%,#f4f5f6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f5f6',GradientType=0 ); /* IE6-9 */
}

button.active,
.vebutton.active,
#container_360.flythrough #switch_flythrough,
#container_360.rotator #switch_threesixty { color: #fff; font-weight: bold; border: 2px solid #01295c;
	background: #005097; /* Old browsers */
	background: -moz-linear-gradient(top,  #005097 1%, #00377d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#005097), color-stop(100%,#00377d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #005097 1%,#00377d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #005097 1%,#00377d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #005097 1%,#00377d 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #005097 1%,#00377d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005097', endColorstr='#00377d',GradientType=0 ); /* IE6-9 */
}

#content2 .tab { display: none;}
#content2 .active { display: block !important; }
#content2 .hide { display: none !important; }

/** Navigation **/
.nav { background: #fff; border: 5px solid #d9e7ef; z-index: 9999; color: #000; }
.nav a { color: #013E88; font-weight: bold; text-decoration: none; }
.nav a.active { color: #000; cursor: pointer; }
.nav span {float: left;}
.nav .nav-title { /*height: 36px;*/ padding: 8px 0 8px 7%; }

.nav .nav-title span { margin: 6px 2%; font-size: 16px; line-height: 100%; line-height: 20px; }
.nav .nav-title .sec-title { font-weight: bold; }
.nav .nav-title .grabtab { position: absolute; right: -45px; top: -5px;  background: #fff; border: 5px solid #d9e7ef; border-left: none; margin: 0;  }
.nav .nav-title .grabtab .grabtab_bg { padding: 0px; margin: 0; width: 40px; height: 38px; background: url(../img/grabtab.png) no-repeat center center;  }
.nav .nav-content { clear: both; }

.nav .nav-content h2 { color: #333; font-weight: normal; font-size: 16px; margin-top: 10px; padding-left: 8%; /*border-bottom: 1px solid #d9e7ef*/ }
.nav .nav-content h4 { color: #333; font-size: 16px; font-weight: bold; }

.nav .nav-content .row { border-bottom: 1px solid #d9e7ef; }
.nav .nav-content .row h4 { float: left; }
.nav .nav-content .row .link-left { float: left; }
.nav .nav-content .row .bar { float: left; color: #d9e7ef; padding: 0 4%; }
.nav .nav-content .row .link-right { float: left; }

.hotspot {/*background: #ff0000 no-repeat 0 0; opacity: .4;*/ width: 8%; height: 12%; display: none; position: absolute; z-index: 1; }
.hotspot.clicked { background-position: 0 -51px; }
.hotspot_copy { display: none; }

/** MINI 360 STYLES **/
.wpw_mini360 { overflow: visible; }
.wpw_360_icon {  width: 17px; height: 20px; padding: 10px 1.9%; float: left; background: url("../img/rotate.png") no-repeat scroll center center transparent; border-right: 1px solid #ccc; }
.wpw_360_icon.on { background: url("../img/pause.png") no-repeat scroll center center transparent; }
.wpw-preloader-anim{
	background-image:url("../img/loader.gif");
	background-repeat:no-repeat;
	background-position:0 0 ;
}
.wpw_360_toolbar_container { visibility: hidden; }

.correction .wpw_360_icon {display: none;}
.correction .wpw_360_container { cursor: default; }

/** Hotspot Description **/
.hotspot_copy_container { background: #fff; color: #65666a; }
.hotspot_copy_container .hotspot_copy { color: #65666a; padding: 10px 8px; margin-bottom: 15px; position: relative; min-height: 60px; }
.hotspot_copy_container .hotspot_copy .close-hotspot { width: 16px; height: 17px; display: block; position: absolute; right: 8px; top: 8px; background: url(../img/close.png) no-repeat 0 0; }
.hotspot_copy_container .hotspot_copy h2 { font-size: 18px; margin-bottom: 10px; }
.hotspot_copy_container .hotspot_copy p { font-size: 12px; font-weight: bold; line-height: 150%; }

/** Video **/
.video_container { display: none; width: 100%; height: 491px; margin: 0 auto 25px; }
/*
#video_detail_wrapper,
#video_detail_wrapper * { position: relative; z-index: 6; }*/
.video_dummy {display: none; width: 100%;}

/** Controls **/
.controls { width: 90%; margin: 0 auto; padding-bottom: 25px; }
.controls button,
.controls .vebutton { width: 50%; float: left; }
.controls button#switch_flythrough,
.controls .vebutton#switch_flythrough { width: 49.9%\9;/*IE HACK*/ }
.nav-360 {clear: both; border: 2px solid #c1c2c4; border-top: none;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 42%, #f4f5f6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(42%,#ffffff), color-stop(100%,#f4f5f6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 42%,#f4f5f6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 42%,#f4f5f6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 42%,#f4f5f6 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 42%,#f4f5f6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f5f6',GradientType=0 ); /* IE6-9 */
}

/** Timeline **/
.timeline { width: 100%; margin: 15px 3% 15px 0; float: left; }
.timeline .time { width: 100%; height: 9px; background: gray; border: 1px solid gray; position: relative; border-radius: 15px; }
.timeline .time .progress { top: 0; left: 0; width: 0%; height: 100%; background: #013E88; position: absolute; }
.timeline .time .mark { width: 31px; height: 31px; background: url(../img/timeline_mark.png) no-repeat 50% 100%; display: block; position: absolute; left: 0; top: -11px;}
.timeline .time .mark.active { background-position: 50% 0%;}

/** container 360 **/
#container_360 { position: relative; width: 100%; /*padding: 0 5%;*/ clear: both; /*max-width: 600px; margin: 0 auto; */}
#container_360 .vebutton { float: left; clear: none; }
#container_360 span { float: left; margin-right: 5px; }
#container_360 .threesixty_view,
#container_360 .flythrough_view,
#container_360 .correction { display: none; }

#container_360.correction .vebutton#myopia_btn_4,
#container_360.correction .vebutton#hyperopia_btn_4,
#container_360.correction .vebutton#astigmatism_btn_4,
#container_360.correction .vebutton#presbyopia_btn_4 { }

/** 360 eyeball **/
#container_360.rotator .threesixty_view {display: block;}
#container_360.rotator span { display: none; }
#container_360.rotator .timeline { width: 85%; /*max-width:569px; */ float: right; }
#container_360.rotator.myopia .myopia_view { display: block;  }

#container_360.rotator .mark-info { display: block; }

/** Flythrough **/
#container_360.flythrough .flythrough_view {display: block;}
#container_360.flythrough span { display: none; }
#container_360.flythrough .timeline { width: 85%; /*max-width:569px;*/ float: right; }
#container_360.flythrough .wpw_360_icon {  width: 70px; height: 40px; padding: 10px 1.9%; float: left; background: url("../img/rotate.png") no-repeat scroll center center transparent; border-right: 1px solid #ccc; }
#container_360.flythrough .wpw_360_icon.on { background: url("../img/pause.png") no-repeat scroll center center transparent; }

/** Normal Eye Section - 360 and flythough styles **/
#container_360.rotator .controls,
#container_360.flythrough .controls { padding-bottom: 20px; }
#container_360.rotator .mark-info,
#container_360.flythrough .mark-info { display: block; }

/** Myopia **/
.myopia_video_container { display: none; }
#container_360.correction .vebutton { border: 2px solid #ccc; }

#container_360 .mark-info { width: auto; margin: 0 auto 15px; color: gray; display: none; text-align: center; }
#container_360 .mark-info span { display: inline-block; float: none }
#container_360 .mark-info .mark { background: url("../img/timeline_mark.png") no-repeat scroll 0 -8px transparent; display: inline-block; float: none; vertical-align: middle; height: 21px; margin: 0 5px; width: 17px; }

html {
	line-height: 1.15;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

.virtual-eye {
	font-family: Circular-Book,Arial,sans-serif;
	color: #63666a;
  .nav a {
    color: black;

    &.active {
      color: red;
    }
  }
}