@charset "UTF-8";
/*
Theme Name: Gazelle Landing
Theme URI: https://www.3eighty.nl
Author: Yoeri Dekker
Author URI: https://www.3eighty.nl/over-3eighty/
Description: Landing theme for the Gazelle Shop-in-shop configurator
Version: 1.0.0
Text Domain: gazelle-landing-theme
Domain Path: /languages/
*/

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNovaT-Thin.eot");
  src: url("fonts/ProximaNovaT-Thin.eot?#iefix") format("embedded-opentype"),
    url("fonts/ProximaNovaT-Thin.woff2") format("woff2"),
    url("fonts/ProximaNovaT-Thin.woff") format("woff"),
    url("fonts/ProximaNovaT-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-Medium.eot");
  src: url("fonts/ProximaNova-Medium.eot?#iefix") format("embedded-opentype"),
    url("fonts/ProximaNova-Medium.woff2") format("woff2"),
    url("fonts/ProximaNova-Medium.woff") format("woff"),
    url("fonts/ProximaNova-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

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

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-BlackIt.eot");
  src: url("fonts/ProximaNova-BlackIt.eot?#iefix") format("embedded-opentype"),
    url("fonts/ProximaNova-BlackIt.woff2") format("woff2"),
    url("fonts/ProximaNova-BlackIt.woff") format("woff"),
    url("fonts/ProximaNova-BlackIt.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-LightIt.eot");
  src: url("fonts/ProximaNova-LightIt.eot?#iefix") format("embedded-opentype"),
    url("fonts/ProximaNova-LightIt.woff2") format("woff2"),
    url("fonts/ProximaNova-LightIt.woff") format("woff"),
    url("fonts/ProximaNova-LightIt.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-RegularIt.eot");
  src: url("fonts/ProximaNova-RegularIt.eot?#iefix") format("embedded-opentype"),
    url("fonts/ProximaNova-RegularIt.woff2") format("woff2"),
    url("fonts/ProximaNova-RegularIt.woff") format("woff"),
    url("fonts/ProximaNova-RegularIt.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-MediumIt.eot");
  src: url("fonts/ProximaNova-MediumIt.eot?#iefix") format("embedded-opentype"),
    url("fonts/ProximaNova-MediumIt.woff2") format("woff2"),
    url("fonts/ProximaNova-MediumIt.woff") format("woff"),
    url("fonts/ProximaNova-MediumIt.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-Semibold.eot");
  src: url("fonts/ProximaNova-Semibold.eot?#iefix") format("embedded-opentype"),
    url("fonts/ProximaNova-Semibold.woff2") format("woff2"),
    url("fonts/ProximaNova-Semibold.woff") format("woff"),
    url("fonts/ProximaNova-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-SemiboldIt.eot");
  src: url("fonts/ProximaNova-SemiboldIt.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/ProximaNova-SemiboldIt.woff2") format("woff2"),
    url("fonts/ProximaNova-SemiboldIt.woff") format("woff"),
    url("fonts/ProximaNova-SemiboldIt.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  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");
  font-weight: 300;
  font-style: normal;
}

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

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-BoldIt.eot");
  src: url("fonts/ProximaNova-BoldIt.eot?#iefix") format("embedded-opentype"),
    url("fonts/ProximaNova-BoldIt.woff2") format("woff2"),
    url("fonts/ProximaNova-BoldIt.woff") format("woff"),
    url("fonts/ProximaNova-BoldIt.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-ExtrabldIt.eot");
  src: url("fonts/ProximaNova-ExtrabldIt.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/ProximaNova-ExtrabldIt.woff2") format("woff2"),
    url("fonts/ProximaNova-ExtrabldIt.woff") format("woff"),
    url("fonts/ProximaNova-ExtrabldIt.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  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");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-Extrabld.eot");
  src: url("fonts/ProximaNova-Extrabld.eot?#iefix") format("embedded-opentype"),
    url("fonts/ProximaNova-Extrabld.woff2") format("woff2"),
    url("fonts/ProximaNova-Extrabld.woff") format("woff"),
    url("fonts/ProximaNova-Extrabld.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNova-ThinIt.eot");
  src: url("fonts/ProximaNova-ThinIt.eot?#iefix") format("embedded-opentype"),
    url("fonts/ProximaNova-ThinIt.woff2") format("woff2"),
    url("fonts/ProximaNova-ThinIt.woff") format("woff"),
    url("fonts/ProximaNova-ThinIt.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}

html,
body {
  height: 100%;
  height: 100vh;
  min-height: 100%;
  background: #f2f2f2;
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}
body * {
  box-sizing: border-box;
  font-family: "Proxima Nova";
  color: #000
}
p {
  line-height: 1.4;
}
.maxwidth {
  max-width: 1600px;
  margin: 0 auto;
}
.main {
  position: absolute;
  background: #fff;
  width: auto;
  height: auto;
  padding: 0;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 100px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
}
.vertical-middle {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}
.languages {
  margin: 0;
  padding: 0;
  text-align: center;
  display: block;
  width: 100%;
}
.languages li {
  display: inline-block;
  font-size: 0;
  text-align: center;
  margin: 0;
  padding: 0 5px;
  width: 120px
}
.languages li a {
  font-size: 1.6rem;
  text-decoration: none;
  text-align: center;
}
.languages li a h4 {
    display: block;
    line-height: 1.4;
}
.languages li a img {
  transition: all ease-in-out 0.3s;
  transform: scale(1);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  border: 2px solid #fff;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
  padding: 0;
  margin: 0 auto;
}
.languages li a:hover img {
  transform: scale(1.05);
}
div.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  padding: 0 30px;
  left: 0;
  right: 0;
}
div.footer a {
  color: #777;
}
div.footer .inner {
  position: relative;
  height: 100px;
  line-height: 100px;
  display: inline-block;
  width: 100%;
  color: #444;
  text-align: center;
}

div.footer .inner img {
  width: 50%;
  max-width: 200px;
  margin: 0;
  padding: 5px 0;
  height: auto;
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
}

div.footer .inner img:first-of-type {
  margin-right: 10px;
}
div.footer .inner img:last-of-type {
  margin-left: 10px;
}
div.footer .inner span.separator {
  height: 50px;
  width: 2px;
  background: #ccc;
  display: inline-block;
  top: 25px;
  position: relative;
  left: -1px;
}