/* ////////////////////////////// Basic ///////////////////////////// */

/* Resets */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; background: #7a7a7a;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* Selection colours */
::selection { background: rgb(0, 0, 0, 0); }
::-moz-selection { background: rgb(0, 0, 0, 0); }
img::selection { background: transparent; }
img::-moz-selection	{ background: transparent; }
html, body { -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; width: 100%; height: 100%; overflow-y: hidden; }
button, li , a, *:hover { -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; }

body { font-family: "suuntoregular", "HelveticaNeue", "Helvetica Neue", helvetica, arial, sans-serif; }

/* ////////////////////////////// Main Elements ///////////////////////////// */

#dive-10m { background: #000; }
#dive-12m { background: #000; }
#dive-30m { background: #000; }

/* JQuery Mobile */
.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page {
   background: #7a7a7a;
}

.btm-bar { z-index: 9999 !important;}

#vframe { width: 100%; max-width: 1024px; margin: 0 auto; position: relative; cursor: default; margin-top: -30px; }
#viewer { width: 100%; margin: 0 auto; clear: both; position: relative; }
#viewer .vr img { width: 100%; }

.middle { padding: 0; }

#threesixty { position:relative; overflow:hidden; padding-bottom: 72%; /* Rough Height of Frames */
/*padding-bottom: 50.84745762711864%; (image width / image height * 100)*/ }
#threesixty_images { display: none; }

/* Sets every image in the slider to be absolute positioned and dynamically sized. */
#threesixty img { position:absolute; top:0; width:100%; height:auto; }

/* Sets the style of the visible current frame of the image slider animation */
.current-image { visibility:visible; width:100%; }

/* Sets the style of the visible "previous" frame of the image slider animation */
.previous-image { visibility:hidden; width:0; }

/* Loading Spinner */
#spinner { position:absolute; left:50%; top:50%; width:90px; height:90px; margin-left:-45px; margin-top:-50px; display:none; }
#spinner span { position:absolute; top:50%; width:100%; color:#EEE; font:0.8em Helvetica, Arial, Sans-serif; font-weight: bold; text-align:center; line-height:0.6em; margin-top:-0.3em; }

/* Control buttons */
#controllerWrap { position: fixed; z-index: 8000; top: 10px; right: 10px; }
#controller { float: right; position: relative; }

/* Scrollbar */
#scrollbarWrap { position: fixed; width: 100%; max-width: 1024px; bottom: 0px; height: 70px; z-index: 400; }
#scrollbar { position: absolute; width: 90%; height: 0; left: 5%; bottom: 35px; clear: both; }
#scrollbar .bar { position: relative; height: 0; width: 100%; border-top: 1px solid #666; border-bottom: 1px solid #666; }
#scrollbar .bar .dot { width: 0; height: 0; position: absolute; top: 0; border: 5px solid #ffffff; border-radius: 50%; margin: -5px 0 0 -5px; }
#scrollbar .tracker { position: absolute; width: 0; height: 0; top: 0; }
#scrollbar .tracker span { position: absolute; width: 20px; height: 20px; top: 0; left: 0; margin: -30px 0 0 -10px; background: url(../img/dives/triangle.svg) no-repeat transparent center; background-size: 100%; }


/* No Javascript Fallback */
#noscript { width: 50%; left: 25%; top: 45%; background: rgb(0,0,0,0.8); font-size: 18px; line-height: 30px; color: #EEE; padding: 10px 15px; text-transform: uppercase; text-align: center; border-radius: 6px; -webkit-border-radius: 6px; position: absolute; z-index: 200; }

#actions { width: 100%; height: 100%; display: block; overflow: hidden; position: absolute; z-index: 5000; }


/* ////////////////////////////// UI Elements ///////////////////////////// */

/* Toggle Sequences */
#toggleWrap { display: none; }
.btm-bar {display: none;}


