@charset "UTF-8";
@font-face {
  font-family: Icons;
  src: url("../fonts/icons.eot");
  src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/Lato-Black-webfont.eot");
  src: url("/fonts/Lato-Black-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Lato-Black-webfont.woff2") format("woff2"), url("/fonts/Lato-Black-webfont.woff") format("woff"), url("/fonts/Lato-Black-webfont.ttf") format("truetype"), url("/fonts/Lato-Black-webfont.svg#latoblack") format("svg"); }

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/Lato-Bold-webfont.eot");
  src: url("/fonts/Lato-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Lato-Bold-webfont.woff2") format("woff2"), url("/fonts/Lato-Bold-webfont.woff") format("woff"), url("/fonts/Lato-Bold-webfont.ttf") format("truetype"), url("/fonts/Lato-Bold-webfont.svg#latoblack") format("svg"); }

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/Lato-Regular-webfont.eot");
  src: url("/fonts/Lato-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Lato-Regular-webfont.woff2") format("woff2"), url("/fonts/Lato-Regular-webfont.woff") format("woff"), url("/fonts/Lato-Regular-webfont.ttf") format("truetype"), url("/fonts/Lato-Regular-webfont.svg#latoblack") format("svg"); }

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  src: url("/fonts/Lato-Light-webfont.eot");
  src: url("/fonts/Lato-Light-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Lato-Light-webfont.woff2") format("woff2"), url("/fonts/Lato-Light-webfont.woff") format("woff"), url("/fonts/Lato-Light-webfont.ttf") format("truetype"), url("/fonts/Lato-Light-webfont.svg#latoblack") format("svg"); }

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 100;
  src: url("/fonts/Lato-Hairline-webfont.eot");
  src: url("/fonts/Lato-Hairline-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Lato-Hairline-webfont.woff2") format("woff2"), url("/fonts/Lato-Hairline-webfont.woff") format("woff"), url("/fonts/Lato-Hairline-webfont.ttf") format("truetype"), url("/fonts/Lato-Hairline-webfont.svg#latoblack") format("svg"); }

@font-face {
  font-family: "Fontawesome";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/Fontawesome-webfont.eot");
  src: url("/fonts/Fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/Fontawesome-webfont.woff2") format("woff2"), url("/fonts/Fontawesome-webfont.woff") format("woff"), url("/fonts/Fontawesome-webfont.ttf") format("truetype"), url("/fonts/Fontawesome-webfont.svg#fontawesome") format("svg"); }

.icon-android::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-android::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-appsignal::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-appsignal::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-argocd::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-argocd::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-aws::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-aws::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-capistrano::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-capistrano::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-cert-manager::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-cert-manager::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-chef::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-chef::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-circleci::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-circleci::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-coffeescript::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-coffeescript::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-compass::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-compass::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-contentful::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-contentful::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-css3::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-css3::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-docker::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-docker::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-elastic::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-elastic::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-gan::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-gan::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-git::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-git::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-github::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-github::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-gitlab::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-gitlab::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-haml::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-haml::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-harbor::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-harbor::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-helm::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-helm::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-heroku::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-heroku::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-html5::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-html5::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-ios::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-ios::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-java::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-java::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-javascript::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-javascript::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-keda::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-keda::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-kubernetes::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-kubernetes::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-mandrill::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-mandrill::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-memcached::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-memcached::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-middleman::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-middleman::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-mongodb::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-mongodb::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-mysql::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-mysql::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-newrelic::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-newrelic::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-nexus::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-nexus::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-openshift::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-openshift::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-operator::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-operator::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-postgresql::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-postgresql::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-prometheus::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-prometheus::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-rails::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-rails::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-react::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-react::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-redis::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-redis::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-rspec::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-rspec::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-ruby::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-ruby::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-sass::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-sass::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-sidekiq::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-sidekiq::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-slack::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-slack::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-social::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-social::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-spring::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-spring::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-swift::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-swift::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

.icon-ubuntu::after {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-left: 0.15em; }

.icon-before-ubuntu::before {
  content: "";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-family: Icons;
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.15em; }

*, *:before, *:after {
  box-sizing: border-box; }

html,
body {
  background-image: url("/images/scene.jpg");
  background-position: center;
  background-size: cover;
  font-family: "Lato";
  font-size: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: absolute;
  width: 100%; }

a {
  color: #fa3870;
  text-decoration: none; }
  a .fa-icon {
    display: inline-block;
    font-size: 26px;
    margin-bottom: 3px;
    margin-right: 15px; }

a, p, h1, h2, h3, h4, h5, h6 {
  margin: 0; }

em {
  color: #99a3b1;
  font-style: italic; }

hr {
  border: 0;
  border-top: 1px solid #99a3b1;
  display: block;
  height: 1px;
  margin: 20px 0 5px 0;
  padding: 0; }

ul {
  list-style: none; }

.button {
  background: #fa3870;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  opacity: 0.8;
  padding: 15px 30px;
  transition: all 0.1s ease;
  white-space: nowrap; }
  .button:hover {
    background: #fdfdfd;
    color: #fa3870;
    opacity: 1; }

.fa-icon {
  font-family: "Fontawesome";
  font-size: 20px; }

