body, html {
  height: 100%; }

body.fixed {
  position: fixed;
  left: 0;
  right: 0; }
  body.fixed #expresso-eleven.ios {
    position: fixed; }

.primary-button {
  background-color: #8A1019; }

#page {
  padding-top: 0;
  color: white;
  transform: none;
  -webkit-transform: none;
  /*-webkit-overflow-scrolling: touch;*/
  /*height: 200px;*/
  height: 100%;
  width: 100%; }

#expresso-eleven {
  width: 100%;
  position: relative;
  height: 950px;
  overflow: hidden;
  scrollbar-base-color: #C8FFFF;
  scrollbar-base-color: #C8FFFF;
  scrollbar-3dlight-color: #C8FFFF;
  scrollbar-highlight-color: #C8FFFF;
  scrollbar-track-color: #000D20;
  scrollbar-arrow-color: #C8FFFF;
  scrollbar-shadow-color: #C8FFFF;
  scrollbar-dark-shadow-color: #C8FFFF; }
  #expresso-eleven ::-webkit-scrollbar {
    width: 8px; }
  #expresso-eleven ::-webkit-scrollbar-button {
    width: 8px;
    height: 5px; }
  #expresso-eleven ::-webkit-scrollbar-track {
    background: #000D20;
    border: thin solid #000D20;
    box-shadow: 0px 0px 3px #000D20 inset;
    border-radius: 10px; }
  #expresso-eleven ::-webkit-scrollbar-thumb {
    background: #C8FFFF;
    border: thin solid gray;
    border-radius: 10px; }
  #expresso-eleven ::-webkit-scrollbar-thumb:hover {
    background: #C8FFFF; }
  #expresso-eleven * {
    box-sizing: border-box; }
  #expresso-eleven.iphone .main-view {
    margin: 0; }
  #expresso-eleven.iphone .timeline .entries .empty {
    padding-top: 8%; }
  #expresso-eleven.iphone .progress div.button {
    margin-top: 10px; }
  #expresso-eleven.client .logo {
    display: none; }
  #expresso-eleven.client .explanation {
    display: none; }
  #expresso-eleven.client .main-view .navbar {
    /*padding-right: 55px;*/ }
  #expresso-eleven.client .timeline {
    position: fixed; }
    #expresso-eleven.client .timeline .entries {
      bottom: 150px; }
  #expresso-eleven.client .progress {
    position: fixed; }
    #expresso-eleven.client .progress .entries .item .subtitle {
      min-height: 30px; }
  #expresso-eleven.air .main-view .cards .card {
    max-width: 172px; }
  #expresso-eleven.air .progress .entries .item .value .number {
    top: 21%; }
  #expresso-eleven.air .progress .entries .item .value img {
    max-width: 49px; }
  #expresso-eleven.air .progress div.button {
    padding: 0;
    margin-right: 120px; }
  #expresso-eleven.air .timeline .entries .vline {
    left: 154px; }
  #expresso-eleven.sidebar-active .main-view .shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.7); }
  #expresso-eleven .main-view {
    background-image: url(/img/style/v2/expresso_eleven/background.png);
    margin-right: 460px;
    overflow-y: auto;
    height: 100%;
    padding-bottom: 140px;
    position: relative; }
    #expresso-eleven .main-view .logo {
      width: 50%;
      margin: 0 auto;
      text-align: center; }
      #expresso-eleven .main-view .logo img {
        max-width: 100%; }
    #expresso-eleven .main-view .explanation {
      width: 55%;
      margin: 0 auto 20px auto;
      text-align: center;
      font-size: 20px; }
      #expresso-eleven .main-view .explanation a, #expresso-eleven .main-view .explanation a:visited {
        color: white;
        text-decoration: underline;
        font-weight: normal; }
    #expresso-eleven .main-view .navbar {
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      max-width: 725px;
      width: 100%;
      height: 55px;
      clear: both;
      padding: 3px 0 0 10px;
      margin: 0 auto; }
      #expresso-eleven .main-view .navbar .item {
        display: inline-block;
        background-image: url(/img/style/v2/expresso_eleven/nav_btn-off.png);
        background-repeat: no-repeat;
        background-size: 100% 50px;
        text-align: center;
        max-width: 102px;
        width: 14%;
        height: 55px;
        line-height: 55px;
        font-family: BebasNeueRegular;
        font-size: 30px;
        color: white;
        font-weight: normal;
        cursor: pointer; }
        #expresso-eleven .main-view .navbar .item.active {
          background-image: url(/img/style/v2/expresso_eleven/nav_btn-on.png); }
    #expresso-eleven .main-view .cards {
      margin: 0 auto;
      max-width: 1220px; }
      #expresso-eleven .main-view .cards .card {
        width: 200px;
        float: left;
        position: relative; }
        #expresso-eleven .main-view .cards .card img {
          width: 100%; }
        #expresso-eleven .main-view .cards .card .pending {
          position: absolute;
          top: 0;
          left: 15%;
          right: 15%;
          bottom: 0;
          text-align: center;
          padding-top: 50%; }
          #expresso-eleven .main-view .cards .card .pending .stripe {
            background-color: rgba(14, 41, 68, 0.8);
            color: white;
            padding: 10px 0;
            text-transform: uppercase;
            font-family: BebasNeueRegular; }
  #expresso-eleven .timeline {
    width: 100%;
    max-width: 460px;
    height: 100%;
    background-color: #0d2844;
    border: #214e78 solid 1px;
    position: absolute;
    top: 0;
    right: 0; }
    #expresso-eleven .timeline .handle {
      display: none;
      width: 50px;
      height: 50px;
      position: absolute;
      left: -50px;
      background-image: url(/img/style/v2/expresso_eleven/timeline-toggle.png);
      cursor: pointer; }
    #expresso-eleven .timeline > .title {
      font-family: BebasNeueRegular;
      font-size: 30px;
      text-transform: uppercase;
      text-align: center;
      font-weight: normal;
      margin: 20px; }
    #expresso-eleven .timeline .entries {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      position: absolute;
      top: 70px;
      bottom: 120px;
      left: 20px;
      right: 20px; }
      #expresso-eleven .timeline .entries .innerbox {
        position: relative; }
      #expresso-eleven .timeline .entries .vline {
        border-left: solid 1px #6084A4;
        position: absolute;
        z-index: 1;
        top: 20px;
        left: 145px;
        bottom: 65px; }
      #expresso-eleven .timeline .entries.noline .vline {
        display: none; }
      #expresso-eleven .timeline .entries .empty {
        text-align: center;
        padding-top: 15%;
        width: 70%;
        margin: 0 auto; }
        #expresso-eleven .timeline .entries .empty .title {
          font-weight: bold;
          margin-bottom: 20px; }
        #expresso-eleven .timeline .entries .empty .button {
          margin-top: 20px; }
      #expresso-eleven .timeline .entries .entry {
        margin-bottom: 20px;
        position: relative;
        z-index: 2; }
        #expresso-eleven .timeline .entries .entry:after {
          content: "";
          display: table;
          clear: both; }
        #expresso-eleven .timeline .entries .entry .meta {
          float: left;
          padding-top: 20px;
          padding-right: 10px;
          width: 120px; }
        #expresso-eleven .timeline .entries .entry .icon {
          background-repeat: no-repeat;
          width: 50px;
          height: 56px;
          float: left; }
          #expresso-eleven .timeline .entries .entry .icon.won {
            background-image: url(/img/style/v2/expresso_eleven/status_win.png); }
          #expresso-eleven .timeline .entries .entry .icon.current {
            background-image: url(/img/style/v2/expresso_eleven/status_current.png); }
          #expresso-eleven .timeline .entries .entry .icon.lost {
            background-image: url(/img/style/v2/expresso_eleven/status_lose.png); }
          #expresso-eleven .timeline .entries .entry .icon.cancel {
            background-image: url(/img/style/v2/expresso_eleven/status_cancel.png); }
        #expresso-eleven .timeline .entries .entry .info {
          float: left;
          width: 230px; }
          #expresso-eleven .timeline .entries .entry .info .card {
            width: 50px;
            height: 65px;
            float: left; }
            #expresso-eleven .timeline .entries .entry .info .card img {
              width: 100%; }
          #expresso-eleven .timeline .entries .entry .info .title {
            height: 22px; }
          #expresso-eleven .timeline .entries .entry .info .buyin {
            height: 22px; }
          #expresso-eleven .timeline .entries .entry .info .reference {
            height: 22px; }
        #expresso-eleven .timeline .entries .entry .button {
          display: block; }
          #expresso-eleven .timeline .entries .entry .button a, #expresso-eleven .timeline .entries .entry .button a:visited {
            background-image: url(/img/style/v2/expresso_eleven/join-table_btn.png);
            background-repeat: no-repeat;
            background-size: 100% 30px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            display: block;
            color: white;
            text-decoration: none;
            font-weight: normal; }
    #expresso-eleven .timeline #loadmore {
      background-image: url(/img/style/v2/expresso_eleven/join-table_btn.png);
      background-repeat: no-repeat;
      background-size: 100% 30px;
      line-height: 30px;
      text-align: center;
      height: 30px;
      display: block;
      max-width: 194px;
      color: white;
      font-weight: normal;
      cursor: pointer;
      margin: 0 auto; }
      #expresso-eleven .timeline #loadmore.pending {
        opacity: 0.2;
        cursor: wait; }
  #expresso-eleven .progress {
    width: 100%;
    background-color: #000d20;
    border: #002555 solid 1px;
    position: absolute;
    bottom: 0; }
    #expresso-eleven .progress div.button {
      float: right;
      margin-top: 35px;
      padding-left: 15px;
      padding-right: 15px;
      display: none;
      clear: none !important; }
      #expresso-eleven .progress div.button.active {
        display: block; }
    #expresso-eleven .progress .entries {
      height: 100%;
      width: 100%;
      padding-left: 100px;
      float: left;
      position: relative; }
      #expresso-eleven .progress .entries .counter {
        margin-left: -100px;
        max-width: 90px;
        float: left;
        margin-top: 5px;
        text-align: center;
        text-transform: uppercase;
        font-family: BebasNeueRegular;
        font-size: 22px; }
        #expresso-eleven .progress .entries .counter div {
          margin-top: 20px; }
      #expresso-eleven .progress .entries .line {
        border-top: solid 1px #0d2944;
        position: absolute;
        height: 1px;
        left: 15px;
        right: 50px;
        top: 55px; }
      #expresso-eleven .progress .entries .list {
        overflow: hidden;
        position: relative; }
      #expresso-eleven .progress .entries .item {
        display: block;
        float: left;
        bottom: 5px;
        margin-right: 2%;
        margin-top: 23px;
        height: 100%;
        width: 7%; }
        #expresso-eleven .progress .entries .item .subtitle {
          text-align: center;
          text-transform: uppercase;
          font-family: BebasNeueRegular;
          margin-top: -10px;
          margin-bottom: 10px; }
          #expresso-eleven .progress .entries .item .subtitle .long {
            font-size: 16px;
            display: block; }
          #expresso-eleven .progress .entries .item .subtitle .short {
            display: none; }
        #expresso-eleven .progress .entries .item .value {
          text-align: center;
          position: relative;
          /*display: inline-block;*/
          display: block;
          font-family: BebasNeueRegular;
          font-size: 20px;
          /*	max-width: 63px;*/ }
          #expresso-eleven .progress .entries .item .value img {
            width: 100%;
            max-width: 63px; }
          #expresso-eleven .progress .entries .item .value .number {
            position: absolute;
            top: 25px;
            width: 100%;
            text-align: center; }
          #expresso-eleven .progress .entries .item .value.locked .number {
            display: none; }

