/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block; }

/*
 * Corrects `inline-block` display not defined in IE 8/9.
 */
audio,
video {
  display: inline-block; }

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/*
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  text-size-adjust: 100%;
  /* 2 */
  -webkit-font-smoothing: antialiased; }

/*
 * Removes default margin.
 */
body {
  margin: 0; }

/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
 * Safari 5, and Chrome.
 */
h1 {
  font-size: 2em; }

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/*
 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic; }

/*
 * Addresses styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

/*
 * Improves readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap;
  word-wrap: break-word; }

/*
 * Sets consistent quote types.
 */
q {
  quotes: '\201C' '\201D' '\2018' '\2019'; }

/*
 * Addresses inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -.5em; }

sub {
  bottom: -.25em; }

/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * Removes border when inside `a` element in IE 8/9.
 */
img,
canvas {
  border: 0;
  display: block; }

/*
 * Corrects overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em; }

/*
 * 1. Corrects color not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */
  -webkit-font-smoothing: antialiased; }

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal; }

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/*
 * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default; }

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  appearance: textfield;
  /* 1 */
  box-sizing: content-box; }

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  appearance: none; }

/*
 * Removes inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/**
 * Position X,Y,Z (Fallback Top, Left IE)
 * @param {number} $x - X Position
 * @param {number} $y - Y Position
 * @param {number} $z - Z Position
 */
/**
 * Position
 * @param {number} $top (0) - Top Position
 * @param {number} $right (auto) - Right Position
 * @param {number} $bottom (auto) - Bottom Position
 * @param {number} $left (0) - Left Position
 */
/**
 * Offset
 * @param {number} $top (0) - Top Offset
 * @param {number} $left (0) - Left Offset
 */
/**
 * Positioning an element absolute in the center
 */
/**
 * Places an element absolute on top of the entire wrapper
 */
/**
 * Set an element to display block and center margin
 */
/**
 * Size an Element
 * @param {number} $width (1em) - Width of the element
 * @param {number} $height ($width) - Height of the element
 */
/**
 * Font Face
 * @param {string} $fontName - Name of the font
 * @param {string} $folderName - Subfolder inside the fonts folder
 * @param {string} $fileName - Name of the font-file
 * @param {string} $fontWeight (normal) - Font weight value
 * @param {string} $fontStyle (normal) - Font style value
 */
/**
 * CSS Background
 * @param {string} $name ($spriteDefault) - Background image, without the image path
 * @param {string} $repeat (no-repeat) - Background repeat
 * @param {position} $left (0) - Background position X
 * @param {position} $top (0) - Background position Y
 * @param {color} $color (transparent) - Background color
 * @param {string} $attachment (scorll) - Background attachment
 */
/**
 * Creates an arrow
 * @param {string} $direction (up) - Arrow direction: up, down, left or right
 * @param {color} $color (#000) - Arrow color
 * @param {size} $size (10px) - Size of the opposite side of the arrow
 * @param {number} $stretch (1) - Amount of the stretch of the arrow
 * @param {boolean} $exclude-base (false) - Remove the default arrow styling (usefull if you want to modify the direction of the arrow on rollover
 */
/**
 * Outputs a ratio holder
 * @param {number} $width - the width of the desired (original) size
 * @param {number} $height - the height of the desired (original) size
 * @param {string} $type (before) - type of psuedo element
 * @param {boolean} $firstDescendant (true) - same element or first descendant
 */
/**
 * Object fit for images (can be used in combination with https://github.com/bfred-it/object-fit-images
 * @param {string} $fit - Type of fit cover/contain etc.
 * @param {string} $position - almost the same as background-position
 */
/**
 * Z-Index function
 * @param {string} $list (Array) - The list to find the current z-index in
 * @param {string} $element (String) - The name of the current element, must be in the $list
 * @returns {number}
 */
/**
 * easing function
 * @param {string} $easeName - The name of the easing function.
 * @returns {string} - Returns a cubic-bezier function with the easing values.
 */
/**
 * Respond To (Breakpoint)
 * @param {string} $name - Name of the breakpoint used in $breakpoints
 */
