body { font-family: "lato", Roboto, Arial, sans-serif; color:#666;}
p, ol li, ul li { font-size:1.125rem; line-height: 1.6; font-family: "lato"}
h1,h2,h3,h4,h5,h6 { font-family: "nexaheavy"; font-weight:normal; margin:0 0 1rem; color:#222;}
#header { text-align:center; padding:3rem 2rem; z-index:98; position: relative; background:#fff;}
.logo a:hover, .logo a:focus { opacity:.7; transition:all ease .3s;}
#content { padding: 3rem 2rem}

.title h1 { margin-top:2rem }
h1:after { display:block; width:200px; height:3px; content:""; background:#ae2b26; margin-bottom:3rem;}
body { background:#eee;}
#content { margin:1.25rem 1rem 1.25rem; background:#fff;}

.showcase { padding:4rem 0;  border-radius:4px;}
.showcase h4 { font-size:3rem; color:#ae2b26; text-align: center}
.showcase h2 { font-size:4rem;}
.showcase h2 span { float:left; font-size:5rem;  margin-right:1rem; font-family: sans-serif; font-weight: normal; line-height: 1; color:#ccc;}
.showcase h2:after { display:table; content:""; clear:both;}
.showcase h5 { font-size:1.5rem; margin-bottom: .5rem;}
.showcase h6 { }
.showcase table { margin:2rem 0}
table tbody tr:nth-child(even) { background:#f8f8f8 !important;}
.showcase-content td, .showcase-content tr {}
.showcase-content td { padding:.5rem; font-size:1.375rem; font-family: "nexaheavy" }
.showcase-content td:first-child { text-align:right; font-size:2rem; color:#222}
.showcase-content td:last-child { text-align:left; padding-left:3rem; color:#ae2b26;}
.showcase-content td small { color:#505050}
.showcase-content td h5 { margin:0; font-weight: bold; font-family: "nexa"; font-size:1.125rem}

.showcase-item td, .showcase-item tr {}
.showcase-item td { padding:.5rem; font-size:1.125rem; font-family: "nexa" }
.showcase-item td:first-child { text-align:right; font-size:1rem; color:#222;}
.showcase-item td:last-child { text-align:left;font-family: "nexa"; padding-left:3rem; color:#505050;}
.showcase-item td small { color:#505050}
.showcase-item td h5 { margin:0; font-weight: bold; font-size:1rem; font-family: "nexa"}

/* .showcase-item { padding:2rem; box-shadow: 0 2px 4px 2px #eee; border:1px solid #eee; border-radius:8px;} */

.si-img img { margin-bottom:1.5rem; box-shadow:0 2px 10px 2px #ccc;}
.si-img.si-img-games img { box-shadow:none;}
.showcase-img img { height:72px; width:auto; box-shadow:none;}
.showcase-item { margin:4rem auto 4rem; max-width:1000px}
.showcase-item h4 { font-family: "nexaheavy"; font-weight: bold; margin-bottom:2rem}

.showcase-item img { width:100%; height:auto;}

.menu { display:flex; background:rgba(255,255,255,.95); margin:0; padding:0; justify-content: center; box-shadow:0 0px 12px 0 rgba(0,0,0,.3);}
.menu li { display:block; margin:0 1rem;}
.menu li a { display:block; padding:2px 1rem 0; font-size: 1.25rem; line-height: 60px; color:#E49C2C; font-size:1.25rem; font-family: "nexaheavy"}

.grid-container { max-width:1000px;}
.showcase-game .grid-container { max-width:100%;}
.showcase-game .showcase-content { max-width:1000px; margin:0 auto;}
.showcase-game .showcase-item { max-width:100%}

.orbit-wrapper { box-shadow:0 2px 10px 2px #ccc;}
.showcase h6 { font-size:1.5rem; font-family: "nexaheavy"; display:none;}
.showcase-game h6 { display:block; font-size:1.125rem}

.video-cell { margin-bottom:2rem;}
.video-cell h6 { margin-top:-.5rem; font-size:1.25rem;}
.video-cell .responsive-embed { box-shadow:0 2px 8px 2px #ccc;}
.video-cell .responsive-embed iframe { background:#222;}

.showcase-item, .showcase-content { opacity: 0.3;; transition:all ease-in-out .1s;}
.showcase-item.active, .showcase-content.active { opacity:1; transition:all ease-in-out .6s}
.showcase-item img { transition:all ease-in-out .1s; transform:translateY(-20px);}
.showcase-item img.active { transform:translateY(0); transition: all ease-in-out .6s;}

.sticky.is-stuck { z-index: 99}

@media only screen and (max-width:60em){
  .menu { flex-wrap:wrap; padding:.5rem}
  .menu li { flex:1; flex-basis:25%; max-width:25%; width:25%; margin:0; padding:.5rem; align-items:center;}
  .menu li a { width:100%; line-height: 1.4; padding:1.125rem 1rem 1rem; background:#efefef; font-size:1rem; height:100%; text-align: center;}
  .menu li a span { display:none; }
}
@media only screen and (max-width:40em){
  .data-sticky-container { z-index: 99}
  .showcase h6 { display: block;}

  .menu { padding:0; margin-bottom:-2rem;}
  .menu li { flex:1 1 auto;  margin:0; padding:0; align-items:center;}
  .menu li+li { border-left:1px solid #999}
  .menu li a { width:100%; line-height: 1; font-family: "nexa"; padding:1.125rem 0 1rem; background:#222; font-size:.875rem; color:#fff; white-space: nowrap;}
  .menu li a span { display:none; }
  h1 { font-size:1.5rem;}
  .showcase h4 { font-size:1.25rem; color:#ae2b26; text-align: center}
  .showcase h2 { font-size:1.5rem}
  #content { padding:3rem .5rem; margin:0;}
  .showcase h5 { font-size:1rem;}
  .showcase-item { padding:0;}
  .showcase { padding-top:4rem;}
  .showcase h6 { font-size:1rem;}
  .showcase h5 small, .showcase h6 small { color:#505050}

  .showcase-content td { font-size:1rem;}
  .showcase-content td h5 { font-size:.9375rem;}
  .showcase-content td:last-child { padding-left:1rem; padding-right:1.5rem;}
  .showcase-item td { font-size:1rem;}
  .showcase-item td h5 { font-size:.9375rem}
  .showcase-item td:last-child { padding-left:1rem; padding-right:1.5rem}
  .showcase-img img { height:48px;}
}