@media screen and (max-width: 1280px) {
  #expresso-eleven.client .main-view {
    overflow: hidden; }
    #expresso-eleven.client .main-view .navbar {
      /*padding: 0;*/ }
  #expresso-eleven .main-view {
    width: 100%; }
    #expresso-eleven .main-view .navbar {
      padding: 0; }
    #expresso-eleven .main-view .cards {
      padding-left: 10px; }
  #expresso-eleven .timeline {
    position: absolute;
    right: -460px;
    transition: all 200ms;
    z-index: 3; }
    #expresso-eleven .timeline .handle {
      display: block; }
    #expresso-eleven .timeline .entries {
      bottom: 20px !important; }
  #expresso-eleven .progress div.button {
    margin-top: 20px; }
    #expresso-eleven .progress div.button a {
      padding: 0 10px;
      font-size: 20px; }
  #expresso-eleven .progress .entries {
    padding-left: 60px; }
    #expresso-eleven .progress .entries .list .item {
      margin-top: 5px; }
      #expresso-eleven .progress .entries .list .item .value .number {
        top: 25%; }
    #expresso-eleven .progress .entries .counter {
      margin-left: -45px;
      margin-top: 30px; }
      #expresso-eleven .progress .entries .counter div {
        display: none; }
    #expresso-eleven .progress .entries .line {
      top: 30px; }
  #expresso-eleven.sidebar-active .timeline {
    right: 0;
    left: auto; } }