.footer {
  background: #fdfdfd;
  border-top: 1px solid #f0f0f0;
  height: 50px;
  position: relative;
  text-align: center;
  width: 100%; }
  .footer .footer-logo {
    height: 25px;
    left: 15px;
    position: absolute;
    top: 12px; }
  .footer .terms {
    font-size: 12px;
    font-weight: 300;
    color: #99a3b1;
    left: 54px;
    letter-spacing: 0.15em;
    position: absolute;
    top: 18px;
    text-transform: uppercase; }
    .footer .terms:hover {
      color: #fa3870; }
  .footer .copyright {
    font-size: 12px;
    font-weight: 300;
    color: #99a3b1;
    letter-spacing: 0.15em;
    position: relative;
    text-transform: uppercase;
    top: 18px; }
  .footer .kvk {
    font-size: 12px;
    font-weight: 300;
    color: #99a3b1;
    letter-spacing: 0.15em;
    position: absolute;
    right: 16px;
    text-transform: uppercase; }
  .footer .kvk {
    top: 18px; }
  @media only screen and (max-width: 700px) {
    .footer .footer-logo {
      display: none; }
    .footer .copyright,
    .footer .terms,
    .footer .kvk,
    .footer .tax {
      font-size: 8px;
      left: 5px;
      right: 5px; }
    .footer .kvk {
      text-align: right;
      top: 18px; }
    .footer .terms {
      text-align: left;
      top: 12px; }
    .footer .copyright {
      text-align: left;
      top: 28px; } }
.header {
  background: #fdfdfd;
  border-bottom: 1px solid #f0f0f0;
  height: 50px;
  top: -50px;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 10; }
  .header:before {
    background: #fdfdfd;
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    top: -20px;
    width: 100%; }
  .header .header-logo {
    height: 35px;
    left: 6px;
    position: absolute;
    top: 7px; }
  .header .menu {
    display: inline-block; }
    .header .menu li {
      display: inline-block;
      padding: 15px 10px; }
      .header .menu li.active a {
        color: #fa3870; }
      .header .menu li:first-child {
        display: none; }
        .header .menu li:first-child a {
          font-size: 18px; }
      .header .menu li a {
        color: #99a3b1;
        font-size: 16px;
        font-weight: 300;
        letter-spacing: 0.2em;
        transition: opacity 0.3s ease; }
        .header .menu li a:hover {
          color: #fa3870; }
        .header .menu li a .fa-icon {
          font-size: 16px;
          margin-right: 0; }
  .header .social {
    margin: 0;
    padding: 14px;
    position: absolute;
    right: 0;
    top: 0; }
    .header .social li {
      display: inline-block;
      position: relative; }
      .header .social li a {
        color: #99a3b1;
        padding: 0 10px;
        position: relative;
        transition: opacity 0.3s ease;
        z-index: 1; }
      .header .social li:hover a {
        color: #fa3870; }
      .header .social li:hover .social-button-holder {
        opacity: 1;
        pointer-events: auto; }
      .header .social li .social-button-holder {
        background: white;
        border-bottom: 1px solid #fa3870;
        border-left: 1px solid #fa3870;
        padding-bottom: 15px;
        padding-left: 15px;
        padding-top: 35px;
        pointer-events: none;
        opacity: 0;
        position: absolute;
        text-align: left;
        top: 0;
        transition: opacity 0.3s ease;
        width: 173px; }
  @media only screen and (min-width: 700px) and (max-width: 1200px) {
    .header .menu li {
      padding: 5px 5px; }
      .header .menu li a {
        font-size: 10px; }
        .header .menu li a .fa-icon {
          display: block;
          font-size: 24px; }
    .header .social {
      padding-right: 10px; }
      .header .social li a {
        padding: 0 8px; } }
  @media only screen and (max-width: 700px) {
    .header {
      text-align: right; }
      .header .header-logo {
        z-index: 1; }
      .header .menu {
        overflow: hidden;
        width: 100%; }
        .header .menu li {
          display: none;
          padding-top: 0; }
          .header .menu li:first-child {
            display: block;
            padding-top: 15px; }
          .header .menu li a:hover {
            color: #99a3b1; }
        .header .menu.mobile-open {
          background: rgba(78, 102, 131, 0.95); }
          .header .menu.mobile-open li {
            display: block; }
      .header .social {
        display: none; } }
.scene-container {
  height: 100%;
  position: absolute;
  width: 100%; }

section#contact {
  background: #fdfdfd; }
  section#contact h1:before {
    content: " "; }
  section#contact #map {
    height: 100%;
    position: absolute;
    width: 100%; }
  section#contact .map-cover {
    background: rgba(255, 255, 255, 0.9);
    bottom: -1px;
    left: 0;
    opacity: 0.9;
    position: absolute;
    right: 0;
    top: 0; }
  section#contact .page-content {
    height: 100%;
    position: absolute; }
  section#contact .columns {
    height: 290px;
    margin-left: -243px;
    margin-top: -145px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 550px; }
  section#contact .column {
    padding-left: 30px;
    width: 50%; }
    section#contact .column:first-child {
      padding-right: 30px; }
      section#contact .column:first-child .column-row {
        padding-top: 10px;
        text-align: right; }
  section#contact .column-row {
    height: 120px; }
  section#contact .button {
    font-weight: 400;
    height: 50px;
    padding: 15px;
    text-align: center; }
    section#contact .button .fa-icon {
      font-size: 20px;
      margin: 0;
      margin-left: 10px;
      margin-right: -5px; }
  section#contact h3 {
    color: #4e6683;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 5px; }
  @media only screen and (max-width: 700px) {
    section#contact .columns {
      height: 190px;
      margin-left: -174px;
      margin-top: -70px;
      width: 320px; }
    section#contact .column {
      padding-left: 5px; }
      section#contact .column:first-child {
        padding-right: 5px; }
    section#contact .column-row {
      height: 74px; }
    section#contact .button {
      font-size: 10px; }
      section#contact .button .fa-icon {
        font-size: 14px; }
    section#contact h3,
    section#contact p {
      font-size: 12px; } }
section#focus {
  background: rgba(33, 154, 209, 0.8);
  color: white; }
  section#focus h1,
  section#focus h2 {
    color: #fdfdfd; }
  section#focus h1 {
    padding-bottom: 20px; }
    section#focus h1:before {
      content: " "; }
  section#focus h2 {
    padding: 30px 0; }
    section#focus h2:before {
      display: block;
      font-family: "Fontawesome";
      font-size: 40px;
      padding-bottom: 10px; }
  section#focus .subject-holder {
    padding-bottom: 70px;
    text-align: center; }
    section#focus .subject-holder .subject {
      display: inline-block;
      padding-top: 30px;
      text-align: center;
      vertical-align: top;
      width: 33%; }
      section#focus .subject-holder .subject.modern h2:before {
        content: ""; }
      section#focus .subject-holder .subject.social h2:before {
        content: ""; }
      section#focus .subject-holder .subject.usable h2:before {
        content: ""; }
      section#focus .subject-holder .subject.sustainable h2:before {
        content: ""; }
      section#focus .subject-holder .subject.safe-secure h2:before {
        content: ""; }
      section#focus .subject-holder .subject.scalable h2:before {
        content: ""; }
      section#focus .subject-holder .subject.transferable h2:before {
        content: ""; }
      section#focus .subject-holder .subject.optimized h2:before {
        content: ""; }
      section#focus .subject-holder .subject h2, section#focus .subject-holder .subject p {
        opacity: 0.6;
        transition: opacity 0.3s ease; }
      section#focus .subject-holder .subject p {
        text-align: justify; }
      section#focus .subject-holder .subject:nth-child(odd) h2, section#focus .subject-holder .subject:nth-child(odd) p, section#focus .subject-holder .subject:nth-child(odd) .fa-icon {
        color: black; }
      section#focus .subject-holder .subject:hover h2, section#focus .subject-holder .subject:hover p, section#focus .subject-holder .subject:hover .fa-icon {
        opacity: 1; }
  @media only screen and (min-width: 700px) and (max-width: 1000px) {
    section#focus .subject-holder .subject {
      width: 50%; } }
  @media only screen and (max-width: 700px) {
    section#focus .subject-holder .subject {
      width: 100%; } }
