@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,700italic|Oswald:100,400,700,300|Lusitana:400|Roboto:300,400,700|Roboto+Condensed:300,400,700");
/**** Helper rules *****/
/* Layout formatting */
.left {
  float: left; }

.right {
  float: right; }

.hidden {
  display: none !important; }

.offscreen {
  position: absolute;
  display: block;
  left: -999999px;
  top: -999999px; }

.text-indent {
  text-indent: -999px; }

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

.hide{display: none;}

/* Vertical Align */
nav#ui_site_nav li .label span {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

/* Image replacement for text */
.ir, .el-arrow-down, .mod-summary .img-cite {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  text-indent: -9999px; }
  .ir:before, .el-arrow-down:before, .mod-summary .img-cite:before {
    content: "";
    display: block;
    width: 0;
    height: 150%; }

/* Clearfix */
.clearfix, .activity.toggle .tab-nav ul {
  *zoom: 1; }
  .clearfix:before, .activity.toggle .tab-nav ul:before, .clearfix:after, .activity.toggle .tab-nav ul:after {
    content: " ";
    display: table; }
  .clearfix:after, .activity.toggle .tab-nav ul:after {
    clear: both; }

nav#ui_site_nav #ui_top_nav li.home-icon a:before, nav#ui_site_nav #ui_bottom_nav .icon-share > a:before, nav#ui_site_nav #ui_bottom_nav .bevel-pdf > a:before, nav#ui_site_nav #ui_bottom_nav .bevel-pdf:hover li a:before, .el-arrow-down, .mod-tooltip-label .tooltip:before {
  background-image: url("../../media/images/spr-general.png");
  background-repeat: no-repeat; }

.mod-summary .img-cite {
  background-image: url("../../media/images/spr-localizable.png");
  background-repeat: no-repeat; }

.preload-img {
  position: absolute;
  top: calc(100% - 1px);
  left: calc(100% - 1px);
  opacity: 0.01;
  width: 1px;
  height: 1px; }

.fix-pointer::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-right: 140px solid transparent; }

.capitalize {
  text-transform: capitalize; }

@media (max-width: 739px) {
  .hide-mobile {
    display: none; } }

@media (min-width: 740px) {
  .show-mobile {
    display: none; } }

div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, ol, ul, li, fieldset, article, aside, canvas, footer, header, nav, section, time, audio, video, figure, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; }

article, aside, footer, header, nav, section {
  display: block; }

ol, ul {
  list-style: none; }

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; }
  html.browser-ios {
    overflow: auto; }
    html.browser-ios body {
      overflow: auto; }

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  line-height: 1.4;
  overflow-x: hidden;
  color: #333;
  background-color: #ffffff;
  transition: opacity 0.3s ease-out;
  opacity: 1; }

.load-pending body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0; }

div {
  box-sizing: border-box; }

article, section, header, nav {
  display: block; }

picture {
  display: inline-block; }

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  color: #3689b2; }

.left-align {
  text-align: left; }

.center-align {
  text-align: center; }

.right-align {
  text-align: right; }

.debug {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
  display: block;
  width: 40px;
  z-index: 99999; }

.replacer {
  display: none; }

cite {
  font-size: 12px;
  font-style: normal;
  color: #666; }
  cite a {
    color: #3689b2; }

p a {
  color: #3689b2; }

.el-arrow-down {
  animation: floating 1.5s infinite; }

@keyframes floating {
  0% {
    transform: translateY(0%); }

  50% {
    transform: translateY(10%); }

  100% {
    transform: translateY(0%); } }

nav#ui_site_nav #ui_top_nav li.home-icon a:before, nav#ui_site_nav #ui_bottom_nav .icon-share > a:before, nav#ui_site_nav #ui_bottom_nav .bevel-pdf > a:before, nav#ui_site_nav #ui_bottom_nav .bevel-pdf:hover li a:before {
  content: "";
  width: 16px;
  height: 20px;
  margin: 0 auto;
  display: block; }

nav#ui_site_nav {
  position: fixed;
  left: 0;
  z-index: 9000; }
  nav#ui_site_nav a {
    cursor: pointer; }
  nav#ui_site_nav ul {
    position: absolute;
    left: 0; }
  nav#ui_site_nav li a {
    height: 36px;
    box-sizing: border-box;
    display: block;
    background: #f1efec;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    line-height: 1;
    color: #474747; }
  nav#ui_site_nav #ui_top_nav li.home-icon a:before {
    background-position: 0 0;
    background-image: url("../../media/images/spr-general.png");
    background-repeat: no-repeat; }
  nav#ui_site_nav #ui_top_nav li.home-icon .label {
    display: none !important; }
  nav#ui_site_nav #ui_top_nav li.active a {
    color: #3689b2;
    font-size: 20px;
    font-weight: 400;
    padding-top: 8px; }
  nav#ui_site_nav #ui_top_nav li.active.bevel-start a:before {
    background-position: -36px 0; }
  nav#ui_site_nav #ui_bottom_nav li.icon-facebook a:after {
    content: "";
    width: 28px;
    height: 23px;
    background: url("../../media/images/social/icon-facebook.png") no-repeat 50% 50%;
    background-size: 100% auto;
    left: 3px;
    top: 6px;
    background-position: 50% 50% !important;
    display: block !important;
    cursor: pointer; }
  nav#ui_site_nav #ui_bottom_nav li.icon-facebook a:hover:after {
    background: url("../../media/images/social/icon-facebook-hover.png") no-repeat 50% 50%; }
  nav#ui_site_nav #ui_bottom_nav li.icon-twitter a:after {
    content: "";
    width: 28px;
    height: 23px;
    background: url("../../media/images/social/icon-twitter.png") no-repeat 50% 50%;
    background-size: 100% auto;
    left: 3px;
    top: 6px;
    background-position: 50% 50% !important;
    display: block !important;
    cursor: pointer; }
  nav#ui_site_nav #ui_bottom_nav li.icon-twitter a:hover:after {
    background: url("../../media/images/social/icon-twitter-hover.png") no-repeat 50% 50%; }
  nav#ui_site_nav #ui_bottom_nav li.icon-weibo a:after {
    content: "";
    width: 24px;
    height: 20px;
    background: url("../../media/images/spr-social.png") no-repeat 0 0;
    background-position: 0 -39px;
    left: 6px;
    top: 7px;
    display: block !important;
    cursor: pointer; }
  nav#ui_site_nav #ui_bottom_nav li.icon-weibo a:hover:after {
    background-position: -24px -39px; }
  nav#ui_site_nav #ui_bottom_nav li.icon-renren a:after {
    content: "";
    width: 26px;
    height: 15px;
    background: url("../../media/images/spr-social.png") no-repeat 0 0;
    background-position: 0 -24px;
    left: 4px;
    top: 10px;
    display: block !important;
    cursor: pointer; }
  nav#ui_site_nav #ui_bottom_nav li.icon-renren a:hover:after {
    background-position: -26px -24px; }
  @media (max-width: 739px) {
    nav#ui_site_nav {
      width: 100%;
      top: 60px;
      height: 38px;
      background: #f1efec; }
    nav#ui_site_nav li .label, nav#ui_site_nav li .indicator {
      display: none; }
    nav#ui_site_nav #ui_top_nav {
      width: 85.7%;
      height: 38px;
      box-sizing: border-box;
      border: 1px solid #d8d7d4;
      position: absolute;
      top: 0;
      left: 0; }
      nav#ui_site_nav #ui_top_nav li {
        display: inline; }
        nav#ui_site_nav #ui_top_nav li a {
          width: 10%;
          padding: 10px 5px;
          float: left;
          border-right: 1px solid #d8d7d4;
          border-left: 1px solid #fff; }
        nav#ui_site_nav #ui_top_nav li:last-child a {
          border-right: 0; }
    nav#ui_site_nav #ui_bottom_nav {
      display: block;
      width: 14.3%;
      height: 38px;
      box-sizing: border-box;
      border-top: 1px solid #d8d7d4;
      border-bottom: 1px solid #d8d7d4;
      position: absolute;
      top: 0;
      right: 0;
      left: auto;
      transform: translate3d(0, 0, 0); }
      nav#ui_site_nav #ui_bottom_nav li {
        display: none;
        float: left;
        position: relative; }
        nav#ui_site_nav #ui_bottom_nav li a {
          cursor: pointer;
          width: 100%;
          padding: 10px 5px;
          display: block;
          border-right: 1px solid #d8d7d4;
          border-left: 1px solid #fff;
          position: relative; }
        nav#ui_site_nav #ui_bottom_nav li:first-child {
          display: block;
          width: 100%; }
          nav#ui_site_nav #ui_bottom_nav li:first-child a.open-menu {
            display: block;
            font-weight: bold;
            letter-spacing: 2px;
            padding: 5px 5px 15px 5px; }
          nav#ui_site_nav #ui_bottom_nav li:first-child a.close-menu {
            display: none;
            background: #f1efec url("../../media/images/icon-X.png") no-repeat 50% 50%; }
        nav#ui_site_nav #ui_bottom_nav li.lang-nav > .label {
          display: block;
          width: 90px;
          height: 0;
          position: absolute;
          top: 100%;
          left: calc(50% - 45px);
          transition: height 0.2s ease-out; }
          nav#ui_site_nav #ui_bottom_nav li.lang-nav > .label ul {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden; }
            nav#ui_site_nav #ui_bottom_nav li.lang-nav > .label ul > li {
              width: 100%;
              height: 40px;
              margin: 0; }
              nav#ui_site_nav #ui_bottom_nav li.lang-nav > .label ul > li a {
                color: #66665c;
                height: 40px;
                line-height: 20px;
                padding: 10px 5px; }
                nav#ui_site_nav #ui_bottom_nav li.lang-nav > .label ul > li a:hover {
                  color: #3689b2; }
        nav#ui_site_nav #ui_bottom_nav li.lang-nav.active > a {
          color: #3689b2; }
        nav#ui_site_nav #ui_bottom_nav li.lang-nav.active > .label {
          height: auto; }
        nav#ui_site_nav #ui_bottom_nav li.bevel-pdf > a:before {
          content: "";
          display: block;
          width: 16px;
          height: 20px;
          background: url("../../media/images/spr-general.png") no-repeat 0 -178px;
          background-size: auto auto;
          position: absolute;
          left: calc(50% - 8px);
          top: calc(50% - 10px); }
        nav#ui_site_nav #ui_bottom_nav li.bevel-pdf > .label {
          display: block;
          width: 130px;
          height: 0;
          position: absolute;
          top: 100%;
          right: 0;
          transition: height 0.2s ease-out; }
          nav#ui_site_nav #ui_bottom_nav li.bevel-pdf > .label ul {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden; }
            nav#ui_site_nav #ui_bottom_nav li.bevel-pdf > .label ul > li {
              width: 100%;
              height: 40px;
              margin: 0; }
              nav#ui_site_nav #ui_bottom_nav li.bevel-pdf > .label ul > li a {
                color: #66665c;
                height: 40px;
                line-height: 20px;
                text-align: left;
                padding: 10px; }
                nav#ui_site_nav #ui_bottom_nav li.bevel-pdf > .label ul > li a:before {
                  content: none; }
                nav#ui_site_nav #ui_bottom_nav li.bevel-pdf > .label ul > li a:after {
                  content: "";
                  display: block;
                  width: 16px;
                  height: 20px;
                  background: url("../../media/images/spr-general.png") no-repeat 0 -218px;
                  background-size: auto auto;
                  position: absolute;
                  right: 10px;
                  top: calc(50% - 10px); }
                nav#ui_site_nav #ui_bottom_nav li.bevel-pdf > .label ul > li a:hover {
                  color: #3689b2; }
                  nav#ui_site_nav #ui_bottom_nav li.bevel-pdf > .label ul > li a:hover:after {
                    background-position: -36px -218px; }
                nav#ui_site_nav #ui_bottom_nav li.bevel-pdf > .label ul > li a span {
                  position: static;
                  display: inline; }
        nav#ui_site_nav #ui_bottom_nav li.bevel-pdf.active > a:before {
          background-position: -36px -178px; }
        nav#ui_site_nav #ui_bottom_nav li.bevel-pdf.active > .label {
          height: 320px; }
        nav#ui_site_nav #ui_bottom_nav li.icon-facebook a:after {
          content: "";
          display: block;
          width: 28px;
          height: 23px;
          background: url("../../media/images/social/icon-facebook.png") no-repeat 50% 50%;
          background-size: auto auto;
          position: absolute;
          left: calc(50% - 14px);
          top: calc(50% - 12px); }
        nav#ui_site_nav #ui_bottom_nav li.icon-facebook a:hover:after {
          background: url("../../media/images/social/icon-facebook-hover.png") no-repeat 50% 50%; }
        nav#ui_site_nav #ui_bottom_nav li.icon-twitter a:after {
          content: "";
          display: block;
          width: 28px;
          height: 23px;
          background: url("../../media/images/social/icon-twitter.png") no-repeat 50% 50%;
          background-size: auto auto;
          position: absolute;
          left: calc(50% - 14px);
          top: calc(50% - 12px); }
        nav#ui_site_nav #ui_bottom_nav li.icon-twitter a:hover:after {
          background: url("../../media/images/social/icon-twitter-hover.png") no-repeat 50% 50%; }
        nav#ui_site_nav #ui_bottom_nav li.icon-weibo a:after {
          content: "";
          width: 24px;
          height: 20px;
          background: url("../../media/images/spr-social.png") no-repeat 0 0;
          background-position: 0 -39px;
          left: calc(50% - 12px);
          top: calc(50% - 10px);
          display: block !important;
          cursor: pointer;
          position: absolute; }
        nav#ui_site_nav #ui_bottom_nav li.icon-weibo a:hover:after {
          background-position: -24px -39px; }
        nav#ui_site_nav #ui_bottom_nav li.icon-renren a:after {
          content: "";
          width: 26px;
          position: absolute;
          height: 15px;
          background: url("../../media/images/spr-social.png") no-repeat 0 0;
          background-position: 0 -24px;
          left: calc(50% - 13px);
          top: calc(50% - 7px);
          display: block !important;
          cursor: pointer; }
        nav#ui_site_nav #ui_bottom_nav li.icon-renren a:hover:after {
          background-position: -26px -24px; }
      nav#ui_site_nav #ui_bottom_nav.open {
        width: 100%;
        transition: width 0.2s ease-out; }
        nav#ui_site_nav #ui_bottom_nav.open li {
          display: block;
          width: 28.6%; }
          nav#ui_site_nav #ui_bottom_nav.open li:first-child {
            width: 14%; }
            nav#ui_site_nav #ui_bottom_nav.open li:first-child a.open-menu {
              display: none; }
            nav#ui_site_nav #ui_bottom_nav.open li:first-child a.close-menu {
              display: block; } }
  @media (min-width: 740px) {
    nav#ui_site_nav {
      width: 36px;
      height: 100%;
      height: calc(100% - 70px);
      top: 70px; }
    nav#ui_site_nav ul {
      width: 36px; }
    nav#ui_site_nav li {
      width: 43px;
      margin-top: -1px;
      position: relative;
      left: 10px; }
      nav#ui_site_nav li a {
        width: 36px;
        height: 36px;
        border: #d8d7d4 solid;
        border-width: 1px;
        padding: 10px 0 13px;
        position: relative;
        z-index: 1;
        overflow: hidden; }
        nav#ui_site_nav li a:after {
          content: "";
          width: 100%;
          height: 1px;
          position: absolute;
          top: 0;
          left: 0;
          background: #fff; }
      nav#ui_site_nav li .label {
        width: 0;
        height: 36px;
        display: block;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 5px;
        border: #d8d7d4 solid;
        border-width: 1px 1px 1px 0;
        border-radius: 0 4px 4px 0;
        background: #f1efec;
        overflow: hidden;
        z-index: 0;
        font-size: 12px;
        line-height: 1.4;
        color: #474747;
        transition: left 0.3s ease-out;
        text-transform: uppercase; }
        nav#ui_site_nav li .label span {
          display: block; }
      nav#ui_site_nav li.bevel-start a {
        border-radius: 4px 4px 0 0; }
      nav#ui_site_nav li.bevel-end a {
        border-radius: 0 0 4px 4px; }
      nav#ui_site_nav li:hover {
        width: 336px;
        border-radius: 4px 0 0 4px; }
        nav#ui_site_nav li:hover a {
          border-right: 0;
          border-radius: 0 0 0 0; }
          nav#ui_site_nav li:hover a:after {
            display: none; }
        nav#ui_site_nav li:hover.bevel-start a {
          border-radius: 4px 0 0 0; }
        nav#ui_site_nav li:hover.home-icon.bevel-start a {
          border-radius: 4px 4px 0 0; }
        nav#ui_site_nav li:hover.icon-facebook.bevel-start a {
          border-radius: 4px 4px 0 0; }
        nav#ui_site_nav li:hover.bevel-end a {
          border-radius: 0 0 0 4px; }
        nav#ui_site_nav li:hover .label {
          padding-left: 10px;
          left: 36px;
          width: 160px; }
    nav#ui_site_nav #ui_top_nav {
      top: 25px;
      transition: top 0.3s ease-out; }
      nav#ui_site_nav #ui_top_nav li:hover.bevel-start a {
        padding: 10px 0 13px;
        display: block; }
      nav#ui_site_nav #ui_top_nav li.active.bevel-start a {
        padding-top: 10px; }
    nav#ui_site_nav #ui_bottom_nav {
      bottom: 25px; }
      nav#ui_site_nav #ui_bottom_nav li:hover > a {
        color: #3689b2; }
      nav#ui_site_nav #ui_bottom_nav .icon-share > a:before {
        background-position: 0 -140px; }
      nav#ui_site_nav #ui_bottom_nav .icon-share > a:hover:before {
        background-position: -36px -140px; }
      nav#ui_site_nav #ui_bottom_nav .icon-share li a {
        font-size: 14px;
        display: block; }
      nav#ui_site_nav #ui_bottom_nav .bevel-pdf li {
        padding-right: 10px; }
      nav#ui_site_nav #ui_bottom_nav .bevel-pdf > a {
        position: relative; }
        nav#ui_site_nav #ui_bottom_nav .bevel-pdf > a:before {
          margin-top: -2px;
          background-position: 0 -178px; }
      nav#ui_site_nav #ui_bottom_nav .bevel-pdf:hover > a:before {
        background-position: -36px -178px; }
      nav#ui_site_nav #ui_bottom_nav .bevel-pdf:hover li a {
        margin-right: 1em; }
        nav#ui_site_nav #ui_bottom_nav .bevel-pdf:hover li a:before {
          position: absolute;
          right: 0;
          background-position: 0 -218px; }
        nav#ui_site_nav #ui_bottom_nav .bevel-pdf:hover li a:hover:before {
          background-position: -36px -218px; }
      nav#ui_site_nav #ui_bottom_nav a {
        font-size: 14px; }
    nav#ui_site_nav .sub-nav ul {
      width: auto;
      padding: .5em 0 .5em .5em;
      position: relative;
      bottom: 0;
      overflow: hidden; }
    nav#ui_site_nav .sub-nav li {
      width: auto;
      height: auto;
      margin: 0;
      left: 0; }
      nav#ui_site_nav .sub-nav li a {
        color: #66665c; }
    nav#ui_site_nav .sub-nav .label {
      width: 190px;
      height: auto;
      transform: scaleY(0);
      top: auto;
      bottom: 0;
      border-radius: 4px 4px 4px 0;
      transform-origin: 0 100%;
      transition: transform 0.3s ease-out, left 0.3s ease-out; }
      nav#ui_site_nav .sub-nav .label a {
        width: auto;
        height: auto;
        margin: 0;
        padding: .5em 0;
        border: none;
        background: none;
        display: block;
        overflow: visible;
        text-align: left;
        line-height: 1.4; }
        nav#ui_site_nav .sub-nav .label a span {
          position: static;
          display: inline; }
    nav#ui_site_nav .sub-nav:hover > a {
      width: 45px; }
    nav#ui_site_nav .sub-nav:hover .label {
      width: 190px;
      left: 45px;
      transform: scaleY(1); } }

