/*!
 * "Fork me on GitHub" CSS ribbon v0.2.3 | MIT License
 * https://github.com/simonwhitaker/github-fork-ribbon-css
*/

.github-fork-ribbon {
  width: 12.1em;
  height: 12.1em;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
  font-size: 13px;
  text-decoration: none;
  text-indent: -999999px;
}

.github-fork-ribbon.fixed {
  position: fixed;
}

.github-fork-ribbon:hover, .github-fork-ribbon:active {
  background-color: rgba(0, 0, 0, 0.0);
}

.github-fork-ribbon:before, .github-fork-ribbon:after {
  /* The right and left classes determine the side we attach our banner to */
  position: absolute;
  display: block;
  width: 15.38em;
  height: 1.54em;

  top: 3.23em;
  right: -3.23em;

  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;

  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.github-fork-ribbon:before {
  content: "";

  /* Add a bit of padding to give some substance outside the "stitching" */
  padding: .38em 0;

  /* Set the base colour */
  background-color: #a00;

  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));

  /* Add a drop shadow */
  -webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);

  pointer-events: auto;
}

.github-fork-ribbon:after {
  /* Set the text from the data-ribbon attribute */
  content: attr(data-ribbon);

  /* Set the text properties */
  color: #fff;
  font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.54em;
  text-decoration: none;
  text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
  text-align: center;
  text-indent: 0;

  /* Set the layout properties */
  padding: .15em 0;
  margin: .15em 0;

  /* Add "stitching" effect */
  border-width: .08em 0;
  border-style: dotted;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.github-fork-ribbon.left-top, .github-fork-ribbon.left-bottom {
  right: auto;
  left: 0;
}

.github-fork-ribbon.left-bottom, .github-fork-ribbon.right-bottom {
  top: auto;
  bottom: 0;
}

.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after {
  right: auto;
  left: -3.23em;
}

.github-fork-ribbon.left-bottom:before, .github-fork-ribbon.left-bottom:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
  top: auto;
  bottom: 3.23em;
}

.github-fork-ribbon.left-top:before, .github-fork-ribbon.left-top:after, .github-fork-ribbon.right-bottom:before, .github-fork-ribbon.right-bottom:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

a,h1,h2,h3,h4,i,p,span{font-family:Work Sans,sans-serif;margin-bottom:10px}

p{color:#4a4a4a;font-size:14px;line-height:24px}

p+p{margin-top:20px}

a{color:#4a90e2;font-size:16px;font-weight:500;line-height:24px}

i{font-style:italic}

h1{color:#666;font-weight:200;font-size:32px}

@media screen and (min-width:769px){h1{font-size:56px;line-height:62px}}

h3{color:#4a4a4a;font-size:20px;font-weight:500}

@media screen and (min-width:769px){h3{font-size:24px;line-height:32px}}

header{display:none;height:415px;background-color:#000}

@media screen and (min-width:769px){header{display:block}}

header .header-background{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:1920px;height:415px;background-image:url(../assets/hero-big.jpg);background-size:cover;background-position:50% 50%;margin:auto}

header img{width:600px;margin-bottom:25px}

nav{margin:25px}

nav .logo-with-slogan{height:40px}

@media screen and (min-width:769px){nav{width:100%;max-width:1400px;height:70px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:auto}}

@media screen and (min-width:769px){nav img{margin:30px 0 0 25px}}

nav .hamburger-icon{float:right}

@media screen and (min-width:769px){nav .hamburger-icon{display:none}}

nav ul{display:none;margin:25px auto 20px}

nav ul.show{display:block}

nav ul.show li{width:100%}

@media screen and (min-width:769px){nav ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:0 25px 0 0}}

nav li{width:50%;height:50px;font-size:16px;text-align:center;line-height:50px}

@media screen and (min-width:769px){nav li{height:70px;font-size:16px;line-height:85px;margin:0 6px;padding:0 16px}}

nav li a{color:#4a4a4a;font-weight:700;text-decoration:underline}

nav li.selected{background-color:#ff3554}

nav li.selected a{color:#fff}

main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}

main section{width:100%}

@media screen and (min-width:992px){main section{width:50%}}

@media screen and (min-width:992px){main .description{text-align:right}}

main .divider{width:100%;margin:30px 0 20px;border-top:1px solid #666}

@media screen and (min-width:992px){main .divider{height:400px;width:1px;margin:0 100px;border-top:none;border-left:1px solid #666}}

main .navigation{margin-right:30px;text-align:left}

main .navigation li{display:-webkit-box;display:-ms-flexbox;display:flex;margin:17px 0}

main .navigation .navigation-description{margin-left:20px}

footer{height:45px;background-color:#ff3554;font-size:14px;text-align:center;color:#fff;line-height:45px}

body,html{width:100%;height:100%;min-height:100%;margin:0}

.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-height:inherit}

main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:1400px;margin:0 25px 30px}

@media screen and (min-width:769px){main{margin:30px 25px}}

@media screen and (min-width:992px){main{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:70px 25px}}

@media screen and (min-width:1200px){main{margin:120px auto}}

.github-fork-ribbon.right-bottom{margin-bottom:0}

.github-fork-ribbon.right-bottom:before{background:#333}