@font-face {
  font-family: "iconfont";
  src: url("../font/icomoon/icomoon.eot");
  src: url("../font/icomoon/icomoon.eot?#iefix") format("embedded-opentype"), url("../font/icomoon/icomoon.woff") format("woff"), url("../font/icomoon/icomoon.ttf") format("truetype"), url("../font/icomoon/icomoon.svg#iconfont") format("svg");
  font-weight: normal;
  font-style: normal; }
h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 1.6rem; }

.heading-logo {
  background: transparent url("../image/img-logo.svg") no-repeat center center scroll;
  background-size: cover;
  height: auto;
  width: 120px; }
  .heading-logo:before {
    content: '';
    display: block;
    padding-top: 31.25%; }
  @media (max-width: 479px) {
    .heading-logo {
      height: auto;
      width: 80px; }
      .heading-logo:before {
        content: '';
        display: block;
        padding-top: 31.6625%; } }

.heading-title {
  font: 300 64px/64px "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-transform: uppercase; }
  @media (max-width: 479px) {
    .heading-title {
      font: 300 32px/32px "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; } }

.copy-default {
  font: 300 24px/24px "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; }
  @media (max-width: 479px) {
    .copy-default {
      font: 300 16px/16px "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif; } }

.list-social {
  border: 0;
  padding: 0;
  margin: 0; }

.list-social {
  list-style: none; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.hidden {
  display: none; }

.ir,
.heading-logo,
.clear {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0; }

.list-social {
  display: flex;
  align-items: center;
  margin: 16px 0 0; }
  @media (max-width: 479px) {
    .list-social {
      margin: 8px 0 0; } }
  .list-social li {
    margin: 0 8px; }
    .list-social li a {
      font-size: 16px;
      color: #FFFFFF;
      text-decoration: none; }
      @media (max-width: 479px) {
        .list-social li a {
          font-size: 16px; } }

/**
 * Function to generate the grid
 * @param {string} $name ('grid') - grid name (will be returned as class)
 * @param {number} $numberOfCols ($gridNumberOfCols) - Maximum Number of columns possible.
 * @param {object} $gapSizes ($gridGapSizes) - Name Value pairs of classname and size in pixels.
 */
/**
 * Hexagon grid
 * @param {string} $name ('grid-hexagon') - grid name (will be returned as class)
 * @param {number} $width (100) - Width of the grid
 * @param {number} $height (100) - Height of the grid
 * @param {string} $unitValue ('px') - Choose between 'px', 'em', 'rem', '%'
 * @param {number} $x (10) - Number of columns
 * @param {number} $y (10) - Number of rows
 * @param {boolean} $inverted (false) - Defines if the first row is aligned right or left.
 */
/*
Grid

A global grid that can be used for deviding elements within a certain grid.
The grid should be modified for every breakpoint using a device prefix:

- grid.column-33<strong>.tablet-column-[your desired column size for tablet].mobile-column-[your desired column size for mobile]</strong>

In case it's desired to keep a certain styling for all breakpoints. Just use a single (non prefixed) classname:

- grid.column-33 (this will be applied for tablet and mobile as well)

You can have control over the gap sizes in between the columns.
Following modifier classes are available:

- glued
- extra-spacing
- reduced-spacing
- minimal-spacing

See _variables.scss for the column gaps.

The grid supports the following grid layouts:

- 1 column
- 2 columns
- 3 columns
- 4 columns
- 66 - 33 columns
- 75 - 25 columns
- 33 - 66 columns
- 25 - 75 columns

Styleguide grid
*/
/*
Grid Single Column

.column-100 - Column 100

Markup:
<div class="grid {{ modifier_class }}">
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
</div>

Styleguide grid.column-100
*/
/*
Grid Two Columns

.column-50 - Column 50/50

Markup:
<div class="grid {{ modifier_class }}">
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
</div>

Styleguide grid.column-50
*/
/*
Grid Three Columns

.column-33 - Column 33/33/33

Markup:
<div class="grid {{ modifier_class }}">
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
</div>

Styleguide grid.column-33
*/
/*
Grid Four Columns

.column-25 - Column 25/25/25/25

Markup:
<div class="grid {{ modifier_class }}">
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
</div>

Styleguide grid.column-25
*/
/*
Grid Gap Sizes

You can apply various gap sizes to each grid instance. Choose your gapsize using:

.column-25 - Default gap size.
.glued - Glued gap size.
.extra-spacing - Extra spacing gap size.
.reduced-spacing - Reduced spacing gap size.
.minimal-spacing - Minimal spacing gap size.

Markup:
<div class="grid column-25 {{ modifier_class }}">
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
	<div class="col"><div style="background: #0CA9E3; height: 100px"></div></div>
</div>

Styleguide grid.gapsizes
*/
/* Adds a new grid modifier (to add new grids with different gap size)
 * Column calculation = (ColumnGap / NumberOfColumns) * NumberOfGaps
 * @param {string} $modifierName ('') - Class name of the desired modifier.
 * @param {gapSize} $gapSize ($gridDefaultSpacing) - Gapsize in pixels.
 */
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "iconfont";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-facebook:before {
  content: "\e900"; }

.icon-linkedin:before {
  content: "\e901"; }

.icon-twitter:before {
  content: "\e902"; }

.icon-github:before {
  content: "\e903"; }

.icon-mail:before {
  content: "\e904"; }

.content {
  height: 100%;
  width: 100%;
  background: transparent url("../image/bg-body.jpg") no-repeat center center scroll;
  background-size: cover;
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: opacity 1s 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000); }
  .content .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
  .content .heading-logo {
    transition: opacity 0.5s 1s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0.5s 1s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    opacity: 0;
    transform: translateY(60px); }
  .content .heading-title {
    transition: opacity 0.6s 1.1s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0.6s 1.1s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    opacity: 0;
    transform: translateY(80px); }
  .content .copy-default {
    transition: opacity 0.8s 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0.8s 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    opacity: 0;
    transform: translateY(60px); }
  .content .list-social li {
    opacity: 0; }
    .content .list-social li:nth-child(1) {
      transform: translateY(30px);
      transition: opacity 0.5s 1.45s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0.3s 1.45s cubic-bezier(0.230, 1.000, 0.320, 1.000); }
    .content .list-social li:nth-child(2) {
      transform: translateY(25px);
      transition: opacity 0.5s 1.475s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0.35s 1.475s cubic-bezier(0.230, 1.000, 0.320, 1.000); }
    .content .list-social li:nth-child(3) {
      transform: translateY(20px);
      transition: opacity 0.5s 1.525s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0.4s 1.525s cubic-bezier(0.230, 1.000, 0.320, 1.000); }
    .content .list-social li:nth-child(4) {
      transform: translateY(15px);
      transition: opacity 0.5s 1.625s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0.45s 1.625s cubic-bezier(0.230, 1.000, 0.320, 1.000); }
    .content .list-social li:nth-child(5) {
      transform: translateY(10px);
      transition: opacity 0.5s 1.75s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0.5s 1.75s cubic-bezier(0.230, 1.000, 0.320, 1.000); }
  .content.is-loaded {
    opacity: 1; }
    .content.is-loaded .heading-logo {
      opacity: 1;
      transform: translateY(0); }
    .content.is-loaded .heading-title {
      opacity: 1;
      transform: translateY(0); }
    .content.is-loaded .copy-default {
      opacity: 1;
      transform: translateY(0); }
    .content.is-loaded .list-social li:nth-child(1) {
      opacity: 1;
      transform: translateY(0); }
    .content.is-loaded .list-social li:nth-child(2) {
      opacity: 1;
      transform: translateY(0); }
    .content.is-loaded .list-social li:nth-child(3) {
      opacity: 1;
      transform: translateY(0); }
    .content.is-loaded .list-social li:nth-child(4) {
      opacity: 1;
      transform: translateY(0); }
    .content.is-loaded .list-social li:nth-child(5) {
      opacity: 1;
      transform: translateY(0); }

html, body {
  height: 100%;
  width: 100%; }

html {
  font-size: 62.5%; }

body {
  background: #000000;
  color: #FFFFFF;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.site-frame {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  padding: 0 1rem;
  box-sizing: border-box; }

/**
 *	Page - index
 */
.view.view-index {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 6.2rem;
  overflow: hidden; }
  .view.view-index > .view {
    flex: 1; }

/**
 *	Page - home
 */

/*# sourceMappingURL=screen.css.map */