@media (min-width: 740px) {
  .expanded #ui_top_nav {
    /*top: 25px;*/ } }

.sect {
  width: 100% !important;
  height: 100vh;
  /*comment*/
  box-sizing: border-box;
  background: transparent;
  position: relative;
  padding: 0 20px;
  z-index: 1; }
  .sect .wrap {
    width: 100%;
    height: 100%;
    max-width: 1080px;
    margin: 0 auto;
    position: relative; }
    .sect .wrap:before, .sect .wrap:after {
      content: "";
      display: table; }
    .sect .wrap:after {
      clear: both; }
    .sect .wrap .gutter, .sect .wrap .main {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: 100%; }
    .sect .wrap .gutter.pinned-sidebar {
      left: 10px; }
    .sect .wrap .main {
      background: #ffffff; }
  .sect.landing {
    position: relative;
    height: auto;
    padding-bottom: 60px; }
  .sect.odd, .sect.even {
    min-height: 0;
    height: auto;
    background: #ffffff;
    z-index: 2; }
  .sect.background {
    height: 100vh;
    position: absolute;
    top: 100vh;
    background: #1d2229;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #8b9eaf), color-stop(100%, #1d2229));
    background: -moz-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
    background: -ms-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
    background: -o-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
    background: radial-gradient(ellipse at center, #8b9eaf 0%, #1d2229 100%); }
  .sect.end {
    z-index: 2;
    height: auto;
    padding-top: 60px;
    background: #fff; }
    .sect.end .wrap {
      border-top: 1px #e0dfdb solid;
      min-height: 100px;
      overflow: hidden;
      text-align: center;
      padding-top: 116px; }
      .sect.end .wrap .signup-form {
        margin-bottom: 80px; }
      .sect.end .wrap .share-links {
        margin-bottom: 200px; }
  .sect.hero {
    overflow: hidden;
    z-index: 1;
    padding: 0; }
    .sect.hero .interstitial {
      width: 100%;
      min-height: 100vh; }
    .sect.hero .wrap {
      /*min-height: 500px;*/
      position: relative;
      text-align: center;
      display: table; }
      .sect.hero .wrap h1 {
        display: table-cell;
        vertical-align: middle;
        color: #fff; }
    .sect.hero .media {
      position: absolute;
      top: 60px;
      left: 0;
      width: 100%;
      height: calc(100% - 80px); }
      .sect.hero .media .wrap blockquote {
        display: table-cell;
        vertical-align: middle;
        padding: 20px;
        box-sizing: border-box; }
  .sect.title {
    display: table;
    overflow: hidden;
    padding: 0; }
    .sect.title.bg-img {
      background: #000;
      background-size: cover; }
    .sect.title .wrap {
      max-width: calc(100vw - 100px);
      min-height: 500px;
      padding: 40px 20px;
      overflow: hidden;
      display: table-cell;
      vertical-align: middle;
      position: relative; }
  .sect.intro-wrapper {
    padding: 0;
    position: relative;
    min-height: 200vh; }
    .sect.intro-wrapper .sect.hero {
      z-index: 1;
      max-height: 99999px; }
  .sect.carousel-sect {
    height: auto;
    background: #000 url("../../media/images/gallery-bg-repeat.jpg"); }
    .sect.carousel-sect .interstitial {
      display: none; }
    .sect.carousel-sect.hero {
      height: auto; }
  .sect.activity-sect {
    overflow: hidden;
    z-index: 1;
    padding: 0;
    background: #f0efeb;
    height: auto;
    min-height: 500px; }
  .sect.infographic {
    overflow: hidden;
    z-index: 1;
    background: #f0efeb;
    height: auto;
    padding: 0 20px 0 60px; }
    .sect.infographic.hero {
      max-height: 99999px;
      min-height: auto;
      height: auto; }
    .sect.infographic .wrap {
      padding: 0;
      position: relative; }
      .sect.infographic .wrap:before, .sect.infographic .wrap:after {
        content: "";
        display: table; }
      .sect.infographic .wrap:after {
        clear: both; }

@media (min-width: 740px) {
  .sect {
    padding: 0 20px 0 60px; }
    .sect.background {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 0; }
    .sect.odd, .sect.even {
      min-height: 0; }
    .sect.background {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 0; }
    .sect.end {
      min-height: 100vh; }
    .sect.hero {
      height: 85vh;
      max-height: 720px;
      z-index: 1; }
      .sect.hero.activity-sect {
        max-height: 9999999px; }
      .sect.hero .media {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: calc(100% - 80px); }
        .sect.hero .media .wrap {
          position: relative;
          width: 100%;
          height: 100%;
          max-width: 1080px;
          margin: 0 auto;
          min-height: 0; }
          .sect.hero .media .wrap blockquote {
            float: right;
            min-width: 320px;
            width: calc(100% - 360px);
            position: relative;
            z-index: 10;
            padding-left: 60px; }
      .sect.hero .interstitial {
        width: 100%;
        height: 150%;
        position: relative;
        top: -50%; }
    .sect.title h1 {
      position: relative; }
    .sect.intro-wrapper {
      position: relative;
      min-height: 0; }
      .sect.intro-wrapper .sect.hero {
        position: absolute;
        top: 120%;
        z-index: 1;
        background: transparent;
        padding: 0 20px 0 60px; }
      .sect.intro-wrapper .sect.title {
        padding: 0 20px 0 60px; }
    .sect.activity-sect {
      height: auto;
      padding: 0 20px 0 60px; }
    .sect.media {
      width: 100%;
      min-height: 0px;
      height: auto;
      position: absolute;
      top: 120%;
      text-align: center; }
      .sect.media .wrap {
        max-width: 960px; }
    .sect.final {
      padding-bottom: 100px; } }

@media (min-width: 1192px) {
  .sect {
    padding: 0; }
    .sect.infographic .wrap {
      left: -20px; } }

@media (max-width: 739px) {
  .sect {
    height: auto;
    max-width: none;
    overflow: hidden; }
    .sect.media {
      padding-bottom: 40px; }
    .sect.interrupter {
      min-height: 0; }
    .sect.carousel-sect {
      height: auto;
      padding: 0; }
      .sect.carousel-sect.interrupter {
        min-height: 0; }
    .sect.final {
      padding-bottom: 40px; }
    .sect.title {
      height: 100vh;
      background: transparent; }
    .sect.background {
      background: transparent;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .sect.hero.carousel-sect .media {
      position: static; }
    .sect.hero .wrap {
      min-height: 0; }
    .sect.intro-wrapper {
      min-height: 100vh;
      height: auto; }
      .sect.intro-wrapper .setct.hero {
        min-height: 100vh; }
      .sect.intro-wrapper .setct.media {
        height: auto; }
        .sect.intro-wrapper .setct.media .wrap figure {
          padding: 0; }
    .sect.infographic {
      padding: 0 10px; }
      .sect.infographic .infographic-image {
        min-height: 0;
        padding: 10px; }
    .sect.end .wrap {
      border-top: none;
      padding-top: 40px; }
    .sect.activity-sect .activity {
      margin: 24px 20px;
      padding: 0 !important; }
  .sect {
    overflow: visible;
    display: block;
    height: auto;
    overflow-x: visible; }
    .sect .wrap {
      display: block;
      /*margin-top: 40px;*/ }
      .sect .wrap blockquote .bet-callout {
        margin-top: 40px; }
        .sect .wrap blockquote .bet-callout h2 {
          font-size: 24px; }
          .sect .wrap blockquote .bet-callout h2:after, .sect .wrap blockquote .bet-callout h2:before {
            top: 10px; }
        .sect .wrap blockquote .bet-callout p {
          font-size: 22px; }
    .sect.background {
      height: 100%;
      min-height: 480px;
      position: absolute;
      background-size: 100% auto; }
    .sect.hero {
      position: relative;
      /*margin-top: 60px;*/
      margin-top: 0px; }
      .sect.hero:before {
        display: none; }
    .sect.title {
      position: relative;
      z-index: 2;
      padding-top: 80px; }
      .sect.title .wrap {
        display: block;
        margin: 0;
        max-width: 100%;
        padding-top: 40px; }
      .sect.title h1 {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        height: auto;
        padding-top: 40px; } }

.browser-iphone .sect.title {
  height: auto; }
  .browser-iphone .sect.title .wrap {
    padding-top: 0; }
  .browser-iphone .sect.title h1 {
    padding: 0 0 0 0;
    margin-top: 50px; }
.browser-iphone .sect.hero.interrupter {
  margin-top: 0;
  margin-bottom: -40px; }
  .browser-iphone .sect.hero.interrupter .wrap {
    padding-bottom: 40px; }
  .browser-iphone .sect.hero.interrupter .activity {
    margin-top: 0;
    margin-bottom: 20px; }
.browser-iphone .sect.intro-wrapper {
  height: auto;
  min-height: 1px;
  padding-top: 40px; }
.browser-iphone .sect.infographic .wrap {
  margin-top: 0;
  padding-bottom: 40px; }
.browser-iphone.browser-ios-7 .sect.title {
  height: auto; }
.browser-iphone.browser-ios-8 .sect {
  width: 320px;
  max-width: 320px;
  min-width: 320px; }
  .browser-iphone.browser-ios-8 .sect.title {
    padding-top: 40px; }
    .browser-iphone.browser-ios-8 .sect.title .wrap h1 {
      width: 280px;
      max-width: 280px;
      min-width: 280px; }
      .browser-iphone.browser-ios-8 .sect.title .wrap h1 span, .browser-iphone.browser-ios-8 .sect.title .wrap h1 strong, .browser-iphone.browser-ios-8 .sect.title .wrap h1 small {
        width: 280px;
        max-width: 280px;
        min-width: 280px; }

.browser-ipad .scroll-hint {
  display: none !important; }
.browser-ipad .bet-callout {
  margin-top: 60px !important; }
.browser-ipad .sect {
  width: 100%;
  height: auto;
  /*comment*/ }
  .browser-ipad .sect .wrap {
    width: 100%;
    height: 100%;
    max-width: 1080px;
    margin: 0 auto;
    position: relative; }
    .browser-ipad .sect .wrap:before, .browser-ipad .sect .wrap:after {
      content: "";
      display: table; }
    .browser-ipad .sect .wrap:after {
      clear: both; }
  .browser-ipad .sect.background {
    height: 1024px;
    position: absolute;
    top: 0;
    background: #1d2229;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #8b9eaf), color-stop(100%, #1d2229));
    background: -moz-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
    background: -ms-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
    background: -o-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
    background: radial-gradient(ellipse at center, #8b9eaf 0%, #1d2229 100%); }
  .browser-ipad .sect.hero {
    overflow: hidden;
    z-index: 1;
    padding: 0;
    position: relative;
    margin-top: 100px; }
    .browser-ipad .sect.hero .interstitial {
      width: 100%;
      min-height: 1px; }
    .browser-ipad .sect.hero .wrap {
      min-height: 500px;
      position: relative;
      text-align: center;
      display: table; }
      .browser-ipad .sect.hero .wrap h1 {
        display: table-cell;
        vertical-align: middle;
        color: #fff; }
    .browser-ipad .sect.hero .media {
      position: absolute;
      top: 60px;
      left: 0;
      width: 100%;
      height: calc(100% - 80px); }
      .browser-ipad .sect.hero .media .wrap blockquote {
        display: table-cell;
        vertical-align: middle;
        padding: 20px;
        box-sizing: border-box; }
  .browser-ipad .sect.title {
    display: table;
    overflow: hidden;
    padding: 0;
    height: 924px; }
    .browser-ipad .sect.title.bg-img {
      background: #000;
      background-size: cover; }
    .browser-ipad .sect.title .wrap {
      max-width: calc(100vw - 100px);
      min-height: 500px;
      padding: 40px 20px;
      overflow: hidden;
      display: table-cell;
      vertical-align: middle;
      position: relative; }
  .browser-ipad .sect.intro-wrapper {
    padding: 0;
    position: relative;
    min-height: 1px;
    height: auto; }
    .browser-ipad .sect.intro-wrapper .sect.hero {
      z-index: 1;
      max-height: 99999px;
      position: relative;
      top: 0;
      margin-top: 100px;
      padding-bottom: 60px; }
  .browser-ipad .sect.end {
    height: auto;
    min-height: 1px; }
  .browser-ipad .sect.interrupter .wrap {
    padding: 0 20px 0 60px; }
.browser-ipad #ui_page_intro .sect.background {
  height: 1024px;
  position: absolute;
  top: 0;
  background: #1d2229;
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #8b9eaf), color-stop(100%, #1d2229));
  background: -moz-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
  background: -ms-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
  background: -o-radial-gradient(center, ellipse cover, #8b9eaf 0%, #1d2229 100%);
  background: radial-gradient(ellipse at center, #8b9eaf 0%, #1d2229 100%); }

.sect .wrap {
  position: relative; }
  .sect .wrap .gutter {
    padding: 17px 40px 0 40px; }
    .sect .wrap .gutter.gutter-end {
      padding-bottom: 20px; }
  .sect .wrap.sticky-wrap-main .main {
    position: absolute;
    top: 0;
    height: 100%; }
  .sect .wrap.sticky-wrap-gutter .gutter {
    position: absolute;
    top: 0;
    height: 100%; }
.sect.odd .wrap.sticky-wrap-main .main {
  left: 0; }
.sect.odd .wrap.sticky-wrap-gutter .gutter {
  right: 0; }
.sect.even .wrap.sticky-wrap-main .main {
  right: 0; }
.sect.even .wrap.sticky-wrap-gutter .gutter {
  left: 0; }
.sect .final-paragraph {
  width: 100% !important;
  max-width: 1080px;
  padding: 0 20px 0 60px;
  margin: 130px auto 30px auto;
  text-align: center; }
  .sect .final-paragraph p {
    font-size: 30px;
    font-weight: 100; }
  .sect .final-paragraph strong {
    font-weight: 400; }

.browser-safari .sect .final-paragraph p {
  font-weight: 300; }

.triptych {
  display: block;
  box-sizing: border-box; }
  .triptych:before, .triptych:after {
    content: "";
    display: table; }
  .triptych:after {
    clear: both; }
  .triptych .panel {
    display: block;
    box-sizing: border-box; }

@media (min-width: 1192px) {
  .sect.intro-wrapper .hero, .sect.intro-wrapper .title, .sect.intro-wrapper .background {
    height: 100vh; } }

@media (max-width: 739px) {
  .sect .wrap .gutter.gutter-start {
    padding-top: 20px;
    padding-bottom: 20px; }
  .sect .wrap.sticky-wrap-main .main {
    position: static; }
  .sect .wrap.sticky-wrap-gutter .gutter {
    position: static; }
  .sect .final-paragraph {
    padding: 0 20px;
    margin: 30px auto 30px auto; }
    .sect .final-paragraph p {
      font-size: 20px; } }

@media (min-width: 740px) {
  .sect .wrap .gutter {
    width: 320px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    z-index: 10; }
    .sect .wrap .gutter.gutter-start {
      padding-top: 40px;
      padding-bottom: 40px; }
      .sect .wrap .gutter.gutter-start.top-shadow {
        padding-top: 0; }
    .sect .wrap .gutter.gutter-end {
      padding-bottom: 0; }
  .sect .wrap .main {
    min-width: 320px;
    width: calc(100% - 360px);
    position: relative;
    z-index: 10; }
  .sect.even .wrap .gutter {
    float: left;
    clear: left; }
  .sect.even .wrap .main {
    float: right;
    margin-right: 0;
    margin-left: 40px; }
  .sect.odd .wrap .gutter {
    float: right;
    clear: right; }
  .sect.odd .wrap .main {
    float: left;
    margin-left: 0;
    margin-right: 40px; }
  .triptych:before, .triptych:after {
    content: "";
    display: table; }
  .triptych:after {
    clear: both; }
  .triptych .panel {
    display: inline-block;
    vertical-align: top;
    width: 33%; } }

body, .mod-tooltip-label .tooltip {
  font-family: 'Roboto','proxima-nova', 'Lato', sans-serif;
  font-weight: 300; }

.title h1, .title h1 .title-author, .title h1 .title-bet, .mod-tile-intro {
  font-family: 'Roboto Condensed','Lusitana', Lucida Bright, Georgia, serif;
  font-weight: normal; }

h1, h2, h3, h4, h5, h6, button.submit-button, .activity.toggle {
  font-family: 'Roboto Condensed','Oswald', sans-serif;
  font-weight: 700; }

nav#ui_site_nav, nav#ui_site_nav .sub-nav .label, .mod-tile-intro span, .statistic p strong.statistic-figure {
  font-family: 'Roboto Condensed','Oswald', sans-serif;
  font-weight: 300; }

.gutter blockquote p:before, .gutter blockquote p:after, .main blockquote p:before, .main blockquote p:after, .statistic p {
  font-family: 'Roboto','proxima-nova', sans-serif;
  font-weight: 700; }

input[type="text"], input[type="email"], input[type="url"], select {
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  border: 1px #969593 solid;
  font-size: 14px;
  line-height: 16px;
  color: #4d4d4d;
  border-radius: 4px; }

input[placeholder] {
  color: #4d4d4d; }

::-webkit-input-placeholder {
  color: #4d4d4d; }

::-moz-input-placeholder {
  color: #4d4d4d; }

::-ms-input-placeholder {
  color: #4d4d4d; }

button.submit-button {
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  border: 0;
  border-radius: 6px;
  padding: 12px 12px 10px 12px;
  line-height: 1;
  color: #fff;
  font-size: 20px;
  background: #3689b2;
  cursor: pointer; }
  button.submit-button[disabled] {
    background: 808080;
    opacity: 0.1;
    cursor: default; }

.co_radio {
  display: inline-block;
  position: relative;
  vertical-align: middle; }
  .co_radio input[type="radio"] {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    padding: 0;
    margin: 0; }
  .co_radio input[type="radio"] + .radio {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 11px;
    min-height: 0;
    background: transparent;
    border: 1px #ccc solid;
    box-shadow: 0 0 1px #ccc; }
    .co_radio input[type="radio"] + .radio:after {
      content: '';
      display: block;
      width: 21px;
      height: 21px;
      position: absolute;
      top: -1px;
      left: -1px;
      background: #3689b2;
      opacity: 0;
      border-radius: 11px;
      transition: opacity 0.2s ease-out; }
  .co_radio input[type="radio"]:checked + .radio:after {
    opacity: 1; }

.gutter.top-shadow:before, .main.top-shadow:before {
  content: '';
  display: block;
  position: absolute;
  top: -25px;
  left: -30px;
  height: 220px;
  width: 30px;
  /*background: url('../../media/images/top-shadow-left.png') no-repeat left top;*/
  z-index: 10; }
.gutter.top-shadow:after, .main.top-shadow:after {
  content: '';
  display: block;
  position: absolute;
  top: -25px;
  right: -30px;
  height: 220px;
  width: 30px;
  /*background: url('../../media/images/top-shadow-right.png') no-repeat left top;*/
  z-index: 10; }
.gutter.top-shadow .text-wrap.text-wrap-start:before, .main.top-shadow .text-wrap.text-wrap-start:before {
  content: '';
  display: block;
  position: absolute;
  top: -25px;
  left: 0;
  height: 6px;
  width: 100%;
  /*background: url('../../media/images/top-shadow.png') repeat-x left top;*/
  border-bottom: 20px #fff solid;
  z-index: 10; }

.gutter.bottom-shadow:before, .main.bottom-shadow:before {
  content: '';
  display: block;
  position: absolute;
  bottom: -25px;
  left: -30px;
  height: 220px;
  width: 30px;
  /*background: url('../../media/images/bottom-shadow-left.png') no-repeat left top;*/
  z-index: 10; }
.gutter.bottom-shadow:after, .main.bottom-shadow:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -25px;
  right: -30px;
  height: 220px;
  width: 30px;
  /*background: url('../../media/images/bottom-shadow-right.png') no-repeat left top;*/
  z-index: 10; }
.gutter.bottom-shadow .text-wrap.text-wrap-end:after, .main.bottom-shadow .text-wrap.text-wrap-end:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -25px;
  left: 0;
  height: 6px;
  width: 100%;
  /*background: url('../../media/images/bottom-shadow.png') repeat-x left top;*/
  border-top: 20px #fff solid;
  z-index: 10; }

.text-wrap {
  display: inline-block;
  width: 100%;
  padding: 17px 40px 0 40px;
  position: relative;
  z-index: 10; }
  .text-wrap.text-wrap-start {
    padding-top: 15px; }
  .text-wrap.text-wrap-end {
    padding-bottom: 15px; }
  .text-wrap h2 {
    margin-bottom: 0; }
    .text-wrap h2 .main-text-color {
      color: #333; }
  .text-wrap p {
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.7; }
    .text-wrap p:first-child {
      margin-top: 0; }

.main .figure-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 30px 0 0 0; }

.gutter figure, .gutter blockquote, .main figure, .main blockquote {
  width: 100%; }
.gutter blockquote, .main blockquote {
  padding: 0 0 10px 0;
  margin: 0; }
  .gutter blockquote:before, .gutter blockquote:after, .main blockquote:before, .main blockquote:after {
    content: "";
    display: table; }
  .gutter blockquote:after, .main blockquote:after {
    clear: both; }
  .gutter blockquote p, .main blockquote p {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    padding: 0 20px;
    float: left;
    display: inline-block;
    width: auto; }
    .gutter blockquote p:before, .gutter blockquote p:after, .main blockquote p:before, .main blockquote p:after {
      font-size: 40px;
      position: absolute; }
    .gutter blockquote p:before, .main blockquote p:before {
      content: '';
      left: 0;
      top: 0; }
    .gutter blockquote p:after, .main blockquote p:after {
      content: '';
      right: 0;
      bottom: 0; }
  .gutter blockquote footer, .main blockquote footer {
    font-size: 12px;
    color: #777;
    margin-top: 10px;
    clear: both; }
    .gutter blockquote footer:before, .main blockquote footer:before {
      content: '”';
      margin-left: 20px; }
.gutter figure figcaption, .main figure figcaption {
  display: inline-block !important;
  font-size: 14px;
  line-height: 1.4;
  padding: 0 0 10px 0;
  color: #999; }
  .gutter figure figcaption cite, .main figure figcaption cite {
    float: right;
    padding-top: 5px;
    color: #999; }
  .gutter figure figcaption p, .main figure figcaption p {
    clear: both;
    padding-top: 10px;
    line-height: 1.4;
    color: #666;
    font-size: 14px; }
.gutter figure img, .gutter figure iframe, .main figure img, .main figure iframe {
  display: block;
  width: 100%;
  height: auto; }
  .gutter figure img iframe.youku-video, .gutter figure iframe iframe.youku-video, .main figure img iframe.youku-video, .main figure iframe iframe.youku-video {
    width: auto;
    height: auto; }
.gutter figure .video-player, .main figure .video-player {
  position: relative;
  width: 100%;
  height: auto;
  background: #000; }
  .gutter figure .video-player.unloaded, .main figure .video-player.unloaded {
    border: 1px #fff solid; }
  .gutter figure .video-player img, .main figure .video-player img {
    display: block;
    width: 100%;
    height: auto; }
  .gutter figure .video-player img.poster-image, .main figure .video-player img.poster-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: #000; }
  .gutter figure .video-player iframe, .main figure .video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .gutter figure .video-player .video-container, .main figure .video-player .video-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }

.main figure figcaption {
  width: calc(100% - 90px); }

.hero .wrap .mod-quote {
  border: 0;
  width: 800px;
  display: block;
  margin: 0 auto;
  padding-top: 60px;
  display: table-cell;
  vertical-align: middle;
  text-align: left; }
  .hero .wrap .mod-quote p {
    font-size: 40px;
    padding: 0;
    color: #fff; }
    .hero .wrap .mod-quote p:before {
      display: none; }
  .hero .wrap .mod-quote footer {
    color: #999;
    font-size: 14px; }

.scroll-hint {
  font-size: 14px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  width: 80px;
  height: 50px;
  display: block;
  position: absolute;
  top: calc(100% - 100px);
  left: calc(50% - 40px);
  opacity: 0.9;
  z-index: 4; }
  .scroll-hint:after {
    content: "";
    display: block;
    width: 100%;
    height: 25px;
    background: transparent url("../../media/images/spr-general.png") no-repeat center 100%;
    position: absolute;
    left: 0;
    bottom: 0; }
  .scroll-hint:hover {
    opacity: 1; }

.title {
  transform: translateZ(0); }
  .title h1 {
    transform: translateZ(0);
    max-width: 960px;
    padding-top: 60px;
    display: block;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 20px #333;
    position: relative;
    z-index: 100; }
    .title h1 span, .title h1 strong, .title h1 small {
      line-height: 1em;
      transform: translateZ(0); }
    .title h1 strong {
      display: block; }
    .title h1 .title-author, .title h1 .title-bet {
      position: relative;
      width: 90%;
      margin: 0 auto;
      display: block;
      overflow: hidden;
      font-style: normal;
      font-size: 20px;
      line-height: 1; }
      .title h1 .title-author span, .title h1 .title-bet span {
        line-height: 1.5;
        position: relative;
        font-size: 20px;
        font-weight: 100;
        font-family: 'Roboto Condensed','Oswald', sans-serif;
        font-weight: 100;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        font-style: normal;
        display: inline-block;
        white-space: nowrap; }
        .title h1 .title-author span:before, .title h1 .title-author span:after, .title h1 .title-bet span:before, .title h1 .title-bet span:after {
          content: '';
          display: block;
          width: 700px;
          height: 1px;
          border-bottom: 2px #fff solid;
          position: absolute;
          top: 14px; }
        .title h1 .title-author span:before, .title h1 .title-bet span:before {
          left: -715px; }
        .title h1 .title-author span:after, .title h1 .title-bet span:after {
          right: -715px; }
    .title h1 .title-author {
      padding-top: 20px; }
    .title h1 .title-bet {
      padding-bottom: 20px; }
    .title h1 .title-main {
      font-weight: 700;
      overflow-wrap: break-word;
      word-wrap: break-word;
      font-size: 13vh;
      letter-spacing: -0.1rem; }

.bet-callout {
  margin-top: 10vh;
  text-align: center; }
  .bet-callout h2 {
    font-size: 32px;
    font-family: 'Lusitana', Lucida Bright, Georgia, serif;
    line-height: 1;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    display: inline-block; }
    .bet-callout h2:before, .bet-callout h2:after {
      content: '';
      display: block;
      width: 60px;
      height: 1px;
      border-bottom: 2px #fff solid;
      position: absolute;
      top: 13px; }
    .bet-callout h2:before {
      left: -75px; }
    .bet-callout h2:after {
      right: -75px; }
  .bet-callout p {
    line-height: 1.4;
    font-size: 32px;
    font-family: 'proxima-nova', sans-serif;
    font-weight: 100;
    font-style: normal;
    text-align: center; }

.gutter-signup-cta {
  width: 100%;
  background-color: #F5F5F5;
  border: 1px solid #D8D7D4;
  margin: 0px auto;
  padding: 22px;
  overflow: hidden;
  text-align: center; }
  .gutter-signup-cta h3 {
    font: 28px/1 'Lusitana', Lucida Bright, Georgia, serif;
    color: #333; }
  .gutter-signup-cta hr {
    height: 1px;
    background-color: #ccc;
    border: 0; }
  .gutter-signup-cta p {
    font-size: 14px; }
  .gutter-signup-cta .sign-up-btn {
    margin: 15px 0px 14px;
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    border: 0px none;
    border-radius: 6px;
    padding: 8px 17px;
    line-height: 1;
    color: #FFF;
    font-size: 17px;
    background: none repeat scroll 0% 0% #3689B2;
    text-decoration: none; }
  .gutter-signup-cta .global-citizen-logo {
    display: inline-block;
    width: 76px; }
  .gutter-signup-cta .global-citizen-tag {
    display: inline-block;
    width: 55%;
    margin-left: 10px;
    text-align: left;
    color: #cc3333; }

#ui_page_intro .title h1 .title-main {
  font-size: 104px; }

#ui_page_1 .title h1 .title-main {
  font-size: 76px; }

#ui_page_2 .title h1 .title-main {
  font-size: 76px; }

#ui_page_3 .title h1 .title-main {
  font-size: 76px; }

#ui_page_4 .title h1 .title-main {
  font-size: 76px; }

#ui_page_5 .title h1 .title-main {	
  font-size: 76px; }

#ui_page_6 .title h1 .title-main {
  font-size: 76px; }

#ui_page_7 .title h1 .title-main {
  font-size: 76px; }

#ui_page_8 .title h1 .title-main {
  font-size: 76px; }

#ui_page_9 .title h1 .title-main {
  font-size: 76px; }

#ui_page_10 .title h1 .title-main {
  font-size: 76px; }

#ui_page_11 .title h1 .title-main {
  font-size: 76px; }

#ui_page_12 .title h1 .title-main {
  font-size: 76px; }

#ui_page_13 .title h1 .title-main {
  font-size: 76px; }

#ui_page_14 .title h1 .title-main {
  font-size: 76px; }

#ui_page_15 .title h1 .title-main {
  font-size: 76px; }
  .kmm_download  {
    background: rgba(54, 137, 178, 0.9) none repeat scroll 0 0;
    height: auto;
	float:right;    
    padding: 30px;    
    width: 30%;
	color:#FFF;
	border-radius:5px;
	margin:0.5em 0 0.5em 0.5em;
}
.kmm_download a, .kmm_download a:active	{ color:#fff !important; text-decoration:none !important} 
.kmm_download a:hover	{ text-decoration:underline !important} 
.icon {
    display: block;
    min-height: 40px;
    z-index: 999;
}
.pdf-left {
    background: rgba(0, 0, 0, 0) url("../../assets/images/pdf-icon.png") no-repeat scroll left top;
    padding-left: 50px;
}


@media (max-width: 739px) {
  .main .figure-wrap {
    width: 100%; }
  .scroll-hint {
    display: none; }
  .sect {
    padding: 0 10px; }
    .sect .wrap .gutter {
      padding: 17px 0; }
  .text-wrap {
    padding: 17px 15px 0 15px; }
    .text-wrap h2 {
      font-size: 20px; }
    .text-wrap.text-wrap-start {
      padding-top: 0; }
      .text-wrap.text-wrap-start:before {
        top: -16px;
        border-bottom: 10px #fff solid; }
    .text-wrap.text-wrap-end {
      padding-bottom: 0; }
      .text-wrap.text-wrap-end:after {
        bottom: -16px;
        border-top: 10px #fff solid; }
  .gutter.top-shadow:before, .gutter.top-shadow:after, .main.top-shadow:before, .main.top-shadow:after {
    top: -20px; }
  .gutter.bottom-shadow:before, .gutter.bottom-shadow:after, .main.bottom-shadow:before, .main.bottom-shadow:after {
    bottom: -20px; }
  .sect .wrap .gutter.gutter-end, .gutter blockquote, .main blockquote {
    padding-bottom: 0; }
  .gutter figure.statistic {
    width: 100%;
    max-width: 320px;
    margin: 0 auto; }
  .gutter figure, .gutter blockquote, .gutter .activity {
    padding: 0 10px;
    box-sizing: border-box; }
  .gutter figure.sticky, .main figure.sticky {
    margin-bottom: 0; }
  .gutter figure figcaption {
    width: 100%; }
    .gutter figure figcaption cite {
      font-weight: 100; }
  .hero .wrap .mod-quote {
    padding: 40px 20px; }
    .hero .wrap .mod-quote p {
      font-size: 30px; }
  .title .wrap {
    width: 100%;
    max-width: none; }
  .title h1 {
    width: 100%;
    max-width: 640px; }
    .title h1 .title-author, .title h1 .title-bet {
      font-size: 10px;
      width: 100% span;
      width-font-size: 14px !important; }
  #ui_page_intro .title h1 .title-main {
    font-size: 34px; }
  #ui_page_intro .mod-summary {
    padding: 0 20px;
    font-size: 17px; }
  #ui_page_1 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_2 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_3 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_4 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_5 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_6 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_7 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_8 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_9 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_10 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_11 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_12 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_13 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_14 .title h1 .title-main {
    font-size: 34px; }
  #ui_page_15 .title h1 .title-main {
    font-size: 34px; }
  .bet-callout h2 {
    font-size: 28px; }
    .bet-callout h2:before, .bet-callout h2:after {
      width: 35px; }
    .bet-callout h2:before {
      left: -50px; }
    .bet-callout h2:after {
      right: -50px; }
  .bet-callout p {
    font-size: 22px;
    line-height: 1.3; }
  .title h1 .title-bet, .title h1 .title-author {
    width: 100%; }
  .title h1 .title-bet span, .title h1 .title-author span {
    font-size: 14px; }
	.kmm_download  {float:none !important; width: auto !important; margin:0.5em 0 !important}
	 }
	
	

.page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  min-width: 320px;
  z-index: 1;
  background: #fff;
  /*display: none;*/
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  opacity: 1; }
  .page .section-bg-image {
    width: 100%;
    height: auto; }
  .page header {
    display: none;
    height: 40px;
    background: #ffffff;
    text-align: center;
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
    .page header h1 {
      font: 16px/1 'Minion Pro', sans-serif;
      color: #333;
      text-transform: uppercase;
      margin-top: 11px; }
      .page header h1 span {
        text-transform: none;
        color: #999; }

@media (max-width: 739px) {
  .page {
    box-shadow: none; } }

body[data-chapter="0"] .page#ui_page_0, body[data-chapter="0"] .page#ui_page_intro, body[data-chapter="1"] .page#ui_page_1, body[data-chapter="2"] .page#ui_page_2, body[data-chapter="3"] .page#ui_page_3, body[data-chapter="4"] .page#ui_page_4, body[data-chapter="5"] .page#ui_page_5, body[data-chapter="6"] .page#ui_page_6 {
  display: block; }

@media (min-width: 740px) {
  .page {
    min-height: 100vh;
    display: block; }
    .page header {
      position: fixed; } }

.sect.intro-wrapper {
  background: #000; }
  .sect.intro-wrapper .background {
    background: #000;
    background-size: cover;
    background-position: 50% 0;
    background-repeat: no-repeat; }
  .sect.intro-wrapper #ui_page_bg_1 {
    background-image: url("../../media/images/Hero-00-large.jpg"); }

  .sect.intro-wrapper #ui_page_bg_2 {
    background-image: url("../../media/images/Hero-01-large.jpg"); }

  .sect.intro-wrapper #ui_page_bg_3 {
    background-image: url("../../media/images/Hero-02-large.jpg"); }

  .sect.intro-wrapper #ui_page_bg_4 {
    background-image: url("../../media/images/Hero-03-large.jpg"); }

  .sect.intro-wrapper #ui_page_bg_5 {
    background-image: url("../../media/images/Hero-04-large.jpg"); }

  .sect.intro-wrapper #ui_page_bg_6 {
    background-image: url("../../media/images/Hero-05-large.jpg"); }