section#home {
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url("/images/pattern.png");
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: background 1s ease; }
  section#home.loading {
    background: white; }
    section#home.loading .intro {
      color: black; }
  section#home:before {
    background-color: rgba(0, 0, 0, 0.5);
    background-image: url("/images/pattern.png");
    content: "";
    height: 30px;
    left: 0;
    position: absolute;
    top: -30px;
    width: 100%; }
  section#home .row {
    align-items: center;
    display: inline-flex;
    flex: 1;
    justify-content: center; }
  section#home .loading-overlay {
    background: white;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%; }
  section#home .home-logo img {
    height: 120px; }
  section#home .intro {
    color: white;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.3em;
    line-height: 150%;
    text-transform: uppercase;
    transition: color 0.3s ease; }
    section#home .intro em {
      color: #99a3b1; }
    section#home .intro img {
      left: 50%;
      margin-left: -21px;
      margin-top: -120px;
      opacity: 0.2;
      position: absolute;
      top: 50%;
      width: 43px; }
  section#home .fa-icon {
    vertical-align: middle; }
  section#home .hidden {
    opacity: 0; }

@-moz-document url-prefix() {
  section#home {
    height: 800px; } }
  @media only screen and (max-width: 700px) {
    section#home .home-logo img {
      height: 50px;
      width: 200px; }
    section#home .intro,
    section#home .intro em {
      font-size: 10px; }
    section#home .button-holder a {
      font-size: 10px; }
      section#home .button-holder a .fa-icon {
        font-size: 20px; } }