@media screen and (max-width: 1024px) {
  #expresso-eleven {
    height: auto; }
    #expresso-eleven .main-view .logo {
      width: 25%; }
    #expresso-eleven .main-view .explanation {
      font-size: 14px; }
    #expresso-eleven .main-view .cards {
      max-width: 820px;
      margin-left: auto;
      margin-right: auto; }
    #expresso-eleven .progress .entries .line {
      top: 25px; }
    #expresso-eleven .progress .entries .list .item {
      margin-top: 5px; }
      #expresso-eleven .progress .entries .list .item .value .number {
        top: 20%; }
      #expresso-eleven .progress .entries .list .item .value .subtitle {
        font-size: 16px;
        margin-top: 0; }
        #expresso-eleven .progress .entries .list .item .value .subtitle .long {
          display: none; }
        #expresso-eleven .progress .entries .list .item .value .subtitle .short {
          display: block; }
    #expresso-eleven .timeline > .title {
      font-size: 20px;
      margin: 10px; }
    #expresso-eleven .timeline .entries {
      top: 45px; }
      #expresso-eleven .timeline .entries .entry {
        font-size: 14px; } }
@media screen and (max-width: 768px) {
  #expresso-eleven {
    height: auto; }
    #expresso-eleven .main-view .navbar {
      padding-right: 55px; }
      #expresso-eleven .main-view .navbar .item {
        font-size: 20px; }
    #expresso-eleven .main-view .cards {
      max-width: 90%; }
      #expresso-eleven .main-view .cards .card {
        max-width: 25%; }
    #expresso-eleven.sidebar-active .timeline {
      width: 90%; }
      #expresso-eleven.sidebar-active .timeline .entries .entry .info {
        width: 210px; }
    #expresso-eleven .progress .counter {
      display: none; }
    #expresso-eleven .progress .entries {
      padding-left: 10px; }
      #expresso-eleven .progress .entries .line {
        top: 20px;
        right: 20px; }
      #expresso-eleven .progress .entries .list .item .value .number {
        /*font-size: 16px;
        top: 23%;*/
        font-size: 12px;
        top: 12%; }
      #expresso-eleven .progress .entries .list .item .value .subtitle {
        font-size: 8px; }
    #expresso-eleven .progress .button {
      margin-top: 5px; } }