.sect.intro-wrapper #ui_page_bg_7 {
    background-image: url("../../media/images/Hero-06-large.jpg"); }

.sect.intro-wrapper #ui_page_bg_8 {
    background-image: url("../../media/images/Hero-07-large.jpg"); }

.sect.intro-wrapper #ui_page_bg_9 {
    background-image: url("../../media/images/Hero-08-large.jpg"); }

.sect.intro-wrapper #ui_page_bg_10 {
    background-image: url("../../media/images/Hero-10-large.jpg"); }

.sect.intro-wrapper #ui_page_bg_11 {
    background-image: url("../../media/images/Hero-11-large.jpg"); }

.sect.intro-wrapper #ui_page_bg_12 {
    background-image: url("../../media/images/Hero-12-large.jpg"); }

.sect.intro-wrapper #ui_page_bg_13 {
    background-image: url("../../media/images/Hero-13-large.jpg"); }

.sect.intro-wrapper #ui_page_bg_14 {
    background-image: url("../../media/images/Hero-14-large.jpg"); }

.sect.intro-wrapper #ui_page_bg_15 {
    background-image: url("../../media/images/Hero-15-large.jpg"); }

.sect.intro-wrapper #ui_page_bg_16 {
    background-image: url("../../media/images/Hero-16-large.jpg"); }