/* User Interface Buttons */
a.btn { float: left; clear: none; margin: 0; width: 40px; height: 40px; opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
a.btn:hover { cursor: pointer !important; }
a.btn:hover:after { content: ""; }

a.prev { position: fixed; bottom: 50px; left: 10px; width: 40px; height: 40px; background: url(../img/dives/arrow_left.svg) no-repeat center; background-size: 100%; ; z-index: 8000; }
a.next { position: fixed; bottom: 50px; right: 10px; width: 40px; height: 40px; background: url(../img/dives/arrow_right.svg) no-repeat center; background-size: 100%; z-index: 8000; }

#options { width: 50px; overflow: hidden; left: 10px; top: 10px; position: fixed; z-index: 9000; }
a.close { background: url(../img/dives/close.svg) no-repeat; background-size: 100%; }
a.labels { background: url(../img/dives/label.svg) no-repeat; background-size: 100%; }
a.dive12 { background: url(../img/dives/dive12m.png) no-repeat; background-size: 100%; }
a.dive19 { background: url(../img/dives/dive19m.svg) no-repeat; background-size: 100%; }
a.dive30 { background: url(../img/dives/dive30m.svg) no-repeat; background-size: 100%; }
a.dive60 { background: url(../img/dives/dive50m.svg) no-repeat; background-size: 100%; }
a.switch3d { background: url(../img/dives/3d.svg) no-repeat; background-size: 100%; }

a.play { background: url(../img/dives/play.svg) no-repeat; background-size: 100%; }
a.pause { background: url(../img/dives/pause.svg) no-repeat; background-size: 100%; }
a.reset { background: url(../img/dives/reset.svg) no-repeat; background-size: 100%; }

a.onPlay { background: url(../img/dives/play.svg) no-repeat; background-size: 100%; }
a.onPause { background: url(../img/dives/pause.svg) no-repeat; background-size: 100%; }

a.btn { background-size: 100% !important; }

a.advance { width: 60% !important; height: 50% !important; position: absolute; z-index: 5000; top: 24% !important; left: 20% !important; background: none !important; cursor: pointer; }

a.off { opacity: 0.5; -webkit-opacity: 0.5; filter: alpha(opacity=50); }
a.off:hover { opacity: 0.5; -webkit-opacity: 0.5; filter: alpha(opacity=50); }
a.disabled { cursor: default; display: none !important; }
a.on { opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }

#options a:hover { cursor: pointer; opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100);}

/* Start and end screens */

a.start-btn { display: block; height: 40px; background: none !important; position: absolute; z-index: 7000; top: auto !important; bottom: 50px !important; width: 300px !important; left: 50%; margin: 0 0 0 -150px;}
a.start-btn span { background-color: rgba(0,0,0,0.6); display: block; margin: 0 auto; padding: 12px; color: #FFF; text-align: center; font-size: 14px; font-weight: normal; text-transform: uppercase; animation: fading 4s infinite; -webkit-animation: fading 4s infinite; border-radius: 30px; -webkit-border-radius: 30px; }
a.start-btn span:hover { color: #FF141F; } 

/* a.start-btn2 { 
  display: block; 
  width: 100px !important; height: 100px !important; left: 50% !important; top: 50% !important; margin: -50px 0 0 -px; 
  background: url(../img/dives/play.svg) no-repeat center; background-size: 100%; 
  position: absolute; z-index: 7000;
} */

@keyframes fading {
    0%   { background: rgba(0,0,0,0.3); }
    50%  { background: rgba(0,0,0,0.8); }
    100% { background: rgba(0,0,0,0.3); }
}

@-webkit-keyframes fading {
    0%   { background: rgba(0,0,0,0.3); }
    50%  { background: rgba(0,0,0,0.8); }
    100% { background: rgba(0,0,0,0.3); }
}

#end { position: absolute; z-index: 6000; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
/* Social Media Share */

#end .share { display: block; width: 70%; max-width: 650px; background: #666; border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #999; padding: 10px; position: absolute; left: 13%; top: 20%; z-index: 6000; -webkit-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 1); box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 1);}
#end .share-hidden { display: none; }

#end .share p { text-align: center; font-size: 0.9em; line-height: 1.3em; color: #CCC; margin: 0 30px 20px 30px; }
#end .share a.share-btn { display: block; width: 47%; padding: 0px; background-color: #333; border-radius: 5px; -webkit-border-radius: 5px; color: #EEE; float: left; margin: 0 10px 0 0; font-size: 12px; line-height: 1em;}
#end .share a.share-btn:hover { cursor: pointer; }
#end .share a.share-btn:last-child { margin: 0; }
#end .share a.share-btn:hover { background-color: #000; }
#end .share a.share-btn img { padding: 10px 0 10px 10px; margin: 0 5px 0 0; float: left; }
#end .share a.share-btn span { padding: 5px 0 0 0; margin: 10px 0 0 0; display: block; text-align: center;}

#end .share .close-share { padding: 10px; width: auto; background: #666; color: #FFF; position: absolute; z-index: 1; margin: 0 !important; top: 0px; right: 0px; text-align: center; border-radius: 0px; -webkit-border-radius: 0px; border-left: 1px solid #999; border-bottom: 1px solid #999; }

/* Switch computer cover */

.type-d-series .computer-cover { display: none; width: 36.5%; height: 250px; top: 14.6%; left: 31.5%; position: absolute; z-index: 100; }
.type-vyper-zoop .computer-cover { display: none; width: 38%; height: 250px; top: 14.2%; left: 31%; position: absolute; z-index: 100; }
.type-eon-core .computer-cover { display: none; width: 49%; height: 400px; top: 18%; left: 24%; position: absolute; z-index: 100; }

.type-d4i .computer-cover { background: url(../img/dives/d4i-novo-cover.png) no-repeat top; background-size: 100%; }
.type-zoop .computer-cover { background: url(../img/dives/zoop-novo-cover.png) no-repeat top; background-size: 100%; }
.type-vyper .computer-cover { background: url(../img/dives/vyper-novo-cover.png) no-repeat top; background-size: 100%; }
.type-eon-core .computer-cover { background: url(../img/dives/eon-core-cover.png) no-repeat top; background-size: 100%; }

.switch-computer { display: none !important; position: fixed; top: 12px; left: 60px; z-index: 8000; overflow: hidden; }
.switch-computer a { display: block; float: left; margin: 0; font-size: 12px; border: 2px solid #FFF; color: #FFF !important; font-weight: normal; }
.switch-computer a:first-child { padding: 9px 3px 9px 7px; border-radius: 30px 0 0 30px; webkit-border-radius: 30px 0 0 30px; }
.switch-computer a:last-child { padding: 9px 7px 9px 5px; border-radius: 0 30px 30px 0; webkit-border-radius: 0 30px 30px 0; }
.switch-computer a.computer-active { background: #FFF; color: #666 !important; }

/* action required */

.action { display: none; width: 80px; height: 80px; position: absolute; z-index: 9000; background: url(../img/dives/active2.svg) no-repeat center center; background-size: 70%; animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite; visibility: visible !important; cursor: pointer; }

@keyframes pulse {
	0% { background-size: 80%; opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
	50% { background-size: 100%; opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
	100% { background-size: 80%; opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
}
@-webkit-keyframes pulse {
	0% { background-size: 80%; opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
	50% { background-size: 100%; opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
	100% { background-size: 80%; opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
}

/* Action Button D4i */
.type-d-series .action.tr { top: 29%; right: 32.8%; }
.type-d-series .action.br { top: 54.8%; right: 32.8%; }
.type-d-series .action.tl { top: 29%; left: 31.8%; }
.type-d-series .action.bl { top: 54.8%; left: 31.8%; }

/* Action Button Vyper and Novo */
.type-vyper-zoop .action.tr { top: 29%; right: 32.8%; }
.type-vyper-zoop .action.br { top: 65%; right: 65%; }
.type-vyper-zoop .action.tl { top: 29%; left: 31.8%; }
.type-vyper-zoop .action.bl { top: 54.8%; left: 31.8%; }


/* Tooltips D4i */

.type-d-series #tooltips { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.type-d-series #tooltips div.outside { display: none; padding: 0px; overflow: hidden; width: 120px; position: absolute; z-index: 6000; -webkit-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); }
.type-d-series #tooltips div.outside span { background: none; width: 20px; height: 10px; display: none; position: absolute; }
.type-d-series #tooltips div.outside div { padding: 0px; }
.type-d-series #tooltips div.outside a { background-color: #2d2d2d; color: #FFF; font-size: 12px; line-height: 14px; text-transform: uppercase; text-align: center; }
.type-d-series #tooltips div.outside a:after { content: '+'; color: #FF0000; font-size: 18px; padding: 0 0 0 10px; }
.type-d-series #tooltips div.outside a:hover { color: #FF0000; background: #333; }
.type-d-series #tooltips div.outside a.null, #tooltips div.outside a.null:hover, #tooltips div.outside a.null:after { cursor: default !important; color: #FFF; background: #2d2d2d; content: '';}

.type-d-series #tooltips div.center-top   { right: 36%; top: 29%; }
.type-d-series #tooltips div.right-top    { right: 28%; top: 29%; }
.type-d-series #tooltips div.right-middle { right: 21%; top: 48%; }
.type-d-series #tooltips div.right-middle2 { right: 16%; top: 52%; }
.type-d-series #tooltips div.right-bottom { right: 27%; top: 64%; }
.type-d-series #tooltips div.left-top     { left:  22%; top: 29%; }
.type-d-series #tooltips div.left-top2    { left:  17%; top: 29%; }
.type-d-series #tooltips div.left-middle  { left:  10%; top: 46%; }
.type-d-series #tooltips div.middle  	   { left:  17%; top: 46%; }
.type-d-series #tooltips div.left-bottom  { left:  17%; top: 59%; }
.type-d-series #tooltips div.left-bottom2 { left:  19%; top: 64%; }

/* Tooltips Vyper and Zoop */

.type-vyper-zoop #tooltips { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.type-vyper-zoop #tooltips div.outside { display: none; padding: 0px; overflow: hidden; width: 120px; position: absolute; z-index: 6000; -webkit-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); }
.type-vyper-zoop #tooltips div.outside span { background: none; width: 20px; height: 10px; display: none; position: absolute; }
.type-vyper-zoop #tooltips div.outside div { padding: 0px; }
.type-vyper-zoop #tooltips div.outside a { background-color: #2d2d2d; color: #FFF; font-size: 12px; line-height: 14px; text-transform: uppercase; text-align: center; }
.type-vyper-zoop #tooltips div.outside a:after { content: '+'; color: #FF0000; font-size: 18px; padding: 0 0 0 10px; }
.type-vyper-zoop #tooltips div.outside a:hover { color: #FF0000; background: #333; }
.type-vyper-zoop #tooltips div.outside a.null, #tooltips div.outside a.null:hover, #tooltips div.outside a.null:after { cursor: default !important; color: #FFF; background: #2d2d2d; content: '';}

.type-vyper-zoop #tooltips div.center-top   { right: 36%; top: 29%; }
.type-vyper-zoop #tooltips div.right-top    { right: 28%; top: 29%; }
.type-vyper-zoop #tooltips div.right-middle { right: 21%; top: 48%; }
.type-vyper-zoop #tooltips div.right-middle2 { right: 16%; top: 52%; }
.type-vyper-zoop #tooltips div.right-bottom { right: 27%; top: 64%; }
.type-vyper-zoop #tooltips div.left-top     { left:  22%; top: 29%; }
.type-vyper-zoop #tooltips div.left-top2    { left:  17%; top: 29%; }
.type-vyper-zoop #tooltips div.left-middle  { left:  10%; top: 46%; }
.type-vyper-zoop #tooltips div.middle  	   { left:  17%; top: 46%; }
.type-vyper-zoop #tooltips div.left-bottom  { left:  17%; top: 59%; }
.type-vyper-zoop #tooltips div.left-bottom2 { left:  19%; top: 64%; }

/* Tooltips EON CORE */

.type-eon-core #tooltips { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.type-eon-core #tooltips div.outside { display: none; padding: 0px; overflow: hidden; width: 120px; position: absolute; z-index: 6000; -webkit-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); }
.type-eon-core #tooltips div.outside span { background: none; width: 20px; height: 10px; display: none; position: absolute; }
.type-eon-core #tooltips div.outside div { padding: 0px; }
.type-eon-core #tooltips div.outside a { background-color: #2d2d2d; color: #FFF; font-size: 12px; line-height: 14px; text-transform: uppercase; text-align: center; }
.type-eon-core #tooltips div.outside a:after { content: '+'; color: #FF0000; font-size: 18px; padding: 0 0 0 10px; }
.type-eon-core #tooltips div.outside a:hover { color: #FF0000; background: #333; }
.type-eon-core #tooltips div.outside a.null, #tooltips div.outside a.null:hover, #tooltips div.outside a.null:after { cursor: default !important; color: #FFF; background: #2d2d2d; content: '';}

.type-eon-core #tooltips div.center-top   { right: 36%; top: 29%; }
.type-eon-core #tooltips div.right-top    { right: 28%; top: 29%; }
.type-eon-core #tooltips div.right-middle { right: 21%; top: 48%; }
.type-eon-core #tooltips div.right-middle2 { right: 16%; top: 52%; }
.type-eon-core #tooltips div.right-bottom { right: 27%; top: 64%; }
.type-eon-core #tooltips div.left-top     { left:  22%; top: 29%; }
.type-eon-core #tooltips div.left-top2    { left:  17%; top: 29%; }
.type-eon-core #tooltips div.left-middle  { left:  10%; top: 46%; }
.type-eon-core #tooltips div.middle      { left:  17%; top: 46%; }
.type-eon-core #tooltips div.left-bottom  { left:  17%; top: 59%; }
.type-eon-core #tooltips div.left-bottom2 { left:  19%; top: 64%; }

/* Inline Popups */

div.inline { background: #303030; padding: 0; }
div.inline h6 { font-size: 1.3em; color: #FFF; margin: 0 0 15px 0; }
div.inline p { font-size: 14px; line-height: 18px; color: #CCC; }




/* ////////////////////////////// Responsive Styles ///////////////////////////// */

/* Orientatation Hint */
@media screen and (orientation: portrait) and (max-width: 769px) {
  #orientation { position: fixed; z-index: 9999; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(244,244,244,1); display: block; }
  #orientation img { position: fixed; z-index: 8000; width: 100px; top: 50%; left: 50%; margin: -50px 0 0 -50px;}
  .btm-bar { display: block; }
}

@media screen and (orientation: landscape){
	#orientation { display: none; }
}

/* ////////////////////////////////  iphone4 landscape //////////////////////////////// */
@media screen and (min-width: 1px) {

	#toggle { height: 300px; }
	a.btn { width: 40px; height: 40px; }
	#options { top: 10px; right: 10px; }

  a.prev { bottom: 30px; }
  a.next { bottom: 30px; }

	#scrollbar .tracker span { background-size: 70%; margin: -25px 0 0 -10px; }
	#scrollbar .bar .dot { border: 4px solid #FFFFFF; margin: -4px 0 0 -5px; }

	#scrollbarWrap { bottom: -20px; }
	a.start-btn { bottom: 0px; }

	a.start-btn { bottom: 50px !important; }
  a.start-btn span { }

	#vframe { margin-top: -30px; }

  .type-eon-core #vframe { margin-top: 0px; }

  .action { width: 50px; height: 50px; }

	div.inline h6 { font-size: 1.2em; margin: 0 0 15px 0; }
	div.inline p { font-size: 12px; line-height: 16px; }

	/* D4i Tooltips */

	.type-d-series .computer-cover { width: 37%; height: 280px; top: 15%; left: 31%; }

	.type-d-series #tooltips div.outside { width: 120px; display: none; }
	.type-d-series #tooltips .outside.active { display: block; }
	.type-d-series #tooltips div.outside div { display: block; }
	.type-d-series #tooltips div.outside div a { display: block; font-size: 12px; padding: 5px; }

	.type-d-series #tooltips div.center-top   { right: 36%; top: 29%; }
	.type-d-series #tooltips div.right-top    { right: 18%; top: 27%; }
	.type-d-series #tooltips div.right-middle { right: 15%; top: 41.5%; }
	.type-d-series #tooltips div.right-middle2 { right: 8%; top: 42%; }
	.type-d-series #tooltips div.right-bottom { right: 12%; top: 60%; }
	.type-d-series #tooltips div.left-top     { left:  22%; top: 29%; }
	.type-d-series #tooltips div.left-middle  { left:  11%; top: 41.5%; }
	.type-d-series #tooltips div.middle  	   { left:  17%; top: 46%; }
	.type-d-series #tooltips div.left-bottom  { left:  18%; top: 60%; }

	.type-d-series .action.tr { top: 29%; right: 32.8%; }
	.type-d-series .action.br { top: 55%; right: 31%; }
	.type-d-series .action.tl { top: 29%; left: 31.8%; }
	.type-d-series .action.bl { top: 54.8%; left: 31.8%; }

	/* Vyper Zoop ToolTips */

	.type-vyper-zoop .computer-cover { width: 37%; height: 280px; top: 15%; left: 31%; }

	.type-vyper-zoop #tooltips div.outside { width: 120px; display: none; }
	.type-vyper-zoop #tooltips .outside.active { display: block; }
	.type-vyper-zoop #tooltips div.outside div { display: block; }
	.type-vyper-zoop #tooltips div.outside div a { display: block; font-size: 12px; padding: 5px; }

	.type-vyper-zoop #tooltips div.center-top   { right: 36%; top: 29%; }
	.type-vyper-zoop #tooltips div.right-top    { right: 18%; top: 27%; }
	.type-vyper-zoop #tooltips div.right-middle { right: 15%; top: 41.5%; }
	.type-vyper-zoop #tooltips div.right-middle2 { right: 8%; top: 42%; }
	.type-vyper-zoop #tooltips div.right-bottom { right: 12%; top: 60%; }
	.type-vyper-zoop #tooltips div.left-top     { left:  22%; top: 29%; }
	.type-vyper-zoop #tooltips div.left-middle  { left:  5%; top: 41.5%; }
	.type-vyper-zoop #tooltips div.middle  	   { left:  17%; top: 46%; }
	.type-vyper-zoop #tooltips div.left-bottom  { left:  18%; top: 60%; }

	.type-vyper-zoop .action.tr { top: 29%; right: 32.8%; }
	.type-vyper-zoop .action.br { top: 55%; right: 41%; }
	.type-vyper-zoop .action.tl { top: 42%; left: 34%; }
	.type-vyper-zoop .action.bl { top: 54.8%; left: 31.8%; }

  /* EON CORE ToolTips */

  .type-eon-core .computer-cover { width: 49%; height: 280px; top: 18%; left: 24%; }

  .type-eon-core #tooltips div.outside { width: 120px; display: none; }
  .type-eon-core #tooltips .outside.active { display: block; }
  .type-eon-core #tooltips div.outside div { display: block; }
  .type-eon-core #tooltips div.outside div a { display: block; font-size: 12px; padding: 5px; }

  .type-eon-core #tooltips div.center-top   { right: 36%; top: 29%; }
  .type-eon-core #tooltips div.right-top    { right: 10%; top: 35%; }
  .type-eon-core #tooltips div.right-middle { right: 15%; top: 41.5%; }
  .type-eon-core #tooltips div.right-middle2 { right: 6%; top: 47%; }
  .type-eon-core #tooltips div.right-bottom { right: 12%; top: 60%; }
  .type-eon-core #tooltips div.left-top     { left:  13%; top: 35%; }
  .type-eon-core #tooltips div.left-middle  { left:  5%; top: 41.5%; }
  .type-eon-core #tooltips div.middle      { left:  17%; top: 46%; }
  .type-eon-core #tooltips div.left-bottom  { left:  18%; top: 60%; }

  .type-eon-core .action.tr { top: 29%; right: 32.8%; }
  .type-eon-core .action.br { top: 39%; right: 25%; }
  .type-eon-core .action.tl { top: 42%; left: 34%; }
  .type-eon-core .action.bl { top: 54.8%; left: 31.8%; }


}

/* //////////////////////////////// iphone5 landscape //////////////////////////////// */

@media screen and (min-width: 640px) {

	#vframe { margin-top: -30px; }
  .type-eon-core #vframe { margin-top: -50px; }

	#toggle { height: 500px; }
	a.btn { width: 50px; height: 50px; }
	#options { top: 10px; right: 10px; }

  a.start-btn { bottom: 110px !important; }
	a.start-btn span { }
	a.end-btn {  }
  .action { width: 55px; height: 55px; }

	#end .share { left: 13%; top: 30%; font-size: 14px;}
	#end a.start-btn { bottom: 45px !important; }

	#scrollbarWrap { bottom: -15px; }
	#scrollbar .tracker span { width: 40px; height: 40px; background-size: 40%; margin: -32px 0 0 -22px; }

	.switch-computer { left: 70px; }
	.switch-computer a:first-child { padding: 14px 8px 14px 12px; }
	.switch-computer a:last-child { padding: 14px 12px 14px 8px; }

	a.prev { bottom: 40px; }
	a.next { bottom: 40px; }

	div.inline h6 { font-size: 1.2em; margin: 0 0 15px 0; }
	div.inline p { font-size: 13px; line-height: 16px; }

	/* D4i Tooltips */

	.type-d-series .computer-cover { width: 37%; height: 400px; top: 14.8%; left: 31%; }

	.type-d-series #tooltips div.outside { width: 200px; }
	.type-d-series #tooltips .outside.active { display: block; }
	.type-d-series #tooltips div.outside div { display: block; }
	.type-d-series #tooltips div.outside div a { display: block; font-size: 12px; padding: 8px;}

	.type-d-series #tooltips div.center-top   { right: 36%; top: 29%; }
	.type-d-series #tooltips div.right-top    { right: 6%; top: 27%; }
	.type-d-series #tooltips div.right-middle { right: 6%; top: 41.5%; }
	.type-d-series #tooltips div.right-middle2 { right: 3%; top: 48%; }
	.type-d-series #tooltips div.right-bottom { right: 12%; top: 60%; }
	.type-d-series #tooltips div.left-top     { left:  22%; top: 29%; }
	.type-d-series #tooltips div.left-middle  { left:  6%; top: 41.5%; }
	.type-d-series #tooltips div.middle  	   { left:  17%; top: 46%; }
	.type-d-series #tooltips div.left-bottom  { left:  12%; top: 60%; }

   
	.type-d-series .action.tr { top: 29%; right: 32.8%; }
	.type-d-series .action.br { top: 56%; right: 32.5%; }
	.type-d-series .action.tl { top: 29%; left: 31.8%; }
	.type-d-series .action.bl { top: 54.8%; left: 31.8%; }

	/* Vyper and Zoop Tooltips */

	.type-vyper-zoop .computer-cover { width: 37%; height: 450px; top: 14.8%; left: 31%; }

	.type-vyper-zoop #tooltips div.outside { width: 200px; }
	.type-vyper-zoop #tooltips .outside.active { display: block; }
	.type-vyper-zoop #tooltips div.outside div { display: block; }
	.type-vyper-zoop #tooltips div.outside div a { display: block; font-size: 12px; padding: 8px;}

	.type-vyper-zoop #tooltips div.center-top   { right: 36%; top: 29%; }
	.type-vyper-zoop #tooltips div.right-top    { right: 6%; top: 27%; }
	.type-vyper-zoop #tooltips div.right-middle { right: 6%; top: 41.5%; }
	.type-vyper-zoop #tooltips div.right-middle2 { right: 3%; top: 48%; }
	.type-vyper-zoop #tooltips div.right-bottom { right: 12%; top: 60%; }
	.type-vyper-zoop #tooltips div.left-top     { left:  22%; top: 29%; }
	.type-vyper-zoop #tooltips div.left-middle  { left:  6%; top: 41.5%; }
	.type-vyper-zoop #tooltips div.middle  	   { left:  17%; top: 46%; }
	.type-vyper-zoop #tooltips div.left-bottom  { left:  12%; top: 60%; }

	.type-vyper-zoop .action.tr { top: 29%; right: 32.8%; }
	.type-vyper-zoop .action.br { top: 57%; right: 42.5%; }
	.type-vyper-zoop .action.tl { top: 43%; left: 35%; }
	.type-vyper-zoop .action.bl { top: 54.8%; left: 31.8%; }

  /* EON Core Tooltips */

  .type-eon-core .computer-cover { width: 48%; height: 400px; top: 18.5%; left: 24.5%; }

  .type-eon-core #tooltips div.center-top   { right: 36%; top: 29%; }
  .type-eon-core #tooltips div.right-top    { right: 18%; top: 30%; }
  .type-eon-core #tooltips div.right-middle { right: 17%; top: 38%; }
  .type-eon-core #tooltips div.right-middle2 { right: 7%; top: 50%; }
  .type-eon-core #tooltips div.right-bottom { right: 20%; top: 57%; }
  .type-eon-core #tooltips div.left-top     { left:  20%; top: 35%; }
  .type-eon-core #tooltips div.left-middle  { left:  17%; top: 38%; }
  .type-eon-core #tooltips div.middle      { left:  17%; top: 46%; }
  .type-eon-core #tooltips div.left-bottom  { left:  22%; top: 60%; }

}


/* //////////////////////////////// ipad portrait //////////////////////////////// */
@media screen and (min-width: 768px) {

	#vframe { margin-top: auto; }

  .type-eon-core #vframe { margin-top: -15px; }

	.btm-bar { display: block; }

	#toggle { height: 700px; }
	a.btn { width: 50px; height: 50px; background-size: 50px; }
	a.btn:hover { opacity: 0.8; -webkit-opacity: 0.8; filter: alpha(opacity=80); }
	#options { display: block; top: 10px; right: 20px; }
  .action { width: 70px; height: 70px; }

	a.start-btn { bottom: 110px !important; }
	a.start-btn span { padding: 15px 20px; color: #FFF; font-size: 18px; }

	#controllerWrap { top: 10px; }
	#scrollbar .tracker span { width: 40px; height: 40px; background-size: 50%; margin: -40px 0 0 -20px; }
	#scrollbarWrap { bottom: 40px; }
	#scrollbar { left: 6%; }

	a.prev { top: 37%; background-size: 55px !important; }
	a.next { top: 37%; background-size: 55px !important; }

	div.inline h6 { font-size: 1.3em; margin: 0 0 15px 0; }
	div.inline p { font-size: 14px; line-height: 18px; }

	#end .share { width: 650px; background: #666; left: 50%; margin-left: -350px; top: 40%; }
	#end .share p { text-align: center; font-size: 1.1em; line-height: 1.5em; color: #CCC; margin: 20px 30px 20px 30px; }
	#end .share a.share-btn { display: block; width: 40%; padding: 0px; background-color: #333; border-radius: 5px; -webkit-border-radius: 5px; color: #EEE; float: left; margin: 10px 5%; font-size: 1em; line-height: 1em;}

	/* D-Series Tooltips */

	.type-d-series .computer-cover { width: 36%; height: 500px; top: 15.5%; left: 32%; }

	.type-d-series #tooltips div.outside { width: 200px; }

	.type-d-series #tooltips .outside.active { display: block; }
	.type-d-series #tooltips div.outside div { display: block; }
	.type-d-series #tooltips div.outside div a { display: block; font-size: 12px; padding: 12px;}

	.type-d-series #tooltips div.center-top   { right: 36%; top: 29%; }
	.type-d-series #tooltips div.right-top    { right: 18%; top: 27%; }
	.type-d-series #tooltips div.right-middle { right: 12%; top: 41.5%; }
	.type-d-series #tooltips div.right-middle2 { right: 5%; top: 60%; }
	.type-d-series #tooltips div.right-bottom { right: 18%; top: 60%; }
	.type-d-series #tooltips div.left-top     { left:  22%; top: 29%; }
	.type-d-series #tooltips div.left-middle  { left:  12%; top: 41.5%; }
	.type-d-series #tooltips div.middle  	   { left:  17%; top: 46%; }
	.type-d-series #tooltips div.left-bottom  { left:  18%; top: 60%; }

	/* Vyper Zoop Tooltips */

	.type-vyper-zoop.computer-cover { width: 38%; height: 500px; top: 14.4%; left: 30.7%; }

	.type-vyper-zoop #tooltips div.outside { width: 200px; }

	.type-vyper-zoop #tooltips .outside.active { display: block; }
	.type-vyper-zoop #tooltips div.outside div { display: block; }
	.type-vyper-zoop #tooltips div.outside div a { display: block; font-size: 12px; padding: 12px;}

	.type-vyper-zoop #tooltips div.center-top   { right: 36%; top: 29%; }
	.type-vyper-zoop #tooltips div.right-top    { right: 18%; top: 27%; }
	.type-vyper-zoop #tooltips div.right-middle { right: 12%; top: 41.5%; }
	.type-vyper-zoop #tooltips div.right-middle2 { right: 5%; top: 60%; }
	.type-vyper-zoop #tooltips div.right-bottom { right: 18%; top: 60%; }
	.type-vyper-zoop #tooltips div.left-top     { left:  22%; top: 29%; }
	.type-vyper-zoop #tooltips div.left-middle  { left:  12%; top: 41.5%; }
	.type-vyper-zoop #tooltips div.middle  	   { left:  17%; top: 46%; }
	.type-vyper-zoop #tooltips div.left-bottom  { left:  18%; top: 60%; }
 
  .type-vyper-zoop .action.tl { top: 44.5%; left: 35.5%; }
	.type-vyper-zoop .action.br { top: 58.5%; right: 42.5%; }

  /* EON Core Tooltips */

  .type-eon-core.computer-cover { width: 38%; height: 500px; top: 14.4%; left: 30.7%; }

  .type-eon-core #tooltips div.center-top   { right: 36%; top: 29%; }
  .type-eon-core #tooltips div.right-top    { right: 22%; top: 30%; }
  .type-eon-core #tooltips div.right-middle { right: 20%; top: 38%; }
  .type-eon-core #tooltips div.right-middle2 { right: 6%; top: 50%; }
  .type-eon-core #tooltips div.right-bottom { right: 23%; top: 57%; }
  .type-eon-core #tooltips div.left-top     { left:  24%; top: 37%; }
  .type-eon-core #tooltips div.left-middle  { left:  20%; top: 38%; }
  .type-eon-core #tooltips div.middle      { left:  17%; top: 46%; }
  .type-eon-core #tooltips div.left-bottom  { left:  25%; top: 58%; }

}

/* //////////////////////////////// full wide version //////////////////////////////// */

@media screen and (min-width: 960px) {


	#scrollbar .tracker span { width: 40px; height: 40px; background-size: 50%; margin: -40px 0 0 -20px; }

	a.btn { width: 50px; height: 50px; background-size: 50px; }

	#controllerWrap { top: 10px; }

	#scrollbarWrap { bottom: 50px; }

	a.start-btn { height: 50px !important; bottom: 140px !important; }

  #end a.start-btn { bottom: 18% !important; }

  .action { width: 65px; height: 65px; }

	#end .share { width: 650px; left: 50%; margin-left: -325px; top: 35%; }

	a.prev { width: 100px; height: 200px; top: 37%; background-size: 55px !important; }
	a.next { width: 100px; height: 200px; top: 37%; background-size: 55px !important; }

	.switch-computer { left: 70px; }
	.switch-computer a:first-child { padding: 14px 8px 14px 12px; }
	.switch-computer a:last-child { padding: 14px 12px 14px 8px; }

	/* D-Series Tooltips */

	.type-d-series #tooltips div.outside { width: 200px; }
	.type-d-series #tooltips .outside.active { display: block; }
	.type-d-series #tooltips div.outside div a { display: block; font-size: 12px; padding: 12px;}

	.type-d-series #tooltips div.center-top   { right: 36%; top: 29%; }
	.type-d-series #tooltips div.right-top    { right: 25%; top: 33%; }
	.type-d-series #tooltips div.right-middle { right: 21%; top: 41.5%; }
	.type-d-series #tooltips div.right-middle2 { right: 13%; top: 57%; }
	.type-d-series #tooltips div.right-bottom { right: 24%; top: 58%; }
	.type-d-series #tooltips div.left-top     { left:  22%; top: 29%; }
	.type-d-series #tooltips div.left-middle  { left:  20%; top: 41.5%; }
	.type-d-series #tooltips div.middle  	   { left:  17%; top: 46%; }
	.type-d-series #tooltips div.left-bottom  { left:  24%; top: 58%; }

	/* Vyper and Zoop Tooltips */

	.type-vyper-zoop .action.br { width: 70px; height: 70px; top: 59%; right: 43%; }

	.type-vyper-zoop #tooltips div.outside { width: 200px; }
	.type-vyper-zoop #tooltips .outside.active { display: block; }
	.type-vyper-zoop #tooltips div.outside div a { display: block; font-size: 12px; padding: 12px;}

	.type-vyper-zoop #tooltips div.center-top   { right: 36%; top: 29%; }
	.type-vyper-zoop #tooltips div.right-top    { right: 20%; top: 33%; }
	.type-vyper-zoop #tooltips div.right-middle { right: 21%; top: 41.5%; }
	.type-vyper-zoop #tooltips div.right-middle2 { right: 13%; top: 57%; }
	.type-vyper-zoop #tooltips div.right-bottom { right: 20%; top: 58%; }
	.type-vyper-zoop #tooltips div.left-top     { left:  22%; top: 29%; }
	.type-vyper-zoop #tooltips div.left-middle  { left:  16%; top: 41.5%; }
	.type-vyper-zoop #tooltips div.middle  	   { left:  17%; top: 46%; }
	.type-vyper-zoop #tooltips div.left-bottom  { left:  20%; top: 58%; }

  /* EON CORE */

  .type-eon-core #vframe { margin-top: 0px; }

  .type-eon-core #tooltips div.outside { width: 200px; }
  .type-eon-core #tooltips .outside.active { display: block; }
  .type-eon-core #tooltips div.outside div a { display: block; font-size: 12px; padding: 12px;}

  .type-eon-core #tooltips div.center-top   { right: 36%; top: 29%; }
  .type-eon-core #tooltips div.right-top    { right: 17%; top: 30%; }
  .type-eon-core #tooltips div.right-middle { right: 15%; top: 38%; }
  .type-eon-core #tooltips div.right-middle2 { right: 6%; top: 50%; }
  .type-eon-core #tooltips div.right-bottom { right: 18%; top: 57%; }
  .type-eon-core #tooltips div.left-top     { left:  18%; top: 39%; }
  .type-eon-core #tooltips div.left-middle  { left:  15%; top: 40%; }
  .type-eon-core #tooltips div.middle      { left:  17%; top: 46%; }
  .type-eon-core #tooltips div.left-bottom  { left:  20%; top: 58%; }

  .type-eon-core .action.br { top: 41%; right: 27%; }


}

/* //////////////////////////////// very full wide version //////////////////////////////// */

@media screen and (min-width: 1200px) {

    a.start-btn { bottom: 100px; }

}

@media screen and (orientation: landscape) and (min-width: 800px) and (max-height: 600px)  {
	.btm-bar { display: none; }
	#vframe { margin-top: -60px; }
	#scrollbarWrap { bottom: 0px; }
	a.start-btn { bottom: 80px; }
}


#controllerWrap, a.advance, a.next, div.start {
	display: none;
}