/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

@font-face{
  font-family:"Noto Sans Display";
  src: url(https://d359ev95hons2p.cloudfront.net/tpl/NotoSansDisplay-Regular.woff2) format('woff2'),
    url(https://d359ev95hons2p.cloudfront.net/tpl/NotoSansDisplay-Regular.woff) format('woff'),
    url(https://d359ev95hons2p.cloudfront.net/tpl/NotoSansDisplay-Regular.ttf) format('truetype');
  font-style: normal;
  font-weight: 400
}

@font-face {
  font-family: "Noto Sans Display";
  src: url(https://d359ev95hons2p.cloudfront.net/tpl/NotoSansDisplay-Medium.woff2) format('woff2'),
    url(https://d359ev95hons2p.cloudfront.net/tpl/NotoSansDisplay-Medium.woff) format('woff'),
    url(https://d359ev95hons2p.cloudfront.net/tpl/NotoSansDisplay-Medium.ttf) format('truetype');
  font-style: normal;
  font-weight: 500
}

@font-face {
  font-family: "Noto Sans Display";
  src: url(https://d359ev95hons2p.cloudfront.net/tpl/NotoSansDisplay-SemiBold.woff2) format('woff2'),
    url(https://d359ev95hons2p.cloudfront.net/tpl/NotoSansDisplay-SemiBold.woff) format('woff'),
    url(https://d359ev95hons2p.cloudfront.net/tpl/NotoSansDisplay-SemiBold.ttf) format('truetype');
  font-style: normal;
  font-weight: 600
}

html, body {
  height: 100%;
}

body {
  /*  Font smoothing: https://www.leejamesrobinson.com/blog/how-stripe-designs-beautiful-websites/#typography */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: right;
  box-sizing: border-box; }

/* For devices larger than 920px */
@media (min-width: 960px) {
  .container {
    width: 100%;
    padding-top: 12px;
  }
  .column,
  .columns {
    margin-right: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-right: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 33.3333333333%; }
  .two-thirds.column              { width: 62.6666666667%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}

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

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.4em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Noto Sans Display", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; 
  background-color: #f2f3f5;}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 960px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }


/* Spaceback Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.header {
    background-color: #ffffff;
    height: 56px;
    padding: 4px 16px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header > :first-child {
  display: flex;
  align-items: center;
  flex-basis: 0;
  flex-grow: 1
}

.header .title {
  font-weight: bold;
  flex: 0 0 auto;
}

.header > :last-child:not(:first-child) {
  display: flex;
  align-items: center;
  flex-basis: 0;
  flex-grow: 1;
  justify-content: flex-end;
}

.h-logo {
  height: 40px;
  width: 40px;
  margin-right: 16px;
  border-radius: 50%;
  border: solid 1px #D8D8D8;
}

.h-sitename {
  background-color: #f2f3f5;
  width: 132px;
  height: 12px;
}

.h-links {
  background-color: #f2f3f5;
  width: 60px;
  height: 12px;
  margin-left: 24px;
}

.h-account-name {
  font-weight: bold;
  font-size: 1.2em;
}


/* Spaceback Cards
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.card {
  background-color: #ffffff;
  width: 100%;
  min-width: 300px;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10);
  padding: 16px 16px 24px 16px;
  margin: 0 auto 16px auto;
  box-sizing: border-box;
}

.image {
  background-color: #f2f3f5;
  height: 178px;
  margin-bottom: 24px;
}

.title1 {
  background-color: #f2f3f5;
  height: 12px;
  width: 64%;
}

.title2 {
  background-color: #f2f3f5;
  height: 12px;
  width: 48%;
  margin-top: 12px;
}

.body-copy {
  padding-top: 8px;
}

.text {
  background-color: #f2f3f5;
  height: 12px;
  width: 100%;
  margin-top: 12px;
}

.end-text {
  background-color: #f2f3f5;
  height: 12px;
  width: 80%;
  margin-top: 12px;
}



/* Spaceback Short Blurbs
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.blurb {
  max-width: 300px;
  height: 48px;
  margin: 24px 0px;
  overflow: hidden;
}

.small-image {
  height: 48px;
  width: 48px;
  background-color: #DFE0E4;
  float: left;
}

.b-copy {
  width: 100%;
  max-width: 252px;
  height: 48px;
  padding: 6px;
}

.b-text1 {
  background-color: #DFE0E4;
  height: 12px;
  margin-left: 54px;
  width: 100%;
}

.b-text2 {
  background-color: #DFE0E4;
  height: 12px;
  width: 40%;
  margin-left: 54px;
  margin-top: 8px;
}

/* Spaceback Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.copyright {
  color: #A6AAB5;
  font-size: 12px;
  width: 100%;
  text-align: center;
  margin-bottom: 32px;
}

.sb-logo {
  text-align: center;
  margin-bottom: 16px;

}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  padding: 8px 16px;
  color: #555;
  text-align: center;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #D8D8D8;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }

.button.active,
button.active,
input[type="submit"].active,
input[type="reset"].active,
input[type="button"].active {
  background-color: #DFE0E4;
  
}

.button-group {
  display: inline-flex;
  border-radius: 4px;
  border: 1px solid #D8D8D8;
  width: 200px;
}

.button-group button {
  border-width: 0 0 0 1px;
  border-radius: 0;
  width: 33.33%;
}

.button-group > button:first-child {
  border-left-width: 0;
}

.button-group.two-buttons {
  width: calc(200px * 2 / 3);
}

.button-group.two-buttons button {
  width: 50%;
}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than laptop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

/* Spaceback
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Ad Slots */

#ad_container_top {
  margin-top: 64px; 
}

#ad_container_top iframe {
  padding-top: 12px;
  margin: 0 auto;
}
#ad_container_main iframe {
  margin: 12px auto;
}

#ad_container_rail {
  margin: 24px 0;
}

#ad_container_rail iframe {
  margin: 0 auto;
}

/* Devices */

/* By deafult (for mobile) show full sized preview */
.device-container,
.device-container .device-cropper,
.device-container .device-chrome,
.device-container .device-chrome iframe {
  width: 100%;
  height: 100%;
}

/* Hack to hade the iframe header behind the real one */
.device-container {
  position: absolute;
  top: -2px; /* extra two pixels to hide the header box shadow... */
}

@media (min-width: 960px) {
  .device-container:not(.device-none) {
    position: relative;
    top: auto;
  }
}

.device-cropper {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;
}

.content {
  height: 100%;
  padding-top: 72px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Width when grid becomes active */
@media (min-width: 960px) {
  .device-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 auto;
  }

  /* Desktop */
  /* Internal device screen: 1100px x 690 px */    
  /* SVG aspect ratio: 1440:804 */
  /* Target Width: 1024 */
  /* Target Height: 1024 * 690 / 1100 = 642.33 */

  /* Adjust the crop based on the height of the device taking up 75% of the vertical screen */
  .device-laptop .device-cropper {
    /* 
      Converts relative viewport height to width by multiplying by 
      SVG aspect ratio then scaling down to the width of the inner screen.

      1440/804 - device SVG aspect ratio
      1100/1440 - ratio of SVG inner screen (read: iframe) to SVG width
    */
    max-width: calc(75vh * 1440/804 * 1100/1440);
  }

  /* Adjust with respect to width if the viewport can contain the device in 75% of the height */
  /* (min-height: 62.8125vw) */
  @media (min-height: calc((100 / 75) * 90vw * (804 / 1440))) {
    .device-laptop .device-cropper {
      /* Width such that device takes up 90% of horizontal screen */
      max-width: calc((1100/1440) * 90%);
    }
  }

  /* Lock to actual size of iframe (1024 x 642.33) if the viewport can contain it */
  /* (min-height: 935.56px) and (min-width: 1489.45px) */
  @media (min-width: calc((100 / 90) * 1440px * (1024 / 1100))) and (min-height: calc((100 / 75) * 804px * (1024 / 1100))) {
    .device-laptop .device-cropper {
      max-width: 1024px;
    }
  }

  .device-laptop .device-chrome {
    height: 0;
    position: relative;
    padding-top: calc(690 / 1100 * 100%);
    width: 100%;
    margin: 0 auto;
  }

  .device-laptop .device-chrome iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 1024px;
    height: 642.33px;
    transform-origin: top left;
  }

  .device-laptop .device-chrome::after {
    content: '\00a0';
    position: absolute;
    left: calc(-177/1100 * 100%);
    right: calc(-165/1100 * 100%);
    top: calc(-52/690 * 100%);
    bottom: calc(-68/690 * 100%);
    background-image: url('/images/device-laptop.svg');
    background-repeat: no-repeat;
    z-index: 10;
    pointer-events: none; 
  }

  /* Mobile */
  /* Internal device screen: 360 x 768 */    
  /* SVG aspect ratio: 400:810 */
  /* Target Width: 375 */
  /* Target Height: 375 * 768 / 360 = 800 */
  /* Device thickness: 21  */

  /* Adjust the crop based on the height of the device taking up 75% of the vertical screen */
  .device-mobile .device-cropper {
    /* 
      Converts relative viewport height to width by multiplying by 
      SVG aspect ratio then scaling down to the width of the inner screen.

      400/810 - device SVG aspect ratio
      360/400 - ratio of SVG inner screen (read: iframe) to SVG width
    */
    max-width: calc(75vh * 400/810 * 360/400);
  }

  /* Adjust with respect to width if the viewport can contain the device in 75% of the height */
  /* (min-height: 243vw) */
  @media (min-height: calc((100 / 75) * 90vw * (810 / 400))) {
    .device-mobile .device-cropper {
      /* Width such that device takes up 90% of horizontal screen */
      max-width: calc((360/400) * 90%);
    }
  }

  /* Lock to actual size of iframe (375 x 800) if the viewpor can contain it */
  /* (min-width: 462.96px) and (min-height: 1125px) */
  @media (min-width: calc((100 / 90) * 400px * (375 / 360))) and (min-height: calc((100 / 75) * 810px * (375 / 360))) {
    .device-mobile .device-cropper {
      max-width: 375px;
    }
  }

  .device-mobile .device-chrome {
    height: 0;
    position: relative;
    padding-top: calc(768 / 360 * 100%);
    width: 100%;
    margin: 0 auto;
  }

  .device-mobile .device-chrome iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 375px;
    height: 800px;
    transform-origin: top left;
  }

  .device-mobile .device-chrome::after {
    content: '\00a0';
    position: absolute;
    left: calc(-21/360 * 100%);
    right: calc(-21/360 * 100%);
    top: calc(-21/768 * 100%);
    bottom: calc(-21/768 * 100%);
    background-image: url('/images/device-mobile.svg');
    background-repeat: no-repeat;
    z-index: 10;
    pointer-events: none; 
  }
}