#ui_page_interstitial_1_2.infographic {
  background-image: url("../../media/images/sect_01_interstitial_bg.jpg");
  background-size: cover; }

#ui_page_interstitial_2_1.infographic {
  background-image: url("../../media/images/bet02-int-2-2-background.jpg");
  background-size: cover; }

#ui_page_interstitial_2_3.infographic {
  background-image: url("../../media/images/bet02-int-2-3-background.jpg");
  background-size: cover; }

#ui_page_interstitial_3_1.infographic {
  background-image: url("../../media/images/sect_01_interstitial_bg.jpg");
  background-size: cover; }



#ui_page_interstitial_10_1.infographic {
  background-image: url("../../media/images/sect_10_interstitial_bg.jpg");
  background-size: cover; }
#ui_page_interstitial_11_1.infographic {
  background-image: url("../../media/images/sect_11_interstitial_bg.jpg");
  background-size: cover; }
#ui_page_interstitial_6_1.infographic {
  background-image: url("../../media/images/sect_12_interstitial_bg.jpg");
  background-size: cover; }
#ui_page_interstitial_14_1.infographic {
  background-image: url("../../media/images/sect_14_interstitial_bg.jpg");
  background-size: cover; }


@media (max-width: 739px) {
  .page header {
    display: none; }
  .sect.intro-wrapper #ui_page_bg_1 {
    background-image: url("../../media/images/Hero-00-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_2 {
    background-image: url("../../media/images/Hero-01-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_3 {
    background-image: url("../../media/images/Hero-02-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_4 {
    background-image: url("../../media/images/Hero-03-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_5 {
    background-image: url("../../media/images/Hero-04-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_6 {
    background-image: url("../../media/images/Hero-05-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_7 {
    background-image: url("../../media/images/Hero-06-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_8 {
    background-image: url("../../media/images/Hero-07-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_9 {
    background-image: url("../../media/images/Hero-08-mobile.jpg"); }	
		
  .sect.intro-wrapper #ui_page_bg_11 {
    background-image: url("../../media/images/Hero-10-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_12 {
    background-image: url("../../media/images/Hero-12-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_13 {
    background-image: url("../../media/images/Hero-13-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_14 {
    background-image: url("../../media/images/Hero-14-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_15 {
    background-image: url("../../media/images/Hero-15-mobile.jpg"); }
	
  .sect.intro-wrapper #ui_page_bg_16 {
    background-image: url("../../media/images/Hero-16-mobile.jpg"); }
	
  .browser-iphone .page {
    min-height: 240px; } }

.browser-ipad .page {
  height: auto;
  min-height: 1px !important; }
.browser-ipad .scroll-hint {
  display: none; }

.el-arrow-down {
  width: 26px;
  height: 14px;
  display: block;
  background-position: 0 -106px; }

.el-btn-play {
  width: 100px;
  height: 100px;
  display: block;
  background: url("../../media/images/video-play-button-dark.png") no-repeat 50% 50%; }
  @media (max-width: 740px) {
    .el-btn-play {
      width: 60px;
      height: 60px;
      background-image: url("../../media/images/video-play-button-mobile.png"); } }

.mod-tooltip-label .tooltip {
  display: none;
  padding: .5em 1em;
  position: absolute;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  white-space: nowrap;
  color: #fff; }
  .mod-tooltip-label .tooltip:before {
    content: "";
    width: 6px;
    height: 13px;
    margin-top: -6px;
    display: block;
    position: absolute;
    top: 50%;
    right: 100%;
    background-position: -36px -73px; }
.mod-tooltip-label:hover .tooltip {
  display: block; }

.mod-summary {
  text-align: left;
  font-size: 18px;
  color: #fff; }
  .mod-summary .img-cite {
    display: block; }

.mod-tile-intro {
  display: block;
  background-color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #4c4c4c;
  font-weight: 100;
  transform: translateZ(0px);
  padding: 10px 20px; }
  .mod-tile-intro span {
    height: 1em;
    padding: .5em;
    display: inline-block;
    position: relative;
    background-color: #FFF;
    line-height: 1;
    color: #5694b4;
    z-index: 2;
    position: relative;
    transform: translateZ(0px); }
  .mod-tile-intro strong {
    display: block;
    min-height: 72px;
    border-top: 1px #e0dfdc solid;
    border-bottom: 1px #e0dfdc solid;
    padding: 20px 0;
    font-family: 'Lusitana', serif;
    transform: translateZ(0px);
    min-height: 48px;
    font-size: 20px;
    line-height: 26px; }
  li.last .mod-tile-intro strong {
    min-height: 24px; }
  .mod-tile-intro .bet {
    bottom: -1.1em;
    letter-spacing: 1.2px;
    transform: translateZ(0px);
    z-index: 2; }
  .mod-tile-intro .cta {
    top: -1.1em;
    letter-spacing: 1.2px;
    transform: translateZ(0px);
    z-index: 2; }
  .mod-tile-intro .autor {
    top: -1.1em;
    text-transform: none;
    transform: translateZ(0px); }
  @media (max-width: 740px) {
    .mod-tile-intro {
      padding: 10px 20px;
      border: 1px solid #e0dfdc; }
      .mod-tile-intro strong {
        min-height: 24px; } }

.statistic {
  width: auto; }
  .statistic p {
    text-transform: uppercase;
    font-size: 18px;
    color: #666666; }
    .statistic p span {
      display: block; }
    .statistic p strong.statistic-figure {
      color: #3689b2;
      display: block;
      font-size: 115px;
      line-height: 1;
      width: 320px;
      white-space: nowrap;
      margin: 8px 0 13px 0;
      letter-spacing: -5px; }
      .statistic p strong.statistic-figure small {
        font-size: 50px;
        display: inline-block;
        vertical-align: top;
        position: relative;
        top: 6px;
        padding-right: 5px; }

.next-page {
  border: 1px #e0dfdc solid;
  box-shadow: 0px 3px 8px #f0f0f0;
  background: #fff;
  padding: 20px; }
  .next-page a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    cursor: pointer; }
  .next-page span {
    display: block;
    transform: translateZ(0px); }
  .next-page .end-cap {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 24px;
    position: relative;
    display: inline-block;
    color: #3689b2; }
    .next-page .end-cap:before, .next-page .end-cap:after {
      content: '';
      display: block;
      width: 600px;
      height: 1px;
      border-bottom: 1px #c8c6c4 solid;
      position: absolute;
      top: 17px; }
    .next-page .end-cap:before {
      left: -615px; }
    .next-page .end-cap:after {
      right: -615px; }
  .next-page .next-title {
    font: 18px/1 'Minion Pro', sans-serif;
    padding: 20px 0;
    transform: translateZ(0px); }

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9001;
  background: rgba(0, 0, 0, 0.7); }

#colorbox {
  z-index: 9002; }

@media (max-width: 739px) {
  .next-page {
    margin-top: 20px; }
    .next-page .end-cap {
      font-size: 17px;
      text-transform: uppercase; }
      .next-page .end-cap:before, .next-page .end-cap:after {
        top: 10px; }
  .next-page .next-title {
    font-family: ’Lusitana’, serif;
    font-size: 20px;
    line-height: 1.2;
    padding: 10px 0;
    text-transform: uppercase; } }

.carousel {
  position: relative;
  height: auto;
  vertical-align: middle;
  margin: 48px auto; }
  .carousel button {
    display: block;
    color: transparent;
    border: 0;
    padding: 0;
    background: transparent;
    width: 47px;
    height: 83px;
    position: absolute;
    top: calc(50% - 101px);
    opacity: 1;
    cursor: pointer; }
    .carousel button.carousel-previous {
      left: -75px;
      background: url('../../media/images/gallery-previous.png') no-repeat center center; }
    .carousel button.carousel-next {
      right: -75px;
      background: url('../../media/images/gallery-next.png') no-repeat center center; }
    .carousel button.disabled {
      opacity: 0.5; }
    .carousel button:focus, .carousel button:active {
      outline: 0;
      box-shadow: none;
      border: none; }
  .carousel img.carousel-spacer {
    display: none;
    width: 100%;
    height: auto; }
  .carousel ul {
    margin: 0;
    padding: 0; }
  .carousel .carousel-mask {
    overflow: hidden;
    width: 100%;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
  .carousel ul.carousel-items {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; }
    .carousel ul.carousel-items:before, .carousel ul.carousel-items:after {
      content: "";
      display: table; }
    .carousel ul.carousel-items:after {
      clear: both; }
    .carousel ul.carousel-items li {
      float: left; }
      .carousel ul.carousel-items li figure {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        text-align: center; }
        .carousel ul.carousel-items li figure img {
          max-width: 100%;
          width: auto;
          height: auto;
          max-height: 100%;
          display: inline-block; }
        .carousel ul.carousel-items li figure figcaption {
          display: none; }
  .carousel .carousel-content {
    width: 100%;
    min-height: 80px;
    text-align: center;
    z-index: 2;
    margin-top: 25px; }
  .carousel .carousel-item-content p {
    font-size: 14px;
    color: #fff; }
  .carousel .carousel-item-content cite {
    font-size: 12px;
    color: #999; }
  .carousel ul.carousel-nav {
    margin: 0 0 10px 0;
    font-size: 0; }
    .carousel ul.carousel-nav li {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-left: 8px;
      border-radius: 4px;
      border: 1px #fff solid;
      cursor: pointer; }
      .carousel ul.carousel-nav li.active {
        background: #fff; }
      .carousel ul.carousel-nav li:first-child {
        margin-left: 0; }

.carousel-sect .activity-social {
  position: absolute;
  bottom: 104px;
  right: 15px; }

@media (max-width: 739px) {
  .carousel {
    margin-bottom: 0; }
    .carousel button {
      width: 24px;
      height: 42px;
      position: absolute;
      top: calc(100% - 59px); }
      .carousel button.carousel-previous {
        left: 0;
        background: url('../../media/images/gallery-previous-mobile.png') no-repeat center center; }
      .carousel button.carousel-next {
        right: 0;
        background: url('../../media/images/gallery-next-mobile.png') no-repeat center center; }
    .carousel .carousel-content {
      width: calc(100% - 68px);
      margin: 25px auto 0 auto; }
  .carousel-sect .activity-social {
    position: static;
    width: 100%;
    text-align: center;
    margin-bottom: 48px; } }

.media .video-player {
  position: relative;
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.1);
  border: 1px rgba(0, 0, 0, 0.1) solid; }
  .media .video-player.unloaded {
    cursor: pointer;
    border: 1px #fff solid; }
    .media .video-player.unloaded:after {
      content: '';
      display: block;
      width: 100px;
      height: 100px;
      background: url('../../media/images/video-play-button.png') no-repeat center center;
      background-size: 100% auto;
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 50px); }
  .media .video-player img {
    display: block;
    width: 100%;
    height: auto; }
  .media .video-player img.poster-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: #000; }
  .media .video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .media .video-player .video-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
.media figure {
  box-sizing: border-box;
  padding: 0 20px;
  width: 100%;
  display: table-cell;
  vertical-align: middle; }
.media figcaption p {
  color: #fff;
  float: left; }
.media figcaption cite {
  color: #ccc;
  float: right; }

.video-player {
  cursor: pointer; }

.wrap {
  width: 100%;
  height: auto; }

.gutter figure, .main figure {
  height: auto; }
  .gutter figure:before, .gutter figure:after, .main figure:before, .main figure:after {
    content: "";
    display: table; }
  .gutter figure:after, .main figure:after {
    clear: both; }
  .gutter figure .video-player, .main figure .video-player {
    max-height: 403px; }
  .gutter figure.sticky, .main figure.sticky {
    margin-bottom: 30px; }
  .gutter figure figcaption, .main figure figcaption {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    padding: 10px 0;
    color: #999; }
  .gutter figure img, .gutter figure iframe, .main figure img, .main figure iframe {
    display: block;
    width: 100%;
    height: auto; }
    .gutter figure img iframe.youku-video, .gutter figure iframe iframe.youku-video, .main figure img iframe.youku-video, .main figure iframe iframe.youku-video {
      width: auto;
      height: auto; }
  .gutter figure .video-player, .main figure .video-player {
    position: relative;
    width: 100%;
    height: auto; }
    .gutter figure .video-player img, .main figure .video-player img {
      display: block;
      width: 100%;
      height: auto; }
    .gutter figure .video-player iframe, .main figure .video-player iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .gutter figure .video-player .video-container, .main figure .video-player .video-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0; }

.gutter .video-player {
  cursor: pointer; }
  .gutter .video-player.unloaded:after {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background: url('../../media/images/video-play-button-mobile.png') no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 40px); }

.main .video-player {
  cursor: pointer; }
  .main .video-player.unloaded:after {
    content: '';
    display: block;
    width: 110px;
    height: 110px;
    background: url('../../media/images/video-play-button-mobile.png') no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: calc(50% - 55px);
    left: calc(50% - 55px); }

@media (min-width: 740px) {
  .media .video-player {
    cursor: pointer;
    display: inline-block;
    max-width: 100%;
    width: auto;
    height: 100%; }
    .media .video-player img {
      display: block;
      max-width: 100%;
      height: calc(85vh - 110px);
      max-height: 686px;
      width: auto; }
  .media figure {
    padding: 0;
    width: auto;
    display: inline-block; }
    .media figure:before, .media figure:after {
      content: "";
      display: table; }
    .media figure:after {
      clear: both; } }

@media (max-width: 739px) {
  .media figure {
    padding: 0; }
  .gutter figure.sticky {
    margin-bottom: 0; }
  .gutter figure figcaption, .main figure figcaption {
    padding-bottom: 0; }
  .gutter .video-player, .main .video-player {
    cursor: pointer; }
    .gutter .video-player.unloaded:after, .main .video-player.unloaded:after {
      content: '';
      display: block;
      width: 80px;
      height: 80px;
      background: url('../../media/images/video-play-button-mobile.png') no-repeat center center;
      background-size: 100% auto;
      position: absolute;
      top: calc(50% - 40px);
      left: calc(50% - 40px); } }

.signup-form.processing {
  opacity: 0.2; }
.signup-form label {
  display: none; }
.signup-form button.submit-button {
  font-size: 16px;
  line-height: 18px;
  padding: 12px 40px 10px 40px;
  margin: 20px 0 14px 0; }
.signup-form .form-group {
  margin-bottom: 10px; }
  .signup-form .form-group input, .signup-form .form-group select {
    width: 100%;
    box-sizing: border-box; }
.signup-form .form-group-split {
  display: inline-block;
  width: calc(50% - 5px);
  box-sizing: border-box; }
  .signup-form .form-group-split.margin-right {
    margin-right: 10px; }
.signup-form p.error-message {
  border: 1px #d62027 solid;
  border-radius: 4px;
  margin-bottom: 1em;
  padding: 8px;
  color: #d62027;
  font-size: 17px; }

.success-message {
  display: none;
  padding: 40px;
  border: 1px #969593 solid;
  border-radius: 4px; }
  .success-message h2 {
    color: #4d4d4d;
    margin: 0 0 0.2em 0; }
  .success-message p {
    color: #4d4d4d;
    margin: 0 0 1em 0; }

.signup-cta {
  margin: 30px 0; }
  .signup-cta img, .signup-cta p {
    display: inline-block;
    vertical-align: middle;
    color: #d62027;
    margin: 0 8px; }

.footer-title h3, .footer-title h4 {
  line-height: 1;
  font-family: 'Lusitana', Lucida Bright, Georgia, serif;
  font-weight: normal;
  margin: 0; }
.footer-title h3 {
  font-size: 20px;
  color: #4d4d4d;
  margin-bottom: .8em;
  position: relative;
  overflow: hidden; }
  .footer-title h3 span {
    position: relative; }
    .footer-title h3 span:before, .footer-title h3 span:after {
      content: '';
      display: block;
      width: 9999em;
      height: 1px;
      border-bottom: 1px #c8c6c4 solid;
      position: absolute;
      top: .5em; }
    .footer-title h3 span:before {
      margin-left: .5em;
      left: 100%; }
    .footer-title h3 span:after {
      margin-right: .5em;
      right: 100%; }
.footer-title h4 {
  font-size: 72px;
  color: #333;
  padding-bottom: 14px;
  border-bottom: 1px #c8c6c4 solid; }

@media (max-width: 739px) {
  .footer-title h4 {
    font-size: 32px; } }

.privacy-links a {
  display: inline-block;
  margin: 0 20px; }

.gutter .footer-title h3 {
  font-size: 20px; }
  .gutter .footer-title h3 span:before, .gutter .footer-title h3 span:after {
    display: none; }
.gutter .footer-title h4 {
  font-size: 30px; }
.gutter .signup-cta {
  margin: 30px 0; }
  .gutter .signup-cta img {
    width: 151px;
    height: 60px;
    min-height: 0;
    min-width: 0;
    margin: 0 auto 30px auto; }

.gutter-cta {
  margin-top: 30px;
  text-align: center; }

footer {
  position: relative;
  z-index: 1;
  background: #fff;
  text-align: center;
  padding: 0 20px 100px 60px; }
  footer .wrap.footer-cta {
    width: 100%;
    max-width: 800px;
    background-color: #f5f5f5;
    border: 1px solid #d8d7d4;
    margin: 0 auto;
    padding: 40px;
    overflow: hidden; }
  footer p a.privacy-policy {
    font-size: 14px;
    color: #646464; }

@media (max-width: 739px) {
  footer {
    padding: 0 20px 80px 20px; }
    footer .wrap.footer-cta {
      padding: 20px; }
    footer .footer-title h3 {
      font-size: 16px; }
      footer .footer-title h3:before {
        left: -568px; }
      footer .footer-title h3:after {
        right: -568px; }
    footer .footer-title h4 {
      font-size: 50px; }
  .signup-cta p {
    margin-top: 20px; } }

.share-links {
  text-align: center; }
  .share-links li {
    display: inline-block;
    vertical-align: middle;
    margin-left: 30px; }
    .share-links li a.social {
      display: block;
      cursor: pointer; }
      .share-links li a.social.social-facebook {
        width: 13px;
        height: 28px;
        background: url("../../media/images/social/facebook.png") no-repeat 50% 50%; }
        .share-links li a.social.social-facebook.red {
          background-image: url("../../media/images/social/facebook-red.png"); }
      .share-links li a.social.social-twitter {
        width: 28px;
        height: 23px;
        background: url("../../media/images/social/twitter.png") no-repeat 50% 50%; }
        .share-links li a.social.social-twitter.red {
          background-image: url("../../media/images/social/twitter-red.png"); }
      .share-links li a.social.social-linkdin {
        width: 28px;
        height: 28px;
        background: url("../../media/images/social/linkdin.png") no-repeat 50% 50%; }
      .share-links li a.social.social-email {
        width: 28px;
        height: 20px;
        background: url("../../media/images/social/email.png") no-repeat 50% 50%; }
        .share-links li a.social.social-email.red {
          background-image: url("../../media/images/social/email-red.png"); }
    .share-links li:first-child {
      margin-left: 0; }

.activity-social a {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  cursor: pointer;
  background: url("../../media/images/spr-social.png") no-repeat 0 0; }
  .activity-social a:first-child {
    margin-left: 0; }
  .activity-social a.social-facebook {
    width: 11px;
    height: 24px;
    background-position: -35px 0; }
    .activity-social a.social-facebook.dark {
      background-position: 0 0; }
    .activity-social a.social-facebook:hover {
      background-position: 0 -59px; }
  .activity-social a.social-twitter {
    width: 24px;
    height: 24px;
    background-position: -46px 0; }
    .activity-social a.social-twitter.dark {
      background-position: -11px 0; }
    .activity-social a.social-twitter:hover {
      background-position: -11px -59px; }
  .activity-social a.social-renren {
    width: 26px;
    height: 15px;
    background-position: -52px -24px; }
    .activity-social a.social-renren.dark {
      background-position: 0 -24px; }
    .activity-social a.social-renren:hover {
      background-position: -26px -24px; }
  .activity-social a.social-weibo {
    width: 24px;
    height: 20px;
    background-position: -48px -39px; }
    .activity-social a.social-weibo.dark {
      background-position: 0 -39px; }
    .activity-social a.social-weibo:hover {
      background-position: -24px -39px; }

@media (min-width: 740px) {
  .activity-social {
    margin-top: 10px; } }

.infographic .infographic-image {
  max-width: 1080px;
  width: 100%;
  /*min-height: calc(500px - 96px);*/
  height: auto;
  position: relative;
  margin: 48px 0;
  position: relative;
  padding: 30px;
  background: rgba(255, 255, 255, 0.8); }
  .infographic .infographic-image img {
    width: 100%;
    height: auto;
    display: block; }
  .infographic .infographic-image .infographic-title {
    padding-bottom: 10px;
    border-bottom: 1px #b3b3b3 solid;
    margin-bottom: 20px; }
    .infographic .infographic-image .infographic-title h4 {
      color: #333;
      text-transform: uppercase;
      font-family: 'Roboto Condensed','Oswald', sans-serif;
      font-weight: 700;
      font-size: 30px; }
      .infographic .infographic-image .infographic-title h4 strong {
        color: #3689b2;
        text-transform: uppercase; }
    .infographic .infographic-image .infographic-title h5 {
      color: #3689b2;
      font-size: 18px;
      text-transform: uppercase;
      font-family: 'Oswald', sans-serif;
      font-weight: 700; }
  .infographic .infographic-image .infographic-footer {
    padding-top: 10px;
    border-top: 1px #b3b3b3 solid;
    margin-top: 20px; }
    .infographic .infographic-image .infographic-footer:before, .infographic .infographic-image .infographic-footer:after {
      content: "";
      display: table; }
    .infographic .infographic-image .infographic-footer:after {
      clear: both; }
    .infographic .infographic-image .infographic-footer p {
      font-size: 12px;
      padding-top: 10px;
      color: #666;
      clear: both;
      text-align: center; }

@media (max-width: 739px) {
  .infographic .infographic-image .infographic-title h4 {
    font-size: 20px; }
  .infographic .infographic-image .infographic-title h5 {
    font-size: 14px; }
  .infographic .infographic-image .infographic-footer {
    padding-top: 0; } }

#iframe_modal_clickeater {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.3s ease-out;
  top: 0;
  left: 0; }
  #iframe_modal_clickeater .close {
    display: block;
    width: 20px;
    height: 20px;
    color: #fff;
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    border-radius: 20px;
    border: 2px #fff solid;
    line-height: 1;
    cursor: pointer; }

#iframe_modal {
  position: fixed;
  transition: all 0.3s ease-out;
  z-index: 10001;
  background: #333;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); }
  #iframe_modal iframe {
    width: 100%;
    height: 100%; }

header#ui_site_header {
  padding: 0 20px 0 14px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #00ABF1;
 /* background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8DBFFE), to(#376DCF));
  background: -moz-linear-gradient(top, #8DBFFE, #376DCF);
  background: -ms-linear-gradient(top, #8DBFFE, #376DCF);
  background: -o-linear-gradient(top, #8DBFFE, #376DCF);*/
  color: #fff;
  z-index: 100;
  box-sizing: border-box; }
  header#ui_site_header .gbmenu {
    position: relative;
    left: 4px; }
  header#ui_site_header .sbsearch {
    font-size: 20px;
    top: -2px; }
  header#ui_site_header .socshare {
    font-size: 20px;
    top: -2px; }
  header#ui_site_header .logotl1, header#ui_site_header .logotl2 {
    display: none;
    font-size: 16px;
    line-height: 1;
    top: 7px;
    height: 20px;
    cursor: default;
    pointer-events: none; }
  header#ui_site_header .logotl1 {
    width: calc(100% - 320px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  header#ui_site_header .logop1, header#ui_site_header .logop2 {
    top: -3px; }

@media (min-width: 740px) {
  /*.expanded header#ui_site_header {
    height: 60px; }
    .expanded header#ui_site_header .gbmenu {
      margin-top: 3px;
      font-size: 20px;
      left: 0; }
    .expanded header#ui_site_header .sbsearch, .expanded header#ui_site_header .socshare {
      top: 9px; }
    .expanded header#ui_site_header .logop1, .expanded header#ui_site_header .logop2 {
      font-size: 34px;
      line-height: 40px;
      top: -1px; }
    .expanded header#ui_site_header .logotl1, .expanded header#ui_site_header .logotl2 {
      top: 12px; }
  .browser-safari .expanded header#ui_site_header .logop1, .browser-safari .expanded header#ui_site_header .logop2 {
    top: 3px; }
  .browser-safari .expanded header#ui_site_header .logotl1, .browser-safari .expanded header#ui_site_header .logotl2 {
    top: 8px; }
  .browser-safari header#ui_site_header .logop1, .browser-safari header#ui_site_header .logop2 {
    top: 1px; }
  .browser-safari header#ui_site_header .logotl1, .browser-safari header#ui_site_header .logotl2 {
    top: 5px; } */}

@media (max-width: 739px) {
  header#ui_site_header .gbmenu {
    padding-top: 2px; }
  header#ui_site_header .logop1, header#ui_site_header .logop2 {
    top: -4px; }
  .browser-safari header#ui_site_header .logop1, .browser-safari header#ui_site_header .logop2 {
    top: -1px; }
  .browser-safari header#ui_site_header .logotl1, .browser-safari header#ui_site_header .logotl2 {
    top: 3px; } }

@media all and (min-width: 500px) and (max-width: 650px) {
  header#ui_site_header .gbmenu {
    padding-top: 2px; }
  header#ui_site_header .logop1, header#ui_site_header .logop2 {
    top: -4px; }
  .browser-safari header#ui_site_header .logop1, .browser-safari header#ui_site_header .logop2 {
    top: -1px; }
  .browser-safari header#ui_site_header .logotl1, .browser-safari header#ui_site_header .logotl2 {
    top: 3px; } }