.logo-holder {
  height: 60px;
  position: relative;
  width: 60px; }
  .logo-holder svg {
    position: absolute; }
    .logo-holder svg#logo-ring-grey-holder {
      height: 60px;
      left: 47.5%;
      top: 50%;
      width: 60px;
      transform-origin: 50% 50% 0px; }
    .logo-holder svg .logo-ring-grey {
      transform-origin: 50% 50% 0px; }
  .logo-holder .rotate-0 {
    transform: rotate(0deg); }
  .logo-holder .rotate-1 {
    transform: rotate(1deg); }
  .logo-holder .rotate-2 {
    transform: rotate(2deg); }
  .logo-holder .rotate-3 {
    transform: rotate(3deg); }
  .logo-holder .rotate-4 {
    transform: rotate(4deg); }
  .logo-holder .rotate-5 {
    transform: rotate(5deg); }
  .logo-holder .rotate-6 {
    transform: rotate(6deg); }
  .logo-holder .rotate-7 {
    transform: rotate(7deg); }
  .logo-holder .rotate-8 {
    transform: rotate(8deg); }
  .logo-holder .rotate-9 {
    transform: rotate(9deg); }
  .logo-holder .rotate-10 {
    transform: rotate(10deg); }
  .logo-holder .rotate-11 {
    transform: rotate(11deg); }
  .logo-holder .rotate-12 {
    transform: rotate(12deg); }
  .logo-holder .rotate-13 {
    transform: rotate(13deg); }
  .logo-holder .rotate-14 {
    transform: rotate(14deg); }
  .logo-holder .rotate-15 {
    transform: rotate(15deg); }
  .logo-holder .rotate-16 {
    transform: rotate(16deg); }
  .logo-holder .rotate-17 {
    transform: rotate(17deg); }
  .logo-holder .rotate-18 {
    transform: rotate(18deg); }
  .logo-holder .rotate-19 {
    transform: rotate(19deg); }
  .logo-holder .rotate-20 {
    transform: rotate(20deg); }
  .logo-holder .rotate-21 {
    transform: rotate(21deg); }
  .logo-holder .rotate-22 {
    transform: rotate(22deg); }
  .logo-holder .rotate-23 {
    transform: rotate(23deg); }
  .logo-holder .rotate-24 {
    transform: rotate(24deg); }
  .logo-holder .rotate-25 {
    transform: rotate(25deg); }
  .logo-holder .rotate-26 {
    transform: rotate(26deg); }
  .logo-holder .rotate-27 {
    transform: rotate(27deg); }
  .logo-holder .rotate-28 {
    transform: rotate(28deg); }
  .logo-holder .rotate-29 {
    transform: rotate(29deg); }
  .logo-holder .rotate-30 {
    transform: rotate(30deg); }
  .logo-holder .rotate-31 {
    transform: rotate(31deg); }
  .logo-holder .rotate-32 {
    transform: rotate(32deg); }
  .logo-holder .rotate-33 {
    transform: rotate(33deg); }
  .logo-holder .rotate-34 {
    transform: rotate(34deg); }
  .logo-holder .rotate-35 {
    transform: rotate(35deg); }
  .logo-holder .rotate-36 {
    transform: rotate(36deg); }
  .logo-holder .rotate-37 {
    transform: rotate(37deg); }
  .logo-holder .rotate-38 {
    transform: rotate(38deg); }
  .logo-holder .rotate-39 {
    transform: rotate(39deg); }
  .logo-holder .rotate-40 {
    transform: rotate(40deg); }
  .logo-holder .rotate-41 {
    transform: rotate(41deg); }
  .logo-holder .rotate-42 {
    transform: rotate(42deg); }
  .logo-holder .rotate-43 {
    transform: rotate(43deg); }
  .logo-holder .rotate-44 {
    transform: rotate(44deg); }
  .logo-holder .rotate-45 {
    transform: rotate(45deg); }
  .logo-holder .rotate-46 {
    transform: rotate(46deg); }
  .logo-holder .rotate-47 {
    transform: rotate(47deg); }
  .logo-holder .rotate-48 {
    transform: rotate(48deg); }
  .logo-holder .rotate-49 {
    transform: rotate(49deg); }
  .logo-holder .rotate-50 {
    transform: rotate(50deg); }
  .logo-holder .rotate-51 {
    transform: rotate(51deg); }
  .logo-holder .rotate-52 {
    transform: rotate(52deg); }
  .logo-holder .rotate-53 {
    transform: rotate(53deg); }
  .logo-holder .rotate-54 {
    transform: rotate(54deg); }
  .logo-holder .rotate-55 {
    transform: rotate(55deg); }
  .logo-holder .rotate-56 {
    transform: rotate(56deg); }
  .logo-holder .rotate-57 {
    transform: rotate(57deg); }
  .logo-holder .rotate-58 {
    transform: rotate(58deg); }
  .logo-holder .rotate-59 {
    transform: rotate(59deg); }
  .logo-holder .rotate-60 {
    transform: rotate(60deg); }
  .logo-holder .rotate-61 {
    transform: rotate(61deg); }
  .logo-holder .rotate-62 {
    transform: rotate(62deg); }
  .logo-holder .rotate-63 {
    transform: rotate(63deg); }
  .logo-holder .rotate-64 {
    transform: rotate(64deg); }
  .logo-holder .rotate-65 {
    transform: rotate(65deg); }
  .logo-holder .rotate-66 {
    transform: rotate(66deg); }
  .logo-holder .rotate-67 {
    transform: rotate(67deg); }
  .logo-holder .rotate-68 {
    transform: rotate(68deg); }
  .logo-holder .rotate-69 {
    transform: rotate(69deg); }
  .logo-holder .rotate-70 {
    transform: rotate(70deg); }
  .logo-holder .rotate-71 {
    transform: rotate(71deg); }
  .logo-holder .rotate-72 {
    transform: rotate(72deg); }
  .logo-holder .rotate-73 {
    transform: rotate(73deg); }
  .logo-holder .rotate-74 {
    transform: rotate(74deg); }
  .logo-holder .rotate-75 {
    transform: rotate(75deg); }
  .logo-holder .rotate-76 {
    transform: rotate(76deg); }
  .logo-holder .rotate-77 {
    transform: rotate(77deg); }
  .logo-holder .rotate-78 {
    transform: rotate(78deg); }
  .logo-holder .rotate-79 {
    transform: rotate(79deg); }
  .logo-holder .rotate-80 {
    transform: rotate(80deg); }
  .logo-holder .rotate-81 {
    transform: rotate(81deg); }
  .logo-holder .rotate-82 {
    transform: rotate(82deg); }
  .logo-holder .rotate-83 {
    transform: rotate(83deg); }
  .logo-holder .rotate-84 {
    transform: rotate(84deg); }
  .logo-holder .rotate-85 {
    transform: rotate(85deg); }
  .logo-holder .rotate-86 {
    transform: rotate(86deg); }
  .logo-holder .rotate-87 {
    transform: rotate(87deg); }
  .logo-holder .rotate-88 {
    transform: rotate(88deg); }
  .logo-holder .rotate-89 {
    transform: rotate(89deg); }
  .logo-holder .rotate-90 {
    transform: rotate(90deg); }
  .logo-holder .rotate-91 {
    transform: rotate(91deg); }
  .logo-holder .rotate-92 {
    transform: rotate(92deg); }
  .logo-holder .rotate-93 {
    transform: rotate(93deg); }
  .logo-holder .rotate-94 {
    transform: rotate(94deg); }
  .logo-holder .rotate-95 {
    transform: rotate(95deg); }
  .logo-holder .rotate-96 {
    transform: rotate(96deg); }
  .logo-holder .rotate-97 {
    transform: rotate(97deg); }
  .logo-holder .rotate-98 {
    transform: rotate(98deg); }
  .logo-holder .rotate-99 {
    transform: rotate(99deg); }
  .logo-holder .rotate-100 {
    transform: rotate(100deg); }
  .logo-holder .rotate-101 {
    transform: rotate(101deg); }
  .logo-holder .rotate-102 {
    transform: rotate(102deg); }
  .logo-holder .rotate-103 {
    transform: rotate(103deg); }
  .logo-holder .rotate-104 {
    transform: rotate(104deg); }
  .logo-holder .rotate-105 {
    transform: rotate(105deg); }
  .logo-holder .rotate-106 {
    transform: rotate(106deg); }
  .logo-holder .rotate-107 {
    transform: rotate(107deg); }
  .logo-holder .rotate-108 {
    transform: rotate(108deg); }
  .logo-holder .rotate-109 {
    transform: rotate(109deg); }
  .logo-holder .rotate-110 {
    transform: rotate(110deg); }
  .logo-holder .rotate-111 {
    transform: rotate(111deg); }
  .logo-holder .rotate-112 {
    transform: rotate(112deg); }
  .logo-holder .rotate-113 {
    transform: rotate(113deg); }
  .logo-holder .rotate-114 {
    transform: rotate(114deg); }
  .logo-holder .rotate-115 {
    transform: rotate(115deg); }
  .logo-holder .rotate-116 {
    transform: rotate(116deg); }
  .logo-holder .rotate-117 {
    transform: rotate(117deg); }
  .logo-holder .rotate-118 {
    transform: rotate(118deg); }
  .logo-holder .rotate-119 {
    transform: rotate(119deg); }
  .logo-holder .rotate-120 {
    transform: rotate(120deg); }
  .logo-holder .rotate-121 {
    transform: rotate(121deg); }
  .logo-holder .rotate-122 {
    transform: rotate(122deg); }
  .logo-holder .rotate-123 {
    transform: rotate(123deg); }
  .logo-holder .rotate-124 {
    transform: rotate(124deg); }
  .logo-holder .rotate-125 {
    transform: rotate(125deg); }
  .logo-holder .rotate-126 {
    transform: rotate(126deg); }
  .logo-holder .rotate-127 {
    transform: rotate(127deg); }
  .logo-holder .rotate-128 {
    transform: rotate(128deg); }
  .logo-holder .rotate-129 {
    transform: rotate(129deg); }
  .logo-holder .rotate-130 {
    transform: rotate(130deg); }
  .logo-holder .rotate-131 {
    transform: rotate(131deg); }
  .logo-holder .rotate-132 {
    transform: rotate(132deg); }
  .logo-holder .rotate-133 {
    transform: rotate(133deg); }
  .logo-holder .rotate-134 {
    transform: rotate(134deg); }
  .logo-holder .rotate-135 {
    transform: rotate(135deg); }
  .logo-holder .rotate-136 {
    transform: rotate(136deg); }
  .logo-holder .rotate-137 {
    transform: rotate(137deg); }
  .logo-holder .rotate-138 {
    transform: rotate(138deg); }
  .logo-holder .rotate-139 {
    transform: rotate(139deg); }
  .logo-holder .rotate-140 {
    transform: rotate(140deg); }
  .logo-holder .rotate-141 {
    transform: rotate(141deg); }
  .logo-holder .rotate-142 {
    transform: rotate(142deg); }
  .logo-holder .rotate-143 {
    transform: rotate(143deg); }
  .logo-holder .rotate-144 {
    transform: rotate(144deg); }
  .logo-holder .rotate-145 {
    transform: rotate(145deg); }
  .logo-holder .rotate-146 {
    transform: rotate(146deg); }
  .logo-holder .rotate-147 {
    transform: rotate(147deg); }
  .logo-holder .rotate-148 {
    transform: rotate(148deg); }
  .logo-holder .rotate-149 {
    transform: rotate(149deg); }
  .logo-holder .rotate-150 {
    transform: rotate(150deg); }
  .logo-holder .rotate-151 {
    transform: rotate(151deg); }
  .logo-holder .rotate-152 {
    transform: rotate(152deg); }
  .logo-holder .rotate-153 {
    transform: rotate(153deg); }
  .logo-holder .rotate-154 {
    transform: rotate(154deg); }
  .logo-holder .rotate-155 {
    transform: rotate(155deg); }
  .logo-holder .rotate-156 {
    transform: rotate(156deg); }
  .logo-holder .rotate-157 {
    transform: rotate(157deg); }
  .logo-holder .rotate-158 {
    transform: rotate(158deg); }
  .logo-holder .rotate-159 {
    transform: rotate(159deg); }
  .logo-holder .rotate-160 {
    transform: rotate(160deg); }
  .logo-holder .rotate-161 {
    transform: rotate(161deg); }
  .logo-holder .rotate-162 {
    transform: rotate(162deg); }
  .logo-holder .rotate-163 {
    transform: rotate(163deg); }
  .logo-holder .rotate-164 {
    transform: rotate(164deg); }
  .logo-holder .rotate-165 {
    transform: rotate(165deg); }
  .logo-holder .rotate-166 {
    transform: rotate(166deg); }
  .logo-holder .rotate-167 {
    transform: rotate(167deg); }
  .logo-holder .rotate-168 {
    transform: rotate(168deg); }
  .logo-holder .rotate-169 {
    transform: rotate(169deg); }
  .logo-holder .rotate-170 {
    transform: rotate(170deg); }
  .logo-holder .rotate-171 {
    transform: rotate(171deg); }
  .logo-holder .rotate-172 {
    transform: rotate(172deg); }
  .logo-holder .rotate-173 {
    transform: rotate(173deg); }
  .logo-holder .rotate-174 {
    transform: rotate(174deg); }
  .logo-holder .rotate-175 {
    transform: rotate(175deg); }
  .logo-holder .rotate-176 {
    transform: rotate(176deg); }
  .logo-holder .rotate-177 {
    transform: rotate(177deg); }
  .logo-holder .rotate-178 {
    transform: rotate(178deg); }
  .logo-holder .rotate-179 {
    transform: rotate(179deg); }
  .logo-holder .rotate-180 {
    transform: rotate(180deg); }
  .logo-holder .rotate-181 {
    transform: rotate(181deg); }
  .logo-holder .rotate-182 {
    transform: rotate(182deg); }
  .logo-holder .rotate-183 {
    transform: rotate(183deg); }
  .logo-holder .rotate-184 {
    transform: rotate(184deg); }
  .logo-holder .rotate-185 {
    transform: rotate(185deg); }
  .logo-holder .rotate-186 {
    transform: rotate(186deg); }
  .logo-holder .rotate-187 {
    transform: rotate(187deg); }
  .logo-holder .rotate-188 {
    transform: rotate(188deg); }
  .logo-holder .rotate-189 {
    transform: rotate(189deg); }
  .logo-holder .rotate-190 {
    transform: rotate(190deg); }
  .logo-holder .rotate-191 {
    transform: rotate(191deg); }
  .logo-holder .rotate-192 {
    transform: rotate(192deg); }
  .logo-holder .rotate-193 {
    transform: rotate(193deg); }
  .logo-holder .rotate-194 {
    transform: rotate(194deg); }
  .logo-holder .rotate-195 {
    transform: rotate(195deg); }
  .logo-holder .rotate-196 {
    transform: rotate(196deg); }
  .logo-holder .rotate-197 {
    transform: rotate(197deg); }
  .logo-holder .rotate-198 {
    transform: rotate(198deg); }
  .logo-holder .rotate-199 {
    transform: rotate(199deg); }
  .logo-holder .rotate-200 {
    transform: rotate(200deg); }
  .logo-holder .rotate-201 {
    transform: rotate(201deg); }
  .logo-holder .rotate-202 {
    transform: rotate(202deg); }
  .logo-holder .rotate-203 {
    transform: rotate(203deg); }
  .logo-holder .rotate-204 {
    transform: rotate(204deg); }
  .logo-holder .rotate-205 {
    transform: rotate(205deg); }
  .logo-holder .rotate-206 {
    transform: rotate(206deg); }
  .logo-holder .rotate-207 {
    transform: rotate(207deg); }
  .logo-holder .rotate-208 {
    transform: rotate(208deg); }
  .logo-holder .rotate-209 {
    transform: rotate(209deg); }
  .logo-holder .rotate-210 {
    transform: rotate(210deg); }
  .logo-holder .rotate-211 {
    transform: rotate(211deg); }
  .logo-holder .rotate-212 {
    transform: rotate(212deg); }
  .logo-holder .rotate-213 {
    transform: rotate(213deg); }
  .logo-holder .rotate-214 {
    transform: rotate(214deg); }
  .logo-holder .rotate-215 {
    transform: rotate(215deg); }
  .logo-holder .rotate-216 {
    transform: rotate(216deg); }
  .logo-holder .rotate-217 {
    transform: rotate(217deg); }
  .logo-holder .rotate-218 {
    transform: rotate(218deg); }
  .logo-holder .rotate-219 {
    transform: rotate(219deg); }
  .logo-holder .rotate-220 {
    transform: rotate(220deg); }
  .logo-holder .rotate-221 {
    transform: rotate(221deg); }
  .logo-holder .rotate-222 {
    transform: rotate(222deg); }
  .logo-holder .rotate-223 {
    transform: rotate(223deg); }
  .logo-holder .rotate-224 {
    transform: rotate(224deg); }
  .logo-holder .rotate-225 {
    transform: rotate(225deg); }
  .logo-holder .rotate-226 {
    transform: rotate(226deg); }
  .logo-holder .rotate-227 {
    transform: rotate(227deg); }
  .logo-holder .rotate-228 {
    transform: rotate(228deg); }
  .logo-holder .rotate-229 {
    transform: rotate(229deg); }
  .logo-holder .rotate-230 {
    transform: rotate(230deg); }
  .logo-holder .rotate-231 {
    transform: rotate(231deg); }
  .logo-holder .rotate-232 {
    transform: rotate(232deg); }
  .logo-holder .rotate-233 {
    transform: rotate(233deg); }
  .logo-holder .rotate-234 {
    transform: rotate(234deg); }
  .logo-holder .rotate-235 {
    transform: rotate(235deg); }
  .logo-holder .rotate-236 {
    transform: rotate(236deg); }
  .logo-holder .rotate-237 {
    transform: rotate(237deg); }
  .logo-holder .rotate-238 {
    transform: rotate(238deg); }
  .logo-holder .rotate-239 {
    transform: rotate(239deg); }
  .logo-holder .rotate-240 {
    transform: rotate(240deg); }
  .logo-holder .rotate-241 {
    transform: rotate(241deg); }
  .logo-holder .rotate-242 {
    transform: rotate(242deg); }
  .logo-holder .rotate-243 {
    transform: rotate(243deg); }
  .logo-holder .rotate-244 {
    transform: rotate(244deg); }
  .logo-holder .rotate-245 {
    transform: rotate(245deg); }
  .logo-holder .rotate-246 {
    transform: rotate(246deg); }
  .logo-holder .rotate-247 {
    transform: rotate(247deg); }
  .logo-holder .rotate-248 {
    transform: rotate(248deg); }
  .logo-holder .rotate-249 {
    transform: rotate(249deg); }
  .logo-holder .rotate-250 {
    transform: rotate(250deg); }
  .logo-holder .rotate-251 {
    transform: rotate(251deg); }
  .logo-holder .rotate-252 {
    transform: rotate(252deg); }
  .logo-holder .rotate-253 {
    transform: rotate(253deg); }
  .logo-holder .rotate-254 {
    transform: rotate(254deg); }
  .logo-holder .rotate-255 {
    transform: rotate(255deg); }
  .logo-holder .rotate-256 {
    transform: rotate(256deg); }
  .logo-holder .rotate-257 {
    transform: rotate(257deg); }
  .logo-holder .rotate-258 {
    transform: rotate(258deg); }
  .logo-holder .rotate-259 {
    transform: rotate(259deg); }
  .logo-holder .rotate-260 {
    transform: rotate(260deg); }
  .logo-holder .rotate-261 {
    transform: rotate(261deg); }
  .logo-holder .rotate-262 {
    transform: rotate(262deg); }
  .logo-holder .rotate-263 {
    transform: rotate(263deg); }
  .logo-holder .rotate-264 {
    transform: rotate(264deg); }
  .logo-holder .rotate-265 {
    transform: rotate(265deg); }
  .logo-holder .rotate-266 {
    transform: rotate(266deg); }
  .logo-holder .rotate-267 {
    transform: rotate(267deg); }
  .logo-holder .rotate-268 {
    transform: rotate(268deg); }
  .logo-holder .rotate-269 {
    transform: rotate(269deg); }
  .logo-holder .rotate-270 {
    transform: rotate(270deg); }
  .logo-holder .rotate-271 {
    transform: rotate(271deg); }
  .logo-holder .rotate-272 {
    transform: rotate(272deg); }
  .logo-holder .rotate-273 {
    transform: rotate(273deg); }
  .logo-holder .rotate-274 {
    transform: rotate(274deg); }
  .logo-holder .rotate-275 {
    transform: rotate(275deg); }
  .logo-holder .rotate-276 {
    transform: rotate(276deg); }
  .logo-holder .rotate-277 {
    transform: rotate(277deg); }
  .logo-holder .rotate-278 {
    transform: rotate(278deg); }
  .logo-holder .rotate-279 {
    transform: rotate(279deg); }
  .logo-holder .rotate-280 {
    transform: rotate(280deg); }
  .logo-holder .rotate-281 {
    transform: rotate(281deg); }
  .logo-holder .rotate-282 {
    transform: rotate(282deg); }
  .logo-holder .rotate-283 {
    transform: rotate(283deg); }
  .logo-holder .rotate-284 {
    transform: rotate(284deg); }
  .logo-holder .rotate-285 {
    transform: rotate(285deg); }
  .logo-holder .rotate-286 {
    transform: rotate(286deg); }
  .logo-holder .rotate-287 {
    transform: rotate(287deg); }
  .logo-holder .rotate-288 {
    transform: rotate(288deg); }
  .logo-holder .rotate-289 {
    transform: rotate(289deg); }
  .logo-holder .rotate-290 {
    transform: rotate(290deg); }
  .logo-holder .rotate-291 {
    transform: rotate(291deg); }
  .logo-holder .rotate-292 {
    transform: rotate(292deg); }
  .logo-holder .rotate-293 {
    transform: rotate(293deg); }
  .logo-holder .rotate-294 {
    transform: rotate(294deg); }
  .logo-holder .rotate-295 {
    transform: rotate(295deg); }
  .logo-holder .rotate-296 {
    transform: rotate(296deg); }
  .logo-holder .rotate-297 {
    transform: rotate(297deg); }
  .logo-holder .rotate-298 {
    transform: rotate(298deg); }
  .logo-holder .rotate-299 {
    transform: rotate(299deg); }
  .logo-holder .rotate-300 {
    transform: rotate(300deg); }
  .logo-holder .rotate-301 {
    transform: rotate(301deg); }
  .logo-holder .rotate-302 {
    transform: rotate(302deg); }
  .logo-holder .rotate-303 {
    transform: rotate(303deg); }
  .logo-holder .rotate-304 {
    transform: rotate(304deg); }
  .logo-holder .rotate-305 {
    transform: rotate(305deg); }
  .logo-holder .rotate-306 {
    transform: rotate(306deg); }
  .logo-holder .rotate-307 {
    transform: rotate(307deg); }
  .logo-holder .rotate-308 {
    transform: rotate(308deg); }
  .logo-holder .rotate-309 {
    transform: rotate(309deg); }
  .logo-holder .rotate-310 {
    transform: rotate(310deg); }
  .logo-holder .rotate-311 {
    transform: rotate(311deg); }
  .logo-holder .rotate-312 {
    transform: rotate(312deg); }
  .logo-holder .rotate-313 {
    transform: rotate(313deg); }
  .logo-holder .rotate-314 {
    transform: rotate(314deg); }
  .logo-holder .rotate-315 {
    transform: rotate(315deg); }
  .logo-holder .rotate-316 {
    transform: rotate(316deg); }
  .logo-holder .rotate-317 {
    transform: rotate(317deg); }
  .logo-holder .rotate-318 {
    transform: rotate(318deg); }
  .logo-holder .rotate-319 {
    transform: rotate(319deg); }
  .logo-holder .rotate-320 {
    transform: rotate(320deg); }
  .logo-holder .rotate-321 {
    transform: rotate(321deg); }
  .logo-holder .rotate-322 {
    transform: rotate(322deg); }
  .logo-holder .rotate-323 {
    transform: rotate(323deg); }
  .logo-holder .rotate-324 {
    transform: rotate(324deg); }
  .logo-holder .rotate-325 {
    transform: rotate(325deg); }
  .logo-holder .rotate-326 {
    transform: rotate(326deg); }
  .logo-holder .rotate-327 {
    transform: rotate(327deg); }
  .logo-holder .rotate-328 {
    transform: rotate(328deg); }
  .logo-holder .rotate-329 {
    transform: rotate(329deg); }
  .logo-holder .rotate-330 {
    transform: rotate(330deg); }
  .logo-holder .rotate-331 {
    transform: rotate(331deg); }
  .logo-holder .rotate-332 {
    transform: rotate(332deg); }
  .logo-holder .rotate-333 {
    transform: rotate(333deg); }
  .logo-holder .rotate-334 {
    transform: rotate(334deg); }
  .logo-holder .rotate-335 {
    transform: rotate(335deg); }
  .logo-holder .rotate-336 {
    transform: rotate(336deg); }
  .logo-holder .rotate-337 {
    transform: rotate(337deg); }
  .logo-holder .rotate-338 {
    transform: rotate(338deg); }
  .logo-holder .rotate-339 {
    transform: rotate(339deg); }
  .logo-holder .rotate-340 {
    transform: rotate(340deg); }
  .logo-holder .rotate-341 {
    transform: rotate(341deg); }
  .logo-holder .rotate-342 {
    transform: rotate(342deg); }
  .logo-holder .rotate-343 {
    transform: rotate(343deg); }
  .logo-holder .rotate-344 {
    transform: rotate(344deg); }
  .logo-holder .rotate-345 {
    transform: rotate(345deg); }
  .logo-holder .rotate-346 {
    transform: rotate(346deg); }
  .logo-holder .rotate-347 {
    transform: rotate(347deg); }
  .logo-holder .rotate-348 {
    transform: rotate(348deg); }
  .logo-holder .rotate-349 {
    transform: rotate(349deg); }
  .logo-holder .rotate-350 {
    transform: rotate(350deg); }
  .logo-holder .rotate-351 {
    transform: rotate(351deg); }
  .logo-holder .rotate-352 {
    transform: rotate(352deg); }
  .logo-holder .rotate-353 {
    transform: rotate(353deg); }
  .logo-holder .rotate-354 {
    transform: rotate(354deg); }
  .logo-holder .rotate-355 {
    transform: rotate(355deg); }
  .logo-holder .rotate-356 {
    transform: rotate(356deg); }
  .logo-holder .rotate-357 {
    transform: rotate(357deg); }
  .logo-holder .rotate-358 {
    transform: rotate(358deg); }
  .logo-holder .rotate-359 {
    transform: rotate(359deg); }
  .logo-holder .rotate-360 {
    transform: rotate(360deg); }
  @media only screen and (max-width: 700px) {
    .logo-holder {
      height: 30px;
      width: 30px; }
      .logo-holder svg#logo-ring-grey-holder {
        height: 30px;
        width: 30px; } }
