* {font-family:arial, sans-serif;}
body {background:url('images/bg.jpg') top center no-repeat #000; background-size:cover; margin:0; padding:0 0 50px 0; text-align:center; font-size:0;}

.top {width:100%; background:#000; border-bottom:1px solid #222; font-size:16px;}
.topbar {padding:0; text-align:center; display:inline-block;}
.topbar ul {list-style:none; margin:0 auto; padding:0; text-align:center;}
.topbar ul li {float:left;}
.topbar ul li a {display:block; color:#888; padding:15px 10px; text-decoration:none;}
.topbar ul li a:hover {color:#fff;}
.topbar ul li a i {color:#329ce0; margin-right:3px;}

.tagline {margin:30px 20px 0 20px;}
.tagline h2 {color:#eee; font-weight:normal; font-size:18px;}
.tagline .deviceshapes {float:left; width:86px; margin-left:30px; display:none;}
.tagline .buttonappstore {float:right; width:135px; margin-right:30px; display:none;}

.logo {clear:both; margin:20px auto 35px auto; padding:0;}
.logo h1 {margin:0; padding:0;}
.logo h1 img {border:0;}

.modes {margin:0 auto 0 auto; clear:both; text-align:center; vertical-align:top;}

.mode {width:290px; min-width:240px; background:url('images/bg-mode.png') repeat-x #000; display:inline-block; padding:0; margin:0 1% 20px 1%; text-align:left; vertical-align:top; min-height:470px;}
.mode h3 {font-weight:normal; font-size:24px; color:#fff; text-transform:uppercase; text-align:center; margin:0; padding:20px 20px 0 20px;}
.mode .screenshot {padding:25px 20px;}
.mode .screenshot img {width:100%;}
.mode p {margin:0; padding:0 20px; color:#ccc; font-size:18px; text-align:left;}
.mode ul {margin:25px 20px 30px 20px; padding:0; text-align:left; list-style-position:outside; list-style:none; text-indent:none; font-size:15px;}
.mode ul li {color:#ccc; margin:5px 0; padding:0; text-align:left;}
.mode ul li i {color:#999; padding-right:10px;}

.escape h3 {color:#329ce0;}
.escape ul li i {color:#329ce0;}
.explore h3 {color:#39b54a;}
.explore ul li i {color:#39b54a;}
.survive h3 {color:#f7941d;}
.survive ul li i {color:#f7941d;}
.discover h3 {color:#f875b9;}
.discover ul li i {color:#f875b9;}

.discover h3 span {padding-left:5px; color:#fff; font-size:16px;}

strike {color:#f875b9;}

.download {clear:both; margin:30px auto; display:flex; flex-wrap:wrap; justify-content:center;}
.download a {display:flex; justify-content:center; font-weight:bold; background:#329ce0; color:#fff; margin:20px; width:250px; padding:20px; border-radius:5px; text-decoration: none; font-size:18px; text-align: center; transition:0.2s;}
.download a:hover {text-decoration: none; opacity:0.8; transform:scale(1.05);}

.mobilemenu {display:none;}


.support {display:block; max-width:600px; margin:0 auto; padding:40px; border-top:1px solid #333; background:#000; text-align:left;}
.support h5 {color:#329ce0; font-size:15px; font-weight:normal; margin:30px 0 10px 0;}
.support p {color:#ccc; font-size:14px; margin:10px 0;}
.support p b {color:#fff;}
.support p a {color:#329ce0;}

.press {display:block; max-width:600px; margin:0 auto; padding:40px; border-top:1px solid #333; background:#000; text-align:left;}
.press h5 {color:#329ce0; font-size:15px; font-weight:normal; margin:30px 0 10px 0;}
.press h3 {color:#fff; font-size:24px; margin:30px 0 10px 0;}
.press p {color:#ccc; font-size:18px; margin:10px 0;}
.press p b {color:#fff;}
.press p a {color:#329ce0;}
.press ul {list-style:square; list-style-position:inside; padding-left:40px; display:block; margin:20px 20px; color:#329ce0;}
.press ul li {margin:5px 0; color:#ccc; display:block; font-size:18px;}
.press ul li b {color:#fff;}

/* Larger screens - beef up mode div margins */
@media only screen and (min-width: 1382px) {
body {background:url('images/bg-large.jpg') top center no-repeat #000;}
}

/* Smaller screens */
/* Simplify top menu and shrink logo proportionally */
@media only screen and (max-width: 568px) {
.extraneous {display:none;}
.top {font-size:16px;}
.topbar ul li a {padding:10px 10px;}
.tagline h2 {font-size:16px;}
.logo h1 img {width:80%;}
.download img {width:80%;}

.mobilemenu {display:block;}
.mobilemenu ul {list-style:outside; margin:0 auto; padding:0; text-align:center; font-size:12px;}
.mobilemenu ul li {margin:5px 0;}
.mobilemenu ul li a {color:#888; text-decoration:none;}
.mobilemenu ul li a:hover {color:#fff;}
.mobilemenu ul li a i {color:#329ce0; margin-right:3px;}
}

/* Medium screens */
/* Reduce top menu size and padding */
@media only screen and (min-width: 568px) and (max-width: 768px) {
.top {font-size:12px;}
.topbar ul li a {padding:10px 10px;}
}

/* Deal with mode divs */
@media only screen and (min-width: 768px) and (max-width: 980px) {

.mode {width:30%; margin-left:0.5%; margin-right:0.5%;}
.mode img {width:80%;}
.mode h3 {font-size:16px;}
.mode p {font-size:14px;}
.mode ul {font-size:12px;}
.mode .screenshot {padding:15px 20px;}

}

@media only screen and (max-width: 768px) {
body {background:url('images/bg-small.jpg') top center no-repeat #000;}
.mode {min-height:400px; margin-bottom:20px;}
}

/* 2X size (iPhone 4 etc)*/
@media only screen and 
        (-webkit-min-device-pixel-ratio: 1.5), only screen and 
        (-o-min-device-pixel-ratio: 3/2), only screen and 
        (min-device-pixel-ratio: 1.5) {

}