@media (max-width: 499px) {
  header#ui_site_header .logop1, header#ui_site_header .logop2 {
    top: -1px; } }

#ui_page_intro {
  background: black; }
  #ui_page_intro .sect .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url("../../media/images/Hero-00-Intro-large.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden; }
  #ui_page_intro .sect .wrap blockquote p, #ui_page_intro .sect .wrap blockquote h2, #ui_page_intro .sect .wrap blockquote h3 {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto; }
#ui_page_intro .sect .wrap blockquote h2, #ui_page_intro .sect .wrap blockquote h3 {
    color: rgba(255,255,255,1.00); }
#ui_page_intro .sect .wrap blockquote figure img{width:50%; float: right; margin-left: 2em;}
#ui_page_intro .sect .wrap blockquote figure img.un_sg{width:50%; float: none !important; margin-left: 2em; margin-bottom: 1.5em; display:block !important;}
@media (max-width: 739px) {
	#ui_page_intro .sect .wrap blockquote figure img{width:100%; float: none; margin-left: 0;}
}
  #ui_page_intro .sect .wrap blockquote .bet-callout p {
    max-width: 800px; }
  #ui_page_intro .sect.media .wrap {
    max-width: 1080px; }
  #ui_page_intro .sect.landing {
    padding: 0; }
    #ui_page_intro .sect.landing .wrap {
      max-width: 960px;
      width: 100%;
      min-height: 100%;
      overflow: auto; }
      #ui_page_intro .sect.landing .wrap .nav-bets {
        margin: 0 auto; }
        #ui_page_intro .sect.landing .wrap .nav-bets li {
          border: 1px #e0dfdc solid;
          box-shadow: 0px 3px 8px #f0f0f0;
          transform: translateZ(0px); }
  #ui_page_intro .sect.hero {
    height: auto; }
    #ui_page_intro .sect.hero .wrap {
      height: auto; }
  #ui_page_intro .sect.title {
    background: transparent; }
  #ui_page_intro .mod-summary {
    margin: 2em 0;
    font-size: 24px;
    line-height: 1.7;
    color: #fff; }
    #ui_page_intro .mod-summary .img-cite {
      width: 205px;
      height: 20px;
      margin-top: 1em;
      background-position: 0 -103px; }