section#our-work {
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url("/images/pattern.png");
  display: flex; }
  section#our-work .page-content {
    position: absolute; }
  section#our-work .logo-holder {
    right: 30px;
    position: absolute;
    top: 30px; }
  section#our-work h1 {
    color: white; }
    section#our-work h1:before {
      content: " "; }
  section#our-work .showcase {
    align-content: center;
    align-items: center;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    left: 0;
    padding: 150px 0 30px 0;
    position: relative;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%; }
    section#our-work .showcase .showcase-item {
      background: rgba(255, 255, 255, 0.9);
      display: inline-block;
      height: 200px;
      margin: 15px;
      opacity: 0.5;
      position: relative;
      text-align: left;
      transition: all 0.3s ease;
      white-space: normal;
      width: 440px; }
      section#our-work .showcase .showcase-item .image {
        background-position: center center;
        background-size: cover;
        display: inline-block;
        height: 196px;
        left: 2px;
        position: relative;
        top: 2px;
        width: 196px; }
        section#our-work .showcase .showcase-item .image.aem {
          background-image: url("/images/portfolio/aem.jpg"); }
        section#our-work .showcase .showcase-item .image.amf {
          background-image: url("/images/portfolio/amf.jpg"); }
        section#our-work .showcase .showcase-item .image.arm {
          background-image: url("/images/portfolio/arm.jpg"); }
        section#our-work .showcase .showcase-item .image.btx {
          background-image: url("/images/portfolio/btx.jpg"); }
        section#our-work .showcase .showcase-item .image.rov {
          background-image: url("/images/portfolio/rov.jpg"); }
        section#our-work .showcase .showcase-item .image.r55 {
          background-image: url("/images/portfolio/r55.jpg"); }
        section#our-work .showcase .showcase-item .image.tvs {
          background-image: url("/images/portfolio/tvs.jpg"); }
        section#our-work .showcase .showcase-item .image.grv {
          background-image: url("/images/portfolio/grv.jpg"); }
        section#our-work .showcase .showcase-item .image.nvb {
          background-image: url("/images/portfolio/nvb.jpg"); }
      section#our-work .showcase .showcase-item .detail {
        display: inline-block;
        padding: 20px;
        vertical-align: top;
        width: 238px; }
        section#our-work .showcase .showcase-item .detail p {
          font-size: 12px;
          letter-spacing: 0.1em;
          line-height: 140%;
          margin-top: 10px; }
        section#our-work .showcase .showcase-item .detail a {
          bottom: 10px;
          color: #99a3b1;
          font-size: 10px;
          position: absolute;
          right: 60px;
          transition: color 0.3s ease; }
          section#our-work .showcase .showcase-item .detail a:hover {
            color: #fa3870; }
        section#our-work .showcase .showcase-item .detail .icon {
          bottom: 0px;
          display: block;
          height: 40px;
          position: absolute;
          right: -50px;
          width: 40px; }
      section#our-work .showcase .showcase-item:hover {
        background: white;
        opacity: 1;
        transform: scale(1.1);
        z-index: 1; }
  @media only screen and (max-width: 1000px) {
    section#our-work .showcase .showcase-item {
      background: white;
      opacity: 1;
      z-index: 1; }
      section#our-work .showcase .showcase-item:hover {
        transform: scale(1); } }
  @media only screen and (max-width: 700px) {
    section#our-work .logo-holder {
      right: 15px;
      top: 15px; }
    section#our-work .showcase {
      padding-top: 80px; }
      section#our-work .showcase .showcase-item {
        height: auto;
        padding-bottom: 10px;
        width: 266px; }
        section#our-work .showcase .showcase-item .image {
          height: 262px;
          width: 262px; } }
