/* CSS Master Styles */

/* 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; }
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; }
a, a:visited, a:link { color: #FFF; text-decoration: none; text-shadow: none !important; }
a img { border: none; }
.hide { opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); }

small { font-size: 12px !important; line-height: 14px !important; }

/* Disable Tap Highlight */
* { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; -webkit-tap-highlight-color: transparent !important; /* For some Androids */ outline: 0 !important;  }

/* Load Custom Fonts */

@font-face {
    font-family: 'suuntobold';
    src: url('../fonts/suuntbol-webfont.eot');
    src: url('../fonts/suuntbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/suuntbol-webfont.woff') format('woff'),
         url('../fonts/suuntbol-webfont.ttf') format('truetype'),
         url('../fonts/suuntbol-webfont.svg#suuntobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'suuntoregular';
    src: url('../fonts/suuntreg-webfont.eot');
    src: url('../fonts/suuntreg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/suuntreg-webfont.woff') format('woff'),
         url('../fonts/suuntreg-webfont.ttf') format('truetype'),
         url('../fonts/suuntreg-webfont.svg#suuntoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'suuntoui';
    src: url('../fonts/suunto-ui-extra-narrow-med.eot');
    src: url('../fonts/suunto-ui-extra-narrow-med.eot?#iefix') format('embedded-opentype'),
         url('../fonts/suunto-ui-extra-narrow-med.woff') format('woff'),
         url('../fonts/suunto-ui-extra-narrow-med.ttf') format('truetype'),
         url('../fonts/suunto-ui-extra-narrow-med.svg#suuntoui') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Jquery Mobile */

.ui-loader { display: none !important; }

/* transitions */

.animate * { -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

/* JQuery Mobile Fixes */

.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { background: none; border: none; text-shadow: none; }
.ui-page { -webkit-backface-visibility: hidden; }
.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page { height: 100%; width: 100%; }
.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a { font-weight: auto !important; }
.ui-header-fixed { top: 0; left: 0; position: fixed; z-index: -1; pointer-events: none; margin: 0; padding: 0;}
.ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .ui-page { overflow: visible; height: 100% !important;}
.type-interior { height: 100% !important; }
.ui-loader .ui-icon-loading {
    background-color: #000;
    display: block;
    margin: 0px;
    width: 2.75em;
    height: 2.75em;
    padding: 0.0625em;
    border-radius: 2.25em;
}
.ui-icon-loading {
    background: transparent url(../img/ui/ajax-loader.gif) no-repeat center; background-size: 40px;  
}


/* General Layout */

html { width: 100%; height: 100%; overflow: hidden; }
body { background: #EEE; font-family: "suuntoregular", "HelveticaNeue", "Helvetica Neue", helvetica, arial, sans-serif; width: 100%; height: 100%; -webkit-touch-callout: none !important; overflow: hidden; }

.outer { width: 100%; height: 100%; position: relative; z-index: 1; padding: 0; overflow: hidden; }
.outer[class] {display: table; position: static;}

.middle {position: absolute; top: 50%; } 
.middle[class] {display: table-cell; vertical-align: middle; width: 100%; position: static;}

.inner {position: relative; top: -50%; padding-bottom: 50px !important; overflow: hidden; }
.inner[class] {position: static; }

/* absolute centering (does not work on android) */
.inner-absolute { position: relative; width: 100%; height: 100%; margin: 0; margin-top: 10%; }

.container { position: relative; overflow: hidden; }
.full-width { width: 100%; display: block; margin: 0; padding: 0; }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.col img { width: 100%; margin: 0 auto; }

/* Center Content - Unknown Height */

.center-container { 
    width: 100%; height: 100%; display: block; top: 0; left: 0; position: absolute; overflow: hidden;
}

.center-content {
    position: relative;
    transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    top: 40%; overflow: visible;
}

/* Text Styles */

h1, h2 { font-family: "suuntobold", "HelveticaNeue", "Helvetica Neue", helvetica, arial, sans-serif; color: #303030; font-size: 1.6em; line-height: 1.8em; font-weight: 300; margin: 15px 0; }
h3, h4, h5, h6 { font-family: "suuntoregular", "HelveticaNeue", "Helvetica Neue", helvetica, arial, sans-serif; font-weight: 100; letter-spacing: 0.02em; color: #666; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #2D2D2D; text-decoration: none; }
h2 { font-size: 1.6em; line-height: 1.8em; margin: 40px 0 0 0; }
h3 { font-size: 1.1em; line-height: 1.4em; margin: 10px 0 20px 0; }
h4 { font-size: 1em; line-height: 1.2em; margin: 15px 0; }
h5 { font-size: 0.9em; line-height: 1.1em; margin: 15px 0; }
h6 { font-size: 0.9em; line-height: 1.1em; margin: 15px 0; }    
p {font-size: 14px; line-height: 18px; color: #666; margin: 15px 0; }

h2.home-intro { margin-top: 40px; }


/* Backgrounds */
.bkg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; display: block; }
.bkg-reef { background: url(../img/bkg/reef.jpg) no-repeat center; background-size: 100% 100% fixed !important; }
.bkg-wreck { background: url(../img/bkg/wreck.jpg) no-repeat center; background-size: 100% 100% fixed !important; }
.bkg-wreck2 { background: url(../img/bkg/wreck2.jpg) no-repeat center; background-size: 100% 100% fixed !important;  }
.bkg-freedive { background: url(../img/bkg/freedive.jpg) no-repeat center; background-size: 100% 100% fixed !important;  }
.bkg-diver { background: url(../img/bkg/diver.jpg) no-repeat center; background-size: 100% 100% fixed !important;  }
.bkg { background: url(../img/bkg/reef.jpg) no-repeat center; position: fixed; background-size: cover !important; background-color: #EEE; }

/* Centered Content */

div.center img, div.center p, div.center h1, div.center h2, div.center h3, div.center h4, div.center h5, div.center h6 { text-align: center; margin-left: auto; margin-right: auto; }
div.center img { display: block; }
p.center { text-align: center; }

img.intro { width: 150px; margin-top: 0px; }

/* Product Name */

.product-name { display: none; width: 100px; height: 100px; right: 0px; top: 0px; pointer-events: none !important; position: fixed; z-index: 9999;  overflow: hidden; padding: 0px; background-size: 100%; }
.product-name.d4i { background: url(../img/main/product-d4i.svg) top right no-repeat; background-size: 100%; }
.product-name.zoop { background: url(../img/main/product-zoop.svg) top right no-repeat; background-size: 100%; }
.product-name.vyper { background: url(../img/main/product-vyper.svg) top right no-repeat; background-size: 100%; }
.product-name.eon-core { background: url(../img/main/product-eon-core.svg) top right no-repeat; background-size: 70%; }

/* Current Language */

.current-language { display: block; position: absolute; top: 10px; left: 10px; z-index: 9000; overflow: hidden; padding: 0; }
.current-language * { -webkit-transition: all 0.3s ; transition: all 0.3s; }
.current-language a { text-decoration: none; border: 2px solid #999; border-radius: 45px; -webkit-border-radius: 45px; display: block; overflow: hidden; width: 35px; height: 35px;  }
.current-language a span { padding: 0 7px; margin: 0; line-height: 35px; font-size: 12px; color: #999; text-align: center; font-weight: normal; }
.current-language a:hover { border: 2px solid #333; cursor: pointer; }
.current-language a:hover span { color: #333; }

/* Switch Computer */

a.switch-computer { 
    display: block; position: absolute; 
    top: 10px; left: 10px; z-index: 9000; 
    overflow: hidden; padding: 0; text-decoration: none; 
    background: url(../img/icons/icon-display.svg) no-repeat; background-size: 100%; 
    width: 40px; height: 40px; 
}

a.switch-menu { 
    display: none; position: absolute; 
    top: 10px; left: 10px; z-index: 9000; 
    overflow: hidden; padding: 0; text-decoration: none; 
    background: url(../img/ui/menu2.svg) no-repeat; background-size: 100%; 
    width: 40px; height: 40px; 
}

/* Language Selection Page */

.language-logo { display: block; width: 150px; margin: 50px auto 0 auto; }

.languages { position: relative; padding: 0px; width: 100%; margin: 20px auto; }
.languages ul { list-style: none; text-align: center; overflow: hidden; display: block; }
.languages ul li { display: inline-block; position: relative; margin: 4px; }
.languages ul li a { 
    text-decoration: none; border: 2px solid #FFF; margin: 0 0 15px 0; 
    border-radius: 100px; -webkit-border-radius: 100px; 
    padding: 0; display: block; 
    width: 45px; height: 45px; line-height: 45px; 
    color: #FFF !important; font-size: 14px;
}
.languages ul li a span { padding: 0; margin: 0; }
.languages ul li a span.small { font-size: 11px; font-weight: normal; }
.languages ul li a:hover { border: 2px solid #D20E2D; cursor: pointer; } 

.cycle-text { list-style-type: none; width: 300px; margin: 0 auto; display: block; text-align: center; }
.cycle-text li { width: 100%; color: #EEE; text-align: center; display: inline-block; padding: 10px 0px; }

/* Nav Main */

.btm-bar { background-color: #1C1C1C !important; border: none !important; border-bottom: 1px solid #000 !important; bottom: 0; padding: 0px; position: fixed; z-index: 9999;}
.btm-bar img.logo { width: 80px; float: left; margin: 10px 107px 0 0px; }
.btm-bar .container { margin-top: 0; }

/* Main Navigation */

ul.nav-main { width: 100%; display: block; float: left; margin: 0px; bottom: 0; position: relative; background: none; }
ul.nav-main.center { text-align: center; }
ul.nav-main.center li { text-align: center; display: inline-block; float: none; }

ul.nav-main li { float: left; display: inline-block; height: 49px; width: 20%; padding: 0px; margin: 0; line-height: 20px; text-align: center; list-style: outside none; border-bottom: none; }

ul.nav-main.col4 li { width: 25%; }

ul.nav-main li a { font-size: 12px; height: 49px; display: block; padding: 0; text-align: center; text-decoration: none; text-transform: uppercase; color: #FFF; font-weight: 100; overflow: hidden; }
ul.nav-main li a span { display: none; height: 49px; line-height: 49px; float: left; color: #FFF; font-family: "suuntoregular", "HelveticaNeue", sans-serif; }
ul.nav-main li.active a { color: #FF141F; background: url(../img/ui/footernav_arr.png) no-repeat center top; } 
ul.nav-main li.active a span { color: #FF141F; } 
ul.nav-main li:hover a { color: #FF141F; }
ul.nav-main li:hover { cursor: pointer; }

ul.nav-main li.logo a {         background: url(../img/icons/home.svg)    no-repeat top center; }
ul.nav-main li.tank-air a {     background: url(../img/icons/tank.svg)    no-repeat top center; }
ul.nav-main li.tank-nitrox a {  background: url(../img/icons/tank2.svg)   no-repeat top center; }
ul.nav-main li.fins a {         background: url(../img/icons/fins.svg)    no-repeat top center; }
ul.nav-main li.info a {         background: url(../img/icons/info.svg)    no-repeat top center; }
ul.nav-main li.about a {        background: url(../img/icons/question.svg) no-repeat top center; }
ul.nav-main li.language a {     background: url(../img/icons/language.svg) no-repeat top center; }
ul.nav-main li.computer a {     background: url(../img/icons/computer.svg) no-repeat top center; }

ul.nav-main li.logo.center { width: 100px; margin: 0 auto; }
ul.nav-main li.logo.center a {  background: url(../img/main/suunto-logo.svg)  no-repeat left; background-size: 100%; width: 80px; padding: 0; margin: 0 auto; }

ul.nav-main li:hover a { background-position: center -49px; }
ul.nav-main li.active a { background-position: center -49px; }

/*  Next and Prev Buttons */

.prevButton { position: absolute; bottom: 55px; left: 20px;width: 42px;height: 70px;background: url(../img/ui/arrow_left.png) no-repeat 0 0px;z-index: 8000; opacity: 0.6;
    -webkit-opacity: 0.6; filter: alpha(opacity=60); padding: 0; background-color: rgba(0,0,0,0) !important; border: none !important; text-shadow: none !important; box-shadow: none !important;}
.nextButton { position: absolute; bottom: 55px;  right: 20px; width: 42px; height: 70px; background: url(../img/ui/arrow_right.png) no-repeat 0 0px; z-index: 8000; opacity: 0.6; -webkit-opacity: 0.6; filter: alpha(opacity=60); padding: 0; background-color: rgba(0,0,0,0) !important; border: none !important; text-shadow: none !important; box-shadow: none !important; }
.nextButton:hover, .prevButton:hover { opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); } 

/* Navicon */

.navicon { display: none; float: right; padding: 0px; background: #2D2D2D; height: 49px; width: 49px; line-height: 49px; color: #FFF; text-align: center; font-size: 15px; }



/* Slick Slider (Choose Computer) */
.slick-wrapper { display: block; }

/* Products Grid */

.products-grid { display: none; width: 100%; overflow: hidden; margin: 50px auto; justify-content: center; }
.products-grid a { max-width: 160px; }
.products-grid a:first-child { margin-left: -20px; }

.products-grid a.push-down img { padding: 20px 0; }

/* Intro cycle */

.cycle-slideshow { width: 200px; display: block; margin: 20px auto; }
#computer-select .cycle-slideshow a { width: 100%; }
.cycle-slideshow a img { width: 200px; margin: 0 auto; }

.custom-pager { text-align: center; width: 100%; z-index: 500; position: absolute; bottom: -50px; overflow: hidden; }
.custom-pager span { width: 4px; height: 4px; padding: 0px; margin: 5px; display: inline-block; color: #ddd; cursor: pointer; border: 1px solid #666; border-radius: 100px; -webkit-border-radius: 100px; }
.custom-pager span.cycle-pager-active { border: 2px solid #666; background: #666; }
.custom-pager > * { cursor: pointer; }

/* Computer Select Screen */

.computer-select { width: 100%; display: block; overflow: hidden; margin-top: 20px; }
.computer-select a { width: 30%; float: left; margin: 0 1.5%; }
.computer-select a img { width: 100%; height: auto; display: block; margin: 0 auto; }
.computer-select a h4 { font-size: 12px; }



/* Start Button */

a.start-btn { display: block; height: 80px; margin: 20px 0 0 0; }
a.start-btn span { position: relative; background: rgba(0,0,0,0.2); display: block; margin: 0 auto; padding: 15px 0; color: #333; 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; }

/* Task Lists */

.task-grid { display: block; margin: 20px 0 0 0; clear: both; overflow: hidden; }

ul.task-list { display: block; overflow: hidden; margin: 0 3px; padding: 0; font-family: "suuntobold", "HelveticaNeue", "Helvetica Neue", helvetica, arial, sans-serif; }
ul.task-list li { display: block; margin-bottom: 5px; overflow: hidden; }
ul.task-list li a { display: table; overflow: hidden; width: 100%; font-weight: 300 !important; background-color: #DFDFDF; border-right: 2px solid #CCC; border-bottom: 2px solid #CCC; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
ul.task-list li a:hover, ul.task-list li a:focus { background-color: #f7f7f7; }
ul.task-list li a:hover span { color: #0099CC; }
ul.task-list li a span { color: #666; font-size: 0.9em; width: 100%; text-align: left; padding: 5px; display: table-cell; vertical-align: middle; line-height: 25px !important; }

ul.task-list li a img { width: 40px; margin: 0; padding: 0px; margin: 5px 10px 5px 5px; float: left; }

/* ul.task-list li:hover img {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg); 
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
} */

/* Virtual Dive Button */

a.virtual-dive-btn { display: block; padding: 20px 20px; margin: 0 0 5px 0; color: #FFF !important; text-align: left; /*border-right: 2px solid #666; border-bottom: 2px solid #666; */}
a.virtual-dive-btn span { text-align: left; font-size: 0.9em; }
a.virtual-dive-btn span.triangle { display:none; }
a.virtual-dive-btn:hover { }

a.virtual-dive-btn#air-d4i { background: url(../img/main/virtual-dive-d4i-air.jpg) no-repeat center top; background-size: 100%; }
a.virtual-dive-btn#nitrox-d4i { background: url(../img/main/virtual-dive-d4i-nitrox.jpg) no-repeat center top; background-size: 100%; }
a.virtual-dive-btn#freedive-d4i { background: url(../img/main/virtual-dive-d4i-free.jpg) no-repeat center top; background-size: 100%; }

a.virtual-dive-btn#air-zoop { background: url(../img/main/virtual-dive-zoop-air.jpg) no-repeat center top; background-size: 100%; }
a.virtual-dive-btn#nitrox-zoop { background: url(../img/main/virtual-dive-zoop-nitrox.jpg) no-repeat center top; background-size: 100%; }
a.virtual-dive-btn#freedive-zoop { background: url(../img/main/virtual-dive-zoop-free.jpg) no-repeat center top; background-size: 100%; }

a.virtual-dive-btn#air-vyper { background: url(../img/main/virtual-dive-vyper-air.jpg) no-repeat center top; background-size: 100%; }
a.virtual-dive-btn#nitrox-vyper { background: url(../img/main/virtual-dive-vyper-nitrox.jpg) no-repeat center top; background-size: 100%; }
a.virtual-dive-btn#freedive-vyper { background: url(../img/main/virtual-dive-vyper-free.jpg) no-repeat center top; background-size: 100%; }

a.virtual-dive-btn#air-eon-core { background: url(../img/main/virtual-dive-eon-core-air.jpg) no-repeat center top; background-size: 100%; }
a.virtual-dive-btn#nitrox-eon-core { background: url(../img/main/virtual-dive-eon-core-nitrox.jpg) no-repeat center top; background-size: 100%; }

@keyframes zoom {
    0%   { background-size: 100%; }
    50%  { background-size: 105%; }
    100% { background-size: 100%; }
}

@-webkit-keyframes zoom {
    0%   { background-size: 100%; }
    50%  { background-size: 105%; }
    100% { background-size: 100%; }
}

/* Warnings Links and Hints */

p.warning { background: url(../img/ui/warning.svg) no-repeat 10px 10px; background-color: rgba(255,255,255,0.3); padding: 15px 10px 15px 60px; margin-top: 0; font-size: 12px; line-height: 20px; border-radius: 5px; -webkit-border-radius: 5px; text-align: center; }
a.download { background: url(../img/ui/guide.svg) no-repeat 10px 10px; background-color: rgba(255,255,255,0.3); max-width: 600px; margin: 20px auto 0 auto; display: block; padding: 15px 10px 15px 75px; font-size: 12px; line-height: 20px;  border-radius: 5px; -webkit-border-radius: 5px; color: #666; font-weight: normal; text-align: center; }
a.download:hover { color: #0099CC; font-weight: normal; background-color: rgba(255,255,255,0.7); }
a.link { background: url(../img/ui/link.svg) no-repeat 10px 10px; background-color: rgba(255,255,255,0.3); clear: both; margin: 20px auto 0 auto; display: block; padding: 15px 10px 15px 75px; font-size: 12px; line-height: 20px; border-radius: 5px; -webkit-border-radius: 5px; color: #666; font-weight: normal; text-align: center; }
a.link:hover { color: #0099CC; font-weight: normal; background-color: rgba(255,255,255,0.7); }



/* Summary Tabs and Tables */

#summary { display: block; overflow: hidden; border: 1px solid #CCC; border-radius: 5px; -webkit-border-radius: 5px; margin: 0 auto; }

.tabs-menu { border-bottom: 1px solid #CCC; padding: 12px 20px; overflow: hidden; background: #EEE;}
.tabs-menu li { float: left; display: inline; background: url(../img/ui/menu_space.png) no-repeat right center; padding-right: 30px; }
.tabs-menu li:last-child { background: none;}
.tabs-menu li a { text-transform: uppercase; font-size: 12px; color: #333; font-weight: bold; line-height: 30px;}
.tabs-menu li.active a { color: #F40615;}
.tabs-menu li a:hover { color: #F40615;}

.tab { background: #FFF; }
.tab-content { overflow: hidden; display: none; padding: 20px 20px; }
.tab-content p { color: #333; font-size: 12px;}
#tab-1 { display: block; }

table { border-collapse: collapse; border-spacing: 0; width:100%; height:100%; margin:0px; padding:0px; }
table tr { border-bottom:1px solid #999; }
table tr:last-child { border-bottom: 0; }
table td { vertical-align: middle; text-align: left; padding:3px 0; width: 40%; font-size:12px; line-height: 18px; color:#333; border-right:1px solid #999; }
table tr td:last-child { border: 0; padding-left: 12px;}

/* Inline Popups */

div.inline { background: #303030; padding: 0; }
div.inline.center { text-align: center; }
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; }
div.inline .btn-wrap { overflow: hidden; display: block; text-align: center; }
div.inline a { text-decoration: none; background: #666; color: #FFF; display: block; margin: 5px 0px; padding: 8px 10px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
div.inline a:hover { background: #999; }

/* Mobile and tablet Hide Class */

.mobile-hide { display: none !important; } 
.tablet-hide { display: none !important; }   


/* ////////////////////////////////  Orientation Hint //////////////////////////////// */

@media screen and (orientation: landscape) and (max-width: 768px) {
  #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; }
  #orientation img { position: fixed; z-index: 8000; width: 100px; top: 50%; margin-top: -50px; left: 50%; margin-left: -50px;  -webkit-transform:rotate(90deg); transform:rotate(90deg); }
}

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

/* Short Tablet in Landscape Mode */
@media screen and (min-height: 400px) and (max-height: 600px) and (orientation: landscape) {
    .intro-slideshow { width: 230px !important; margin-top: 30px; }
}


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

@media screen and (min-width: 1px) {
	
	.iosSlider .prevButton, .iosSlider .nextButton { display: none; }
	
	.container { position: relative; width: 100%; margin: 0 auto; padding: 0; }

	.navicon { display: block; width: 49px; font-size: 15px; margin-right: 10px; cursor: pointer; }
	
	.slideSelectors { display: block; width: 80px; bottom: 80px; }
	.slideSelectors .item {	width: 8px; height: 8px; margin: 0 0 0 10px; border-radius: 10px; }
	
	h2 { font-size: 1.2em; line-height: 1.3em; margin: 15px 0; }
    h2.home { margin-top: 20px; font-size: 1.3em; line-height: 1.4em; padding: 0 50px;  }
    h2.home-intro { margin-top: 10px; font-size: 1.2em; line-height: 1.2em; padding: 0 30px; }
	h3 { font-size: 0.8em; line-height: 1.3em;}
	
	a.btn { margin-top: 10px; }
    
    .navicon { display: none; }

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

/* //////////////////////////////// iPhone 5 portrait //////////////////////////////// */ 

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

    .inner-absolute { margin-top: 20% }

    .slick-slider .slick-slide img { max-height: 200px; width: auto !important; }

    .cycle-slideshow { width: 200px; margin-top: 30px; }

    h2.home { margin-top: 0px; font-size: 1.5em; line-height: 1.6em; padding: 0 50px;  }
    h2.home-intro { margin-top: 0px; font-size: 1.3em; line-height: 1.4em; padding: 0 50px;  }

    .languages ul li { margin: 5px; }

    .slick-slider { margin: 20px 10px; }
    .slick-slider .slick-slide img { max-height: 250px; width: auto !important; }

}

/* //////////////////////////////// iPhone 5 landscape //////////////////////////////// */  

@media screen and (min-width: 480px) and (max-width: 768px) {
	
	.middle { padding: 20px; }
	
	.container { width: 420px; }
	.container .col { width: 100%; margin: 0; }
	
	.slick-slider .slick-slide img { max-height: 225px; width: auto !important; }

    .computer-select a h4 { font-size: 14px; }
	
	img.intro { width: 180px; }
	
	h2 { font-size: 1.3em; }
	h3 { font-size: 1em; }
	
	a.btn { margin-top: 20px; }	
	
	.product-name { width: 60px; height: 60px; right: 5px; top: 5px; }

    ul.task-list { margin: 0; }
    ul.task-list li { margin-bottom: 10px; }
    ul.task-list li a {  }
    ul.task-list li a span { font-size: 1em; line-height: 60px; }
    ul.task-list li a img { width: 50px; margin: 10px 10px 10px 10px; }
    
    a.virtual-dive-btn { margin-bottom: 10px; padding: 40px 20px; }
    
    div.inline h6 { font-size: 1.2em; margin: 0 0 15px 0; }
    div.inline p { font-size: 13px; line-height: 16px; }

}

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

@media screen and (min-width: 768px) {
	
	.container { width: 720px; }
	.container .col { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
	.container .grid1.col { width: 40px; }
	.container .grid2.col { width: 100px; }
	.container .grid3.col { width: 160px; }
	.container .grid4.col { width: 220px; } 
	.container .grid5.col { width: 280px; }
	.container .grid6.col { width: 340px; }
	.container .grid7.col { width: 400px; }
	.container .grid8.col { width: 460px; }
	.container .grid9.col { width: 520px; }
	.container .grid10.col { width: 580px; }
	.container .grid11.col { width: 640px; }
	.container .grid12.col { width: 700px; }

    .btm-bar .container, .btm-bar .container .col { width: 100% !important; margin: 0;}
	
	.mobile-hide { display: block !important; }
    .tablet-hide { display: none !important; } 

    #computer-select { display: none !important; }
    .custom-pager { display: none !important; }

    .inner-absolute { margin-top: 20%; }

    .languages { width: 350px; }
	
	img.intro { width: 350px; }
	
	.product-name { display: block; width: 80px; height: 80px; right: 5px; top: 5px; }
	
	h2 { font-size: 2em; }
    h2.home { margin-top: 0px; font-size: 2em; line-height: 1.8em; padding: 0 50px;  }
    h2.home-intro { font-size: 1.7em; line-height: 1.7em; }
	h3 { font-size: 1.1em; margin-bottom: 10px; }

    /* Slick Slider - Intro */

    .slick-slider { display: none; margin: 20px 10px; }
    .slick-slider .slick-slide img { width: 50% !important; height: 50% !important; max-height: 100% !important; }

    /* Products Grid - Intro  */

    .products-grid { display: flex; }

    .cycle-slideshow { width: 300px; display: block; margin: 20px auto; }

    /* Select Computer */
    .computer-select a h4 { font-size: 16px; }
	
    /* language Selection page */
    .current-language { top: 15px; left: 20px; }
    .language-logo { width: 200px; margin: 50px auto 0 auto; }

    /* Switch Computer */
    a.switch-computer { top: 10px; left: 10px; z-index: 9000; width: 50px; height: 50px;  }
    a.switch-menu { display: block; top: 10px; left: 10px; z-index: 9000; width: 50px; height: 50px;  }

    /* Current Language */
    .current-language { top: 10px; left: 10px; }
    .current-language a { width: 45px; height: 45px;  }
    .current-language a span { padding: 0 10px; line-height: 45px; font-size: 14px; }

    /* Task Grid */

    .task-grid { margin: 20px 0 0 0; }
	
	ul.task-list {  }
	ul.task-list li { margin: 0 0 20px 0; }
    ul.task-list li a { width: 100%; margin: 0; }
	ul.task-list li a span { font-size: 1em; line-height: 30px; text-align: center; }
	ul.task-list li a img { width: 50px; margin: 10px 0 10px 10px; }

    a.virtual-dive-btn { font-size: 1.3em; margin-bottom: 20px; padding: 60px 0 70px 0; }
    a.virtual-dive-btn:hover { animation: zoom 1s; -webkit-animation: zoom 1s; }

    p.warning { font-size: 14px; line-height: 20px; }
    a.download { font-size: 14px; line-height: 20px; }
    a.link { font-size: 14px; line-height: 20px; }
	
    /* Main Nav */
    
    ul.nav-main { width: 100%; display: block !important; float: left; margin: 0px; bottom: 0; position: relative; background: none; text-align: center; }
    ul.nav-main li { float: none; display: inline-block; height: 49px; width: auto; padding: 0px; line-height: 20px; text-align: center; list-style: outside none; border-bottom: none; }
    ul.nav-main.col4 li { width: auto; }
    ul.nav-main li a { float: left; padding: 0px; font-size: 11px; height: 49px; padding: 0px 10px 0 50px; text-align: center; text-decoration: none; text-transform: uppercase; color: #FFF; font-weight: 100; font-family: "suuntoregular" !important; }
    ul.nav-main li a span { height: 49px; line-height: 49px; float: left; display: block; color: #FFF; display: none; }
    ul.nav-main li.active { margin-top: -8px; padding-top: 8px; color: #FF141F; background: url(../img/ui/footernav_arr.png) no-repeat 65% top; } 
    ul.nav-main li.active a span { color: #FF141F; } 
    ul.nav-main li:hover a { color: #FF141F; }
    ul.nav-main li:hover { cursor: pointer; }
    
    ul.nav-main li.logo { margin: 0; padding: 0; float: left; }
    ul.nav-main li.info { float: right; }
    ul.nav-main li.info a { padding-left: 65px; }
    ul.nav-main li.about a { padding-left: 65px; }
    ul.nav-main li.computer a { padding-left: 65px; }
    ul.nav-main li.language a { padding-left: 65px; }
    
    ul.nav-main li.logo a { background: url(../img/main/suunto-logo.svg) no-repeat left; background-size: 100px; width: 120px; padding: 0;}
    
    ul.nav-main li a { background-position: top left 12px !important; }
    ul.nav-main li.active a { background-position: left 12px top -49px !important; }
    ul.nav-main li.active.logo a { background-position: top left 12px !important; }
  
    .navicon { display: none; }

    .prevButton { bottom: 70px; margin-left: 20px;}
    .nextButton { bottom: 70px; margin-right: 20px; }

    .mobile-hide { display: block !important; }
    .tablet-hide { display: none !important; } 

    a.virtual-dive-btn span { float: left; }
    a.virtual-dive-btn span.triangle { width: 30px; height: 30px; display: block; background: url(../img/ui/triangle-right.svg) no-repeat left center; margin-left: 30px; animation: bouncy 2s infinite; -webkit-animation: bouncy 2s infinite; }
    a.virtual-dive-btn:hover { }

    @keyframes bouncy {
            0% { transform: translate3d(0,-5px,0); animation-timing-function: ease-out;}
           50% { transform: translate3d(-10px,-5px,0); animation-timing-function: ease-in;}
          100% { transform: translate3d(0,-5px,0); animation-timing-function: ease-out;}
    }
  
    @-webkit-keyframes bouncy {
            0% { -webkit-transform: translate3d(0,-5px,0); -webkit-animation-timing-function: ease-out;}
           50% { -webkit-transform: translate3d(-10px,0,0); -webkit-animation-timing-function: ease-in;}
          100% { -webkit-transform: translate3d(0,-5px,0); -webkit-animation-timing-function: ease-out;}
    }
    	
    #orientation { display: none; }
    
    div.inline h6 { font-size: 1.3em; margin: 0 0 15px 0; }
    div.inline p { font-size: 14px; line-height: 18px; }
    div.inline .btn-wrap { overflow: hidden; display: table; border-collapse: separate; border-spacing:5px; text-align: center; margin: 0 auto; }
    div.inline a { display: table-cell; margin: 0; padding: 8px 30px; text-align: center;  }

}

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

@media screen and (min-width: 961px) {
	
	.container { width: 960px; }
	.container .grid1.col { width: 60px; }
	.container .grid2.col { width: 140px; }
	.container .grid3.col { width: 220px; }
	.container .grid4.col { width: 300px; }   
	.container .grid5.col { width: 380px; }
	.container .grid6.col { width: 460px; }
	.container .grid7.col { width: 540px; }
	.container .grid8.col { width: 620px; }
	.container .grid9.col { width: 700px; }
	.container .grid10.col { width: 780px; }
	.container .grid11.col { width: 860px; }
	.container .grid12.col { width: 940px; }
	
    .product-name { display: block; width: 90px; height: 90px; right: 20px; top: 20px; }

    a.switch-computer { top: 15px; left: 15px; z-index: 9000; width: 50px; height: 50px;  }
    a.switch-menu { top: 15px; left: 15px; z-index: 9000; width: 50px; height: 50px;  }

    .inner-absolute { margin-top: 8%; }

    /* Slick Slider */

    .slick-slider { display: none; width: 1000px; margin: 1% auto 0 auto; }
    .slick-track { width: 100% !important;}
    .slick-slide { width: 30% !important; }
    .slick-slider .slick-slide img { width: 100% !important; height: 100% !important; max-height: 100% !important; }
    .slick-slider .slick-slide:hover img { margin-top: -5px; }

    /* Products Grid - Intro  */
    
    .products-grid { display: flex; margin: 30px auto; }
    .products-grid a { max-width: 220px; }
    .products-grid a:first-child { margin-left: -40px; }

    /* Computer Select Screen */

    .computer-select { margin-top: 40px; }

    .cycle-slideshow { margin: 40px auto -20px auto; }
    .intro-slideshow { margin: 40px auto 20px auto; }

    h2 { padding-top: 30px; }
    h2.home { margin-top: 0px; font-size: 2em; line-height: 1.8em; padding: 0 50px;  }

    /* Main Nav Bar */
    ul.nav-main li.logo { margin: 0; }
    ul.nav-main li:first-child { margin-left: 20px; }
    ul.nav-main li:last-child { margin-right: 20px; }
    ul.nav-main li a span { display: block; font-size: 12px; }
	
    .mobile-hide { display: block !important; }
    .tablet-hide { display: block !important; } 
	
	ul.task-list li { margin-bottom: 20px; }
	ul.task-list li a { }
	ul.task-list li a span { font-size: 1em; }
	ul.task-list li a img { width: 60px; margin: 10px 0 10px 10px; }

    a.virtual-dive-btn { margin-bottom: 20px; padding: 80px 0 90px 0; font-size: 1.4em; }

    .prevButton { bottom: 70px; margin-left: 20px;}
    .nextButton { bottom: 70px; margin-right: 20px; }

    .mobile-hide { display: block !important; }
    .tablet-hide { display: none !important; } 

    #summary { width: 80%; }

    #orientation { display: none; }

    div.inline a { }

}  

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

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

    .inner-absolute { margin-top: 8%; }

    /* Products Grid - Intro  */
    
    .products-grid { display: flex; margin: 50px auto; }
    .products-grid a { max-width: 300px; }

    .inner { padding-bottom: 100px !important; }

}