#ui_table_of_contents:before, #ui_table_of_contents:after {
  content: "";
  display: table; }
#ui_table_of_contents:after {
  clear: both; }

@media (max-width: 739px) {
  #ui_page_intro {
    background: #fff; }
    #ui_page_intro .sect {
      overflow: hidden; }
      #ui_page_intro .sect .background {
        position: fixed;
        background-image: url("../../media/images/Hero-00-Intro-small.jpg"); }
      #ui_page_intro .sect.hero {
        margin-top: 60px; }
        #ui_page_intro .sect.hero:before {
          content: "";
          width: 100%;
          height: 100px;
          display: block;
          position: absolute;
          top: 0;
          background: url('../../media/images/bg-intro-quote.png'); }
        #ui_page_intro .sect.hero .wrap {
          min-height: 0;
          margin-top: 60px;
          padding-bottom: 50px;
          background-color: rgba(0, 0, 0, 0.5);
          color: #fff; }
      #ui_page_intro .sect.landing {
        padding: 0 20px; }
        #ui_page_intro .sect.landing h1 {
          margin-bottom: 1em;
          text-align: center;
          color: #4d4d4d; }
      #ui_page_intro .sect.title {
        margin: 0 auto;
        padding-top: 80px;
        background-size: cover; }
        #ui_page_intro .sect.title h1 {
          padding-top: 150px;
          max-width: 480px;
          min-width: 280px;
          min-height: 100px;
          max-height: 480px;
          width: calc(100% - 40px);
          height: 100%; }
    #ui_page_intro .el-btn-play {
      width: 100%;
      max-width: 320px;
      margin: .5em auto 0;
      height: 150px;
      border: 1px solid #fff;
      background-position: 50% 50%; }
    #ui_page_intro .mod-summary {
      margin: 2em 0;
      padding: 0px 20px;
      font-size: 17px; }
      #ui_page_intro .mod-summary cite {
        display: none; }
  .nav-bets {
    transform: translate3d(0, 0, 0); }
    .nav-bets li {
      margin-bottom: 1em;
      transform: translate3d(0, 0, 0); }
  #ui_page_intro .sect {
    overflow: visible;
    display: block;
    height: auto; }
    #ui_page_intro .sect .wrap {
      display: block;
      margin-top: 40px; }
      #ui_page_intro .sect .wrap blockquote .bet-callout {
        margin-top: 40px; }
        #ui_page_intro .sect .wrap blockquote .bet-callout h2 {
          font-size: 24px; }
          #ui_page_intro .sect .wrap blockquote .bet-callout h2:after, #ui_page_intro .sect .wrap blockquote .bet-callout h2:before {
            top: 10px; }
        #ui_page_intro .sect .wrap blockquote .bet-callout p {
          font-size: 22px; }
    #ui_page_intro .sect.background {
      height: 100%;
      min-height: 480px;
      position: absolute;
      background-size: 100% auto; }
    #ui_page_intro .sect.hero {
      position: relative;
      margin-top: 60px; }
      #ui_page_intro .sect.hero:before {
        display: none; }
    #ui_page_intro .sect.title {
      position: relative;
      z-index: 2; }
      #ui_page_intro .sect.title .wrap {
        margin: 0;
        width: 100%;
        max-width: 100%; }
      #ui_page_intro .sect.title h1 {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        height: auto;
        padding-top: 40px; }
  .browser-iphone #ui_page_intro .sect.hero {
    margin-top: -100px; }
  .browser-iphone #ui_page_intro .sect.title h1 {
    padding-top: 0; }
  .browser-iphone #ui_page_intro .sect.intro-wrapper {
    min-height: 1px; }
  .browser-ios-7.browser-iphone #ui_page_intro .sect.hero {
    margin-top: -140px; }
  .browser-ios-7.browser-iphone #ui_page_intro .sect.title h1 {
    padding-top: 0; } }

@media (min-width: 740px) {
  #ui_page_intro {
    background: black; }
    #ui_page_intro .sect.landing {
      padding: 60px 0; }
      #ui_page_intro .sect.landing .wrap {
        max-width: 960px;
        width: 100%;
        min-height: 100%;
        overflow: auto; }
        #ui_page_intro .sect.landing .wrap .nav-bets {
          margin: 0 auto;
          max-width: 960px; }
    #ui_page_intro .sect.title {
      background: transparent; }
    #ui_page_intro .sect.hero {
      height: auto;
      margin-top: 0; }
      #ui_page_intro .sect.hero .wrap {
        height: auto;
        margin-top: 20px; }
    #ui_page_intro .sect.background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-position: center top;
      background-size: cover;
      overflow: hidden; }
  .nav-bets {
    margin: 0 auto;
    width: 100%;
    max-width: 920px; }
    .nav-bets:before, .nav-bets:after {
      content: "";
      display: table; }
    .nav-bets:after {
      clear: both; }
    .nav-bets li {
      display: block;
      width: calc(50% - 24px);
      border: 1px #e0dfdc solid;
      margin: 0 10px 20px 10px; }
      .nav-bets li.odd {
        float: left;
        clear: left; }
      .nav-bets li.even {
        float: left;
        clear: right; }
      .nav-bets li.last {
        clear: both;
        margin: 0 auto; }
      .nav-bets li:hover {
        border-color: #aaa;
        box-shadow: 0 2px 12px #e5e5e5; } }

#ui_page_end_0 {
  width: 100% !important; }

.sect.activity-sect .wrap:before, .sect.activity-sect .wrap:after {
  content: "";
  display: table; }
.sect.activity-sect .wrap:after {
  clear: both; }
.sect.activity-sect .activity {
  width: calc(100% - 40px);
  height: 100%;
  position: relative;
  margin: 48px 20px;
  padding: 30px 0; }
  .sect.activity-sect .activity:before, .sect.activity-sect .activity:after {
    content: "";
    display: table; }
  .sect.activity-sect .activity:after {
    clear: both; }
  .sect.activity-sect .activity p {
    color: #5694b4;
    font-size: 14px; }
  .sect.activity-sect .activity .activity-content {
    box-sizing: content-box; }

.activity-title {
  overflow: hidden; }
  .activity-title h3 {
    text-align: center;
    color: #646464;
    font-size: 20px;
    line-height: 1.4;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    position: relative; }
    .activity-title h3:before, .activity-title h3:after {
      content: '';
      display: block;
      width: 700px;
      height: 1px;
      border-bottom: 1px #c8c6c4 solid;
      position: absolute;
      top: 13px; }
    .activity-title h3:before {
      left: -415px; }
    .activity-title h3:after {
      right: -415px; }
  .activity-title h4 {
    text-align: center;
    color: #5694b4;
    font-size: 36px;
    line-height: 1.4;
    text-transform: uppercase;
    margin-bottom: 16px; }
  .activity-title.sidebar h3 {
    font-size: 13px; }
    .activity-title.sidebar h3:before, .activity-title.sidebar h3:after {
      display: none; }
  .activity-title.sidebar h4 {
    font-size: 24px; }

.gutter-title h3 {
  color: #666;
  margin-bottom: 24px;
  font-size: 28px;
  font-family: 'Oswald', sans-serif;
  font-weight: 400; }

.gutter-subtitle h4 {
  color: #666;
  margin-bottom: 20px;
  font-size: 18px;
  font-family: 'Oswald', sans-serif;
  font-weight: 400; }

.activity-cite {
  text-align: left;
  float: left;
  margin-top: 20px;
  width: calc(100% - 80px); }

.activity-social {
  text-align: right;
  float: right;
  margin-top: 20px;
  height: 24px;
  width: 80px;
  font-size: 0; }

@media (min-width: 740px) {
  .sect.activity-sect .activity {
    width: 100%;
    margin: 48px 0; } }

@media (max-width: 739px) {
  .activity-title h3 {
    font-size: 17px; }
    .activity-title h3:before, .activity-title h3:after {
      display: none; }
  .activity-title h4 {
    font-size: 24px;
    margin-bottom: 10px; }
  .gutter-title h3 {
    font-size: 20px; } }