section#story {
  background: #fdfdfd; }
  section#story h1:before {
    content: " "; }
  section#story .logo-holder {
    left: 0px;
    position: absolute;
    top: 30px; }
  section#story .section-header {
    color: #219ad1;
    margin-bottom: 20px;
    text-align: center; }
  section#story .section-footer {
    text-align: center; }
    section#story .section-footer ul {
      display: inline-block;
      text-align: left; }
      section#story .section-footer ul li {
        color: #219ad1;
        padding: 10px 0; }
        section#story .section-footer ul li em:before {
          content: "➤ "; }
  section#story .columns {
    columns: 2em 2;
    column-gap: 100px; }
    section#story .columns p {
      margin-bottom: 20px; }
  @media only screen and (max-width: 1000px) {
    section#story .logo-holder {
      top: 15px; }
    section#story .columns {
      columns: 1;
      text-align: justify; } }
section#technologies {
  background: #fdfdfd; }
  section#technologies h1:before {
    content: " "; }
  section#technologies .columns {
    padding-bottom: 30px; }
    section#technologies .columns .column {
      width: 24%; }
      section#technologies .columns .column:first-child, section#technologies .columns .column.column:last-child {
        width: 38%; }
  section#technologies h3 {
    color: #4e6683;
    padding: 6px 0 20px 0;
    text-align: left;
    transition: color 0.3s ease; }
  section#technologies .icon {
    color: #99a3b1;
    font-size: 22px;
    transition: color 0.3s ease;
    line-height: 32px; }
  section#technologies .main-technologies {
    padding: 0 20px 0 0; }
    section#technologies .main-technologies .technology {
      opacity: 0.5; }
      section#technologies .main-technologies .technology:hover, section#technologies .main-technologies .technology.active {
        opacity: 1; }
        section#technologies .main-technologies .technology:hover .icon, section#technologies .main-technologies .technology.active .icon {
          color: #219ad1; }
      section#technologies .main-technologies .technology a {
        color: black; }
  section#technologies .technology {
    padding-bottom: 30px;
    position: relative;
    transition: opacity 0.3s ease; }
    section#technologies .technology .icons {
      font-size: 0;
      position: absolute;
      right: 0;
      top: 0; }
      section#technologies .technology .icons .icon {
        display: inline-block;
        margin-left: 10px; }
  section#technologies .technology-icons {
    padding: 0 20px; }
    section#technologies .technology-icons .logo-holder {
      left: 50%;
      margin-bottom: 80px;
      margin-left: -45px; }
    section#technologies .technology-icons .icons {
      display: inline-block;
      text-align: center;
      vertical-align: top;
      width: 33%; }
      section#technologies .technology-icons .icons:nth-child(3) {
        padding-top: 25px; }
      section#technologies .technology-icons .icons .icon {
        display: block;
        margin-bottom: 20px; }
        section#technologies .technology-icons .icons .icon:hover, section#technologies .technology-icons .icons .icon.active {
          color: #219ad1; }
  section#technologies .technology-detail {
    padding-left: 20px; }
    section#technologies .technology-detail .technology {
      opacity: 0;
      position: absolute;
      transition: opacity 1s ease; }
      section#technologies .technology-detail .technology.active {
        opacity: 1;
        z-index: 1; }
      section#technologies .technology-detail .technology h3 {
        color: #219ad1; }
      section#technologies .technology-detail .technology .icon {
        color: #219ad1; }
      section#technologies .technology-detail .technology a {
        color: #99a3b1;
        display: block;
        font-size: 11px;
        padding-right: 20px;
        position: relative;
        text-align: right;
        transition: color 0.3s ease;
        width: 100%; }
        section#technologies .technology-detail .technology a:after {
          border-radius: 5px;
          color: #99a3b1;
          content: "➤";
          font-size: 125%;
          height: 10px;
          position: absolute;
          right: 5px;
          transition: color 0.3s ease;
          width: 10px; }
        section#technologies .technology-detail .technology a:hover {
          color: #fa3870; }
          section#technologies .technology-detail .technology a:hover:after {
            color: #fa3870; }
      section#technologies .technology-detail .technology ul {
        margin-right: -5px;
        padding: 0;
        text-align: right; }
        section#technologies .technology-detail .technology ul li {
          display: inline-block; }
          section#technologies .technology-detail .technology ul li a {
            font-size: 30px;
            padding: 0; }
            section#technologies .technology-detail .technology ul li a:after {
              display: none; }
  @media only screen and (max-width: 700px) {
    section#technologies .columns .column {
      width: 100%; }
      section#technologies .columns .column:first-child, section#technologies .columns .column.column:last-child {
        width: 100%; }
    section#technologies .main-technologies {
      padding: 0;
      text-align: justify; }
    section#technologies .technology-detail {
      min-height: 556px;
      padding-left: 0;
      text-align: justify; }
      section#technologies .technology-detail .technology.active {
        position: relative; }
      section#technologies .technology-detail .technology a:after {
        top: -1px; }
    section#technologies .technology-icons .logo-holder {
      margin-bottom: 25px;
      margin-left: -20px; } }
