/* Task Tutorial CSS */

body { -webkit-touch-callout: none !important; }

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

#taskContainer { margin: 0 auto; overflow: hidden; position: relative; width: 100%; }

#taskContainer.short .task h3 { min-height: auto !important; }

.type-task .middle[class] { vertical-align: top; }
.type-task .inner { padding-bottom: auto !important; }

.switch-computer { display: none; }

.task { display: none; }
.task.active { display: block; }

.type-d-series .display { margin: 0 auto; overflow: hidden; position: relative; width: 350px; height: 350px; }
.type-d-series .display img { margin: 103px 0 0 104px !important; position: absolute; z-index: 600; display: auto !important; width: auto !important; height: auto !important; }

.type-vyper-zoop .display { margin: 0 auto; position: relative; width: 350px; height: 350px; }
.type-vyper-zoop .display img { position: absolute; z-index: 600; display: auto !important; width: auto !important; height: auto !important; }

.type-eon-core .display { margin: 0 auto; position: relative; width: 280px; height: 220px; }
.type-eon-core .display img { position: absolute; z-index: 600; display: auto !important; width: auto !important; height: auto !important; }

/* Task Title */
.task-title h2 { text-align: center; overflow: hidden; margin: 10px 0 8px 0; padding: 10px; font-size: 1em;}
.task-title h2 span { padding: 20px 0 20px 50px; background-size: 40px !important; margin: 0 auto; }

.task-title.basic h2 span {       background: url(../img/icons/icon-basic.svg)            no-repeat left center; }
.task-title.dive-air h2 span {    background: url(../img/icons/icon-dive-air.svg)         no-repeat left center; }
.task-title.pair h2 span {        background: url(../img/icons/icon-trans.svg)            no-repeat left center; }
.task-title.dive-nitrox h2 span { background: url(../img/icons/icon-dive-nitrox.svg)      no-repeat left center; }
.task-title.dive-free h2 span {   background: url(../img/icons/icon-dive-free.svg)        no-repeat left center; }
.task-title.logbook h2 span {     background: url(../img/icons/icon-logbook.svg)          no-repeat left center; }
.task-title.day-history h2 span { background: url(../img/icons/icon-freedive-logbook.svg) no-repeat left center; }
.task-title.safe h2 span {        background: url(../img/icons/icon-safe.svg)             no-repeat left center; }
.task-title.connect h2 span {     background: url(../img/icons/icon-share.svg)            no-repeat left center; }


/* Display  */

.comp-bkg { position: absolute; z-index: 700; width: 100%; height: 100%; pointer-events: none;}
.type-d4i .comp-bkg { background: url(../img/tasks/d4i-bkg3.png) no-repeat top; background-size: 100%; }
.type-vyper .comp-bkg { background: url(../img/tasks/vyper-bkg.png) no-repeat top; background-size: 100%; }
.type-zoop .comp-bkg { background: url(../img/tasks/zoop-bkg.png) no-repeat top; background-size: 100%; }
.type-eon-core .comp-bkg { background: url(../img/tasks/eon-core-bkg.png) no-repeat top; background-size: 100%; }

/* Buttons D-Series */

.type-d-series a.comp-btn { width: 50px; height: 50px; position: absolute; z-index: 500; background: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: visible !important; }
.type-d-series a.comp-btn:hover { cursor: pointer !important; }

/* Buttons EON CORE */

.type-eon-core a.comp-btn { width: 40px; height: 50px; position: absolute; z-index: 500; background: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: visible !important; }
.type-eon-core a.comp-btn:hover { cursor: pointer !important; }

/* Vyper and Zoop Buttons */

.type-vyper-zoop a.comp-btn { width: 50px; height: 50px; position: absolute; z-index: 2000; background: url(../img/tasks/active2.png) no-repeat center center; background-size: 100%; animation: pulse2 2s infinite; -webkit-animation: pulse2 2s infinite; -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: visible !important; }
.type-vyper-zoop a.comp-btn:hover { cursor: pointer !important; }

/* Highlight Buttons */

.type-d-series .highlight { width: 80px; height: 80px; position: absolute; z-index: 1; background: url(../img/tasks/active.png) no-repeat center center; background-size: 70%; animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite; visibility: visible !important; }
.type-eon-core .highlight { width: 60px; height: 60px; position: absolute; z-index: 1; background: url(../img/tasks/active.png) no-repeat center center; background-size: 70%; animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite; visibility: visible !important; }


@keyframes pulse {
        0% { background-size: 50%; }
       50% { background-size: 70%; }
      100% { background-size: 50%; }
}

@-webkit-keyframes pulse {
        0% { background-size: 50%; }
       50% { background-size: 70%; }
      100% { background-size: 50%; }
}

@keyframes pulse2 {
        0% { background-size: 80%; }
       50% { background-size: 100%; }
      100% { background-size: 80%; }
}

@-webkit-keyframes pulse2 {
        0% { background-size: 80%; }
       50% { background-size: 100%; }
      100% { background-size: 80%; }
}

/* D-Series Hint Images */

.hold-bl { width: 40px; height: 40px; background: url(../img/tasks/hold-bl.png) no-repeat; position: absolute; z-index: 400; }
.hold-tr { width: 40px; height: 40px; background: url(../img/tasks/hold-tr.png) no-repeat; position: absolute; z-index: 400; }

.press-bl { width: 40px; height: 40px; background: url(../img/tasks/press-bl.png) no-repeat; position: absolute; z-index: 400; }
.press-br { width: 40px; height: 40px; background: url(../img/tasks/press-br.png) no-repeat; position: absolute; z-index: 400; }
.press-tr { width: 40px; height: 40px; background: url(../img/tasks/press-tr.png) no-repeat; position: absolute; z-index: 400; }

/* Vyper and Zoop Hint Images */

.type-vyper-zoop .hold-mode { width: 40px; height: 40px; background: url(../img/tasks/hold-mode.png) no-repeat; position: absolute; z-index: 1000; }
.type-vyper-zoop .hold-select { width: 40px; height: 40px; background: url(../img/tasks/hold-select.png) no-repeat; position: absolute; z-index: 1000; }
.type-vyper-zoop .hold-down { width: 40px; height: 40px; background: url(../img/tasks/hold-down.png) no-repeat; position: absolute; z-index: 1000; }
.type-vyper-zoop .hold-up { width: 40px; height: 40px; background: url(../img/tasks/hold-up.png) no-repeat; position: absolute; z-index: 1000; }

.type-vyper-zoop .press-down { width: 40px; height: 40px; background: url(../img/tasks/press-down.png) no-repeat; position: absolute; z-index: 800; margin: 220px 0px 0px 35px; }
.type-vyper-zoop .press-up { width: 40px; height: 40px; background: url(../img/tasks/press-up.png) no-repeat; position: absolute; z-index: 800; margin: 220px 0px 0px 170px; }
.type-vyper-zoop .press-mode { width: 40px; height: 40px; background: url(../img/tasks/press-mode.png) no-repeat; position: absolute; z-index: 800; }
.type-vyper-zoop .press-select { width: 40px; height: 40px; background: url(../img/tasks/press-select.png) no-repeat; position: absolute; z-index: 800; }


