/* Android 2.3 :checked fix */
@keyframes fake {
  from {
    opacity: 1; }
  to {
    opacity: 1; } }

body {
  animation: fake 1s infinite; }

dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p {
  margin: 0; }

dl, ul, ol {
  padding: 0; }

ol, ul {
  list-style: none; }

body {
  overflow-x: hidden; }

[class^="icon-"]::before, [class*=" icon-"]::before, [class^="icon-"]:before, [class*=" icon-"]:before {
  display: none; }

label {
  cursor: pointer; }

img {
  max-width: 100%;
  height: auto; }

img.full {
  width: 100%;
  display: block; }

a {
  text-decoration: none;
  color: inherit; }
  a:hover {
    text-decoration: underline; }

button,
input,
select {
  line-height: normal !important; }

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 0; }

button {
  border: none; }

.hidden {
  display: none; }

.ovh {
  overflow: hidden; }

.clearfix:after {
  clear: both;
  content: "";
  display: table; }

h1, h2, h3, h4, h5, h6, strong {
  font-family: 'Roboto', sans-serif; }

h2, h3, h4 {
  text-transform: capitalize; }

h3[id], h4[id] {
  text-align: center; }

.main-heading {
  font-size: 33.1667px;
  font-size: 2.07252rem;
  font-weight: 700;
  margin: .5em 0 1.5em;
  text-align: center; }
  .main-heading span {
    font-weight: 300;
    color: #999; }

h4 {
  margin: 1.5em 0 0.5em; }

h5 {
  font-size: 13px;
  margin: 3em 0 1em; }

.topic p {
  font-size: 14px;
  line-height: 1.6;
  margin: 1.8em auto;
  max-width: 50em;
  color: #7d7d7d; }

.container {
  max-width: 70em;
  margin: 0 auto; }
  @media screen and (max-width: 74em) {
    .container {
      margin: 0 2em; } }

[data-margin] {
  background-color: #E698CC; }

[data-padding] {
  background-color: #C2EBBA; }

[data-content] {
  background-color: #CDEEFF; }

.cell {
  min-height: 10em; }
  .cell:before {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 4em;
    font-weight: 100;
    color: white;
    display: block;
    text-align: center;
    line-height: 2.5; }
  .autoheight:nth-child(2n) > .cell {
    height: 11em; }
  .autoheight:nth-child(3n+1) > .cell {
    height: 12em; }
  .order:nth-child(1) > .cell:before {
    content: "1"; }
  .order:nth-child(2) > .cell:before {
    content: "2"; }
  .order:nth-child(3) > .cell:before {
    content: "3"; }
  .order:nth-child(4) > .cell:before {
    content: "4"; }
  .order:nth-child(5) > .cell:before {
    content: "5"; }
  .order:nth-child(6) > .cell:before {
    content: "6"; }
  .order:nth-child(7) > .cell:before {
    content: "7"; }
  .order:nth-child(8) > .cell:before {
    content: "8"; }
  .order:nth-child(9) > .cell:before {
    content: "9"; }
  .order:nth-child(10) > .cell:before {
    content: "10"; }

.title {
  margin-bottom: 1em; }

.topic {
  padding: 2em 0 4em; }
  .topic > section {
    margin: 2em 0; }

@media screen and (min-width: 1024px) {
  .main-heading:before, .main-heading:after {
    display: inline-block;
    vertical-align: 7px;
    margin: 0 15px; }
  .main-heading:before {
    content: url("../images/title-prev.png"); }
  .main-heading:after {
    content: url("../images/title-next.png"); }
  .topic > section {
    margin: 0 0 5em; } }

.example:after {
  content: '';
  display: table;
  clear: both; }

.example-content {
  padding: 15px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: normal;
  cursor: pointer; }
  .example-content:hover {
    opacity: 0.9; }
  .example-content strong {
    display: block;
    margin-bottom: 10px;
    font-size: 24px; }

.demo-container {
  height: 0;
  overflow: hidden; }
  .demo-container:before {
    text-align: center;
    display: block;
    margin-bottom: 5px; }

.push {
  height: auto;
  margin-bottom: 50px; }

.has-bg {
  background-color: #000; }

.hidden-checkbox {
  position: absolute;
  left: -99999px; }

.menu-icon {
  display: block;
  margin: 20px;
  width: 21px;
  padding: 12px 10px;
  background-color: #000; }
  .menu-icon:before, .menu-icon:after {
    content: ''; }
  .menu-icon span, .menu-icon:before, .menu-icon:after {
    display: block;
    height: 2px;
    background-color: #fff;
    margin-bottom: 4px; }
  .menu-icon:after {
    margin-bottom: 0; }

.nav {
  background-color: #1975B8; }
  .nav a, .nav label {
    font-size: 14px;
    padding: 12px 15px; }
  .nav a, .nav [data-back] {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
  .nav a {
    color: #fff; }
  .nav li:last-child > a {
    border-bottom-width: 0; }
  .nav [data-submenu] {
    background-color: #1975B8; }

.nav-mode {
  position: relative;
  overflow: hidden;
  margin-top: 80px; }
  .nav-mode .page {
    min-height: 400px;
    background: #70CFFF; }
    .nav-mode .page header {
      padding-top: 1px; }
  input:checked + .nav-mode {
    display: block; }
  .nav-mode strong {
    font-size: 24px;
    color: #000; }
  .nav-mode p {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.9em 1.8em;
    background-color: #fff; }

.push {
  -webkit-transition: top 0.5s;
  -moz-transition: top 0.5s;
  transition: top 0.5s;
  position: relative;
  top: 0; }
  .push .code:before {
    content: '(  "push"  ".nav"  "top"  rgba(0, 0, 0, 0.1)  200px  0.5s  "submenu"  )'; }
  .hidden-checkbox {
    position: absolute;
    left: -9999px; }
  input:checked ~ .push {
    top: 200px; }
  input:not(:checked) ~ .push .nav [data-submenu] {
    top: -200px; }
  .nav {
    position: fixed;
    display: block;
    z-index: 200;
    box-sizing: border-box;
    overflow-x: hidden;
    top: 0;
    -webkit-transition: margin-top 0.5s;
    -moz-transition: margin-top 0.5s;
    transition: margin-top 0.5s;
    margin-top: -200px;
    height: 200px;
    left: 0;
    right: 0;
    overflow-y: hidden; }
    .nav [data-has-submenu]:after {
      clear: both;
      content: "";
      display: table; }
    .nav [data-has-submenu] > label {
      float: right; }
    .nav [data-submenu] {
      position: fixed;
      box-sizing: border-box;
      top: -200px;
      transition: top 0.5s;
      height: 200px;
      left: 0;
      right: 0; }
    .nav input:checked ~ [data-submenu] {
      top: 0; }
  input:checked ~ .push .nav {
    margin-top: 0; }
  .push .page-overlay {
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    transition: background 0.5s;
    position: fixed;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    bottom: auto;
    background: transparent;
    z-index: 199;
    -webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    transition: top 0.5s; }
    input:checked ~ .push .page-overlay {
      background: rgba(0, 0, 0, 0.1);
      bottom: 0;
      top: 0; }
      .lt-ie9 input:checked ~ .push .page-overlay {
        background: black;
        opacity: 0.1;
        filter: alpha(opacity=10); }

/*# sourceMappingURL=sourcemaps/off-canvas-push copy.css.map */
