@font-face {
  font-family: 'proxima-bold';
  src: url("../fonts/proximanova-bold.eot");
  src: url("../fonts/proximanova-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-bold.woff2") format("woff2"), url("../fonts/proximanova-bold.woff") format("woff"), url("../fonts/proximanova-bold.ttf") format("truetype"), url("../fonts/proximanova-bold.svg#proxima_nova_rgbold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'proxima-light';
  src: url("../fonts/proximanova-light.eot");
  src: url("../fonts/proximanova-light.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-light.woff2") format("woff2"), url("../fonts/proximanova-light.woff") format("woff"), url("../fonts/proximanova-light.ttf") format("truetype"), url("../fonts/proximanova-light.svg#proxima_novalight") format("svg");
  font-weight: normal;
  font-style: normal; }

.demo-page {
  background-color: #fff;
  color: #aeaeae;
  font-family: 'proxima-light', sans-serif;
  font-size: 17px;
  font-weight: 300;
  text-align: center; }

h1, h2, h3, h4, h5 {
  color: #222;
  line-height: 1.3em; }

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

.demo-page-header {
  position: relative; }
.demo-page-header img {
  height: auto;
  width: 100%; }
.demo-page-header svg {
  fill: #222;
  height: 68px;
  width: 68px; }
@media (min-width: 768px) {
  .demo-page-header svg {
    height: 129px;
    width: 129px; } }

.demos h3 {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 2px;
  margin-top: 0;
  margin-bottom: 21px; }
@media (min-width: 768px) {
  .demos h3 {
    font-size: 60px;
    margin-bottom: 11px; } }
.demos .description {
  line-height: 1.5em;
  margin: 0 auto 80px auto;
  max-width: 700px; }
.demos article {
  margin-bottom: 60px; }
.demos article a {
  display: block;
  opacity: 1;
  position: relative;
  padding-top: 16px;
  transition: .2s opacity; }
.demos article a:hover {
  opacity: .8;
  text-decoration: none; }
.demos article a:hover:after {
  background-color: #ff5049; }
.demos article a:hover header:after {
  background-color: #f8b500; }
.demos article a:hover header:before {
  background-color: #1bce3e; }
.demos article a:before {
  background-color: #e0e0e0;
  content: "";
  left: 0;
  height: 16px;
  position: absolute;
  right: 0;
  top: 0; }
.demos article a:after, .demos article a header:after, .demos article a header:before {
  background-color: #fff;
  border-radius: 100%;
  content: "";
  height: 6px;
  position: absolute;
  top: 5px;
  transition: background-color .4s;
  width: 6px; }
.demos article a:after {
  left: 9px; }
@media (max-width: 400px) {
  .demos article {
    width: 100%; } }
.demos article header {
  background-color: #fff;
  margin-bottom: 37px; }
.demos article header:after {
  left: 17px; }
.demos article header:before {
  left: 25px; }
.demos article h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase; }
.demos article .new {
  background-color: #f7575b;
  color: #fff;
  display: inline-block;
  font-size: 10px;
  line-height: 1em;
  margin-left: 5px;
  padding: 3px 0;
  position: relative;
  text-align: center;
  top: -2px;
  width: 32px; }

.demo-page-footer {
  background-color: #222;
  border: 1px solid #131313;
  border-style: solid none;
  color: #4d4d4d;
  font-size: 14px;
  font-weight: 400;
  margin-top: 40px;
  padding: 37px 0; }