@media screen and (max-width: 479px) {
  #expresso-eleven {
    height: auto; }
    #expresso-eleven .main-view .logo {
      width: 30%; }
    #expresso-eleven .main-view .explanation {
      font-size: 14px; }
    #expresso-eleven .main-view .cards .card {
      max-width: 33%; }
    #expresso-eleven .timeline {
      right: -100%;
      left: 100%; }
      #expresso-eleven .timeline > .title {
        font-size: 24px; }
      #expresso-eleven .timeline .entries .vline {
        left: 115px; }
      #expresso-eleven .timeline .entries .entry .meta {
        font-size: 13px;
        width: 90px; }
      #expresso-eleven .timeline .entries .entry .info {
        max-width: 140px; }
        #expresso-eleven .timeline .entries .entry .info .title {
          font-size: 14px; }
        #expresso-eleven .timeline .entries .entry .info .buyin {
          display: none; }
        #expresso-eleven .timeline .entries .entry .info .reference {
          font-size: 12px; }
    #expresso-eleven.sidebar-active .timeline {
      right: 0;
      left: 50px;
      width: auto; }
    #expresso-eleven .progress .entries {
      height: 150px;
      padding: 0; }
      #expresso-eleven .progress .entries .line {
        left: 10px;
        right: 20px;
        top: 20px; }
      #expresso-eleven .progress .entries .list {
        position: absolute;
        top: 0; }
        #expresso-eleven .progress .entries .list .item {
          display: inline-block;
          height: 85px; }
          #expresso-eleven .progress .entries .list .item .value .number {
            font-size: 13px;
            top: 10px; }
          #expresso-eleven .progress .entries .list .item .value .subtitle {
            font-size: 12px; }
    #expresso-eleven .progress div.button {
      position: absolute;
      top: 60px;
      left: 0;
      right: 0;
      line-height: 32px;
      text-align: center; }
      #expresso-eleven .progress div.button .button {
        max-width: 200px; } }
@media screen and (max-width: 360px) {
  #expresso-eleven .main-view .cards:after {
    content: "";
    display: table;
    clear: both; }
  #expresso-eleven .timeline .entries .entry .meta {
    width: 70px;
    font-size: 13px; }
  #expresso-eleven .timeline .entries .entry .info {
    max-width: 130px; }
    #expresso-eleven .timeline .entries .entry .info .title {
      font-size: 14px; }
    #expresso-eleven .timeline .entries .entry .info .buyin {
      display: none; }
    #expresso-eleven .timeline .entries .entry .info .reference {
      font-size: 12px; }
  #expresso-eleven .progress .entries .list .item .value {
    top: 10px; }
    #expresso-eleven .progress .entries .list .item .value .number {
      font-size: 12px; }
  #expresso-eleven .progress .entries .list .item .subtitle {
    display: none; } }