/* Slides and Caption */

.task h3 a { color: #FFF; text-decoration: underline; }
.task h3 strong { font-weight: bold; }

a.download { clear: both; margin: 0 auto; background: url(../img/ui/download.svg) no-repeat 10px 10px; max-width: 100%; text-align: center;}

.task a.next-task h3 { float: right; position: relative; float: left; text-align: center; margin: 20px 0 20px 0; }
.task a.next-task h3 span { background: url(../img/ui/next.svg) no-repeat center; background-size: 100%; padding: 0; float: right; width: 40px; height: 40px; display: block; margin: -14px 0px 0 5px; }
.task a.next-task { float: right; }

/* Extras */

.transmitter { position: absolute; z-index: 300; width: 50px; height: 70px; background: url(../img/tasks/sync/flash.png) no-repeat; 
animation: fade 1s infinite; -webkit-animation: fade 1s infinite; }

.no-fly { display: block; position: absolute; z-index: 300; width: 100px; height: 50px; background: url(../img/tasks/no-fly.png) no-repeat; background-size: 50%; }
.attention { display: block; position: absolute; z-index: 300; width: 100px; height: 50px; background: url(../img/tasks/attention.png) no-repeat; background-size: 70%;  }
.error { display: block; position: absolute; z-index: 300; width: 100px; height: 50px; background: url(../img/tasks/er.png) no-repeat; background-size: 70%; }
.personal-adjust { display: block; position: absolute; z-index: 300; width: 40px; height: 150px; background: url(../img/tasks/personal-adjust.png) no-repeat; background-size: 90%; }*/

.type-d-series .outline-bl { display: block; position: absolute; z-index: 700; width: 80px; height: 40px; border: 2px dashed #E61A1A; top: 205px; left: 100px; }
.type-d-series .outline-br { display: block; position: absolute; z-index: 700; width: 80px; height: 40px; border: 2px dashed #E61A1A; top: 205px; right: 100px; }
.type-d-series .outline-tl { display: block; position: absolute; z-index: 700; width: 40px; height: 40px; border: 2px dashed #E61A1A; top: 100px; left: 100px; }
.type-d-series .outline-tr { display: block; position: absolute; z-index: 700; width: 40px; height: 40px; border: 2px dashed #E61A1A; top: 100px; right: 100px; }

/* Extras Vyper and Zoop Specific */

.type-vyper-zoop .outline-bl { display: block; position: absolute; z-index: 3000; width: 80px; height: 40px; border: 2px dashed #E61A1A; top: 205px; left: 100px; }
.type-vyper-zoop .outline-br { display: block; position: absolute; z-index: 3000; width: 80px; height: 40px; border: 2px dashed #E61A1A; top: 205px; right: 100px; }

.type-vyper-zoop .outline-tl { display: block; position: absolute; z-index: 3000; width: 40px; height: 40px; border: 2px dashed #E61A1A; top: 100px; left: 100px; }
.type-vyper-zoop .outline-tr { display: block; position: absolute; z-index: 3000; width: 40px; height: 40px; border: 2px dashed #E61A1A; top: 100px; right: 100px; }

.type-vyper-zoop .outline-ml { display: block; position: absolute; z-index: 3000; width: 80px; height: 40px; border: 2px dashed #E61A1A; top: 123px; left: 60px; }
.type-vyper-zoop .outline-mr { display: block; position: absolute; z-index: 3000; width: 78px; height: 40px; border: 2px dashed #E61A1A; top: 123px; right: 76px; }

@keyframes fade {
    0%   { opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
    50%   { opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
    100% { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
}

@-webkit-keyframes fade {
    0%   { opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
    50%   { opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
    100% { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
}



/* Progress Bar */
.progress-bar { width: 100%; height: 4px; overflow: hidden; background: #CCC; display: block; margin: 0 0 15px 0; position: relative; }
.progress-bar span { background: #E61A1A; float: left; margin: 0; padding: 0; height: 5px; }
.progress-bar span.done { background: #009900; } 

/* Back and Next Buttons */

a.back { width: 50px; height: 50px; overflow: hidden; display: block; opacity: 0.5; -webkit-opacity: 0.5; filter: alpha(opacity=50); background: url(../img/ui/prev.svg) no-repeat center; background-size: 100%; position: absolute; z-index: 600; top: 15px; left: 10px; }
a.back:hover { opacity: 0.8; -webkit-opacity: 0.8; filter: alpha(opacity=80); cursor: pointer; }
a.back.disabled { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); pointer-events: none; cursor: default }

a.next { width: 50px; height: 50px; overflow: hidden; display: block; opacity: 0.5; -webkit-opacity: 0.5; filter: alpha(opacity=50); background: url(../img/ui/next.svg) no-repeat center; background-size: 100%; position: absolute; z-index: 600; top: 15px; right: 10px; }
a.next:hover { opacity: 0.8; -webkit-opacity: 0.8; filter: alpha(opacity=80); cursor: pointer; }
a.next.disabled { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); pointer-events: none; cursor: default; display: none; }


/* Hold button tooltip */
.hold-tip { 
  display: none; position: absolute; z-index: 3000; 
  width: 180px; top: 38%; left: 45%; margin-left: -90px; 
  background: url(../img/ui/warning2.svg) no-repeat 8px 10px; background-color: #0099CC;  
  padding: 15px 10px 15px 55px; font-size: 12px; line-height: 20px; 
  border-radius: 5px; -webkit-border-radius: 5px; 
  text-align: center; pointer-events: none; color: #FFF;
}

.hold-tip-close { display: none; float: left; font-size: 21px; font-weight: 700; line-height: 1; text-shadow: 0 1px 0 #fff; color: #FFF; margin: -5px 10px 0 0;}
.hidden { display: none; }

/* Keyboard Hint */
.keyboard-hint { display: none !important; }


/* EON Menu */

.eon-menu { 
  position: absolute; z-index: 605; display: block; overflow: hidden;
  right: 55px; top: 55px; width: 155px; height: 115px; 
  background: url(../img/tasks-eon-core/eon-menu-bkg-edge.svg) no-repeat right center; background-size: 4px; background-color: #000;
  font-family: "suuntoui", "suuntoregular", "HelveticaNeue", "Helvetica Neue", helvetica, arial, sans-serif !important;
}

.eon-menu ul { margin-top: 5px; padding: 0 5px 0 0; list-style: none; height: 110px; overflow: hidden; }

.eon-menu ul li { color: #EEE; padding: 10px 5px; text-align: right; font-size: 12px; letter-spacing: 0.05em; }
.eon-menu ul li.active { color: #66FFFF; font-size: 16px; font-weight: normal; }

/* Dive Logs Screen */

.eon-menu ul li.log-dive { padding: 5px; font-size: 14px; }
.eon-menu ul li.log-dive.active { font-size: 20px; }

.eon-menu ul li.log-dive p.log-dive-details { clear: both; color: #CCC; font-size: 10px; padding: 0; margin: 0; text-align: right; font-weight: normal; }
.eon-menu ul li.log-dive p.log-dive-details span { color: #FFF; font-size: 14px; margin: 0; padding: 0; position: relative; }
.eon-menu ul li.log-dive p.log-dive-details span.green { color: #98FB98; } 

/* Gas Mix Screen  */

.eon-menu ul li p.gas-mix { float: left; margin: 0 0 0 5px; color: #66FFFF; font-size: 10px; line-height: 10px; text-align: left; }
.eon-menu ul li p.gas-mix.grey { color: #999; }
.eon-menu ul li p.gas-mix.grey span { color: #66FFFF; font-size: 10px; margin: 0 5px; padding: 0; position: relative; text-align: right; }
.eon-menu ul li p.gas-mix.grey sup { font-size: smaller !important; vertical-align: sub !important; }

.eon-menu ul li p.gas-peram { float: right; text-align: center; margin: 0 0 0 10px; color: #999; font-size: 10px; line-height: 10px; margin-top: -10px; }
.eon-menu ul li p.gas-peram span { position: relative; margin: 4px 0 0 0; padding: 0; font-size: 16px; color: #FFF; }
.eon-menu ul li p.gas-peram span.active { color: #66FFFF; }

.eon-menu .pod-info { position: absolute; z-index: 100; left: 5px; top: 25px; }
.eon-menu .pod-info p { font-size: 12px; color: #66FFFF; margin: 2px 0; text-align: left; clear: both; display: block; overflow: hidden; }
.eon-menu .pod-info p span { color: #999; padding: 0; margin: 0; font-size: 12px; display: inline; position: relative; }
.eon-menu .pod-info p.shift { margin-left: 25px; }
.eon-menu .pod-info p img { width: 20px; }

/* Section Name (Top Left) */

.eon-menu p.section-name { 
  position: absolute; z-index: 650;
  top: 3px; left: 5px;
  color: #CCC; font-size: 10px; text-align: left;
  padding: 0 0 0 10px; margin: 0;
  background: url(../img/tasks-eon-core/section-arrow.svg) no-repeat left center; background-size: 6px;
}

.type-eon-core .task .display-short { height: 150px; margin-top: 50px; }
.type-eon-core .task .display-short img { margin: 0 !important; width: 100% !important; }

.type-eon-core .task img.battery-ok { width: 20px !important; height: 15px !important; margin: 0 !important; float: left; position: relative; display: inline; }

/* //////////////////////////////////////////////////////////////////////////// */
/* /////////////////////// NEW FIXED TASK DESCRIPTIONS //////////////////////// */
/* //////////////////////////////////////////////////////////////////////////// */


/* Captions Container */

.task .caption { position: fixed; z-index: 1000; bottom: 50px; left: 0; width: 100%; background: #0099CC; }

.task .caption.completed { 
  background: #009900; 
}

.task .caption-inner { padding: 10px; overflow: hidden; }

.task .caption h3 { color: #FFF; font-size: 12px; line-height: 16px; margin: 0 auto 0 auto !important; margin: 0; min-height: auto !important; max-width: 1000px; }

.task .caption h3 span { display: none; }

.task .caption span.num { 
  display: none; position: absolute; padding: 0; 
  width: 40px; height: 40px; line-height: 40px; 
  top: 0; left: 50%; margin: -20px 0 0 -20px; 
  background: #FFF; color: #0099CC; font-size: 18px; 
  border-radius: 100px; -webkit-border-radius: 100px;
}

.task .caption a.next-task { 
  float: right; display: inline-block; 
  background: url(../img/ui/menu.svg) no-repeat right center; background-size: 40px; 
  height: 40px; padding-right: 50px; line-height: 40px; margin-right: 10px; 
  font-size: 12px; text-transform: uppercase; 
}
.task .caption a.next-task:hover { color: #FFF; }

.task .caption span.done { float: left; display: inline-block; width: 40px; height: 40px; background: url(../img/ui/tick3.svg) no-repeat left center; background-size: 40px; margin-left: 10px; } 

.task .caption a.download { background-color: rgba(0,0,0,0); background: url(../img/ui/guide2.svg) no-repeat left 10px center; background-size: 30px; border: 1px solid rgba(255,255,255,0.7); color: #FFF; padding: 10px 10px 10px 50px; }
.task .caption a.link { background-color: rgba(0,0,0,0); background: url(../img/ui/link2.svg) no-repeat left 10px center; background-size: 30px; border: 1px solid rgba(255,255,255,0.7); color: #FFF; padding: 10px 10px 10px 50px; }







/* ////////////////////////////////  mobile version //////////////////////////////// */

@media screen and (min-width: 1px) {
  
  .hold-tip { top: 45%; left: 40%; }
  
  a.download { position: relative; }

  /* Display and Buttons Layout - D-Series */
  
  .type-d-series .display { width: 240px; height: 320px; }
  .type-d-series .display-short { height: 180px; }
  .type-d-series .display-short .comp-bkg { background-size: 100% !important; background-position: center top 10% !important; }
  .type-d-series .display img { margin: 29.6% 0px 0px 29.5% !important; width: 40% !important; }
  
  .type-d-series a.comp-btn.tr { top: 45px; right: 25px; }
  .type-d-series a.comp-btn.tr:active { top: 45px; right: 25px; }
  .type-d-series a.comp-btn.br { top: 140px; right: 25px; }
  .type-d-series a.comp-btn.br:active { top: 140px; right: 25px; }
  .type-d-series a.comp-btn.tl { top: 45px; left: 25px; }
  .type-d-series a.comp-btn.tl:active { top: 45px; left: 25px; }
  .type-d-series a.comp-btn.bl { top: 140px; left: 25px; }
  .type-d-series a.comp-btn.bl:active { top: 140px; left: 25px; }
  
  .type-d-series a.comp-btn.mode { top: 45px; right: 25px; }
  .type-d-series a.comp-btn.mode:active { top: 45px; right: 25px; }
  .type-d-series a.comp-btn.up { top: 140px; right: 25px; }
  .type-d-series a.comp-btn.up:active { top: 140px; right: 25px; }
  .type-d-series a.comp-btn.select { top: 45px; left: 25px; }
  .type-d-series a.comp-btn.select:active { top: 45px; left: 25px; }
  .type-d-series a.comp-btn.down { top: 140px; left: 25px; }
  .type-d-series a.comp-btn.down:active { top: 140px; left: 25px; }
  
  .type-d-series .highlight.tr { top: 33px; right: 13px; }
  .type-d-series .highlight.br { top: 125px; right: 13px; }
  .type-d-series .highlight.tl { top: 33px; left: 13px; }
  .type-d-series .highlight.bl { top: 125px; left: 13px; }
  
  .type-d-series .highlight.mode { top: 33px; right: 13px; }
  .type-d-series .highlight.up { top: 125px; right: 13px; }
  .type-d-series .highlight.select { top: 33px; left: 13px; }
  .type-d-series .highlight.down { top: 125px; left: 13px; }
  
  .type-d-series .outline-bl { width: 60px; height: 30px; top: 140px; left: 70px; }
  .type-d-series .outline-br { width: 60px; height: 30px; top: 140px; right: 70px; }
  .type-d-series .outline-tl { width: 40px; height: 30px; top: 65px; left: 60px; }
  .type-d-series .outline-tr { width: 40px; height: 30px; top: 65px; right: 60px; }
  
  .type-d-series .hold-bl { margin: 190px 0 0 0px !important; }
  .type-d-series .hold-tr { margin: 25px 0 0 200px !important; }
  
  .type-d-series .press-bl { margin: 240px 0 0 5px !important; }
  .type-d-series .press-br { margin: 240px 0px 0 250px !important; }
  .type-d-series .press-tr { margin: 50px 0 0 250px !important; }
  
  .type-d-series .transmitter { top: 170px; left: 0; }
  .type-d-series .no-fly { top: 0px; left: 0px; right: auto; }
  .type-d-series .attention { top: 0px; left: auto; right: -50px; }
  .type-d-series .error { top: 0px; left: auto; right: -50px; }

  /* Display and Buttons Layout - Vyper and Zoop  */
  
  .type-vyper-zoop .display { width: 250px; height: 350px; }
  .type-vyper-zoop .display-short { height: 180px; }
  .type-vyper-zoop .display-short .comp-bkg { background-size: 100% !important; }
  .type-vyper-zoop .display img { margin: 20.5% 25% !important; width: 120px !important; }
  
  .type-vyper-zoop a.comp-btn.select { top: 100px; left: 25px; }
  .type-vyper-zoop a.comp-btn.mode { top: 100px; right: 27px; }
  .type-vyper-zoop a.comp-btn.up { top: 170px; right: 75px; }
  .type-vyper-zoop a.comp-btn.down { top: 170px; left: 72px; }
  
  .type-vyper-zoop .outline-bl { width: 65px; height: 35px; top: 140px; left: 65px; }
  .type-vyper-zoop .outline-br { width: 60px; height: 45px; top: 170px; right: 75px; }
  .type-vyper-zoop .outline-tl { width: 50px; height: 35px; top: 55px; left: 60px; }
  .type-vyper-zoop .outline-tr { width: 70px; height: 35px; top: 55px; right: 70px; }
  .type-vyper-zoop .outline-ml { width: 80px; height: 40px; top: 123px; left: 60px; }
  .type-vyper-zoop .outline-mr { width: 78px; height: 40px; top: 123px; right: 76px; }
  
  .type-vyper-zoop .hold-mode { margin: 105px 0px 0px 230px; }
  .type-vyper-zoop .hold-select { margin: 105px 0px 0px -25px; }
  .type-vyper-zoop .hold-down { margin: 220px 0px 0px 40px; }
  .type-vyper-zoop .hold-up { margin: 220px 0px 0px 165px; }
  
  .type-vyper-zoop .press-down{ margin: 220px 0px 0px 40px; }
  .type-vyper-zoop .press-up { margin: 220px 0px 0px 170px; }
  .type-vyper-zoop .press-mode { margin: 110px 0px 0px 230px; }
  .type-vyper-zoop .press-select { margin: 110px 0px 0px -22px; }
  
  .type-vyper-zoop .transmitter { top: 170px; left: 0; }
  .type-vyper-zoop .no-fly { top: 5px; left: 25px; right: auto; }
  .type-vyper-zoop .attention { top: 0; left: auto; right: -10px; }
  .type-vyper-zoop .error { top: 240px; left: auto; right: -20px; }
  .type-vyper-zoop .personal-adjust { top: 120px; left: 0px; background-size: 70%; }

  /* Display and Buttons Layout - EON Core */
  
  .type-eon-core .display { width: 280px; height: 220px; margin-top: 40px; }
  .type-eon-core .display-short .comp-bkg { background-size: 100% !important; background-position: center top 10% !important; margin-top: 60px; }

  .type-eon-core .display img { margin: 17.5% 0px 0px 24.5% !important; width: 58% !important; }
  
  .type-eon-core a.comp-btn { background: url(../img/tasks/eon-core-button.png) no-repeat center; z-index: 200; background-size: 15px; width: 40px; height: 40px; padding: 0;}
  .type-eon-core a.comp-btn.top { top: 38px; right: -5px; }
  .type-eon-core a.comp-btn.top:active { top: 38px; right: -3px; }
  .type-eon-core a.comp-btn.mid { top: 91px; right: -7px; }
  .type-eon-core a.comp-btn.mid:active { top: 91px; right: -5px; }
  .type-eon-core a.comp-btn.btm { top: 145px; right: -5px; }
  .type-eon-core a.comp-btn.btm:active { top: 145px; right: -3px; }
  
  .type-eon-core .highlight.top { top: 27px; right: -20px; }
  .type-eon-core .highlight.mid{ top: 80px; right: -20px; }
  .type-eon-core .highlight.btm { top: 135px; right: -20px; }

  /* Dive Logs Screen */
  
  .eon-menu ul li.log-dive { padding: 3px 5px; font-size: 10px; }
  .eon-menu ul li.log-dive.active { font-size: 14px; }
  .eon-menu ul li.log-dive p.log-dive-details { font-size: 8px; }
  .eon-menu ul li.log-dive p.log-dive-details span { font-size: 12px; }
    
}

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

  .task-title h2 { font-size: 1.1em; padding: 20px 0; margin: 0;}
  .task-title h2 span { background-size: 40px !important; padding: 20px 0 20px 50px; }
  
  .hold-tip { top: 45%; left: 40%; }
  
  .progress-bar { margin-bottom: 20px; }

  /* New Captions */

  .task .caption-inner { padding: 20px; }
  .task .caption h3 { font-size: 14px; line-height: 18px; }
  
  /* Display and Buttons Layout - D-Series */
  
  .type-d-series .display { width: 340px; height: 450px;  }
  .type-d-series .display img { margin: 29.3% 0px 0px 29.5% !important; width: 40% !important; }
  .type-d-series .display-short { height: 220px; }
  .type-d-series .display-short .comp-bkg { height: 250px; background-size: 70% !important;}
  
  .type-d-series a.comp-btn.tr { top: 72px; right: 38px; }
  .type-d-series a.comp-btn.tr:active { top: 76px; right: 43px; }
  .type-d-series a.comp-btn.br { top: 219px; right: 39px; }
  .type-d-series a.comp-btn.br:active { top: 221px; right: 43px; }
  .type-d-series a.comp-btn.tl { top: 72px; left: 36px; }
  .type-d-series a.comp-btn.tl:active { top: 76px; left: 42px; }
  .type-d-series a.comp-btn.bl { top: 218px; left: 36px; }
  .type-d-series a.comp-btn.bl:active { top: 218px; left: 40px; }
  
  .type-d-series a.comp-btn.mode { top: 72px; right: 38px; }
  .type-d-series a.comp-btn.mode:active { top: 76px; right: 43px; }
  .type-d-series a.comp-btn.up { top: 219px; right: 39px; }
  .type-d-series a.comp-btn.up:active { top: 221px; right: 43px; }
  .type-d-series a.comp-btn.select { top: 72px; left: 36px; }
  .type-d-series a.comp-btn.select:active { top: 76px; left: 42px; }
  .type-d-series a.comp-btn.down { top: 218px; left: 36px; }
  .type-d-series a.comp-btn.down:active { top: 218px; left: 40px; }
  
  .type-d-series .highlight.tr { top: 63px; right: 30px; }
  .type-d-series .highlight.br { top: 200px; right: 30px; }
  .type-d-series .highlight.tl { top: 64px; left: 28px; }
  .type-d-series .highlight.bl { top: 200px; left: 28px; }
  
  .type-d-series .highlight.mode { top: 63px; right: 30px; }
  .type-d-series .highlight.up { top: 200px; right: 30px; }
  .type-d-series .highlight.select { top: 64px; left: 28px; }
  .type-d-series .highlight.down { top: 200px; left: 28px; }
  
  .type-d-series .outline-bl { width: 80px; height: 40px; top: 200px; left: 100px; }
  .type-d-series .outline-br { width: 80px; height: 40px; top: 200px; right: 100px; }
  .type-d-series .outline-tl { width: 40px; height: 30px; top: 100px; left: 100px; }
  .type-d-series .outline-tr { width: 40px; height: 30px; top: 100px; right: 100px; }
  
  .type-d-series .hold-bl { margin: 250px 0 0 5px !important; }
  .type-d-series .hold-tr { margin: 50px 0 0 290px !important; }
  .type-d-series .press-bl { margin: 250px 0 0 5px !important; }
  .type-d-series .press-br { margin: 260px 0px 0 290px !important; }
  .type-d-series .press-tr { margin: 50px 0 0 290px !important; }
  
  .type-d-series .outline-bl { display: block;}
  .type-d-series .outline-br { display: block;}
  .type-d-series .outline-tl { display: block;}
  .type-d-series .outline-tr { display: block;}
  
  .type-d-series .transmitter { top: 250px; left: 20px; }
  .type-d-series .no-fly { top: 50px; left: 0px; right: auto; }
  .type-d-series .attention { top: 50px; left: auto; right: -30px; }
  .type-d-series .error { top: 50px; left: auto; right: -30px; }
  
  /* Display and Buttons Layout - Vyper and Zoop  */
  
  .type-vyper-zoop .display { width: 300px; height: 320px; }
  .type-vyper-zoop .display-short { height: 220px; }
  .type-vyper-zoop .display img { margin: 20.5% 25% !important; width: 145px !important; }
  
  .type-vyper-zoop a.comp-btn.select { top: 125px; left: 35px; }
  .type-vyper-zoop a.comp-btn.mode { top: 125px; right: 37px; }
  .type-vyper-zoop a.comp-btn.up { top: 210px; right: 95px; }
  .type-vyper-zoop a.comp-btn.down { top: 210px; left: 90px; }
  
  .type-vyper-zoop .hold-mode { margin: 130px 0px 0px 275px; }
  .type-vyper-zoop .hold-select { margin: 130px 0px 0px -20px; }
  .type-vyper-zoop .hold-down { margin: 265px 0px 0px 50px; }
  .type-vyper-zoop .hold-up { margin: 265px 0px 0px 205px; }
  
  .type-vyper-zoop .press-down{ margin: 270px 0px 0px 50px; }
  .type-vyper-zoop .press-up { margin: 270px 0px 0px 205px; }
  .type-vyper-zoop .press-mode { margin: 132px 0px 0px 275px; }
  .type-vyper-zoop .press-select { margin: 132px 0px 0px -18px; }
  
  .type-vyper-zoop .outline-bl { display: block; display: block; width: 75px; height: 45px; top: 168px; left: 80px; }
  .type-vyper-zoop .outline-br { display: block; }
  .type-vyper-zoop .outline-tl { display: block; width: 55px; height: 40px; top: 70px; left: 75px; }
  .type-vyper-zoop .outline-tr { display: block; width: 90px; height: 45px; top: 62px; right: 80px; }
  
  .type-vyper-zoop .transmitter { top: 220px; }
  .type-vyper-zoop .no-fly { display: block; top: 0px; left: 35px; right: auto; }
  .type-vyper-zoop .attention { top: 0; left: auto; right: -25px; }
  .type-vyper-zoop .error { top: 280px; left: auto; right: -20px; }
  .type-vyper-zoop .personal-adjust { display: block; }
  
  .type-vyper-zoop .note { bottom: 30px; }
  
  /* Display and Buttons - EON Core */
  
  .type-eon-core .display { width: 300px; height: 270px; margin-top: 70px; }

  .type-eon-core .task .display-short { height: 200px; margin-top: 70px; }

  .type-eon-core a.comp-btn { width: 50px; height: 50px; }
  .type-eon-core a.comp-btn.top { top: 36px; right: -10px; }
  .type-eon-core a.comp-btn.top:active { top: 36px; right: -7px; }
  .type-eon-core a.comp-btn.mid { top: 95px; right: -12px; }
  .type-eon-core a.comp-btn.mid:active { top: 95px; right: -9px; }
  .type-eon-core a.comp-btn.btm { top: 152px; right: -10px; }
  .type-eon-core a.comp-btn.btm:active { top: 152px; right: -7px; }
  
  .type-eon-core .highlight.top { top: 31px; right: -20px; }
  .type-eon-core .highlight.mid{ top: 89px; right: -20px; }
  .type-eon-core .highlight.btm { top: 147px; right: -20px; }

  /* EON Menu */

  .eon-menu { right: 55px; top: 55px; width: 170px; height: 128px; background-size: 4px; }
  
  .eon-menu ul { margin-top: 8px; padding: 0 5px 0 0; height: 118px;  }
  .eon-menu ul li { padding: 12px 5px; font-size: 12px; }
  .eon-menu ul li.active { font-size: 16px; }

  /* Dive Logs Screen */
  
  .eon-menu ul li.log-dive { padding: 5px; font-size: 10px; }
  .eon-menu ul li.log-dive.active { font-size: 14px; }
  .eon-menu ul li.log-dive p.log-dive-details { font-size: 8px; }
  .eon-menu ul li.log-dive p.log-dive-details span { font-size: 12px; }

  /* Tank pod */

  .eon-menu .pod-info { top: 35px; }
    
}

/* //////////////////////////////// landscape mobile //////////////////////////////// */  

@media screen and (min-width: 480px) and (max-width: 768px) {

/*   .type-task .middle[class] { vertical-align: middle; } */
  
  .task-title h2 { font-size: 1.2em; padding: 20px 0; margin: 10px 0; }
  .task-title h2 span { background-size: 50px !important; padding: 20px 0 20px 60px; }

  /* New Captions */

  .task .caption-inner { padding: 20px; }
  
  /* Display and Buttons Layout - D-Series */
    
  .type-d-series .display { width: 80%; }
  .type-d-series .display img { margin: 29% 0 0 29% !important; width: 41% !important; }
  
  .type-d-series .outline-bl { display: block;}
  .type-d-series .outline-br { display: block;}
  .type-d-series .outline-tl { display: block;}
  .type-d-series .outline-tr { display: block;}
  
  .type-d-series .no-fly { display: block; }
  .type-d-series .attention { display: block; }
  .type-d-series .error { display: block; }
  
  /* Display and Buttons Layout - Vyper and Zoop  */
  
  .type-vyper-zoop .task-title h2 { font-size: 1.2em; padding: 20px 0; }
  .type-vyper-zoop .task-title h2 span { background-size: 60px !important; padding: 20px 0 20px 70px; }
  
  .type-vyper-zoop .type-d-series .display { width: 80%; }
  .type-vyper-zoop .type-d-series .display img { margin: 29% 0 0 30% !important; width: 40% !important; }
  
  .type-vyper-zoop .type-d-series .task-title h2 { font-size: 1.2em; padding: 20px 0; }
  .type-vyper-zoop .type-d-series .task-title h2 span { background-size: 60px !important; padding: 20px 0 20px 70px; }
  
  .type-vyper-zoop .type-d-series .outline-bl { display: block;}
  .type-vyper-zoop .type-d-series .outline-br { display: block;}
  .type-vyper-zoop .type-d-series .outline-tl { display: block;}
  .type-vyper-zoop .type-d-series .outline-tr { display: block;}
  
  .type-vyper-zoop .type-d-series .no-fly { display: block; }
  .type-vyper-zoop .type-d-series .attention { display: block; }
  .type-vyper-zoop .type-d-series .error { display: block; }

  /* EON CORE */

  .type-eon-core .task .display-short { height: 150px; }

  /* Dive Logs Screen */
  
  .eon-menu ul li.log-dive { padding: 5px; font-size: 10px; }
  .eon-menu ul li.log-dive.active { font-size: 14px; }
  .eon-menu ul li.log-dive p.log-dive-details { font-size: 8px; }
  .eon-menu ul li.log-dive p.log-dive-details span { font-size: 12px; }

}

/* //////////////////////////////// ipad portrait //////////////////////////////// */

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

  .type-task .middle[class] { vertical-align: middle; padding-bottom: 100px; }
  
  .task-title h2 { font-size: 1.2em; padding: 20px 0; font-size: 1.6em; margin: 10px 0; }
  .task-title h2 span { background-size: 60px !important; padding: 20px 0 20px 70px; }
  
  /* New Captions */

  .task .caption-inner { padding: 30px; }
  .task .caption h3 { font-size: 16px; line-height: 22px; max-width: 600px; }
  
  a.next, a.back { width: 50px; height: 50px; top: 48%; background-size: 100%; }
  
  .hold-tip { top: 65%; left: 48%; }
  
  .progress-bar { margin-bottom: 20px; }
  
  #orientation { display: none; }
  
  .task { }
  
  /* Display and Buttons Layout - D-Series */
  
  .type-d-series .display { width: 350px; }
  .type-d-series .display-short { height: 250px; }
  .type-d-series .display-short .comp-bkg { height: 250px; background-size: 100% !important; background-position: center center !important;}
  
  .type-d-series .comp-bkg { background: url(../img/tasks/d4i-bkg3.png) no-repeat top; }
  .type-d-series a.comp-btn { background: url(../img/tasks/d4i-btn.png) no-repeat center; z-index: 200; }
  
  .type-d-series a.comp-btn.tr { top: 74px; right: 41px; }
  .type-d-series a.comp-btn.tr:active { top: 76px; right: 43px; }
  .type-d-series a.comp-btn.br { top: 225px; right: 41px; -webkit-transform:rotate(62deg); transform:rotate(62deg); }
  .type-d-series a.comp-btn.br:active { top: 225px; right: 45px; }
  .type-d-series a.comp-btn.tl { top: 74px; left: 39px; -webkit-transform:rotate(242deg); transform:rotate(242deg); }
  .type-d-series a.comp-btn.tl:active { top: 76px; left: 42px; }
  .type-d-series a.comp-btn.bl { top: 225px; left: 38px; -webkit-transform:rotate(180deg); transform:rotate(180deg); }
  .type-d-series a.comp-btn.bl:active { top: 224px; left: 40px; }
  
  .type-d-series a.comp-btn.mode { top: 74px; right: 41px; }
  .type-d-series a.comp-btn.mode:active { top: 76px; right: 43px; }
  .type-d-series a.comp-btn.up { top: 225px; right: 41px; -webkit-transform:rotate(62deg); transform:rotate(62deg); }
  .type-d-series a.comp-btn.up:active { top: 225px; right: 45px; }
  .type-d-series a.comp-btn.select { top: 74px; left: 39px; -webkit-transform:rotate(242deg); transform:rotate(242deg); }
  .type-d-series a.comp-btn.select:active { top: 76px; left: 42px; }
  .type-d-series a.comp-btn.down { top: 225px; left: 38px; -webkit-transform:rotate(180deg); transform:rotate(180deg); }
  .type-d-series a.comp-btn.down:active { top: 224px; left: 40px; }
  
  .type-d-series .highlight.tr { top: 63px; right: 30px; }
  .type-d-series .highlight.br { top: 210px; right: 30px; }
  .type-d-series .highlight.tl { top: 64px; left: 28px; }
  .type-d-series .highlight.bl { top: 205px; left: 28px; }
  
  .type-d-series .highlight.mode { top: 63px; right: 30px; }
  .type-d-series .highlight.up { top: 210px; right: 30px; }
  .type-d-series .highlight.select { top: 64px; left: 28px; }
  .type-d-series .highlight.down { top: 205px; left: 28px; }
  
  .type-d-series .outline-bl { width: 80px; height: 40px; top: 205px; left: 100px; }
  .type-d-series .outline-br { width: 80px; height: 40px; top: 205px; right: 100px; }
  .type-d-series .outline-tl { width: 40px; height: 40px; top: 100px; left: 100px; }
  .type-d-series .outline-tr { width: 40px; height: 40px; top: 100px; right: 100px; }
  
  .type-d-series .hold-bl { margin: 257px 0 0 0 !important; }
  .type-d-series .hold-tr { margin: 50px 0 0 305px !important; }
  .type-d-series .press-bl { margin: 257px 0 0 0 !important; }
  .type-d-series .press-br { margin: 270px 0px 0 300px !important; }
  .type-d-series .press-tr { margin: 50px 0 0 305px !important; }
  
  /* Display and Buttons Layout - Vyper and Zoop  */
  
  .type-vyper-zoop .display { width: 330px; height: 330px;}
  .type-vyper-zoop .display-short { height: 250px !important; }
  .type-vyper-zoop .display-short .comp-bkg { height: 250px; background-size: 100% !important; background-position: center center !important;}
  .type-vyper-zoop .display img { margin: 20.5% 25% !important; width: 160px !important; }
  
  .type-vyper-zoop a.comp-btn.select { top: 142px; left: 40px; }
  .type-vyper-zoop a.comp-btn.mode { top: 142px; right: 44px; }
  .type-vyper-zoop a.comp-btn.up { top: 234px; right: 108px; }
  .type-vyper-zoop a.comp-btn.down { top: 234px; left: 103px; }
  
  .type-vyper-zoop .outline-bl { width: 90px; height: 50px; top: 185px; left: 87px; }
  .type-vyper-zoop .outline-br { width: 100px; height: 50px; top: 199px; right: 85px; }
  .type-vyper-zoop .outline-tl { width: 70px;height: 50px;top: 70px;left: 75px; }
  .type-vyper-zoop .outline-tr { width: 100px; height: 50px; top: 70px; right: 85px; }
  .type-vyper-zoop .outline-ml { width: 90px; height: 52px; top: 141px; left: 72px; }
  .type-vyper-zoop .outline-mr { width: 88px; height: 52px; top: 141px; right: 94px; }
  
  .type-vyper-zoop .hold-mode { margin: 150px 0px 0px 300px; }
  .type-vyper-zoop .hold-select { margin: 150px 0px 0px -20px; }
  .type-vyper-zoop .hold-down { margin: 295px 0px 0px 65px; }
  .type-vyper-zoop .hold-up { margin: 295px 0px 0px 220px; }
  
  .type-vyper-zoop .press-down{ margin: 295px 0px 0 60px; }
  .type-vyper-zoop .press-up { margin: 295px 0px 0 225px; }
  .type-vyper-zoop .press-mode { margin: 150px 0px 0px 290px; }
  .type-vyper-zoop .press-select { margin: 150px 0px 0px 0px; }
  
  .type-vyper-zoop .transmitter { top: 250px; }
  .type-vyper-zoop .no-fly { margin-top: 50px; left: 0px; }
  .type-vyper-zoop .attention { top: 0; left: auto; right: -20px; }
  .type-vyper-zoop .error { top: 300px; left: auto; right: -20px; }
  .type-vyper-zoop .personal-adjust {  }
  
  .type-vyper-zoop .note { bottom: 0px; }
  
  /* Display and Buttons EON Core */
  
  .type-eon-core .display { width: 300px; height: 240px; margin-top: 50px; }
  .type-eon-core .task .display-short { height: 150px; }

  /* EON Menu */

  .eon-menu { right: 55px; top: 54px; width: 170px; height: 130px; background-size: 3px; }
  
  .eon-menu ul { margin-top: 5px; padding: 0 5px 0 0; list-style: none; height: 122px; overflow: hidden; }
  .eon-menu ul li { padding: 12px 5px; font-size: 12px; }
  .eon-menu ul li.active { font-size: 16px; }
  .eon-menu ul li p.gas-mix { font-size: 10px; line-height: 10px; }
  
  /* Dive Logs Screen */
  
  .eon-menu ul li.log-dive { padding: 5px; font-size: 10px; }
  .eon-menu ul li.log-dive.active { font-size: 14px; }
  .eon-menu ul li.log-dive p.log-dive-details { font-size: 8px; }
  .eon-menu ul li.log-dive p.log-dive-details span { font-size: 12px; }

  .eon-menu ul li p.gas-peram { margin: 0 0 0 10px; }
  .eon-menu ul li p.gas-peram span { margin: 4px 0 0 0; font-size: 16px; }

}

/* //////////////////////////////// ipad landscape wide //////////////////////////////// */ 

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

  .type-task .container { width: 650px; }
  .type-task .col { width: 650px !important; }

  .caption.completed .caption-inner { max-width: 650px; margin: 0 auto; }

  a.next, a.back { width: 60px; height: 60px; top: 50%; }

  a.next { right: 10px; }
  a.back { left: 10px; }

  .task-title { margin-top: 50px; }
  .task-title h2 { font-size: 1.2em; padding: 20px 0; font-size: 1.6em; }
  .task-title h2 span { background-size: 60px !important; padding: 20px 0 20px 70px; }
  
  /* New Captions */

  .task .caption h3 { font-size: 16px; line-height: 22px; max-width: 650px; }
  
  #orientation { display: none; }
  
  .hold-tip { top: 49%; left: 47%; }
  
  /* Display and Buttons Layout - D-Series */
  
  .type-d-series .display { width: 350px; }
  .type-d-series .display-short { height: 250px; }
  .type-d-series .display-short .comp-bkg { height: 250px; background-size: 100% !important; background-position: center center !important;}
  
  .type-d-series a.comp-btn { z-index: 200; }
  
  /* Display and Buttons Layout - Vyper and Zoop  */
  
  .type-vyper-zoop .display { width: 350px; height: 350px; }
  .type-vyper-zoop .display-short { height: 250px; margin-top: 50px; }
  .type-vyper-zoop .display-short .comp-bkg { height: 250px; background-size: 100% !important; background-position: center center !important;}
  .type-vyper-zoop .display img { margin: 20.5% 25% !important; width: 170px !important; }
  
  .type-vyper-zoop a.comp-btn.select { top: 152px; left: 43px; }
  .type-vyper-zoop a.comp-btn.mode { top: 152px; right: 48px; }
  .type-vyper-zoop a.comp-btn.up { top: 249px; right: 116px; }
  .type-vyper-zoop a.comp-btn.down { top: 249px; left: 110px; }
  
  .type-vyper-zoop .hold-mode { margin: 160px 0px 0px 320px; }
  .type-vyper-zoop .hold-down { margin: 315px 0px 0px 70px; }
  .type-vyper-zoop .hold-up { margin: 315px 0px 0px 235px; }
  
  .type-vyper-zoop .press-down{ margin: 320px 0px 0 70px; }
  .type-vyper-zoop .press-up { margin: 320px 0px 0 240px; }
  .type-vyper-zoop .press-mode { margin: 158px 0px 0px 320px; }
  .type-vyper-zoop .press-select { margin: 158px 0px 0px -15px; }
  
  .type-vyper-zoop .outline-bl { width: 90px; height: 50px; top: 198px; left: 92px; }
  .type-vyper-zoop .outline-tr { width: 105px; height: 60px; top: 70px; right: 90px; }
  .type-vyper-zoop .outline-tl { width: 70px; height: 50px; top: 80px; left: 85px; }
  
  .type-vyper-zoop .error { top: 300px; left: auto; right: -20px; }
  
  /* Display and Buttons EON Core */
  
  .type-eon-core .display { width: 350px; height: 300px; }
  .type-eon-core .task .display-short { height: 200px; }

  .type-eon-core a.comp-btn { width: 50px; height: 50px; }
  .type-eon-core a.comp-btn.top { top: 46px; right: -7px; }
  .type-eon-core a.comp-btn.top:active { top: 46px; right: -5px; }
  .type-eon-core a.comp-btn.mid { top: 113px; right: -8px; }
  .type-eon-core a.comp-btn.mid:active { top: 113px; right: -6px; }
  .type-eon-core a.comp-btn.btm { top: 180px; right: -7px; }
  .type-eon-core a.comp-btn.btm:active { top: 180px; right: -5px; }
  
  .type-eon-core .highlight.top { top: 41px; right: -20px; }
  .type-eon-core .highlight.mid{ top: 108px; right: -20px; }
  .type-eon-core .highlight.btm { top: 175px; right: -20px; } 

  /* EON Menu */

  .eon-menu { right: 65px; top: 65px; width: 200px; height: 150px; }
  
  .eon-menu ul { margin-top: 12px; padding: 0 5px 0 0; list-style: none; height: 137px; overflow: hidden; }
  .eon-menu ul li { padding: 12px 5px; font-size: 14px; }
  .eon-menu ul li.active { font-size: 18px; }
  .eon-menu ul li p.gas-mix { font-size: 12px; line-height: 12px; }
  
  /* Dive Logs Screen */
  
  .eon-menu ul li.log-dive { padding: 6px; font-size: 12px; }
  .eon-menu ul li.log-dive.active { font-size: 16px; }
  .eon-menu ul li.log-dive p.log-dive-details { font-size: 10px; }
  .eon-menu ul li.log-dive p.log-dive-details span { font-size: 14px; }

  .eon-menu ul li p.gas-peram { margin: 0 0 0 15px; font-size: 12px; line-height: 12px; margin-top: -10px; }
  .eon-menu ul li p.gas-peram span { margin: 4px 0 0 0; font-size: 20px; }


} 

/* //////////////////////////////// full screen //////////////////////////////// */ 

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

  .type-task .container { width: 750px; }
  .type-task .col { width: 750px !important; }

  .caption.completed .caption-inner { max-width: 750px; margin: 0 auto; }

  .task .caption h3 { max-width: 750px; }

  .hold-tip { top: 47%; left: 48%; }
  
  .task-title { margin: 0 0 10px 0; }
  
  a.next, a.back { width: 60px; height: 60px; top: 50%; }

  .task .caption span.done { width: 55px; height: 55px; background-size: 55px; }
  .task .caption a.next-task { height: 55px; background-size: 55px; padding-right: 70px; line-height: 55px; font-size: 16px; }

  /* Display D4i */

  .type-d-series .display { height: 350px; margin-top: 5%; }
  
  /* Display and Buttons Layout - Vyper and Zoop  */
  
  .type-vyper-zoop .display { width: 350px; height: 350px; margin-top: 5%; }
  .type-vyper-zoop .display-short { height: 280px !important; }
  .type-vyper-zoop .display-short .comp-bkg { height: 250px; background-size: 100% !important; background-position: center center !important;}
  .type-vyper-zoop .display img { margin: 20.5% 25% !important; width: 170px !important; }
  
  .type-vyper-zoop a.comp-btn.select { top: 152px; left: 43px; }
  .type-vyper-zoop a.comp-btn.mode { top: 152px; right: 48px; }
  .type-vyper-zoop a.comp-btn.up { top: 249px; right: 116px; }
  .type-vyper-zoop a.comp-btn.down { top: 249px; left: 110px; }
  
  .type-vyper-zoop .hold-mode { margin: 160px 0px 0px 320px; }
  .type-vyper-zoop .hold-down { margin: 315px 0px 0px 70px; }
  .type-vyper-zoop .hold-up { margin: 315px 0px 0px 235px; }
  
  .type-vyper-zoop .press-down{ margin: 318px 0px 0 70px; }
  .type-vyper-zoop .press-up { margin: 318px 0px 0 235px; }
  .type-vyper-zoop .press-mode { margin: 160px 0px 0px 320px; }
  .type-vyper-zoop .press-select { margin: 160px 0px 0px -15px; }
  
  .type-vyper-zoop .outline-bl { width: 90px; height: 50px; top: 198px; left: 92px; }
  .type-vyper-zoop .outline-tr { width: 105px; height: 60px; top: 70px; right: 90px; }
  .type-vyper-zoop .outline-tl { width: 70px; height: 50px; top: 80px; left: 85px; }
  
  /* Display and Buttons EON Core */
  
  .type-eon-core .display { width: 400px; height: 330px; }
  .type-eon-core .task .display-short { height: 220px; }

  .type-eon-core a.comp-btn { width: 50px; height: 50px; background-size: 20px; }
  .type-eon-core a.comp-btn.top { top: 58px; right: -5px; }
  .type-eon-core a.comp-btn.top:active { top: 58px; right: -2px; }
  .type-eon-core a.comp-btn.mid { top: 133px; right: -7px; }
  .type-eon-core a.comp-btn.mid:active { top: 133px; right: -5px; }
  .type-eon-core a.comp-btn.btm { top: 211px; right: -5px; }
  .type-eon-core a.comp-btn.btm:active { top: 211px; right: -2px; }
  
  .type-eon-core .highlight.top { top: 53px; right: -20px; }
  .type-eon-core .highlight.mid{ top: 130px; right: -20px; }
  .type-eon-core .highlight.btm { top: 207px; right: -20px; }

  /* EON Menu */

  .eon-menu { right: 75px; top: 75px; width: 225px; height: 170px; background-size: 4px; }
  
  .eon-menu ul { margin-top: 10px; padding: 0 5px 0 0; list-style: none; height: 158px; overflow: hidden; }
  .eon-menu ul li { padding: 15px 5px; font-size: 16px; }
  .eon-menu ul li.active { font-size: 20px; }
  .eon-menu ul li p.gas-mix { font-size: 12px; line-height: 12px; }
  
  /* Dive Logs Screen */
  
  .eon-menu ul li.log-dive { padding: 8px; font-size: 14px; }
  .eon-menu ul li.log-dive.active { font-size: 20px; }
  .eon-menu ul li.log-dive p.log-dive-details { font-size: 10px; }
  .eon-menu ul li.log-dive p.log-dive-details span { font-size: 14px; }

  .eon-menu ul li p.gas-peram { margin: 0 0 0 20px; font-size: 12px; line-height: 12px; margin-top: -10px; }
  .eon-menu ul li p.gas-peram span { margin: 4px 0 0 0; font-size: 20px; }

  /* Tank pod */

  .eon-menu .pod-info { top: 50px; }
  .eon-menu .pod-info p { font-size: 14px !important; }
  .eon-menu .pod-info p img { width: 25px; }

  
}

/* //////////////////////////////// large full screen //////////////////////////////// */ 

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

  /* Keyboard Hint */
  .keyboard-hint { display: block; position: absolute; top: 10px; left: 5px; z-index: 8000; background: url(../img/ui/keyboard.png) no-repeat; overflow: hidden; width: 120px; height: 64px; opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); animation: showHide 10s; -webkit-animation: showHide 10s; }
  .keyboard-hint img { float: left; margin: 0; width: 100px; padding: 0; }
  
  @keyframes showHide {
      0%   { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
      25%   { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
      50%   { opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
      75%   { opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
      100% { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
  }
  
  @-webkit-keyframes showHide {
      0%   { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
      25%   { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
      50%   { opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
      75%   { opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); }
      100% { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }
  }

}


/* /////////////////////////////// Short Tablet in Landscape Mode ////////////////////////////////// */

/*@media screen and (min-height: 400px) and (max-height: 600px) and (orientation: landscape) {
  #orientation { position: fixed; z-index: 9950; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(244,244,244,0.8); display: block !important; }
  #orientation img { position: fixed; z-index: 8000; width: 100px; top: 50%; left: 50%; margin: -50px 0 0 -50px; -webkit-transform:rotate(90deg); transform:rotate(90deg);} 
  .btm-bar { z-index: 9999 !important; }
}*/