.sect.activity-sect .activity[data-activity="ReorderActivity"] {
  padding-bottom: 43px; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-list li {
    margin-top: 20px;
    border-radius: 10px;
    position: relative;
    height: 90px;
    border: 1px #e5e4e0 solid;
    border-bottom: 1px #fdfcfa solid;
    border-top: 1px #c2c1bf solid;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-list li:first-child {
      margin-top: 0; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .answer {
    display: table;
    width: 100%;
    height: 100%;
    padding: 15px;
    border-radius: 10px;
    box-sizing: border-box;
    background: #3689b3;
    text-align: center;
    line-height: 1.2;
    color: #fff;
    font-size: 24px;
    position: relative;
    font-family: 'Oswald', sans-serif;
    font-weight: 400; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .answer .label {
      display: table-cell;
      vertical-align: middle; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .answer .description {
      display: none; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] li.correct .answer {
    background: #249a10; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] li.incorrect .answer {
    background: #808080; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-placements li:before {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 80px;
    text-align: center;
    color: rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.1;
    opacity: 0.25;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    z-index: 0; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-placements li.placement-first:before {
    content: '1'; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-placements li.placement-second:before {
    content: '2'; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-placements li.placement-third:before {
    content: '3'; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-placements li .answer {
    background: #808080;
    z-index: 1; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-placements li.correct .answer {
    background: #249a10; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-placements li.incorrect .answer {
    background: #3689b3; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li {
    box-shadow: none;
    border: 1px #f0efeb solid;
    border-radius: 0; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li .answer {
      background: transparent;
      padding: 0;
      display: block;
      text-align: left; }
      .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li .answer .label {
        display: none; }
      .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li .answer .description {
        display: block;
        width: 100%;
        height: 100%; }
        .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li .answer .description .stat {
          display: inline-block;
          vertical-align: top;
          width: 92px;
          height: 100%;
          font-size: 44px;
          line-height: 88px;
          font-family: 'Oswald', sans-serif;
          font-weight: 400; }
          .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li .answer .description .stat small {
            display: inline-block;
            vertical-align: middle;
            font-size: 32px;
            position: relative;
            top: -8px; }
        .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li .answer .description p {
          display: inline-block;
          vertical-align: top;
          width: calc(100% - 108px);
          padding-left: 10px;
          height: 100%;
          color: inherit;
          font-family: 'Lato', sans-serif;
          font-weight: 400; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li.correct .answer .description p, .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li.correct .answer .description .stat {
      color: #249a10; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li.incorrect .answer .description p, .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results li.incorrect .answer .description .stat {
      color: #3689b3; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-submit.submit-button {
    padding: 15px 20px 13px 20px;
    font-size: 24px;
    margin-top: 20px; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results-incomplete {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-results-complete {
    display: none;
    width: 100%;
    height: 100%; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-tips {
    margin-bottom: 14px; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-tips .reorder-tip {
      text-align: center;
      display: none; }
      .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-tips .reorder-tip.reorder-tip-start {
        display: block; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"].started .reorder-tips.reorder-tip-start {
    display: none; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"].started .reorder-tips.reorder-tip-unfinished {
    display: block; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"].pending.reorder-tip-start, .sect.activity-sect .activity[data-activity="ReorderActivity"].pending.reorder-tip-unfinished {
    display: none; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-tips.reorder-tip-start, .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-tips.reorder-tip-unfinished {
    display: none; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-results-incomplete {
    display: none; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-results-complete {
    display: block; }

@media (max-width: 739px) {
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-list.reorder-choices li {
    box-shadow: none;
    border: 0;
    height: auto;
    margin-top: 0; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-list.reorder-choices li .answer {
      height: 90px;
      margin-top: 20px; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-list.reorder-choices li:first-child .answer {
      margin-top: 0; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-list.reorder-placements {
    margin-top: 20px; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-placements {
    display: none; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-results li .answer {
    border-radius: 10px;
    padding: 15px; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-results li .answer .label {
      color: #fff;
      font-size: 20px; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-results li .answer .description .stat {
      color: #fff;
      font-size: 50px;
      line-height: 61px; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-results li .answer .description p {
      color: #fff; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-results li.correct .answer {
    background: #249a10; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"].completed .reorder-results li.incorrect .answer {
    background: #3689b3; } }

@media (min-width: 740px) {
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .triptych .panel {
    height: 310px;
    margin-left: 30px;
    width: calc(33.333% - 20px); }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .triptych .panel:first-child {
      margin-left: 0; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-tips .reorder-tip {
    width: calc(33.333% - 20px);
    position: absolute;
    left: calc(33.333% + 10px);
    top: 100px;
    padding: 24px 48px;
    box-sizing: border-box;
    display: none; }
    .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-tips .reorder-tip.reorder-tip-start {
      display: block; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"][data-count="1"] .reorder-tips .reorder-tip.reorder-tip-start {
    display: none; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"][data-count="1"] .reorder-tips .reorder-tip.reorder-tip-unfinished {
    display: block;
    top: 210px; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"][data-count="2"] .reorder-tips .reorder-tip.reorder-tip-start {
    display: none; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"][data-count="2"] .reorder-tips .reorder-tip.reorder-tip-unfinished {
    display: block;
    top: 320px; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"][data-count="3"] .reorder-tips .reorder-tip.reorder-tip-start, .sect.activity-sect .activity[data-activity="ReorderActivity"][data-count="3"] .reorder-tips .reorder-tip.reorder-tip-unfinished {
    display: none; }
  .sect.activity-sect .activity[data-activity="ReorderActivity"] .reorder-submit {
    margin-top: 127px; } }

.activity.poll:before, .activity.poll:after {
  content: "";
  display: table; }
.activity.poll:after {
  clear: both; }
.activity.poll .poll-content {
  position: relative; }
.activity.poll .poll-form {
  position: relative;
  z-index: 2;
  margin-top: 20px; }
  .activity.poll .poll-form:before, .activity.poll .poll-form:after {
    content: "";
    display: table; }
  .activity.poll .poll-form:after {
    clear: both; }
.activity.poll .questions li {
  margin-bottom: 12px; }
  .activity.poll .questions li label {
    width: calc(100% - 30px);
    display: inline-block;
    padding-left: 8px;
    box-sizing: border-box;
    vertical-align: top; }
  .activity.poll .questions li .co_radio {
    position: relative;
    top: 6px; }
.activity.poll .results {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease-out; }
  .activity.poll .results li {
    margin-bottom: 12px; }
    .activity.poll .results li .result {
      display: block;
      height: 32px;
      background: #777;
      box-sizing: border-box;
      padding: 4px;
      text-align: right;
      color: #fff; }
    .activity.poll .results li .label {
      position: relative;
      top: 4px;
      margin-bottom: 8px;
      display: block;
      font-size: 14px; }
    .activity.poll .results li.group-1 .result {
      background: #3689b2; }
    .activity.poll .results li.group-1 .label {
      color: #3689b2; }
    .activity.poll .results li.group-2 .result {
      background: #249a10; }
    .activity.poll .results li.group-2 .label {
      color: #249a10; }
    .activity.poll .results li.group-3 .result {
      background: #666; }
    .activity.poll .results li.group-3 .label {
      color: #666; }
.activity.poll .loading-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.2s ease-out; }
.activity.poll.loading .poll-form {
  z-index: 0; }
.activity.poll.loading .results {
  z-index: 1; }
.activity.poll.loading .loading-screen {
  opacity: 1;
  z-index: 2; }
.activity.poll.completed .poll-form {
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  visibility: hidden; }
.activity.poll.completed .results {
  opacity: 1;
  z-index: 2; }
.activity.poll.completed .loading-screen {
  opacity: 0;
  z-index: 1; }
.activity.poll button.submit-button {
  float: right;
  font-size: 18px; }

.activity.toggle h3 {
  color: #646464; }
.activity.toggle .tab-content {
  margin-bottom: 20px; }
  .activity.toggle .tab-content > div {
    display: none; }
    .activity.toggle .tab-content > div.active {
      display: block; }
.activity.toggle cite p {
  margin-top: 30px;
  font-size: 12px;
  color: #666; }
.activity.toggle .tab-nav {
  width: 240px;
  margin: 0 0 20px 0;
  text-align: center; }
  .activity.toggle .tab-nav ul {
    width: 100%; }
  .activity.toggle .tab-nav li {
    float: left;
    box-sizing: border-box; }
    .activity.toggle .tab-nav li a {
      display: block;
      cursor: pointer;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border: 1px solid #666;
      box-sizing: border-box;
      padding: .4em 1.6em;
      color: #666;
      font-size: 14px;
      text-decoration: none; }
      .activity.toggle .tab-nav li a.active, .activity.toggle .tab-nav li a:hover {
        color: #fff; }
    .activity.toggle .tab-nav li.tab-start a {
      border-right: 0;
      border-radius: 5px 0 0 5px; }
      .activity.toggle .tab-nav li.tab-start a.active, .activity.toggle .tab-nav li.tab-start a:hover {
        background-color: #e79400;
        border-color: #e79400; }
    .activity.toggle .tab-nav li.tab-end a {
      border-left: 0;
      border-radius: 0 5px 5px 0; }
      .activity.toggle .tab-nav li.tab-end a.active, .activity.toggle .tab-nav li.tab-end a:hover {
        background-color: #3689b2;
        border-color: #3689b2; }
  .activity.toggle .tab-nav ul.two-wide li {
    width: 50%; }
.activity.toggle .gutter-subtitle + .tab-nav {
  margin-top: -10px; }

.toggle-stats li {
  margin-top: 5px; }
  .toggle-stats li:first-child {
    margin-top: 0; }
  .toggle-stats li .stat-label {
    color: #4d4d4d; }
  .toggle-stats li .stat-display {
    width: 100%;
    display: block;
    position: relative;
    min-height: 10px;
    top: -10px;
    font-size: 0;
    padding-top: 4px; }
    .toggle-stats li .stat-display .stat-bar {
      min-width: 1px;
      max-width: calc(100% - 30px);
      display: inline-block;
      height: 8px; }
    .toggle-stats li .stat-display .stat-value {
      width: 30px;
      text-align: left;
      display: inline-block;
      position: relative;
      font-size: 15px;
      line-height: 15px;
      top: 11px;
      left: 5px; }

#ui_child_mortality_toggle [data-content="1990"] .stat-value {
  color: #e79400; }
#ui_child_mortality_toggle [data-content="1990"] .stat-bar {
  background-color: #e79400; }
#ui_child_mortality_toggle [data-content="2013"] .stat-value {
  color: #3689b2; }
#ui_child_mortality_toggle [data-content="2013"] .stat-bar {
  background-color: #3689b2; }

@media (max-width: 739px) {
  .activity.toggle cite p {
    margin-top: 20px; } }

.sect.activity-sect .activity.accordion-activity p {
  color: #fff;
  font-size: 17px;
  line-height: 1.3; }

.accordion-activity .accordion {
  width: 100%;
  min-height: 400px; }
  .accordion-activity .accordion li {
    width: 80px;
    background: #ddd;
    margin-left: 4px;
    border-radius: 4px;
    height: 400px;
    display: block;
    float: left;
    transition: width 0.5s ease-out, height 0.5s ease-out;
    text-align: left;
    position: relative;
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left right;
    overflow: hidden; }
    .accordion-activity .accordion li:first-child {
      margin-left: 0; }
    .accordion-activity .accordion li h3 {
      text-transform: uppercase;
      font-family: 'Oswald', sans-serif;
      font-weight: 400;
      font-size: 24px;
      color: #fff;
      line-height: 1;
      margin-bottom: 10px; }
    .accordion-activity .accordion li p {
      color: #fff;
      font-size: 17px;
      margin-bottom: 10px; }
    .accordion-activity .accordion li cite {
      display: none;
      color: #cccccc;
      font-size: 17px;
      font-style: italic; }
    .accordion-activity .accordion li .tab-anchor {
      position: absolute;
      bottom: 0;
      left: calc(50% + 40px);
      z-index: 1;
      padding: 30px;
      display: block;
      width: 340px;
      color: #fff;
      cursor: pointer;
      transform: rotate(-90deg);
      transform-origin: 0 100% 0;
      font-family: 'Oswald', sans-serif;
      font-weight: 300;
      font-size: 20px;
      line-height: 1;
      text-transform: uppercase; }
    .accordion-activity .accordion li .tab-content {
      position: absolute;
      bottom: -100%;
      left: 0;
      padding: 20px 30px;
      opacity: 0;
      width: 100%;
      opacity: 0;
      z-index: 0; }
    .accordion-activity .accordion li .tab-number {
      display: block;
      position: absolute;
      top: 30px;
      right: 30px;
      line-height: 1;
      font-family: 'Oswald', sans-serif;
      font-weight: 400;
      font-size: 24px;
      width: 20px;
      text-align: center;
      transform: rotate(90deg);
      transform-origin: 50% 50% 0; }
    .accordion-activity .accordion li.active {
      width: calc(100% - 420px); }
      .accordion-activity .accordion li.active .tab-content {
        z-index: 1;
        opacity: 1; }
      .accordion-activity .accordion li.active .tab-anchor {
        display: none;
        z-index: 0; }
      .accordion-activity .accordion li.active cite {
        display: block; }
      .accordion-activity .accordion li.active .tab-anchor {
        display: none; }
      .accordion-activity .accordion li.active .tab-content {
        background-color: rgba(0, 0, 0, 0.4);
        bottom: 0;
        height: auto;
        transition: all 0.5s ease-out; }
      .accordion-activity .accordion li.active .tab-number {
        display: block;
        position: absolute;
        top: 30px;
        right: 30px;
        line-height: 1;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        font-size: 24px;
        width: 20px;
        text-align: center; }
.accordion-activity .activity-title {
  overflow: hidden; }
  .accordion-activity .activity-title h3:before {
    left: -450px; }
  .accordion-activity .activity-title h3:after {
    right: -450px; }

@media (max-width: 800px) {
  .accordion-activity .activity-title h3:before, .accordion-activity .activity-title h3:after {
    display: none; }
  .accordion-activity .accordion {
    width: 100%;
    min-height: 400px; }
    .accordion-activity .accordion li {
      height: 60px;
      width: 100%;
      margin-left: 0;
      margin-top: 4px;
      border-radius: 4px;
      display: table;
      float: none; }
      .accordion-activity .accordion li:first-child {
        margin-top: 0; }
      .accordion-activity .accordion li .tab-content {
        width: 100%;
        height: auto;
        transition: none;
        padding: 15px; }
      .accordion-activity .accordion li .tab-anchor {
        transform: rotate(0);
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0 50px 0 30px;
        box-sizing: border-box;
        border-radius: 4px;
        transition: none;
        font-size: 20px;
        display: table-cell;
        vertical-align: middle;
        padding: 0 50px 0 15px;
        line-height: 1.1;
        background-color: rgba(0, 0, 0, 0.001); }
      .accordion-activity .accordion li .tab-number {
        right: 15px;
        top: 15px;
        font-size: 20px;
        transform: rotate(0deg); }
      .accordion-activity .accordion li.active {
        height: 400px;
        width: 100%;
        display: block; }
        .accordion-activity .accordion li.active .tab-content {
          display: block;
          height: auto; }
        .accordion-activity .accordion li.active .tab-anchor {
          left: 0;
          border-radius: 4px; } }

#ui_page_interstitial_1_1 li[data-content="0"] {
  background-color: #3689b3; }
  #ui_page_interstitial_1_1 li[data-content="0"].active {
    background-image: url("../../media/images/activities/bet-two-accordion/00-saving-newborn-lives.jpg"); }
#ui_page_interstitial_1_1 li[data-content="1"] {
  background-color: #249a10; }
  #ui_page_interstitial_1_1 li[data-content="1"].active {
    background-image: url("../../media/images/activities/bet-two-accordion/01-breastfeeding.jpg"); }
#ui_page_interstitial_1_1 li[data-content="2"] {
  background-color: #d2692f; }
  #ui_page_interstitial_1_1 li[data-content="2"].active {
    background-image: url("../../media/images/activities/bet-two-accordion/02-antibiotics.jpg"); }
#ui_page_interstitial_1_1 li[data-content="3"] {
  background-color: #b89963; }
  #ui_page_interstitial_1_1 li[data-content="3"].active {
    background-image: url("../../media/images/activities/bet-two-accordion/03-resuscitation.jpg"); }
#ui_page_interstitial_1_1 li[data-content="4"] {
  background-color: #9d1d2a; }
  #ui_page_interstitial_1_1 li[data-content="4"].active {
    background-image: url("../../media/images/activities/bet-two-accordion/04-drying-skin-to-skin-contact.jpg"); }
#ui_page_interstitial_1_1 li[data-content="5"] {
  background-color: #89b7c6; }
  #ui_page_interstitial_1_1 li[data-content="5"].active {
    background-image: url("../../media/images/activities/bet-two-accordion/05-umbilical-cord-care.jpg"); }

.activity.flipcard-activity ul:before, .activity.flipcard-activity ul:after {
  content: "";
  display: table; }
.activity.flipcard-activity ul:after {
  clear: both; }
.activity.flipcard-activity li {
  text-align: center;
  list-style-type: none;
  width: calc(25% - 5px);
  height: 200px;
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  position: relative;
  z-index: 0;
  border-radius: 1px;
  perspective: 800px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform: translate3d(0, 0, 0); }
  .activity.flipcard-activity li.flipped {
    z-index: 2;
    transform: translate3d(0, 0, 0); }
    .activity.flipcard-activity li.flipped .card {
      transform: rotateY(180deg);
      z-index: 2; }
    .activity.flipcard-activity li.flipped:hover .card {
      transform: rotateY(180deg); }
  .activity.flipcard-activity li .flip-label, .activity.flipcard-activity li p {
    font-size: 17px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
    transform: translate3d(0, 0, 0); }
  .activity.flipcard-activity li h5 {
    font-size: 18px;
    line-height: 1.4;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    transform: translate3d(0, 0, 0); }
  .activity.flipcard-activity li .card {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transition: transform 0.3s ease-out;
    z-index: 1;
    transform: translate3d(0, 0, 0); }
    .activity.flipcard-activity li .card .face {
      width: calc(100% + 1px);
      height: calc(100% + 1px);
      position: absolute;
      top: -1px;
      left: -1px;
      backface-visibility: hidden;
      border: 1px #fff solid;
      cursor: pointer;
      transform: translate3d(0, 0, 0); }
      .activity.flipcard-activity li .card .face.front {
        z-index: 0;
        background: #666; }
      .activity.flipcard-activity li .card .face.back {
        background: #999;
        z-index: 1;
        text-align: left;
        color: #fff;
        padding: 20px;
        transform: rotateY(180deg); }
        .activity.flipcard-activity li .card .face.back h5 {
          color: #fff;
          font-size: 14px;
          margin-bottom: 10px; }
        .activity.flipcard-activity li .card .face.back p {
          color: #000;
          font-family: 'Lato', sans-serif;
          font-weight: 400;
          text-transform: none;
          margin-bottom: 0;
          line-height: 1.3; }
          .activity.flipcard-activity li .card .face.back p.label {
            font-family: 'Oswald', sans-serif;
            font-weight: 400;
            font-size: 20px;
            text-transform: uppercase;
            margin-bottom: 20px; }
  .activity.flipcard-activity li.old-way .card .face.front {
    background: #e79400; }
  .activity.flipcard-activity li.old-way .flip-label, .activity.flipcard-activity li.old-way h5 {
    color: #000; }
  .activity.flipcard-activity li.new-way .card .face.front {
    background: #3689b2; }
  .activity.flipcard-activity li.new-way .flip-label, .activity.flipcard-activity li.new-way h5 {
    color: #fff; }
  .activity.flipcard-activity li .flip-image {
    display: block;
    margin: 26px auto 15px auto;
    width: 102px;
    height: 90px;
    overflow: hidden;
    background-image: url("../../media/images/spr-flipcards.png");
    background-repeat: no-repeat; }
    .activity.flipcard-activity li .flip-image.item-0 {
      background-position: 0 0; }
    .activity.flipcard-activity li .flip-image.item-1 {
      background-position: -102px 0; }
    .activity.flipcard-activity li .flip-image.item-2 {
      background-position: -204px 0; }
    .activity.flipcard-activity li .flip-image.item-3 {
      background-position: -306px 0; }
    .activity.flipcard-activity li .flip-image.item-4 {
      background-position: 0 -90px; }
    .activity.flipcard-activity li .flip-image.item-5 {
      background-position: -102px -90px; }
    .activity.flipcard-activity li .flip-image.item-6 {
      background-position: -204px -90px; }
    .activity.flipcard-activity li .flip-image.item-7 {
      background-position: -306px -90px; }
  .activity.flipcard-activity li:hover {
    transform: translate3d(0, 0, 0); }
    .activity.flipcard-activity li:hover .card {
      transform: rotateY(10deg); }
.activity.flipcard-activity .transform-style-flat {
  transform: translate3d(0, 0, 0); }
  .activity.flipcard-activity .transform-style-flat li {
    overflow: hidden; }
    .activity.flipcard-activity .transform-style-flat li .card {
      overflow: hidden; }
      .activity.flipcard-activity .transform-style-flat li .card .face {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .activity.flipcard-activity .transform-style-flat li .card .face.back {
          transition: top 0.3s ease-out;
          transform: rotateY(0);
          top: 100%; }
    .activity.flipcard-activity .transform-style-flat li.flipped .card {
      transform: rotateY(0); }
      .activity.flipcard-activity .transform-style-flat li.flipped .card .face.back {
        top: 0; }
.activity.flipcard-activity h4 {
  color: #666; }
  .activity.flipcard-activity h4 span.old-way-color {
    color: #e79400; }
  .activity.flipcard-activity h4 span.new-way-color {
    color: #3689b2; }
.activity.flipcard-activity .activity-title h3:before {
  left: -413px; }
.activity.flipcard-activity .activity-title h3:after {
  right: -413px; }

@media (max-width: 800px) {
  .activity.flipcard-activity li {
    width: calc(50% - 5px); } }

@media (max-width: 479px) {
  .activity.flipcard-activity li {
    width: calc(100% - 5px); } }

/*==============custom=======*/

.unep_logo{max-height:40px; width: auto; margin-right: 0.5em; margin-left:0.5em; margin-top:0.3em;}
	@media (max-width: 499px){
		.unep_logo{margin-top:0.2em; margin-left:0;}
	}
	@media (max-width: 739px){
		.unep_logo{margin-left:0;}
	}
.end_anchor{min-height: 0px; border: 0px solid #000;}
.hide{transition: opacity 0.3s ease-out;}
.read-more-toggle{cursor: pointer; font-weight:bold; display: block; padding:10px 30px; border-bottom: 2px solid #00ABF1; color: #00ABF1; text-transform: uppercase; font-family: 'Roboto Condensed','Oswald', sans-serif;  font-weight: 700;  font-size: 20px; background-image: url(../../media/images/icon_plus.png); background-repeat: no-repeat; background-position: 98% 50%}
.read-more-toggle.open{background-image: url(../../media/images/icon_minus.png); background-repeat: no-repeat; background-position: 98% 50%}
@media (max-width:739px){
	.read-more-toggle, .read-more-toggle.open{padding:10px 40px 10px 10px;}
}
.read-more-toggle:hover{color: rgba(213,61,64,1.00);}
.read-more-content{padding: 10px 30px;}
.read-more-content p{margin:1em 0 0 0;}
/*.sect.infographic.sect_read_more{background: rgba(0,171,241,0.50);}*/
.sect_read_more .infographic-image {max-width: 1080px; width: 100%; min-height: 10px; height: auto; position: relative; margin: 28px 0 48px 0; position: relative; padding: 0; background: rgba(255, 255, 255, 1.0); }
.sect_read_more sup{font-size: 0.65em;}
.sect_read_more figcaption{font-size: 0.8em; font-style: oblique !important;}

.sect_read_more figure img, .sect_read_more figure img.ppr_pie{max-width: 900px !important; margin: 0 auto; width: 100%; height: auto;}
.sect_read_more figure img.ppr_map{max-width: none!important;}

.text-right{text-align: right;}
nav#ui_site_nav #ui_top_nav li.menu-icon > a:before{content: ""; width: 16px; height: 20px; margin: 0 auto; display: block; }
nav#ui_site_nav #ui_top_nav li.menu-icon > a:before {background-image: url("../../media/images/spr-menu.png");background-repeat: no-repeat; }
nav#ui_site_nav #ui_top_nav li:hover.menu-icon > a:before {background-position: -36px 0; }
nav#ui_site_nav #ui_top_nav .sub-nav .label a {font-size: 14px;}
nav#ui_site_nav #ui_top_nav .sub-nav .label a:hover{color: #00ABF1;}

@media (max-width: 739px) {
	nav#ui_site_nav #ui_top_nav li.menu-icon > .label {display: block; width: 180px; height: 0; position: absolute; top: 100%; /*left: calc(50% - 45px);*/ right: 0; margin-top: 37px; transition: height 0.2s ease-out; }
	nav#ui_site_nav #ui_top_nav li.menu-icon > .label ul {width: 100%; height: 100%; position: relative; overflow: hidden; }
	nav#ui_site_nav #ui_top_nav li.menu-icon > .label ul > li {width: 100%; display: block; height: 40px; margin: 0; }
	nav#ui_site_nav #ui_top_nav li.menu-icon > .label ul > li a {color: #66665c; height: 40px; display: block; width: 100%; line-height: 20px; text-align: right; padding: 10px 15px; }
	nav#ui_site_nav #ui_top_nav li.menu-icon > .label ul > li a:hover {color: #3689b2; }
	nav#ui_site_nav #ui_top_nav li.menu-icon.active > a {color: #3689b2; }
	nav#ui_site_nav #ui_top_nav li.menu-icon.active > .label {height: auto; }
	nav#ui_site_nav #ui_top_nav .menu-icon .label a{position: relative;}
	nav#ui_site_nav #ui_top_nav li{position: relative;}
	.end_anchor{display: none;}
}

.content-bullets{margin: 1em; padding: 0; text-align: left;}
.content-bullets li{list-style: circle; padding-left: 0.3em; margin-left: 1em; margin-bottom:0.5em;}
.content-bullets a{color: #3689b2;}
.quote-source{text-align: right; font-style: italic; margin-bottom: 2em;}

.smt_div, .smt_row_container{overflow: hidden;}
/*
.smt_row{overflow: hidden; width: 48%; float: left; margin-right: 1%; margin-bottom: 1.5em;}
.main .smt_row figcaption{width: 100%;}
@media (max-width: 739px) {
	.smt_row{width: 100%; margin-right: 0; float: none; margin-bottom: 1.5em;}
}
*/

.smt_row_container{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.smt_row{
	max-width: 48%;
}

.main .smt_row figcaption{width: 100%;}



.mod-summary figure{margin: 0 auto; text-align: center;}
@media (max-width: 739px){
	.mod-summary figure{width: 100%;}
	.mod-summary figure img{width: 100%; height: auto;}
}

.coe_row{overflow: hidden; margin: 1em 0.4em;}
.coe_row_img{float: left; width: 25%; margin-right: 1.5em;}
.coe_row_img img{border: 1px solid rgba(0,0,0,0.40); width: 100%; height: auto;}
.coe_row_text{overflow: hidden; padding-top:1.5em;}
@media (max-width: 739px) {
	.coe_row_text{padding-top:0;}
}

.sect_footnotes p{font-size: 0.9em;}

.ppr_table{background-color: rgba(0,0,0,0.5); margin: 0.5em;}
.ppr_table td{background-color: #f5f5f5; padding: 0.5em;}
.ppr_table td table tr td{padding: 0; margin: 0;}
.ppr_table td p, .ppr_table th p{margin: 0; padding: 0; font-size:0.95em;}
.ppr_table th{text-align: left; padding: 0.5em; color: #fff;}
.ppr_table th.td-right{text-align: right;}
.ppr_table td.c1{/*background: url(../../media/images/icon_progress_slight.png) no-repeat center top;*/ display:table-cell; height: 50px;}
.ppr_table td.c2{/*background: url(../../media/images/icon_progress_none.png) no-repeat center top;*/ display:table-cell; height: 50px; }
.ppr_table td.c3{/*background: url(../../media/images/icon_progress_strong.png) no-repeat center top;*/ display:table-cell; height: 50px; }
.ppr_table td.c4{/*background: url(../../media/images/icon_progress_setback.png) no-repeat center top;*/ display:table-cell; height: 50px; }

.ppr_table tr:nth-child(odd) td{
    background-color:rgba(231,209,209,1.00);
}

.ppr_table.country_data{display: inline-block;}
.ppr_table.country_data td img{max-width: 50px; height: auto;}
.ppr_table.country_data th{font-weight:300 !important;}
.ppr_table.country_data td{background-color: #f5f5f5; padding: 0.5em;}
.ppr_table.country_data tr:nth-child(odd) td{background-color:#f5f5f5;}

.tbl_container{text-align: center;}
@media (max-width: 739px){
	.ppr_table.country_data{display: block; width: 100% !important; margin-bottom: 2em;}
}

.ppr_table_legend{background-color: rgba(204,204,204,0.61); margin: 0.5em auto;}
.ppr_table_legend td{background-color: #fff; padding: 0.5em; font-size: 0.8em; font-weight: 400;}
.ppr_table_legend tr td img{width: 50px !important; height: 50px !important; display: block;}

@media (max-width: 739px) {
	.hide-on-mobile{display: none !important;}
}

.sect.feature{background: #f0efeb; height: auto !important; max-height: none!important;}
.sect.feature .wrap{text-align: left;}

.sect.feature .wrap .main{background: #f0efeb; width:100%; padding: 0 10px;}

.main.story figure, .main.story.full-story-content figure{margin-top: 1.5em;}
.main.story figure .video-player, .main.story.full-story-content figure .video-player{max-height: none; width: 100% !important; height: auto !important;}

.full-story-content{
	transition: opacity 1.5s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}

@media (max-width: 739px)
.main.story .text-wrap {
    padding: 17px 15px 0 15px;
}


.main.story .infographic-image .infographic-title h4 {
    color: #00ABF1;
    text-transform: uppercase;
    font-family: 'Roboto Condensed','Oswald', sans-serif;
    font-weight: 700;
    font-size: 30px;
}

.main.story .infographic-image .infographic-title {
    padding-bottom: 10px;
    border-bottom: 1px #b3b3b3 solid;
    margin-bottom: 0;
}

.main.story .infographic-image {
    max-width: 1080px;
    width: 100%;
    /* min-height: calc(500px - 96px); */
    height: auto;
    position: relative;
    margin: 38px 0 0 0;
    position: relative;
    padding: 30px;
    /*background: rgba(255, 255, 255, 0.2);*/
}

.main.story .infographic-image img{width: 100%; height: auto;}

.btn_full_story {
    clear: both;
    text-align: right;
	vertical-align:middle;
	margin: 1.5em 0;
}

.btn_full_story span {
    color: #fff;
    border: 2px solid #00ABF1;
    font-size: 0.9em;
    line-height: 2em;
    text-transform: uppercase;
    padding: 7px 30px;
    background: #00ABF1;
	vertical-align:middle;
	cursor: pointer;
}
@media (max-width: 739px) {
	.btn_full_story span {font-size:0.8em; padding: 5px 20px;}
	section[id^='ui_page_first']{padding-top: 2em;}
	/*.interrupter{margin-bottom: 2em;}*/
	.interrupter{margin-bottom: 0;}
}

.btn_full_story span:hover{background: #43C1FF;}

.btn_full_story::after {
    content: " ";
    display: inline-block;
    /*background: #EF813F;*/
	border-top: 1px dashed #00ABF1;
    width: 100px;
    height: 1px;
	vertical-align:middle;
}
@media (max-width: 739px) {
	.btn_full_story::after {width: 50px;}
	/*.page{margin-bottom: 2em;}*/
	.page{margin-bottom: 0;}
}


.ar_menu{border:1px solid #fff; position: absolute; right: 1em; top: 1em;}

.ar_menu .dropbtn {
    background-color: #00ABF1;
    color: white;
    padding: 7px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.ar_menu .dropdown {
    position: relative;
    display: inline-block;
    float:right;
	max-width: 40px;
}

.ar_menu .dropbtn img{display: block; width: 100%; height: auto;}

.ar_menu .dropdown-content {
    display: none;
    position: absolute;
    right:0;
    background-color: #f9f9f9;
    min-width: 190px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    text-align:right;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	padding-bottom: 5px;
}

.ar_menu .dropdown-content a {
    color: black;
    padding: 8px;
    text-decoration: none;
    display: block;
	font-family: 'Roboto Condensed','Oswald', sans-serif;
    font-weight: 300;
}

.ar_menu .dropdown-content a.active{
    color: #3689b2;
	background-color: #f1f1f1;
    font-weight: 400; }

.ar_menu .dropdown-content a:hover {background-color: #f1f1f1}

.ar_menu.hovered .dropdown .dropdown-content {
    display: block;
}

.ar_menu.hovered .dropdown .dropbtn {
    background-color: #43C1FF;
}

/*
.ar_menu .dropdown:hover .dropdown-content {
    display: block;
}

.ar_menu .dropdown:hover .dropbtn {
    background-color: #43C1FF;
}
*/

@media (max-width: 739px){
	.ar_menu .dropdown-content a {padding: 4px 8px;}
	.ar_menu {margin-top:0;}
	.logop2{font-family: 'Roboto Condensed','Oswald','Helvetica LT Std Light','Helvetica Neue LT Std',Helvetica;}
	.ar_menu{top:1.5em;}
}

.ppr_highlight{padding: 1em 2em; background: rgba(205,251,105,0.2); font-style: oblique; margin: 1em 0;}

.ppr_slide{border: 1px solid rgba(0,0,0,0.2); display: block; margin: 1em 0; padding: 1em;}

span.photo_credit{font-size: 0.8em; font-weight: 300; font-family: 'Roboto Condensed'; display: block; text-align: right; font-style: italic; margin-bottom:1em;}

section.sect span.photo_credit{margin-right: 10px;}
section.sect.feature span.photo_credit{margin-right: 0;}

h1 .title-main sup{font-size: 30px;}

.photo_credit{display: none !important;}

.video-player{margin-bottom: 20px;}

.embed-responsive {
    position: relative;
    display: block;
    height: 500px;
    padding: 0;
    overflow: hidden;
}