.pages-container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  z-index: 1; }
  .pages-container section {
    min-height: 80%;
    position: relative;
    width: 100%; }
    .pages-container section .page-content {
      left: 50%;
      margin-left: calc(-500px - 10px);
      max-width: calc(1000px - 20px);
      position: relative;
      width: 100%; }
      .pages-container section .page-content .columns .column {
        display: inline-block;
        vertical-align: top; }
      .pages-container section .page-content .section-footer {
        padding: 50px 0;
        width: 100%; }
    .pages-container section h1, .pages-container section h2 {
      color: #363636;
      letter-spacing: 0.2em;
      margin: 0;
      padding: 50px;
      text-align: center;
      width: 100%; }
    .pages-container section h1 {
      font-size: 42px;
      font-weight: 300; }
      .pages-container section h1:before {
        font-family: "Fontawesome"; }
    .pages-container section h2 {
      font-size: 20px;
      font-weight: 600; }
    .pages-container section h3 {
      color: #363636;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.2em;
      margin: 0;
      padding: 20px 0; }
    .pages-container section h4 {
      color: #4e6683;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.2em;
      line-height: 100%;
      margin: 0; }
    .pages-container section p, .pages-container section ul li, .pages-container section em, .pages-container section a {
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 0.1em;
      line-height: 150%; }
    .pages-container section ul {
      padding: 0 20px; }
      .pages-container section ul li.star:before {
        border-radius: 5px;
        color: #fa3870;
        content: "✩";
        height: 10px;
        margin-left: -20px;
        position: absolute;
        width: 10px; }
  @media only screen and (min-width: 700px) and (max-width: 1000px) {
    .pages-container section {
      min-height: 800px; }
      .pages-container section .page-content {
        margin-left: calc(-350px - 10px);
        max-width: calc(700px - 20px); } }
  @media only screen and (max-width: 700px) {
    .pages-container section {
      min-height: 400px; }
      .pages-container section h1 {
        font-size: 22px;
        padding: 25px; }
        .pages-container section h1 .fa-icon {
          font-size: 22px; }
      .pages-container section .page-content {
        margin-left: calc(-150px);
        max-width: calc(320px - 20px); } }