/*
	@file:
		_variables.scss

	@description: 
		SASS variables used and shared amongst all the
		individual files/functions
	
	@implementation:
		File is included in the main.scss file via the 
		@include function

	@naming:
		All variables should be named logically in
		order to avoid confusion and conflicts.

		Good example:
		$primary-color: #000;

		Bad example:
		$black-color: #000;
*/
/*
	@file:
		functions.scss

	@description: 
		SASS custom functions used and shared amongst all the
		individual files/functions
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
/*
	@function:
		em( $value, $base )

	@description
		Simple function that converts pixels to em's

	@arguments:
		$value : The pixel value
		$base  : The base font size

	@implementation:		
		em( 25px )

*/
/*
	@function:
		rem( $value, $base )

	@description
		Simple function that converts pixels to rem's

	@arguments:
		$value : The pixel value
		$base  : The base font size

	@implementation:		
		rem( 25px )

*/
/*
	@function:
		z-index( $layer, $z-layers )

	@description
		Simple function that generates a z-index value based on the key 
		values from a list

	@arguments:
		$layer : The desired value to be taken from the list
		$z-layers : List that contains the z-index values

	@implementation:		
		z-index( 'modal' )

*/
/*
	@file:
		_placeholders.scss

	@description: 
		SASS custom placeholders used as abstract classes for
		extending purposes
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
/*
	@placeholder:
		clearfix

	@description
		Classic clearfix approach, just the SASS way :)

	@implementation:		
		.selector { @extend %clearfix; }

*/
.row, #header__wrapper, .list--header__nav, #footer .content, #footer__nodes, #footer__copyright, .section, #news .content, #counter, .content_split__inner, .highlight__content__inner, .section--invert, .cta__inner, .section--form .form__fieldset_group, .render__news_category #news .content, .landing .block, .landing .section, .landing .section__content__block, .landing .download .content {
  *zoom: 1; }
.row:before, #header__wrapper:before, .list--header__nav:before, #footer .content:before, #footer__nodes:before, #footer__copyright:before, .section:before, #news .content:before, #counter:before, .content_split__inner:before, .highlight__content__inner:before, .section--invert:before, .cta__inner:before, .section--form .form__fieldset_group:before, .render__news_category #news .content:before, .landing .block:before, .landing .section:before, .landing .section__content__block:before, .landing .download .content:before, .row:after, #header__wrapper:after, .list--header__nav:after, #footer .content:after, #footer__nodes:after, #footer__copyright:after, .section:after, #news .content:after, #counter:after, .content_split__inner:after, .highlight__content__inner:after, .section--invert:after, .cta__inner:after, .section--form .form__fieldset_group:after, .render__news_category #news .content:after, .landing .block:after, .landing .section:after, .landing .section__content__block:after, .landing .download .content:after {
  content: '';
  display: table; }
.row:after, #header__wrapper:after, .list--header__nav:after, #footer .content:after, #footer__nodes:after, #footer__copyright:after, .section:after, #news .content:after, #counter:after, .content_split__inner:after, .highlight__content__inner:after, .section--invert:after, .cta__inner:after, .section--form .form__fieldset_group:after, .render__news_category #news .content:after, .landing .block:after, .landing .section:after, .landing .section__content__block:after, .landing .download .content:after {
  clear: both; }

/*
	@file:
		_mixins.scss

	@description: 
		SASS custom mixins used and shared amongst all the
		individual files/functions
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
/*
	@mixin:
		aspect-ratio( $width, $height )

	@description
		Creates a fluid ratio box

	@arguments:
		$width : Width ratio
		$height: Height ratio

	@implementation:		
		@include aspect-ratio(16, 9);

	@credits
		https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/

*/
/*
	@mixin:
		font-face( $font-family, $file-path, $font-weight, $font-style )

	@description
		A fool-proof font-face mixin

	@arguments:
		$font-family : Defines the font-family
		$file-path   : URL that points to the font-face file
		$font-weight : Defines the font-weight
		$font-style  : Defines the font-style

	@implementation:		
		@include font-face(Ubuntu-Light, 'Ubuntu-Light-webfont', 300, normal);

	@credits
		http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration

*/
/*
	@mixin:
		rem( $property, $values )

	@description
		A REM-PX mixin that converst pixels to proper rem values.
		It also includes a fallback for older browsers (IE8 cough...)

	@arguments:
		$property : the property you want to apply a value to
		$values   : the values you want to apply to $property

	@implementation:		
		@include rem(font-size, 1.5rem);
  		@include rem(padding, 20px 10px);

	@credits
		CodePen: http://codepen.io/HugoGiraudel/pen/xsKdH
		Article: http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/

*/
/*
	@mixin:
		em( $property, $values )

	@description
		A EM-PX mixin that converst pixels to proper em values.
		It also includes a fallback for older browsers (IE8 cough...)

	@arguments:
		$property : the property you want to apply a value to
		$values   : the values you want to apply to $property

	@implementation:		
		@include em(font-size, 1.5em);
  		@include em(padding, 20px 10px);

*/
/*
	@mixin:
		retina( $query, $file, $type, $width, $height )

	@description
		Pretty cool mixin to generate a background image for retina display

	@arguments:
		$query  : Media query to trigger retina image
		$file   : File that will be used
		$type   : Filetype
		$width  : Width to scale the original image
		$height : Height to scale the original image

	@implementation:		
		@include retina('images/video', 'png', 50%, 50%);

*/
/*
	@mixin:
		font-smoothing( $value )

	@description
		Pretty cool mixin for font smoothing

	@arguments:
		$value: Defines the algorythm for the smoothing

	@implementation:		
		@include font-smoothing();

*/
/*
	@mixin:
		keyframes( $animation-name )

	@description
		Defines the keyframes for the animation

	@arguments:
		$animation-name: Animation name

	@implementation:		
		@include keyframes(slide-down) {
			0% { opacity: 1; }
			90% { opacity: 0; }
		}

*/
/*
	@mixin:
		animation(
			$animation-name,
			$animation-duration,
			$animation-iteration-count,
			$animation-direction,
			$animation-timing-function,
			$animation-fill-mode,
			$animation-delay

		)
	@description
		Implements the animation based on pre-defined
		keyframes

	@arguments:
		$animation-name: Name of animation,
		$animation-duration: Pass time parameter do declare animation duration,
		$animation-iteration-count: Pass string or integer to declare animation count
		$animation-direction: Pass string to declare animation direction
		$animation-timing-function: Pass easing string to declare animation easing
		$animation-fill-mode: Pass string to declare animation fill
		$animation-delay: Pass time parameter to declare animation delay

	@implementation:		
		@include animation('slide-down');

*/
/*
	@mixin:
		flip3d( 
			$speed,
			$perspective
		)

	@description
		Creates a neat 3D flip effect

	@arguments:
		$speed: Transition speed
		$perspective: Defines the flip perspective

	@implementation:		
		@include flip3d()

*/
/*
	@file:
		_grid.scss

	@description: 
		Custom made grid used, including all the common
		breakpoints needed for responsive templating
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
/*
	@mixin:
		respond-to( $breakpoint )

	@description
		Mixin used to handle responsive queries

	@arguments:
		$breakpoint: Name of desired breakpoint we would like to trigger

	@implementation:		
		@include respond-to( mobile );


*/
/*
	@mixin:
		grid-container( $max-width )

	@description
		Mixin used to define the grid container

	@arguments:
		$max-width: The max width that the container expands to. Variable is optional.

	@implementation:		
		@include grid-container( 120em );

*/
/*
	@mixin:
		grid-row( )

	@description
		Mixin used to define the grid rows

	@arguments:
		$row-margin: Margin that is passed as a seperator between rows

	@implementation:		
		@include grid-row( 2em );

*/
/*
	@mixin:
		grid-column( $column, $grid-gutter )

	@description
		Mixin used to define the grid columns

	@arguments:
		$column: The desired column number that defines the width
		$grid-gutter: Space between the stacked columns. Variable is optional.

	@implementation:		
		@include grid-column( 5 );

*/
/*
	@mixin:
		grid-pull( $column )

	@description
		Mixin used to define the grid pull

	@arguments:
		$column: The desired column number that defines the width

	@implementation:		
		@include grid-pull( 5 );

*/
/*
	@mixin:
		grid-push( $column )

	@description
		Mixin used to define the grid push

	@arguments:
		$column: The desired column number that defines the width

	@implementation:		
		@include grid-push( 5 );

*/
/*
	@mixin:
		grid-offset( $column )

	@description
		Mixin used to define the grid offset

	@arguments:
		$column: The desired column number that defines the width

	@implementation:		
		@include grid-offset( 5 );

*/
.container {
  margin: 0 auto;
  width: 100%;
  max-width: 75em;
  position: relative; }
  .container img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block; }

.row {
  width: 100%;
  position: relative;
  margin: 0 auto 1em; }

.col-1 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-2 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-3 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-4 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-5 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-6 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-7 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-8 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-9 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-10 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-11 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

.col-12 {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 0.625em;
  width: 100%; }

@media (min-width: 58.75em) {
  .col-1 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 8.33333%; }
  .pull-1 {
    right: 8.33333%; }
  .push-1 {
    left: 8.33333%; }
  .offset-1 {
    margin-left: 8.33333%; }
  .col-2 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 16.66667%; }
  .pull-2 {
    right: 16.66667%; }
  .push-2 {
    left: 16.66667%; }
  .offset-2 {
    margin-left: 16.66667%; }
  .col-3 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 25%; }
  .pull-3 {
    right: 25%; }
  .push-3 {
    left: 25%; }
  .offset-3 {
    margin-left: 25%; }
  .col-4 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 33.33333%; }
  .pull-4 {
    right: 33.33333%; }
  .push-4 {
    left: 33.33333%; }
  .offset-4 {
    margin-left: 33.33333%; }
  .col-5 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 41.66667%; }
  .pull-5 {
    right: 41.66667%; }
  .push-5 {
    left: 41.66667%; }
  .offset-5 {
    margin-left: 41.66667%; }
  .col-6 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 50%; }
  .pull-6 {
    right: 50%; }
  .push-6 {
    left: 50%; }
  .offset-6 {
    margin-left: 50%; }
  .col-7 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 58.33333%; }
  .pull-7 {
    right: 58.33333%; }
  .push-7 {
    left: 58.33333%; }
  .offset-7 {
    margin-left: 58.33333%; }
  .col-8 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 66.66667%; }
  .pull-8 {
    right: 66.66667%; }
  .push-8 {
    left: 66.66667%; }
  .offset-8 {
    margin-left: 66.66667%; }
  .col-9 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 75%; }
  .pull-9 {
    right: 75%; }
  .push-9 {
    left: 75%; }
  .offset-9 {
    margin-left: 75%; }
  .col-10 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 83.33333%; }
  .pull-10 {
    right: 83.33333%; }
  .push-10 {
    left: 83.33333%; }
  .offset-10 {
    margin-left: 83.33333%; }
  .col-11 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 91.66667%; }
  .pull-11 {
    right: 91.66667%; }
  .push-11 {
    left: 91.66667%; }
  .offset-11 {
    margin-left: 91.66667%; }
  .col-12 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 100%; }
  .pull-12 {
    right: 100%; }
  .push-12 {
    left: 100%; }
  .offset-12 {
    margin-left: 100%; } }

@media (min-width: 77.5em) {
  .col-1 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 8.33333%; }
  .pull-1 {
    right: 8.33333%; }
  .push-1 {
    left: 8.33333%; }
  .offset-1 {
    margin-left: 8.33333%; }
  .col-2 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 16.66667%; }
  .pull-2 {
    right: 16.66667%; }
  .push-2 {
    left: 16.66667%; }
  .offset-2 {
    margin-left: 16.66667%; }
  .col-3 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 25%; }
  .pull-3 {
    right: 25%; }
  .push-3 {
    left: 25%; }
  .offset-3 {
    margin-left: 25%; }
  .col-4 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 33.33333%; }
  .pull-4 {
    right: 33.33333%; }
  .push-4 {
    left: 33.33333%; }
  .offset-4 {
    margin-left: 33.33333%; }
  .col-5 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 41.66667%; }
  .pull-5 {
    right: 41.66667%; }
  .push-5 {
    left: 41.66667%; }
  .offset-5 {
    margin-left: 41.66667%; }
  .col-6 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 50%; }
  .pull-6 {
    right: 50%; }
  .push-6 {
    left: 50%; }
  .offset-6 {
    margin-left: 50%; }
  .col-7 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 58.33333%; }
  .pull-7 {
    right: 58.33333%; }
  .push-7 {
    left: 58.33333%; }
  .offset-7 {
    margin-left: 58.33333%; }
  .col-8 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 66.66667%; }
  .pull-8 {
    right: 66.66667%; }
  .push-8 {
    left: 66.66667%; }
  .offset-8 {
    margin-left: 66.66667%; }
  .col-9 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 75%; }
  .pull-9 {
    right: 75%; }
  .push-9 {
    left: 75%; }
  .offset-9 {
    margin-left: 75%; }
  .col-10 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 83.33333%; }
  .pull-10 {
    right: 83.33333%; }
  .push-10 {
    left: 83.33333%; }
  .offset-10 {
    margin-left: 83.33333%; }
  .col-11 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 91.66667%; }
  .pull-11 {
    right: 91.66667%; }
  .push-11 {
    left: 91.66667%; }
  .offset-11 {
    margin-left: 91.66667%; }
  .col-12 {
    box-sizing: border-box;
    position: relative;
    float: left;
    min-height: 1px;
    padding: 0 0.625em;
    width: 100%; }
  .pull-12 {
    right: 100%; }
  .push-12 {
    left: 100%; }
  .offset-12 {
    margin-left: 100%; } }

/*
	@file:
		_reset.scss

	@description: 
		Reset/normalize styles used to clean out the DOM
	
	@implementation:
		File is included in the main.scss file via the 
		@include function

	@copyright:
		http://meyerweb.com/eric/tools/css/reset/ 
   		v2.0 | 20110126

*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

input, label, select, button, textarea {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  /* Browsers have different default form fonts */
  font-size: 13px;
  font-family: Arial; }

/* Remove the stupid outer glow in Webkit */
input:focus {
  outline: 0; }

/* Box Sizing Reset
-----------------------------------------------*/
/* All of our custom controls should be what we expect them to be */
input, textarea {
  box-sizing: content-box; }

/* These elements are usually rendered a certain way by the browser */
button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select {
  box-sizing: border-box; }

/* Text Inputs
-----------------------------------------------*/
/* Button Controls
-----------------------------------------------*/
input[type=checkbox], input[type=radio] {
  width: 13px;
  height: 13px; }

/* File Uploads
-----------------------------------------------*/
/* Search Input
-----------------------------------------------*/
/* Make webkit render the search input like a normal text field */
input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box; }

/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration {
  display: none; }

/* Buttons
-----------------------------------------------*/
button, input[type="reset"], input[type="button"], input[type="submit"] {
  /* Fix IE7 display bug */
  overflow: visible;
  width: auto; }

/* IE8 and FF freak out if this rule is within another selector */
::-webkit-file-upload-button {
  padding: 0;
  border: 0;
  background: none; }

/* Textarea
-----------------------------------------------*/
textarea {
  /* Move the label to the top */
  vertical-align: top;
  /* Turn off scroll bars in IE unless needed */
  overflow: auto; }

/* Selects
-----------------------------------------------*/
select[multiple] {
  /* Move the label to the top */
  vertical-align: top; }

/*
	@file:
		_typography.scss

	@description: 
		Typography related rules
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
@font-face {
  font-family: "blanchcondensed";
  src: url('../fonts/blanch_condensed-webfont.eot');
  src: url('../fonts/blanch_condensed-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/blanch_condensed-webfont.woff') format('woff'), url('../fonts/blanch_condensed-webfont.ttf') format('truetype'), url('../fonts/blanch_condensed-webfont.svg#blanchcondensed') format('svg');
  font-weight: normal;
  font-style: normal; }

/*
	@media screen and (
		-webkit-min-device-pixel-ratio: 0
	) {

		@font-face {

			font-family: $font-family;
			src: url('../fonts/blanch_condensed-webfont.svg#blanchcondensed') format('svg');

		}

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

/*
	@media screen and (
		-webkit-min-device-pixel-ratio: 0
	) {

		@font-face {

			font-family: $font-family;
			src: url('../fonts/blanch_caps-webfont.svg#blanchcaps') format('svg');

		}

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

/*
	@media screen and (
		-webkit-min-device-pixel-ratio: 0
	) {

		@font-face {

			font-family: $font-family;
			src: url('../fonts/blanch_condensed_inline-webfont.svg#blanchcondensed_inline') format('svg');

		}

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

/*
	@media screen and (
		-webkit-min-device-pixel-ratio: 0
	) {

		@font-face {

			font-family: $font-family;
			src: url('../fonts/blanch_condensed_light-webfont.svg#blanchcondensed_light') format('svg');

		}

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

/*
	@media screen and (
		-webkit-min-device-pixel-ratio: 0
	) {

		@font-face {

			font-family: $font-family;
			src: url('../fonts/blanch_caps_light-webfont.svg#blanchcaps_light') format('svg');

		}

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

/*
	@media screen and (
		-webkit-min-device-pixel-ratio: 0
	) {

		@font-face {

			font-family: $font-family;
			src: url('../fonts/blanch_caps_inline-webfont.svg#blanchcaps_inline') format('svg');

		}

	}
	*/
h1 {
  font-family: Helvetica;
  font-size: 11.09rem;
  line-height: 1.2;
  margin: 1.414rem 0 0;
  color: #111213;
  padding: 0; }

h2 {
  font-family: Helvetica;
  font-size: 6.854rem;
  line-height: 1.2;
  margin: 1.414rem 0 0;
  color: #111213;
  padding: 0; }

h3 {
  font-family: Helvetica;
  font-size: 4.236rem;
  line-height: 1.2;
  margin: 1.414rem 0 0;
  color: #111213;
  padding: 0; }

h4 {
  font-family: Helvetica;
  font-size: 2.618rem;
  line-height: 1.2;
  margin: 1.414rem 0 0;
  color: #111213;
  padding: 0; }

h5 {
  font-family: Helvetica;
  font-size: 1.618rem;
  line-height: 1.2;
  margin: 1.414rem 0 0;
  color: #111213;
  padding: 0; }

h6 {
  font-family: Helvetica;
  font-size: 1rem;
  line-height: 1.2;
  margin: 1.414rem 0 0;
  color: #111213;
  padding: 0; }

@at-root .el-lang h1 {
  font-family: Helvetica !important;
  font-size: 8.09rem; }

@at-root .el-lang h2 {
  font-family: Helvetica !important;
  font-size: 6.854rem; }

@at-root .el-lang h3 {
  font-family: Helvetica !important;
  font-size: 3.236rem; }

@at-root .el-lang h4 {
  font-family: Helvetica !important;
  font-size: 2.618rem; }

@at-root .el-lang h5 {
  font-family: Helvetica !important;
  font-size: 1.618rem; }

@at-root .el-lang h6 {
  font-family: Helvetica !important;
  font-size: 1rem; }

p {
  font-size: 1rem;
  color: #111213;
  line-height: 1.625;
  margin: 1.6rem 0 0;
  padding: 0; }
  p a {
    transition: color 0.3s ease; }
    p a:hover {
      color: #CB023C; }
  p:first-child {
    margin-top: 0; }

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  /*
	&.list {

		li {

			margin: 0;

		}

	}
	*/ }
  ul li {
    font-size: 1rem;
    color: #111213;
    line-height: 1.625;
    margin: 1.6rem 0 0;
    padding: 0; }
    ul li:first-child {
      margin-top: 0; }

b {
  font-weight: 700; }

small {
  font-size: 0.618em; }

a {
  color: inherit;
  text-decoration: none;
  outline: none;
  border: 0; }

/*
	@file:
		_base.scss

	@description: 
		Base related rules
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
html body.el-lang {
  font-size: 50%; }

body {
  position: relative;
  text-rendering: optimizeLegibility;
  background: #1D1E20;
  overflow: hidden; }
  body.loader--init {
    overflow: visible; }
  body.presentation--init {
    overflow: hidden; }

#main {
  overflow: hidden; }
  @media (min-width: 20em) {
    #main {
      padding: 0; } }
  @media (min-width: 48.75em) {
    #main {
      padding: 0 5rem; } }
  @media (min-width: 58.75em) {
    #main {
      padding: 0; } }
  @media (min-width: 77.5em) {
    #main {
      padding: 0 6.875rem; } }

#render {
  opacity: 0;
  visibility: 0;
  transition: opacity 0.6s ease, visibility 0.6s ease; }
  .loader--init #render {
    opacity: 1;
    visibility: visible; }

#loader {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 16;
  background-color: #1D1E20;
  overflow: hidden; }

#loader__value {
  position: absolute;
  bottom: 5%;
  right: -6.25rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.1);
  z-index: 1;
  transition: opacity 1s ease, visibility 1s ease; }
  @media (min-width: 20em) {
    #loader__value {
      font-size: 10.9375rem; } }
  @media (min-width: 48.75em) {
    #loader__value {
      font-size: 15.625rem; } }
  @media (min-width: 58.75em) {
    #loader__value {
      font-size: 18.75rem; } }
  @media (min-width: 77.5em) {
    #loader__value {
      font-size: 18.75rem; } }
  .loader--init #loader__value {
    opacity: 0;
    visibility: 0; }

.loader__frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%; }

#loader__frame-1 {
  background-color: #111213; }

#loader__frame-2 {
  background-color: #CB023C; }

#presentation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFFFFF;
  transition: opacity 0.5s 0.1s ease, transform 0.5s 0.1s ease, visibility 0.5s 0.1s ease;
  transform: scale(0.9);
  opacity: 0;
  visibility: hidden;
  z-index: 15; }
  #presentation:before, #presentation:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0.3125rem;
    margin: -0.15625rem 0 0 -8.75rem;
    background-color: #111213;
    opacity: 0; }
  #presentation:before {
    width: 17.5rem;
    transition: none; }
    .presentation--init #presentation:before {
      opacity: 1;
      transition: opacity 0.5s ease; }
  #presentation:after {
    background-color: #CB023C; }
    .presentation--init #presentation:after {
      width: 17.5rem;
      opacity: 1;
      transition: width 0.4s 0.5s ease, opacity 0.5s ease; }
  .presentation--init #presentation {
    visibility: visible;
    opacity: 1;
    transform: scale(1); }

#presentation__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: block;
  cursor: pointer;
  width: 3.125rem;
  height: 3.125rem;
  z-index: 5; }
  .presentation--init #presentation__close:before {
    transform: rotate(45deg);
    opacity: 1;
    transition-delay: 1s; }
  .presentation--init #presentation__close:after {
    transform: rotate(-45deg);
    opacity: 1;
    transition-delay: 1s; }
  #presentation__close:before, #presentation__close:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: rotate(0deg); }

#presentation__frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2; }
  #presentation__frame iframe {
    width: 100%;
    height: 100%; }
  .presentation--init #presentation__frame {
    opacity: 1;
    transition-delay: 0.8s; }

.container {
  width: 100%;
  max-width: 72.5rem; }

.container--quote {
  max-width: 38.75rem; }

.container--landing--quote {
  max-width: 63.75rem; }

.content {
  padding: 0 1.25rem; }

.label--num:after {
  content: '.';
  color: #CB023C; }

.arrow {
  display: inline-block;
  margin-left: 0.9375rem;
  transition: transform 0.3s ease; }
  .arrow svg {
    height: 0.625rem; }

.arrow--red svg {
  fill: #CB023C; }

/*
	@file:
		_jquery-ui.scss

	@description: 
		Example of vendor based styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
/*
	@file:
		_styles.scss

	@description:
		Example of 'components' specific styles

	@implementation:
		File is included in the main.scss file via the
		@include function
*/
#header {
  position: fixed;
  right: 0;
  z-index: 10; }
  @media (min-width: 20em) {
    #header {
      left: 0;
      top: 0; } }
  @media (min-width: 48.75em) {
    #header {
      left: 0;
      top: 0; } }
  @media (min-width: 58.75em) {
    #header {
      left: 0;
      top: 1.875rem; } }
  @media (min-width: 77.5em) {
    #header {
      left: 1.875rem;
      top: 1.875rem; } }

#header__block {
  position: relative;
  height: 5rem;
  width: 100%; }

#header__trigger {
  display: block;
  width: 5rem;
  height: 5rem;
  background: #CB023C;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 1; }
  #header__trigger:hover .header__trigger__line--top {
    width: 100%; }
  #header__trigger:hover .header__trigger__line--middle {
    width: 80%; }
  #header__trigger:hover .header__trigger__line--bottom {
    width: 100%; }
  #header__trigger.active .header__trigger__line--top {
    width: 100%; }
  #header__trigger.active .header__trigger__line--middle {
    width: 100%; }
  #header__trigger.active .header__trigger__line--bottom {
    width: 100%; }

#header__trigger__inner {
  display: block;
  width: 2.1875rem;
  height: 0.9375rem;
  position: absolute;
  top: 50%;
  left: 1.375rem;
  margin-top: -0.4375rem; }

.header__trigger__line {
  display: block;
  height: 1px;
  background-color: #FFFFFF;
  margin-top: 0.375rem;
  transition: width 0.3s ease;
  width: 80%; }

.header__trigger__line--top {
  margin-top: 0; }

.header__trigger__line--middle {
  width: 100%; }

#header__wrapper {
  display: inline-block;
  position: absolute;
  top: 0;
  overflow: hidden; }
  @media (min-width: 20em) {
    #header__wrapper {
      max-width: 100%;
      width: 100%;
      height: 0;
      left: 0;
      padding-top: 5rem;
      opacity: 0;
      visibility: hidden;
      background-color: #161719; } }
  @media (min-width: 48.75em) {
    #header__wrapper {
      max-width: 100%;
      width: 100%;
      height: 0;
      left: 0;
      padding-top: 5rem;
      opacity: 0;
      visibility: hidden;
      background-color: #161719; } }
  @media (min-width: 58.75em) {
    #header__wrapper {
      max-width: 11.25rem;
      height: 5rem;
      width: 100%;
      left: 5rem;
      padding: 0;
      opacity: 1;
      visibility: visible;
      background-color: #FFFFFF; } }
  @media (min-width: 77.5em) {
    #header__wrapper {
      max-width: 11.25rem;
      height: 5rem;
      width: calc(100% - 16.25rem);
      left: 5rem;
      padding: 0;
      opacity: 1;
      visibility: visible;
      background-color: #FFFFFF; } }

#header__logo {
  text-align: center; }
  @media (min-width: 20em) {
    #header__logo {
      display: block;
      padding: 0;
      position: absolute;
      top: 0;
      left: 5rem;
      right: 0;
      background: #FFFFFF;
      height: 5rem; } }
  @media (min-width: 48.75em) {
    #header__logo {
      display: block;
      padding: 0;
      position: absolute;
      top: 0;
      left: 5rem;
      right: 0;
      background: #FFFFFF;
      height: 5rem; } }
  @media (min-width: 58.75em) {
    #header__logo {
      display: block;
      float: left;
      padding: 1.9375rem 0 1.875rem 1.875rem;
      height: auto;
      position: static; } }
  @media (min-width: 77.5em) {
    #header__logo {
      display: block;
      float: left;
      padding: 1.9375rem 2.5rem 1.875rem 2.5rem;
      height: auto;
      position: static; } }
  #header__logo a {
    display: inline-block; }
    @media (min-width: 20em) {
      #header__logo a {
        width: 10rem;
        float: left;
        margin: 1.5625rem 0 0 1.875rem; } }
    @media (min-width: 48.75em) {
      #header__logo a {
        width: 10rem;
        float: left;
        margin: 1.5625rem 0 0 1.875rem; } }
    @media (min-width: 58.75em) {
      #header__logo a {
        width: 6.25rem;
        float: none;
        margin: 0; } }
    @media (min-width: 77.5em) {
      #header__logo a {
        width: 6.25rem;
        float: none;
        margin: 0; } }
    #header__logo a svg {
      display: block;
      width: 100%;
      height: auto; }

#header__nav {
  float: right;
  display: inline-block; }
  @media (min-width: 20em) {
    #header__nav {
      padding: 0;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%); } }
  @media (min-width: 48.75em) {
    #header__nav {
      padding: 0;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%); } }
  @media (min-width: 58.75em) {
    #header__nav {
      padding: 0;
      position: absolute;
      top: 50%;
      left: auto;
      right: 0;
      transform: translateY(-50%); } }
  @media (min-width: 77.5em) {
    #header__nav {
      padding: 0 1.25rem 0 0;
      position: static;
      top: auto;
      left: auto;
      right: auto;
      transform: none; } }

.list__node--header__nav {
  display: block;
  margin: 0;
  font-family: "blanchcaps", Helvetica, sans-serif;
  line-height: 1;
  visibility: hidden;
  position: relative;
  opacity: 0;
  text-align: center;
  transform: translateX(-20px); }
  @media (min-width: 20em) {
    .list__node--header__nav {
      font-size: 2.875rem;
      float: none;
      color: #FFFFFF;
      margin: 0; } }
  @media (min-width: 48.75em) {
    .list__node--header__nav {
      font-size: 3.5rem;
      float: none;
      color: #FFFFFF;
      margin: 0; } }
  @media (min-width: 58.75em) {
    .list__node--header__nav {
      font-size: 1.625rem;
      float: left;
      color: #3C3C3B;
      margin: 0 0.3125rem; } }
  @media (min-width: 77.5em) {
    .list__node--header__nav {
      font-size: 1.625rem;
      float: left;
      color: #3C3C3B;
      margin: 0 0.3125rem; } }
  .list__node--header__nav:hover a, .list__node--header__nav.active a {
    color: #BCBCBC; }
    .list__node--header__nav:hover a:before, .list__node--header__nav.active a:before {
      width: 100%; }
  .list__node--header__nav a {
    color: inherit;
    text-decoration: none;
    position: relative;
    z-index: 1;
    display: inline-block;
    transition: color 0.3s ease; }
    @media (min-width: 20em) {
      .list__node--header__nav a {
        padding: 0.3125rem 1.875rem; } }
    @media (min-width: 48.75em) {
      .list__node--header__nav a {
        padding: 0.3125rem 1.875rem; } }
    @media (min-width: 58.75em) {
      .list__node--header__nav a {
        padding: 1.6875rem 0.3125rem; } }
    @media (min-width: 77.5em) {
      .list__node--header__nav a {
        padding: 1.6875rem 0.3125rem; } }
    @media (min-width: 105em) {
      .list__node--header__nav a {
        padding: 1.6875rem 1.25rem; } }
    .list__node--header__nav a:before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      width: 0;
      left: 0;
      height: 2px;
      background-color: #CB023C;
      transition: width 0.3s ease; }
  @media (min-width: 20em) {
    .list__node--header__nav.config-link {
      display: block; } }
  @media (min-width: 48.75em) {
    .list__node--header__nav.config-link {
      display: block; } }
  @media (min-width: 58.75em) {
    .list__node--header__nav.config-link {
      display: block; } }
  @media (min-width: 77.5em) {
    .list__node--header__nav.config-link {
      display: none; } }

@media (min-width: 20em) {
  .config-link {
    display: block; } }
@media (min-width: 48.75em) {
  .config-link {
    display: block; } }
@media (min-width: 58.75em) {
  .config-link {
    display: block; } }
@media (min-width: 77.5em) {
  .config-link {
    display: none; } }

#header__settings {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 1.875rem;
  text-align: center;
  font-family: "blanchcaps", Helvetica, sans-serif;
  font-size: 1.875rem;
  color: #cb023c;
  line-height: 1;
  transition: color 0.3s ease; }
  @media (min-width: 20em) {
    #header__settings {
      display: none;
      width: 0; } }
  @media (min-width: 48.75em) {
    #header__settings {
      display: none;
      width: 0; } }
  @media (min-width: 58.75em) {
    #header__settings {
      display: none;
      width: 0; } }
  @media (min-width: 77.5em) {
    #header__settings {
      display: inline-block;
      width: auto; } }
  #header__settings:hover, #header__settings.active {
    color: #E6E6E6; }
  #header__settings a {
    color: inherit;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    padding: 1.5625rem 0; }
  #header__settings:after {
    content: '';
    display: block;
    width: 0.9375rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #3C3C3B; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'components' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
#hero {
  position: relative;
  width: 100%;
  z-index: 5; }
  @media (min-width: 20em) {
    #hero {
      height: auto; } }
  @media (min-width: 48.75em) {
    #hero {
      height: auto; } }
  @media (min-width: 58.75em) {
    #hero {
      height: 100vh; } }
  @media (min-width: 77.5em) {
    #hero {
      height: 100vh; } }
  #hero.flow--init #hero__content h1:before {
    max-width: 12.5rem; }
  #hero.flow--init #hero__cta__arrow {
    max-width: 5rem; }
  #hero.flow--init #hero__cta__excerpt {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); }

#hero__cta {
  position: fixed;
  transform: rotate(90deg);
  cursor: pointer;
  z-index: 2; }
  @media (min-width: 20em) {
    #hero__cta {
      top: 70vh;
      left: -2.375rem; } }
  @media (min-width: 48.75em) {
    #hero__cta {
      top: 80vh;
      left: -2.125rem; } }
  @media (min-width: 58.75em) {
    #hero__cta {
      top: 80vh;
      left: -1.8125rem; } }
  @media (min-width: 77.5em) {
    #hero__cta {
      top: 80vh;
      left: -1.1875rem; } }

#hero__cta__arrow {
  display: block;
  height: 1px;
  background-color: #FFFFFF;
  width: 100%;
  max-width: 0;
  position: absolute;
  left: 0;
  top: 6px;
  transition: max-width 1s 0.6s ease; }

#hero__cta__excerpt {
  font-size: 0.875rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  font-weight: 700;
  color: #464646;
  text-transform: uppercase;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  padding-left: 5.625rem;
  transition: all 1s 0.6s ease; }

#hero__image {
  overflow: hidden;
  top: 0;
  left: 0; }
  @media (min-width: 20em) {
    #hero__image {
      position: relative;
      position: relative;
      width: 100%; }
      #hero__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      #hero__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 48.75em) {
    #hero__image {
      position: relative;
      position: relative;
      width: 100%; }
      #hero__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 100%; }
      #hero__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 58.75em) {
    #hero__image {
      position: absolute;
      width: 50%;
      height: 100%; } }
  @media (min-width: 77.5em) {
    #hero__image {
      position: absolute;
      width: 50%;
      height: 100%; } }

#hero__canvas {
  background-size: auto 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%; }

#hero__content {
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px); }
  @media (min-width: 20em) {
    #hero__content {
      padding: 7.5rem 0;
      width: 100%;
      position: relative; } }
  @media (min-width: 48.75em) {
    #hero__content {
      padding: 7.5rem 0;
      width: 100%;
      position: relative; } }
  @media (min-width: 58.75em) {
    #hero__content {
      padding: 0;
      width: 50%;
      position: absolute; } }
  @media (min-width: 77.5em) {
    #hero__content {
      padding: 0;
      width: 50%;
      position: absolute; } }
  @media (min-width: 20em) {
    #hero__content .hero__content__wrapper {
      position: static;
      top: 0;
      padding: 0 4.375rem;
      margin: 0;
      transform: none; } }
  @media (min-width: 48.75em) {
    #hero__content .hero__content__wrapper {
      position: static;
      top: 0;
      padding: 0 4.375rem;
      margin: 0;
      transform: none; } }
  @media (min-width: 58.75em) {
    #hero__content .hero__content__wrapper {
      position: absolute;
      top: 50%;
      padding: 0 4.375rem 1.875rem;
      margin: 0;
      transform: translateY(-50%); } }
  @media (min-width: 77.5em) {
    #hero__content .hero__content__wrapper {
      position: absolute;
      top: 50%;
      padding: 0 4.375rem 1.875rem;
      margin: 0;
      transform: translateY(-50%); } }
  #hero__content h1 {
    position: relative;
    font-family: "blanchcaps_light", Helvetica, sans-serif;
    line-height: 0.8;
    color: #FFFFFF;
    @at-root body.el-lang {
      font-family: Helvetica; }
 }
    @media (min-width: 20em) {
      #hero__content h1 {
        font-size: 5rem; } }
    @media (min-width: 48.75em) {
      #hero__content h1 {
        font-size: 5.625rem; } }
    @media (min-width: 58.75em) {
      #hero__content h1 {
        font-size: 6.25rem;
        padding-bottom: 1.875rem; } }
    @media (min-width: 77.5em) {
      #hero__content h1 {
        font-size: 6.25rem;
        padding-bottom: 1.875rem; } }
    #hero__content h1:before {
      content: '';
      display: block;
      width: 30%;
      height: 3px;
      background-color: #FFFFFF;
      position: absolute;
      bottom: 0;
      right: 100%;
      max-width: 0;
      transition: max-width 0.6s 1.6s ease; }
  @media (min-width: 20em) {
    #hero__content #hero__text {
      margin-top: 2.5rem; } }
  @media (min-width: 77.5em) {
    #hero__content #hero__text {
      margin-top: 5rem; } }
  #hero__content #hero__text p {
    font-size: 1.125rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    color: #FFFFFF; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'components' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
#hero {
  position: relative;
  width: 100%;
  z-index: 5; }
  @media (min-width: 20em) {
    #hero {
      height: auto; } }
  @media (min-width: 48.75em) {
    #hero {
      height: auto; } }
  @media (min-width: 58.75em) {
    #hero {
      height: 100vh; } }
  @media (min-width: 77.5em) {
    #hero {
      height: 100vh; } }
  #hero.flow--init #hero__content h1:before {
    max-width: 12.5rem; }
  #hero.flow--init #hero__cta__arrow {
    max-width: 5rem; }
  #hero.flow--init #hero__cta__excerpt {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); }

#hero__cta {
  position: fixed;
  transform: rotate(90deg);
  cursor: pointer;
  z-index: 2; }
  @media (min-width: 20em) {
    #hero__cta {
      top: 70vh;
      left: -2.375rem; } }
  @media (min-width: 48.75em) {
    #hero__cta {
      top: 80vh;
      left: -2.125rem; } }
  @media (min-width: 58.75em) {
    #hero__cta {
      top: 80vh;
      left: -1.8125rem; } }
  @media (min-width: 77.5em) {
    #hero__cta {
      top: 80vh;
      left: -1.1875rem; } }

#hero__cta__arrow {
  display: block;
  height: 1px;
  background-color: #FFFFFF;
  width: 100%;
  max-width: 0;
  position: absolute;
  left: 0;
  top: 6px;
  transition: max-width 1s 0.6s ease; }

#hero__cta__excerpt {
  font-size: 0.875rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  font-weight: 700;
  color: #464646;
  text-transform: uppercase;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  padding-left: 5.625rem;
  transition: all 1s 0.6s ease; }

#hero__image {
  overflow: hidden;
  top: 0;
  left: 0; }
  @media (min-width: 20em) {
    #hero__image {
      position: relative;
      position: relative;
      width: 100%; }
      #hero__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      #hero__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 48.75em) {
    #hero__image {
      position: relative;
      position: relative;
      width: 100%; }
      #hero__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 100%; }
      #hero__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 58.75em) {
    #hero__image {
      position: absolute;
      width: 50%;
      height: 100%; } }
  @media (min-width: 77.5em) {
    #hero__image {
      position: absolute;
      width: 50%;
      height: 100%; } }

#hero__canvas {
  background-size: auto 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%; }

#hero__content {
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px); }
  @media (min-width: 20em) {
    #hero__content {
      padding: 7.5rem 0;
      width: 100%;
      position: relative; } }
  @media (min-width: 48.75em) {
    #hero__content {
      padding: 7.5rem 0;
      width: 100%;
      position: relative; } }
  @media (min-width: 58.75em) {
    #hero__content {
      padding: 0;
      width: 50%;
      position: absolute; } }
  @media (min-width: 77.5em) {
    #hero__content {
      padding: 0;
      width: 50%;
      position: absolute; } }
  @media (min-width: 20em) {
    #hero__content .hero__content__wrapper {
      position: static;
      top: 0;
      padding: 0 4.375rem;
      margin: 0;
      transform: none; } }
  @media (min-width: 48.75em) {
    #hero__content .hero__content__wrapper {
      position: static;
      top: 0;
      padding: 0 4.375rem;
      margin: 0;
      transform: none; } }
  @media (min-width: 58.75em) {
    #hero__content .hero__content__wrapper {
      position: absolute;
      top: 50%;
      padding: 0 4.375rem 1.875rem;
      margin: 0;
      transform: translateY(-50%); } }
  @media (min-width: 77.5em) {
    #hero__content .hero__content__wrapper {
      position: absolute;
      top: 50%;
      padding: 0 4.375rem 1.875rem;
      margin: 0;
      transform: translateY(-50%); } }
  #hero__content h1 {
    position: relative;
    font-family: "blanchcaps_light", Helvetica, sans-serif;
    line-height: 0.8;
    color: #FFFFFF;
    @at-root body.el-lang {
      font-family: Helvetica; }
 }
    @media (min-width: 20em) {
      #hero__content h1 {
        font-size: 5rem; } }
    @media (min-width: 48.75em) {
      #hero__content h1 {
        font-size: 5.625rem; } }
    @media (min-width: 58.75em) {
      #hero__content h1 {
        font-size: 6.25rem;
        padding-bottom: 1.875rem; } }
    @media (min-width: 77.5em) {
      #hero__content h1 {
        font-size: 6.25rem;
        padding-bottom: 1.875rem; } }
    #hero__content h1:before {
      content: '';
      display: block;
      width: 30%;
      height: 3px;
      background-color: #FFFFFF;
      position: absolute;
      bottom: 0;
      right: 100%;
      max-width: 0;
      transition: max-width 0.6s 1.6s ease; }
  @media (min-width: 20em) {
    #hero__content #hero__text {
      margin-top: 2.5rem; } }
  @media (min-width: 77.5em) {
    #hero__content #hero__text {
      margin-top: 5rem; } }
  #hero__content #hero__text p {
    font-size: 1.125rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    color: #FFFFFF; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'components' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
#slider {
  width: 100%;
  position: relative;
  z-index: 3; }
  @media (min-width: 20em) {
    #slider {
      position: relative; }
      #slider:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 200%; }
      #slider > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 48.75em) {
    #slider {
      position: relative; }
      #slider:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      #slider > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 58.75em) {
    #slider {
      position: relative; }
      #slider:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 56.25%; }
      #slider > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    #slider {
      position: relative; }
      #slider:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 56.25%; }
      #slider > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }

#slider__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

#slider__prev {
  position: absolute;
  top: 0;
  height: 100%; }
  @media (min-width: 20em) {
    #slider__prev {
      display: block;
      width: 5rem;
      left: 0; } }
  @media (min-width: 48.75em) {
    #slider__prev {
      display: block;
      width: 5rem;
      left: -5rem; } }
  @media (min-width: 58.75em) {
    #slider__prev {
      display: block;
      width: 5rem;
      left: 0; } }
  @media (min-width: 77.5em) {
    #slider__prev {
      display: block;
      width: 6.875rem;
      left: -6.875rem; } }
  #slider__prev .arrow--slider {
    left: 1.875rem;
    transform: rotate(180deg); }
  #slider__prev .slider__controls {
    left: 0; }

#slider__next {
  position: absolute;
  top: 0;
  height: 100%; }
  @media (min-width: 20em) {
    #slider__next {
      display: block;
      width: 5rem;
      right: 0; } }
  @media (min-width: 48.75em) {
    #slider__next {
      display: block;
      width: 5rem;
      right: -5rem; } }
  @media (min-width: 58.75em) {
    #slider__next {
      display: block;
      width: 5rem;
      right: 0; } }
  @media (min-width: 77.5em) {
    #slider__next {
      display: block;
      width: 6.875rem;
      right: -6.875rem; } }
  #slider__next .arrow--slider {
    right: 1.875rem; }
  #slider__next .slider__controls {
    right: 0; }

.slider__node {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.slider__controls {
  position: absolute;
  top: 50%;
  height: 3.75rem;
  background-color: #111213;
  transform: translateY(-50%);
  z-index: 3;
  cursor: pointer;
  overflow: hidden; }
  @media (min-width: 20em) {
    .slider__controls {
      width: 5rem; }
      .slider__controls:hover {
        width: 5rem; } }
  @media (min-width: 48.75em) {
    .slider__controls {
      width: 9.0625rem; }
      .slider__controls:hover {
        width: 9.6875rem; } }
  @media (min-width: 58.75em) {
    .slider__controls {
      width: 9.0625rem; }
      .slider__controls:hover {
        width: 9.6875rem; } }
  @media (min-width: 77.5em) {
    .slider__controls {
      width: 10rem; }
      .slider__controls:hover {
        width: 10.625rem; } }
  .slider__controls.animateHover {
    transition: width 0.3s ease; }

#slider__slides {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden; }

.slider__slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-color: #161719;
  background-position: center; }
  .slider__slide.active {
    z-index: 2; }
  .slider__slide.init {
    z-index: 1; }

.arrow--slider {
  top: 50%;
  position: absolute;
  display: block;
  height: 0.875rem;
  margin: 0;
  margin-top: -0.4375rem;
  transform: none; }
  .arrow--slider svg {
    fill: #FFFFFF;
    height: 0.875rem; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'components' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
#footer {
  margin-top: 12.5rem;
  margin-bottom: 6.25rem; }
  #footer .container {
    position: relative;
    max-width: 100%; }
  #footer .content {
    padding: 6.25rem 0;
    position: relative;
    max-width: 72.5rem;
    box-sizing: border-box;
    margin: 0 auto; }

#footer__block {
  position: relative; }

#footer__mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #111213; }

#footer__nodes {
  box-sizing: border-box; }

.footer__node {
  float: left;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }
  @media (min-width: 20em) {
    .footer__node {
      width: 100%;
      padding: 1.25rem 2.5rem; } }
  @media (min-width: 48.75em) {
    .footer__node {
      width: 50%;
      padding: 1.25rem 2.5rem; } }
  @media (min-width: 58.75em) {
    .footer__node {
      width: 25%;
      padding: 0 2.5rem; } }
  @media (min-width: 77.5em) {
    .footer__node {
      width: 25%;
      padding: 0 2.5rem; } }
  .footer__node h4 {
    font-size: 0.875rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    line-height: 1.4175rem;
    color: #FFFFFF;
    margin: 0 0 0.54012rem;
    padding: 0;
    text-transform: uppercase; }
  .footer__node a {
    transition: all 0.3s ease; }
    .footer__node a:hover {
      color: #CB023C;
      text-decoration: none; }

#footer__copyright {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }

.list--footer_node {
  list-style-type: none;
  margin: 0;
  padding: 0; }

.list__node--footer_node {
  font-size: 0.875rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  line-height: 1.4175rem;
  color: #464646;
  margin: 0;
  padding: 0; }

#footer__logo {
  display: block;
  max-width: 8.75rem; }
  #footer__logo svg {
    width: 100%;
    height: auto; }

#footer__newsletter {
  float: left;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }
  @media (min-width: 20em) {
    #footer__newsletter {
      width: 100%;
      padding-left: 0;
      margin-top: 2.5rem; } }
  @media (min-width: 48.75em) {
    #footer__newsletter {
      width: 100%;
      padding-left: 0;
      margin-top: 2.5rem; } }
  @media (min-width: 58.75em) {
    #footer__newsletter {
      width: 40%;
      padding-left: 1.25rem;
      margin-top: 0; } }
  @media (min-width: 77.5em) {
    #footer__newsletter {
      width: 30%;
      padding-left: 1.25rem;
      margin-top: 0; } }
  #footer__newsletter h4 {
    font-size: 1rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.62rem;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    text-transform: uppercase; }
  #footer__newsletter p {
    font-size: 0.875rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    line-height: 1.215rem;
    color: #464646;
    margin: 0.625rem 0 0;
    padding: 0; }

#footer__copyright {
  position: relative;
  padding: 5rem 2.5rem 0; }

.list--footer_copyright {
  float: left;
  margin-top: 1.25rem; }

.list__node--footer_copyright {
  font-size: 0.875rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  line-height: 1.5rem;
  color: #FFFFFF;
  margin: 0 0.625rem 0 0;
  padding: 0 0 0 0.625rem;
  float: left;
  position: relative; }
  .list__node--footer_copyright:after {
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    background-color: #FFFFFF;
    position: absolute;
    top: 6px;
    left: 0; }
  .list__node--footer_copyright:first-child {
    padding: 0; }
    .list__node--footer_copyright:first-child:after {
      display: none; }
  .list__node--footer_copyright:last-child {
    margin: 0;
    border: 0; }
  .list__node--footer_copyright a {
    transition: color 0.3s ease;
    text-decoration: none; }
    .list__node--footer_copyright a:hover {
      color: #CB023C; }

.list--footer_social {
  margin-top: 1.25rem; }
  @media (min-width: 20em) {
    .list--footer_social {
      float: left; } }
  @media (min-width: 48.75em) {
    .list--footer_social {
      float: right; } }
  @media (min-width: 58.75em) {
    .list--footer_social {
      float: right; } }
  @media (min-width: 77.5em) {
    .list--footer_social {
      float: right; } }

.list__node--footer_social {
  float: left;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0 0 1.25rem;
  padding: 0; }
  .list__node--footer_social:first-child {
    margin: 0; }
  .list__node--footer_social a {
    display: block;
    width: inherit;
    height: inherit; }
    .list__node--footer_social a:hover path {
      fill: #CB023C; }
    .list__node--footer_social a svg {
      width: inherit;
      height: inherit; }
      .list__node--footer_social a svg path {
        transition: all 0.3s ease; }

#newsletter__fieldset {
  background-color: #FFFFFF;
  width: 100%;
  height: 2.5rem;
  box-sizing: border-box;
  padding: 0.625rem;
  margin: 0.9375rem 0 0;
  position: relative; }

#newsletter__input {
  font-size: 0.875rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  line-height: 1;
  color: #464646; }

#newsletter__submit {
  display: block;
  position: absolute;
  top: 0.875rem;
  right: 0.625rem;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #E6E6E6;
  outline: none; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
.section {
  position: relative;
  z-index: 4; }
  @media (min-width: 58.75em) {
    .section {
      margin: -3.125rem 0 0; } }
  @media (min-width: 77.5em) {
    .section {
      margin: -3.125rem 0 0; } }
  .section.flow--complete .section__content a:after {
    transition-delay: 0s; }
  .section.flow--complete .section__content a:hover:after {
    width: 5rem; }
  .section.flow--init .section__content h3:before {
    max-width: 18.75rem; }
  .section.flow--init .section__content a:after {
    width: 3.125rem; }
  .section.flow--init .section__num:after {
    max-height: 6.25rem; }

.section__mask {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden; }

.section__image {
  position: relative; }
  @media (min-width: 20em) {
    .section__image {
      position: relative;
      width: 100%;
      top: 0;
      overflow: hidden; }
      .section__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 48.75em) {
    .section__image {
      position: relative;
      width: 100%;
      top: 0;
      overflow: visible; }
      .section__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 100%; }
      .section__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 58.75em) {
    .section__image {
      position: relative;
      width: 50%;
      top: 3.125rem; }
      .section__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    .section__image {
      position: relative;
      width: 50%;
      top: 3.125rem; }
      .section__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  .section__image .section__mask {
    background-color: #FFFFFF;
    top: 0; }

.section__canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px); }

.section__content {
  top: 0;
  right: 0;
  bottom: 0; }
  @media (min-width: 20em) {
    .section__content {
      width: 100%;
      float: left;
      position: relative;
      overflow: hidden; } }
  @media (min-width: 48.75em) {
    .section__content {
      width: 100%;
      float: left;
      position: relative;
      overflow: visible; } }
  @media (min-width: 58.75em) {
    .section__content {
      position: relative;
      width: 50%;
      float: none;
      position: absolute; }
      .section__content:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__content > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    .section__content {
      position: relative;
      width: 50%;
      float: none;
      position: absolute; }
      .section__content:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__content > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  .section__content .section__mask {
    background-color: #E6E6E6;
    bottom: 0; }

@media (min-width: 20em) {
  .section__content__inner {
    position: static;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    padding: 5.625rem 2.5rem; } }
@media (min-width: 48.75em) {
  .section__content__inner {
    position: static;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    padding: 7.5rem 4.375rem; } }
@media (min-width: 58.75em) {
  .section__content__inner {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 4.375rem; } }
@media (min-width: 77.5em) {
  .section__content__inner {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 4.375rem; } }
.section__content__inner h3 {
  font-family: "blanchcaps", Helvetica, sans-serif;
  font-size: 5.625rem;
  line-height: 0.8;
  color: #1D1E20;
  margin: 0 0 1.25rem;
  padding: 0;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px); }
  .section__content__inner h3:before {
    content: '';
    display: block;
    width: 50%;
    height: 1px;
    background-color: #111213;
    position: absolute;
    right: 100%;
    top: 2.5rem;
    transform: translateX(-35px);
    max-width: 0;
    transition: max-width 0.6s 1.6s ease; }
.section__content__inner p {
  font-family: "proxima-nova", Helvetica, sans-serif;
  color: #464646;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px); }
.render__index .section__content__inner a {
  font-size: 1rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.625;
  color: #111213;
  margin: 1.6rem 0 0;
  padding: 0;
  display: inline-block;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px); }
  .render__index .section__content__inner a:after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background-color: #CB023C;
    margin-top: 0.3125rem;
    transition: width 0.6s 1.6s ease; }

.section__meta {
  position: absolute;
  left: 5.625rem;
  right: 5.625rem;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-30px); }

.section__icon {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0.25rem;
  padding-bottom: 30%; }
  .section__icon a {
    display: inline-block;
    width: 2.5rem;
    margin-right: 1.25rem;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease; }
    .section__icon a.presentation--cardboard {
      margin: 0;
      width: 2.75rem; }
    .section__icon a:hover {
      transform: scale(1.2); }
  .section__icon svg {
    display: block;
    width: 100%;
    max-height: 1.875rem;
    height: auto; }

.section__num {
  font-family: "blanchcaps", Helvetica, sans-serif;
  font-size: 3.25rem;
  line-height: 0.6;
  color: #111213;
  float: right;
  display: inline-block;
  padding-bottom: 30%;
  position: relative; }
  .section__num:after {
    content: '';
    display: block;
    width: 4px;
    height: 50%;
    background-color: #CB023C;
    position: absolute;
    left: 40%;
    bottom: 0;
    margin-left: -2px;
    max-height: 0;
    transition: max-height 0.6s 1.6s ease; }

.quote {
  margin: 0; }
  .quote .container {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    position: relative;
    z-index: 2; }
  .quote h2 {
    margin: 0;
    padding: 0;
    font-family: "blanchcaps_light", Helvetica, sans-serif;
    font-size: 5rem;
    line-height: 0.8;
    color: #FFFFFF;
    position: relative;
    z-index: 1; }

.quote__wrapper {
  position: relative;
  padding: 7.5rem 0; }

.quote__stripe {
  content: '';
  height: 50%;
  width: 0;
  position: absolute; }

.quote__stripe--top {
  top: 0;
  left: 0;
  background-color: #161719; }

.quote__stripe--bottom {
  bottom: 0;
  right: 0;
  background-color: #111213; }

#news {
  padding: 7.5rem 0 0; }
  #news.flow--init .news__meta h3:after {
    width: 3.75rem; }
  #news h2 {
    margin: 0;
    padding: 0;
    font-family: "blanchcaps_light", Helvetica, sans-serif;
    font-size: 5rem;
    line-height: 0.8;
    color: #FFFFFF;
    position: relative;
    z-index: 1;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px); }
  #news .container {
    position: relative;
    max-width: 100%; }
  #news .content {
    padding: 5rem 5% 0;
    max-width: 72.5rem;
    box-sizing: border-box;
    margin: 0 auto; }

#news__stripe {
  background-color: #161719;
  width: 0;
  height: 12.5rem;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -9.375rem; }

.news__node {
  position: relative;
  z-index: 1; }
  @media (min-width: 20em) {
    .news__node {
      width: 100%;
      margin-bottom: 1.875rem; } }
  @media (min-width: 48.75em) {
    .news__node {
      width: 100%;
      margin-bottom: 1.875rem; } }
  @media (min-width: 58.75em) {
    .news__node {
      width: 45%;
      margin-bottom: 0; } }
  @media (min-width: 77.5em) {
    .news__node {
      width: 45%;
      margin-bottom: 0; } }
  .news__node:nth-child(1) {
    float: left; }
  .news__node:nth-child(2) {
    float: right; }

.news__thumb {
  position: relative;
  position: relative;
  overflow: hidden; }
  .news__thumb:before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 100%; }
  .news__thumb > .ratio-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.news__canvas {
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat; }

.news__letter {
  font-family: "blanchcondensed_inline", Helvetica, sans-serif;
  line-height: 0.8;
  color: #FFFFFF;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }
  @media (min-width: 20em) {
    .news__letter {
      font-size: 12.5rem;
      margin-top: -5rem; } }
  @media (min-width: 48.75em) {
    .news__letter {
      font-size: 13.75rem;
      margin-top: -5.625rem; } }
  @media (min-width: 58.75em) {
    .news__letter {
      font-size: 13.75rem;
      margin-top: -5.625rem; } }
  @media (min-width: 77.5em) {
    .news__letter {
      font-size: 16.25rem;
      margin-top: -6.875rem; } }

.news__meta {
  padding: 1.25rem 0 0 35%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }
  .news__meta h3 {
    font-size: 0.875rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    line-height: 1.85714;
    color: #FFFFFF;
    margin: 0 0 1.4rem;
    padding: 0;
    position: relative; }
    .news__meta h3:after {
      content: '';
      position: absolute;
      top: 0.625rem;
      left: -5rem;
      display: block;
      width: 0;
      height: 3px;
      background-color: #CB023C;
      transition: width 0.6s 3s ease; }
  .news__meta a {
    font-size: 0.875rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.85714;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    transition: color 0.3s ease; }
    .news__meta a:hover {
      color: #CB023C; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
.counter__node {
  text-align: center;
  padding: 3.125rem 0 4.375rem;
  float: left;
  position: relative; }
  @media (min-width: 20em) {
    .counter__node {
      width: 100%; } }
  @media (min-width: 48.75em) {
    .counter__node {
      width: 100%; } }
  @media (min-width: 58.75em) {
    .counter__node {
      width: 33.33333%; } }
  @media (min-width: 77.5em) {
    .counter__node {
      width: 33.33333%; } }
  .counter__node:nth-child(1) {
    z-index: 3; }
    .counter__node:nth-child(1) .counter__mask {
      background-color: #a50936; }
  .counter__node:nth-child(2) {
    z-index: 2; }
    .counter__node:nth-child(2) .counter__mask {
      background-color: #930c34; }
  .counter__node:nth-child(3) {
    z-index: 1; }
    .counter__node:nth-child(3) .counter__mask {
      background-color: #800f30; }

.counter__mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%; }

.counter__value {
  font-family: "blanchcaps_inline", Helvetica, sans-serif;
  font-size: 5rem;
  line-height: 1;
  color: #FFFFFF;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }

.counter__excerpt {
  font-family: "blanchcaps_inline", Helvetica, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: #FFFFFF;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }

.content_split {
  position: relative; }
  .content_split.flowComplete .content_split__left:before {
    width: 3.125rem; }
  .content_split p {
    font-size: 1rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    line-height: 1.625;
    color: #464646;
    margin: 0;
    padding: 0; }

.content_split__mask {
  background-color: #FFFFFF;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%; }

.content_split__inner {
  position: relative;
  z-index: 1;
  padding: 3.125rem 0; }

.content_split__left {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  float: left;
  box-sizing: border-box;
  position: relative; }
  .content_split__left:before {
    transition: width 1s ease; }
  @media (min-width: 20em) {
    .content_split__left {
      width: 100%;
      padding: 3.125rem 2.5rem; }
      .content_split__left:before {
        content: '';
        display: block;
        width: 0;
        height: 4px;
        background-color: #CB023C;
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 1; } }
  @media (min-width: 48.75em) {
    .content_split__left {
      width: 100%;
      padding: 3.125rem 2.5rem; }
      .content_split__left:before {
        content: '';
        display: block;
        width: 0;
        height: 4px;
        background-color: #CB023C;
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 1; } }
  @media (min-width: 58.75em) {
    .content_split__left {
      width: 50%;
      padding: 3.125rem 5.625rem; }
      .content_split__left:before {
        content: '';
        display: block;
        width: 0;
        height: 4px;
        background-color: #CB023C;
        position: absolute;
        top: 50%;
        left: auto;
        bottom: auto;
        right: -1.5625rem;
        margin: -2px 0 0;
        z-index: 1; } }
  @media (min-width: 77.5em) {
    .content_split__left {
      width: 50%;
      padding: 3.125rem 5.625rem; }
      .content_split__left:before {
        content: '';
        display: block;
        width: 0;
        height: 4px;
        background-color: #CB023C;
        position: absolute;
        top: 50%;
        left: auto;
        bottom: auto;
        right: -1.5625rem;
        margin: -2px 0 0;
        z-index: 1; } }

.content_split__right {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  float: left;
  box-sizing: border-box; }
  @media (min-width: 20em) {
    .content_split__right {
      width: 100%;
      padding: 3.125rem 2.5rem; } }
  @media (min-width: 48.75em) {
    .content_split__right {
      width: 100%;
      padding: 3.125rem 2.5rem; } }
  @media (min-width: 58.75em) {
    .content_split__right {
      width: 50%;
      padding: 3.125rem 5rem; } }
  @media (min-width: 77.5em) {
    .content_split__right {
      width: 50%;
      padding: 3.125rem 5rem; } }

@media (min-width: 20em) {
  .highlight--base .highlight__content__excerpt {
    padding-left: 0;
    text-align: center; } }
@media (min-width: 48.75em) {
  .highlight--base .highlight__content__excerpt {
    padding-left: 7.5rem;
    text-align: left; } }
@media (min-width: 58.75em) {
  .highlight--base .highlight__content__excerpt {
    padding-left: 10rem; } }
@media (min-width: 77.5em) {
  .highlight--base .highlight__content__excerpt {
    padding-left: 10rem; } }

.highlight--raw .highlight__content__excerpt {
  text-align: center; }

.highlight__mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #111213; }

.highlight__image {
  position: relative;
  width: 100%;
  overflow: hidden;
  position: relative; }
  .highlight__image:before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 56.25%; }
  .highlight__image > .ratio-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }

.highlight__canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.highlight__content {
  position: relative;
  z-index: 1; }
  @media (min-width: 20em) {
    .highlight__content {
      padding: 5rem 2.5rem; } }
  @media (min-width: 48.75em) {
    .highlight__content {
      padding: 6.25rem 2.5rem; } }
  @media (min-width: 58.75em) {
    .highlight__content {
      padding: 6.25rem 1.25rem; } }
  @media (min-width: 77.5em) {
    .highlight__content {
      padding: 6.25rem 1.25rem; } }

.highlight__content__inner {
  max-width: 51.25rem;
  position: relative;
  margin: 0 auto; }

.highlight__content__icon {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  float: left; }
  @media (min-width: 20em) {
    .highlight__content__icon {
      width: 100%;
      margin: 0 0 2.5rem; } }
  @media (min-width: 48.75em) {
    .highlight__content__icon {
      width: auto;
      margin: 0; } }
  .highlight__content__icon img {
    margin: 0 auto;
    display: block; }

.retina--64 {
  width: 4rem; }

.highlight__content__icon__excerpt {
  font-family: "blanchcaps_inline", Helvetica, sans-serif;
  font-size: 3.125rem;
  line-height: 1;
  color: #FFFFFF;
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
  width: 100%; }

.highlight__content__excerpt {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }
  .highlight__content__excerpt p {
    font-size: 1rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    line-height: 1.625;
    color: #FFFFFF;
    margin: 0;
    padding: 0; }

.section--invert .section__image {
  float: right;
  overflow: hidden;
  background-color: transparent; }
  .section--invert .section__image .section__canvas {
    background-size: cover;
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%; }
.section--invert .section__content {
  right: auto;
  left: 0; }

@media (min-width: 20em) {
  .section--list {
    padding: 7.5rem 1.875rem 5.625rem; } }
@media (min-width: 48.75em) {
  .section--list {
    padding: 7.5rem 3.125rem 5.625rem; } }
@media (min-width: 58.75em) {
  .section--list {
    padding: 11.25rem 5.625rem 9.375rem; } }
@media (min-width: 77.5em) {
  .section--list {
    padding: 11.25rem 5.625rem 9.375rem; } }
.section--list h3 {
  font-size: 1.25rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  line-height: 26px/20px;
  color: #464646;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }
.section--list p {
  font-size: 1rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  line-height: 1.625;
  color: #464646;
  margin: 4.0625rem 0 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }

.section-list__mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #FFFFFF; }

.section--list {
  position: relative;
  margin: 0; }
  .section--list .list {
    margin: 4.0625rem 0 0;
    padding: 0;
    list-style-type: none; }
  .section--list .list__node {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    padding: 0;
    margin: -1px 0 0;
    box-sizing: border-box;
    box-shadow: inset 0 -1px 0 0 rgba(17, 18, 19, 0.1);
    font-size: 1rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    line-height: 1;
    color: #464646;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    /*
		&:before {

			background-color: $COLOR_BLACK;
			transition-delay: 0.4s;

		}
		*/ }
    .section--list .list__node:before, .section--list .list__node:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      display: block;
      transition: transform 1s 0s cubic-bezier(1, 0, 0, 1), opacity 0.6s 0.4s ease, visibility 0.6s 0.4s ease;
      opacity: 0;
      visibility: hidden;
      transform: translateX(-100%); }
    .section--list .list__node:after {
      background-color: #CB023C; }
    .section--list .list__node:hover, .section--list .list__node.active {
      /*
			&:before {

				transition-delay: 0s;
				transition-duration: 0.6s;
				transform: translateX(0px);
				opacity: 1;
				visibility: visible;			

			}
			*/ }
      .section--list .list__node:hover a, .section--list .list__node.active a {
        transition-delay: 0.2s;
        color: #FFFFFF; }
      .section--list .list__node:hover .arrow--list, .section--list .list__node.active .arrow--list {
        transition-delay: 0.9s;
        transition-duration: 0.8s;
        transform: translateX(0px);
        opacity: 1;
        visibility: visible; }
      .section--list .list__node:hover:after, .section--list .list__node.active:after {
        transform: translateX(0px);
        opacity: 1;
        visibility: visible; }
    .section--list .list__node:first-child {
      box-shadow: inset 0 -1px 0 0 rgba(17, 18, 19, 0.1), inset 0 1px 0 0 rgba(17, 18, 19, 0.1); }
    .section--list .list__node a {
      padding: 1.5rem 0.9375rem;
      display: block;
      position: relative;
      color: #464646;
      transition: color 0.3s 0.4s ease;
      z-index: 1; }
    .section--list .list__node .arrow--list {
      position: absolute;
      top: 50%;
      right: 0.9375rem;
      margin-top: -0.4375rem;
      transition: transform 0.6s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1), opacity 0.3s 0.1s ease, visibility 0.3s 0.1s ease;
      transform: translateX(-50px);
      opacity: 0;
      visibility: hidden; }
      .section--list .list__node .arrow--list svg {
        height: 0.875rem;
        fill: #FFFFFF; }

.cta {
  position: relative; }

.cta__mask {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #FFFFFF; }

.cta__inner {
  position: relative;
  z-index: 1; }
  @media (min-width: 20em) {
    .cta__inner {
      padding: 2.5rem 1.875rem; } }
  @media (min-width: 48.75em) {
    .cta__inner {
      padding: 2.5rem 3.75rem; } }
  @media (min-width: 58.75em) {
    .cta__inner {
      padding: 2.5rem 5.625rem; } }
  @media (min-width: 77.5em) {
    .cta__inner {
      padding: 2.5rem 5.625rem; } }

.cta__title {
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  font-size: 1rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  line-height: 1;
  color: #464646;
  text-transform: uppercase;
  float: left; }
  @media (min-width: 20em) {
    .cta__title {
      width: 100%; } }
  @media (min-width: 48.75em) {
    .cta__title {
      width: 100%; } }
  @media (min-width: 58.75em) {
    .cta__title {
      width: auto; } }
  @media (min-width: 77.5em) {
    .cta__title {
      width: auto; } }

.cta__action {
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  font-size: 1rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  line-height: 1;
  color: #464646;
  transition: color 0.3s ease;
  float: right; }
  @media (min-width: 20em) {
    .cta__action {
      width: 100%;
      margin: 1.25rem 0 0; } }
  @media (min-width: 48.75em) {
    .cta__action {
      width: 100%;
      margin: 1.25rem 0 0; } }
  @media (min-width: 58.75em) {
    .cta__action {
      width: auto;
      margin: 0; } }
  @media (min-width: 77.5em) {
    .cta__action {
      width: auto;
      margin: 0; } }
  .cta__action a {
    color: inherit;
    text-decoration: none; }
    .cta__action a:hover {
      color: #CB023C; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
#highlight--5 .highlight__content .highlight__mask {
  background-color: #E6E6E6; }
@media (min-width: 20em) {
  #highlight--5 .highlight__content {
    padding: 3.75rem 1.875rem 1.875rem; } }
@media (min-width: 48.75em) {
  #highlight--5 .highlight__content {
    padding: 5rem 3.125rem 3.125rem; } }
@media (min-width: 58.75em) {
  #highlight--5 .highlight__content {
    padding: 7.5rem 5.625rem 5.625rem; } }
@media (min-width: 77.5em) {
  #highlight--5 .highlight__content {
    padding: 7.5rem 5.625rem 5.625rem; } }
#highlight--5 .highlight__content__inner {
  width: 100%;
  max-width: 100%;
  margin: 0; }
#highlight--5 .highlight__content__excerpt p {
  color: #111213;
  text-align: left;
  font-size: 14px; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
.render__services .cta .cta__mask {
  background-color: #E6E6E6; }

.section--form {
  margin: 0;
  position: relative; }
  @media (min-width: 20em) {
    .section--form {
      padding: 7.5rem 1.875rem 5.625rem; } }
  @media (min-width: 48.75em) {
    .section--form {
      padding: 7.5rem 3.125rem 5.625rem; } }
  @media (min-width: 58.75em) {
    .section--form {
      padding: 11.25rem 5.625rem 9.375rem; } }
  @media (min-width: 77.5em) {
    .section--form {
      padding: 11.25rem 5.625rem 9.375rem; } }
  .section--form h3 {
    font-size: 1.25rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    line-height: 1.3;
    color: #464646;
    margin: 0 0 3.75rem;
    padding: 0;
    position: relative;
    z-index: 1; }
  .section--form p {
    font-size: 1rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    color: #464646;
    margin: 4.0625rem 0 0;
    padding: 0; }
  .section--form .form__mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #FFFFFF; }
  .section--form .flow__stagger {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px); }
  .section--form .form__fieldset_group:first-child .form__fieldset {
    border-top: 1px solid #E6E6E6; }
  .section--form .form__fieldset_group:last-child .form__fieldset {
    border: none;
    padding: 0;
    margin-top: 2.5rem; }
    @media (min-width: 20em) {
      .section--form .form__fieldset_group:last-child .form__fieldset button {
        float: right;
        width: 100%;
        max-width: 100%; } }
    @media (min-width: 48.75em) {
      .section--form .form__fieldset_group:last-child .form__fieldset button {
        float: right;
        width: 100%;
        max-width: 100%; } }
    @media (min-width: 58.75em) {
      .section--form .form__fieldset_group:last-child .form__fieldset button {
        float: right;
        width: 100%;
        max-width: 16.25rem; } }
    @media (min-width: 77.5em) {
      .section--form .form__fieldset_group:last-child .form__fieldset button {
        float: right;
        width: 100%;
        max-width: 16.25rem; } }
    .section--form .form__fieldset_group:last-child .form__fieldset .form__label {
      padding: 0.625rem 0; }
      @media (min-width: 20em) {
        .section--form .form__fieldset_group:last-child .form__fieldset .form__label {
          float: right;
          max-width: 100%; } }
      @media (min-width: 48.75em) {
        .section--form .form__fieldset_group:last-child .form__fieldset .form__label {
          float: right;
          width: 100%;
          max-width: 100%; } }
      @media (min-width: 58.75em) {
        .section--form .form__fieldset_group:last-child .form__fieldset .form__label {
          float: left;
          width: 100%;
          max-width: 26.25rem; } }
      @media (min-width: 77.5em) {
        .section--form .form__fieldset_group:last-child .form__fieldset .form__label {
          float: left;
          width: 100%;
          max-width: 45rem; } }
  @media (min-width: 20em) {
    .section--form .form__fieldset_group.form__fieldset_group--span-2 .form__fieldset {
      width: 100%; } }
  @media (min-width: 48.75em) {
    .section--form .form__fieldset_group.form__fieldset_group--span-2 .form__fieldset {
      width: 100%; } }
  @media (min-width: 58.75em) {
    .section--form .form__fieldset_group.form__fieldset_group--span-2 .form__fieldset {
      width: 50%; } }
  @media (min-width: 77.5em) {
    .section--form .form__fieldset_group.form__fieldset_group--span-2 .form__fieldset {
      width: 50%; } }
  .section--form .form__fieldset {
    padding: 1.875rem 0.625rem;
    width: 100%;
    box-sizing: border-box;
    float: left;
    border-bottom: 1px solid #E6E6E6;
    position: relative; }
    .section--form .form__fieldset.invalidInput {
      border-bottom: 1px solid #CB023C; }
      .section--form .form__fieldset.invalidInput input, .section--form .form__fieldset.invalidInput textarea {
        color: #CB023C; }
        .section--form .form__fieldset.invalidInput input::-webkit-input-placeholder, .section--form .form__fieldset.invalidInput textarea::-webkit-input-placeholder {
          color: #CB023C; }
        .section--form .form__fieldset.invalidInput input:-moz-placeholder, .section--form .form__fieldset.invalidInput textarea:-moz-placeholder {
          /* Firefox 18- */
          color: #CB023C; }
        .section--form .form__fieldset.invalidInput input::-moz-placeholder, .section--form .form__fieldset.invalidInput textarea::-moz-placeholder {
          /* Firefox 19+ */
          color: #CB023C; }
        .section--form .form__fieldset.invalidInput input:-ms-input-placeholder, .section--form .form__fieldset.invalidInput textarea:-ms-input-placeholder {
          color: #CB023C; }
  .section--form input, .section--form textarea {
    font-size: 1rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    line-height: 1;
    color: #464646;
    width: 100%; }
    .section--form input::-webkit-input-placeholder, .section--form textarea::-webkit-input-placeholder {
      font-size: 1rem;
      font-family: "proxima-nova", Helvetica, sans-serif;
      line-height: 1;
      color: #464646; }
    .section--form input:-moz-placeholder, .section--form textarea:-moz-placeholder {
      /* Firefox 18- */
      font-size: 1rem;
      font-family: "proxima-nova", Helvetica, sans-serif;
      line-height: 1;
      color: #464646; }
    .section--form input::-moz-placeholder, .section--form textarea::-moz-placeholder {
      /* Firefox 19+ */
      font-size: 1rem;
      font-family: "proxima-nova", Helvetica, sans-serif;
      line-height: 1;
      color: #464646; }
    .section--form input:-ms-input-placeholder, .section--form textarea:-ms-input-placeholder {
      font-size: 1rem;
      font-family: "proxima-nova", Helvetica, sans-serif;
      line-height: 1;
      color: #464646; }
  .section--form textarea {
    min-height: 12.5rem;
    resize: none;
    outline: none; }
  .section--form button {
    font-size: 1rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1;
    color: #3C3C3B;
    text-align: center;
    padding: 1.25rem 6.25rem;
    border: 3px solid #3C3C3B;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: border 0.6s 0.8s ease, color 0.6s 0.4s ease;
    /*
		&:hover {

			border: 3px solid $COLOR_RED;
			color: $COLOR_WHITE;
			background-color: $COLOR_RED;

		}
		*/ }
    .section--form button:after {
      content: '';
      background-color: #CB023C;
      border: 3px solid #CB023C;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      display: block;
      transition: transform 1s 0s cubic-bezier(1, 0, 0, 1), opacity 0.6s 0.4s ease, visibility 0.6s 0.4s ease;
      opacity: 0;
      visibility: hidden;
      transform: translateX(-100%); }
    .section--form button:hover, .section--form button.active {
      transition: border 0.6s 0.4s ease, color 0.6s 0.4s ease;
      border: 3px solid #CB023C;
      color: #FFFFFF; }
      .section--form button:hover:after, .section--form button.active:after {
        transform: translateX(0px);
        opacity: 1;
        visibility: visible; }
  .section--form .form__button__label {
    position: relative;
    z-index: 2; }
  .section--form .form__label {
    font-size: 1rem;
    line-height: 1.5rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    color: #464646; }
    .section--form .form__label a {
      text-decoration: underline;
      transition: color 0.3s ease; }
      .section--form .form__label a:hover {
        color: #CB023C; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
.render__contact .section__content__inner p {
  opacity: 1;
  visibility: visible;
  transform: none; }
.render__contact .cta .cta__mask {
  background-color: #161719; }
.render__contact .cta .cta__title, .render__contact .cta .cta__action {
  color: #FFFFFF; }
.render__contact .cta .cta__action:hover {
  color: #CB023C; }

#map {
  width: 100%;
  position: relative;
  background-color: #161719; }
  @media (min-width: 20em) {
    #map {
      position: relative; }
      #map:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 200%; }
      #map > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 48.75em) {
    #map {
      position: relative; }
      #map:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      #map > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 58.75em) {
    #map {
      position: relative; }
      #map:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 56.25%; }
      #map > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    #map {
      position: relative; }
      #map:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 56.25%; }
      #map > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }

#map__canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0; }

.mapboxgl-popup {
  max-width: 25rem;
  font: "proxima-nova", Helvetica, sans-serif;
  font-size: 0.875rem; }

.section__content--left {
  position: relative;
  top: 3.125rem; }
  @media (min-width: 20em) {
    .section__content--left {
      width: 100%;
      top: 0; } }
  @media (min-width: 48.75em) {
    .section__content--left {
      width: 100%;
      top: 0; } }
  @media (min-width: 58.75em) {
    .section__content--left {
      position: relative;
      width: 50%;
      top: 1.875rem; }
      .section__content--left:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__content--left > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    .section__content--left {
      position: relative;
      width: 50%;
      top: 1.875rem; }
      .section__content--left:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__content--left > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  .section__content--left .section__mask {
    background-color: #FFFFFF;
    top: 0; }

.section__content--right {
  top: 0;
  right: 0;
  bottom: 0; }
  @media (min-width: 20em) {
    .section__content--right {
      width: 100%;
      position: relative; } }
  @media (min-width: 48.75em) {
    .section__content--right {
      width: 100%;
      position: relative; } }
  @media (min-width: 58.75em) {
    .section__content--right {
      position: relative;
      width: 50%;
      position: absolute; }
      .section__content--right:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__content--right > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    .section__content--right {
      position: relative;
      width: 50%;
      position: absolute; }
      .section__content--right:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__content--right > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  .section__content--right .section__mask {
    background-color: #E6E6E6;
    bottom: 0; }

.section__output {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }
  .section__output h4 {
    font-family: "blanchcaps", Helvetica, sans-serif;
    color: #111213;
    padding: 0;
    position: relative; }
    .section__output h4:first-child {
      margin: 0; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
.news_single__mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #E6E6E6; }

.news_single {
  position: relative;
  padding: 9.375rem 0; }
  .news_single .container {
    position: relative;
    z-index: 1; }
  .news_single .content {
    position: relative;
    max-width: 51.25rem;
    box-sizing: border-box;
    margin: 0 auto; }
    @media (min-width: 20em) {
      .news_single .content {
        padding: 0 2.5rem; } }
    @media (min-width: 48.75em) {
      .news_single .content {
        padding: 0 2.5rem; } }
    @media (min-width: 58.75em) {
      .news_single .content {
        padding: 0 2.5rem; } }
    @media (min-width: 77.5em) {
      .news_single .content {
        padding: 0; } }
  .news_single h1, .news_single h2, .news_single h3, .news_single h4, .news_single h5, .news_single h6 {
    font-family: "blanchcaps", Helvetica, sans-serif;
    color: #111213;
    padding: 0;
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden; }
    .news_single h1:first-child, .news_single h2:first-child, .news_single h3:first-child, .news_single h4:first-child, .news_single h5:first-child, .news_single h6:first-child {
      margin: 0; }
  .news_single b, .news_single strong {
    font-weight: 700; }
  .news_single p {
    font-family: "proxima-nova", Helvetica, sans-serif;
    color: #464646;
    padding: 0;
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden; }
    .news_single p:first-child {
      margin: 0; }
  .news_single a {
    transition: color 0.3s ease;
    text-decoration: underline;
    cursor: pointer; }
    .news_single a:hover {
      color: #CB023C; }

.news_single__cta__mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #161719; }

#news_single__cta {
  text-align: center;
  padding: 3.75rem 1.25rem;
  position: relative; }
  #news_single__cta a {
    font-family: "blanchcaps_light", Helvetica, sans-serif;
    font-size: 4.375rem;
    line-height: 0.8;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px); }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
.render__news_category #news {
  background-color: #161719; }
  @media (min-width: 20em) {
    .render__news_category #news {
      padding: 0 0 3.75rem; } }
  @media (min-width: 48.75em) {
    .render__news_category #news {
      padding: 0 0 5rem; } }
  @media (min-width: 58.75em) {
    .render__news_category #news {
      padding: 0 0 7.5rem; } }
  @media (min-width: 77.5em) {
    .render__news_category #news {
      padding: 0 0 7.5rem; } }
  .render__news_category #news .container {
    position: relative;
    max-width: 100%; }
  .render__news_category #news .content {
    padding: 0 5%;
    position: relative;
    max-width: 72.5rem;
    box-sizing: border-box;
    margin: 0 auto; }
.render__news_category .news__node {
  position: relative;
  z-index: 1; }
  @media (min-width: 20em) {
    .render__news_category .news__node {
      width: 100%;
      margin: 3.75rem 0 0; } }
  @media (min-width: 48.75em) {
    .render__news_category .news__node {
      width: 100%;
      margin: 5rem 0 0; } }
  @media (min-width: 58.75em) {
    .render__news_category .news__node {
      width: 45%;
      margin: 7.5rem 0 0; } }
  @media (min-width: 77.5em) {
    .render__news_category .news__node {
      width: 45%;
      margin: 7.5rem 0 0; } }
  .render__news_category .news__node.flow--init .news__meta h3:after {
    width: 3.75rem; }
  .render__news_category .news__node:nth-child(odd) {
    float: left; }
  .render__news_category .news__node:nth-child(even) {
    float: right; }
.render__news_category .news__meta h3 {
  font-size: 0.875rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  line-height: 1.85714;
  color: #FFFFFF;
  margin: 0 0 1.4rem;
  padding: 0;
  position: relative; }
  .render__news_category .news__meta h3:after {
    content: '';
    position: absolute;
    top: 0.625rem;
    left: -5rem;
    display: block;
    width: 0;
    height: 3px;
    background-color: #CB023C;
    transition: width 0.6s 3s ease; }
.render__news_category .news__thumb {
  position: relative;
  position: relative;
  overflow: hidden; }
  .render__news_category .news__thumb:before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 100%; }
  .render__news_category .news__thumb > .ratio-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
.render__news_category .news__canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  height: 0;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
.render__work_with_us .section__content__inner p {
  opacity: 1;
  visibility: visible;
  transform: none; }
.render__work_with_us .cta .cta__mask {
  background-color: #161719; }
.render__work_with_us .cta .cta__title, .render__work_with_us .cta .cta__action {
  color: #FFFFFF; }
.render__work_with_us .cta .cta__action:hover {
  color: #CB023C; }
.render__work_with_us .section--form .form__fieldset_group input#input__upload {
  display: block;
  width: auto;
  margin-top: 20px;
  padding: 10px 0;
  background-color: black;
  color: white;
  text-align: center; }
.render__work_with_us .section__content--left .section__mask {
  background-color: #f3f3f3; }

#map {
  width: 100%;
  position: relative;
  background-color: #161719; }
  @media (min-width: 20em) {
    #map {
      position: relative; }
      #map:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 200%; }
      #map > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 48.75em) {
    #map {
      position: relative; }
      #map:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      #map > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 58.75em) {
    #map {
      position: relative; }
      #map:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 56.25%; }
      #map > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    #map {
      position: relative; }
      #map:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 56.25%; }
      #map > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }

#map__canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0; }

.mapboxgl-popup {
  max-width: 25rem;
  font: "proxima-nova", Helvetica, sans-serif;
  font-size: 0.875rem; }

.section__content--left {
  position: relative;
  top: 3.125rem; }
  @media (min-width: 20em) {
    .section__content--left {
      width: 100%;
      top: 0; } }
  @media (min-width: 48.75em) {
    .section__content--left {
      width: 100%;
      top: 0; } }
  @media (min-width: 58.75em) {
    .section__content--left {
      position: relative;
      width: 50%;
      top: 1.875rem; }
      .section__content--left:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__content--left > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    .section__content--left {
      position: relative;
      width: 50%;
      top: 1.875rem; }
      .section__content--left:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__content--left > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  .section__content--left .section__mask {
    background-color: #FFFFFF;
    top: 0; }

.section__content--right {
  top: 0;
  right: 0;
  bottom: 0; }
  @media (min-width: 20em) {
    .section__content--right {
      width: 100%;
      position: relative; } }
  @media (min-width: 48.75em) {
    .section__content--right {
      width: 100%;
      position: relative; } }
  @media (min-width: 58.75em) {
    .section__content--right {
      position: relative;
      width: 50%;
      position: absolute; }
      .section__content--right:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__content--right > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    .section__content--right {
      position: relative;
      width: 50%;
      position: absolute; }
      .section__content--right:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .section__content--right > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  .section__content--right .section__mask {
    background-color: #E6E6E6;
    bottom: 0; }

.section__output {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }
  .section__output h4 {
    font-family: "blanchcaps", Helvetica, sans-serif;
    color: #111213;
    padding: 0;
    position: relative; }
    .section__output h4:first-child {
      margin: 0; }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
.reserved_area__mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #E6E6E6; }

.reserved_area {
  position: relative;
  padding: 9.375rem 0; }
  .reserved_area .container {
    position: relative;
    z-index: 1; }
  .reserved_area .content {
    position: relative;
    max-width: 51.25rem;
    box-sizing: border-box;
    margin: 0 auto; }
    @media (min-width: 20em) {
      .reserved_area .content {
        padding: 0 2.5rem; } }
    @media (min-width: 48.75em) {
      .reserved_area .content {
        padding: 0 2.5rem; } }
    @media (min-width: 58.75em) {
      .reserved_area .content {
        padding: 0 2.5rem; } }
    @media (min-width: 77.5em) {
      .reserved_area .content {
        padding: 0; } }
  .reserved_area h1, .reserved_area h2, .reserved_area h3, .reserved_area h4, .reserved_area h5, .reserved_area h6 {
    font-family: "blanchcaps", Helvetica, sans-serif;
    color: #111213;
    padding: 0;
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden; }
    .reserved_area h1:first-child, .reserved_area h2:first-child, .reserved_area h3:first-child, .reserved_area h4:first-child, .reserved_area h5:first-child, .reserved_area h6:first-child {
      margin: 0; }
  .reserved_area b, .reserved_area strong {
    font-weight: 700; }
  .reserved_area p {
    font-family: "proxima-nova", Helvetica, sans-serif;
    color: #464646;
    padding: 0;
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden; }
    .reserved_area p:first-child {
      margin: 0; }
  .reserved_area a {
    transition: color 0.3s ease;
    text-decoration: underline;
    cursor: pointer; }
    .reserved_area a:hover {
      color: #CB023C; }

.reserved_area__cta__mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #161719; }

#reserved_area__cta {
  text-align: center;
  padding: 3.75rem 1.25rem;
  position: relative; }
  #reserved_area__cta a {
    font-family: "blanchcaps_light", Helvetica, sans-serif;
    font-size: 4.375rem;
    line-height: 0.8;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px); }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
.configurator__mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #E6E6E6; }

.configurator {
  position: relative;
  padding: 9.375rem 0; }
  .configurator .container {
    position: relative;
    z-index: 1; }
  .configurator .content {
    position: relative;
    max-width: 51.25rem;
    box-sizing: border-box;
    margin: 0 auto; }
    @media (min-width: 20em) {
      .configurator .content {
        padding: 0 2.5rem; } }
    @media (min-width: 48.75em) {
      .configurator .content {
        padding: 0 2.5rem; } }
    @media (min-width: 58.75em) {
      .configurator .content {
        padding: 0 2.5rem; } }
    @media (min-width: 77.5em) {
      .configurator .content {
        padding: 0; } }
  .configurator h1, .configurator h2, .configurator h3, .configurator h4, .configurator h5, .configurator h6 {
    font-family: "blanchcaps", Helvetica, sans-serif;
    color: #111213;
    padding: 0;
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden; }
    .configurator h1:first-child, .configurator h2:first-child, .configurator h3:first-child, .configurator h4:first-child, .configurator h5:first-child, .configurator h6:first-child {
      margin: 0; }
  .configurator b, .configurator strong {
    font-weight: 700; }
  .configurator p {
    font-family: "proxima-nova", Helvetica, sans-serif;
    color: #464646;
    padding: 0;
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden; }
    .configurator p:first-child {
      margin: 0; }
  .configurator a {
    transition: color 0.3s ease;
    text-decoration: underline;
    cursor: pointer; }
    .configurator a:hover {
      color: #CB023C; }

.configurator__cta__mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #161719; }

#configurator__cta {
  text-align: center;
  padding: 3.75rem 1.25rem;
  position: relative; }
  #configurator__cta a {
    font-family: "blanchcaps_light", Helvetica, sans-serif;
    font-size: 4.375rem;
    line-height: 0.8;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px); }

/*
	@file:
		_styles.scss

	@description: 
		Example of 'page' specific styles
	
	@implementation:
		File is included in the main.scss file via the 
		@include function
*/
.landing .block .nofx {
  display: inline;
  text-transform: none;
  opacity: 1;
  visibility: visible; }
  .landing .block .nofx:hover {
    color: #464646; }
  .landing .block .nofx:after {
    content: none; }
.landing .block a:not(.nofx) {
  color: #CB023C;
  opacity: 1;
  visibility: visible;
  margin: 1.2rem 0 0; }
  .landing .block a:not(.nofx):after {
    transition-delay: 0s; }
  .landing .block a:not(.nofx):hover:after {
    width: 5rem; }
.landing .block a:after {
  transition-delay: 0s; }
.landing .block a:hover:after {
  width: 5rem; }
.landing .section {
  position: relative;
  z-index: 4; }
  .landing .section a {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    font-weight: 400; }
  @media (min-width: 58.75em) {
    .landing .section {
      margin: -3.125rem 0 0; } }
  @media (min-width: 77.5em) {
    .landing .section {
      margin: -3.125rem 0 0; } }
  .landing .section.flow--complete .section__content a:after {
    transition-delay: 0s; }
  .landing .section.flow--complete .section__content a:hover:after {
    width: 5rem; }
  .landing .section.flow--init .section__content h3:before {
    max-width: 18.75rem; }
  .landing .section.flow--init .section__content a:after {
    width: 3.125rem; }
  .landing .section.flow--init .section__num:after {
    max-height: 6.25rem; }
.landing .section__mask {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden; }
.landing .section__image {
  position: relative; }
  @media (min-width: 20em) {
    .landing .section__image {
      position: relative;
      width: 100%;
      top: 0;
      overflow: hidden; }
      .landing .section__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .landing .section__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; }
      .landing .section__image.only__text::before {
        content: none; } }
  @media (min-width: 48.75em) {
    .landing .section__image {
      position: relative;
      width: 100%;
      top: 0;
      overflow: visible; }
      .landing .section__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 100%; }
      .landing .section__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; }
      .landing .section__image.only__text::before {
        content: ''; } }
  @media (min-width: 58.75em) {
    .landing .section__image {
      position: relative;
      width: 50%;
      top: 3.125rem; }
      .landing .section__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .landing .section__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    .landing .section__image {
      position: relative;
      width: 50%;
      top: 3.125rem; }
      .landing .section__image:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .landing .section__image > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  .landing .section__image .section__mask {
    background-color: #FFFFFF;
    top: 0; }
.landing .section__block {
  position: relative !important;
  width: 100% !important;
  top: 0 !important;
  overflow: hidden !important;
  padding: 5rem 0 6.25rem;
  position: relative; }
  .landing .section__block:before {
    display: none !important; }
  .landing .section__block ul li {
    margin: 0.8rem 0 0; }
  .landing .section__block strong {
    font-weight: bold; }
  @media (min-width: 20em) {
    .landing .section__block {
      width: 100%;
      top: 0;
      overflow: hidden; } }
  @media (min-width: 48.75em) {
    .landing .section__block {
      width: 100%;
      top: 0;
      overflow: visible; } }
  @media (min-width: 58.75em) {
    .landing .section__block {
      top: 3.125rem; } }
  @media (min-width: 77.5em) {
    .landing .section__block {
      top: 3.125rem; } }
  .landing .section__block .section__mask {
    background-color: #111213 !important;
    top: 0; }
  .landing .section__block--white .section__mask {
    background: #f5f5f5 !important; }
  .landing .section__block--white .section__content__inner h3, .landing .section__block--white .section__content__inner h4 {
    color: #111213 !important; }
  .landing .section__block--white .section__content__inner h4 {
    font-family: "proxima-nova", Helvetica, sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px); }
  .landing .section__block--white .section__content__inner div.flow__stagger {
    font-family: "proxima-nova", Helvetica, sans-serif;
    line-height: 1.625;
    color: #464646;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px); }
    .landing .section__block--white .section__content__inner div.flow__stagger ul, .landing .section__block--white .section__content__inner div.flow__stagger li {
      list-style: disc;
      list-style-position: inside; }
  .landing .section__block .section__content__inner {
    position: static !important;
    top: 0 !important;
    transform: none !important;
    max-width: 63.75rem;
    margin: 0 auto; }
    .landing .section__block .section__content__inner h3 {
      color: #FFFFFF;
      margin-bottom: 2.1875rem; }
    .landing .section__block .section__content__inner p {
      color: #FFFFFF; }
      .landing .section__block .section__content__inner p a {
        color: #CB023C;
        opacity: 1;
        visibility: visible; }
.landing .section__canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px); }
  .landing .section__canvas--landing {
    min-height: 300px; }
    @media (min-width: 20em) {
      .landing .section__canvas--landing {
        position: relative; } }
    @media (min-width: 48.75em) {
      .landing .section__canvas--landing {
        position: relative; } }
    @media (min-width: 58.75em) {
      .landing .section__canvas--landing {
        position: absolute; } }
    @media (min-width: 77.5em) {
      .landing .section__canvas--landing {
        position: absolute; } }
.landing .section__content {
  top: 0;
  right: 0;
  bottom: 0; }
  @media (min-width: 20em) {
    .landing .section__content {
      width: 100%;
      float: left;
      position: relative;
      overflow: hidden; } }
  @media (min-width: 48.75em) {
    .landing .section__content {
      width: 100%;
      float: left;
      position: relative;
      overflow: visible; } }
  @media (min-width: 58.75em) {
    .landing .section__content {
      position: relative;
      width: 50%;
      float: none;
      position: absolute; }
      .landing .section__content:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .landing .section__content > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  @media (min-width: 77.5em) {
    .landing .section__content {
      position: relative;
      width: 50%;
      float: none;
      position: absolute; }
      .landing .section__content:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 112.5%; }
      .landing .section__content > .ratio-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; } }
  .landing .section__content .section__mask {
    background-color: #E6E6E6;
    bottom: 0; }
  .landing .section__content__block + .section__content__block {
    margin-top: 3.75rem; }
@media (min-width: 20em) {
  .landing .section__content__inner {
    position: static;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    padding: 3.75rem 2.5rem; } }
@media (min-width: 48.75em) {
  .landing .section__content__inner {
    position: static;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    padding: 7.5rem 4.375rem; } }
@media (min-width: 58.75em) {
  .landing .section__content__inner {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 4.375rem; } }
@media (min-width: 77.5em) {
  .landing .section__content__inner {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 4.375rem; } }
.landing .section__content__inner h3 {
  font-family: "blanchcaps", Helvetica, sans-serif;
  font-size: 3.125rem;
  line-height: 0.8;
  color: #1D1E20;
  margin: 0 0 1.25rem;
  padding: 0;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px); }
  .landing .section__content__inner h3::before {
    content: none;
    display: none; }
.landing .section__content__inner p {
  font-family: "proxima-nova", Helvetica, sans-serif;
  color: #464646;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px); }
.render__index .landing .section__content__inner a {
  font-size: 1rem;
  font-family: "proxima-nova", Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.625;
  color: #111213;
  margin: 1.6rem 0 0;
  padding: 0;
  display: inline-block;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px); }
  .render__index .landing .section__content__inner a:after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background-color: #CB023C;
    margin-top: 0.3125rem;
    transition: width 0.6s 1.6s ease; }
.landing .section__meta {
  position: absolute;
  left: 5.625rem;
  right: 5.625rem;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-30px); }
.landing .section__icon {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0.25rem;
  padding-bottom: 30%; }
  .landing .section__icon a {
    display: inline-block;
    width: 2.5rem;
    margin-right: 1.25rem;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease; }
    .landing .section__icon a.presentation--cardboard {
      margin: 0;
      width: 2.75rem; }
    .landing .section__icon a:hover {
      transform: scale(1.2); }
  .landing .section__icon svg {
    display: block;
    width: 100%;
    max-height: 1.875rem;
    height: auto; }
.landing .section__num {
  font-family: "blanchcaps", Helvetica, sans-serif;
  font-size: 3.25rem;
  line-height: 0.6;
  color: #111213;
  float: right;
  display: inline-block;
  padding-bottom: 30%;
  position: relative; }
  .landing .section__num:after {
    content: '';
    display: block;
    width: 4px;
    height: 50%;
    background-color: #CB023C;
    position: absolute;
    left: 40%;
    bottom: 0;
    margin-left: -2px;
    max-height: 0;
    transition: max-height 0.6s 1.6s ease; }
.landing #list .counter__node {
  padding: 1.875rem 0 1.875rem; }
.landing #list table {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap; }
  .landing #list table.type-center tbody tr td:first-child {
    text-align: center; }
  .landing #list table.tr-2 .counter__texts {
    padding-top: 0.9375rem; }
    .landing #list table.tr-2 .counter__texts tr {
      padding-top: 0.625rem !important;
      padding-bottom: 0.625rem !important; }
  .landing #list table.tr-2 th.counter__node {
    text-align: left;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important; }
    @media (min-width: 20em) {
      .landing #list table.tr-2 th.counter__node {
        padding: 1.25rem 2.5rem; } }
    @media (min-width: 48.75em) {
      .landing #list table.tr-2 th.counter__node {
        padding: 0 4.375rem; } }
    @media (min-width: 58.75em) {
      .landing #list table.tr-2 th.counter__node {
        padding: 0 4.375rem; } }
    @media (min-width: 77.5em) {
      .landing #list table.tr-2 th.counter__node {
        padding: 0 4.375rem; } }
  @media (min-width: 48.75em) {
    .landing #list table.tr-2 th:last-child, .landing #list table.tr-2 td:last-child {
      -ms-flex: 2 0 0 !important;
          flex: 2 0 0 !important; } }
.landing #list thead {
  width: 100%;
  display: none;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap; }
  @media (min-width: 48.75em) {
    .landing #list thead {
      display: -ms-flexbox;
      display: flex; } }
  .landing #list thead .counter__node {
    width: 100%; }
  .landing #list thead .counter__excerpt {
    font-size: 1.75rem; }
.landing #list tbody {
  padding: 1.875rem 0; }
  @media (min-width: 20em) {
    .landing #list tbody td {
      padding: 1.25rem 2.5rem; } }
  @media (min-width: 48.75em) {
    .landing #list tbody td {
      padding: 0 4.375rem; } }
  @media (min-width: 58.75em) {
    .landing #list tbody td {
      padding: 0 4.375rem; } }
  @media (min-width: 77.5em) {
    .landing #list tbody td {
      padding: 0 4.375rem; } }
.landing #list a {
  transition: color 0.4s ease-out; }
  .landing #list a:hover {
    color: #CB023C; }
.landing #list .flow__stagger {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px); }
.landing #list tr {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap; }
  .landing #list tr th, .landing #list tr td {
    -ms-flex: 1 1 100%;
        flex: 1 1 100%; }
    @media (min-width: 48.75em) {
      .landing #list tr th, .landing #list tr td {
        -ms-flex: 1 0 0;
            flex: 1 0 0; } }
.landing #list .counter__texts {
  width: 100%;
  background: #FFFFFF;
  font-family: "proxima-nova", Helvetica, sans-serif;
  text-align: left; }
  .landing #list .counter__texts tr {
    padding-top: 1.5625rem;
    padding-bottom: 1.5625rem; }
.landing #list strong {
  font-weight: bold; }
.landing #list li {
  margin-bottom: 1.25rem; }
.landing #list .counter__flex {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap; }
.landing .quote {
  margin: 0; }
  .landing .quote .container {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    position: relative;
    z-index: 2; }
  .landing .quote h4 {
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1.6em;
    font-weight: 400;
    font-family: "proxima-nova", Helvetica, sans-serif;
    color: #FFFFFF;
    position: relative;
    z-index: 1; }
    @media (min-width: 77.5em) {
      .landing .quote h4 {
        font-size: 1.25rem; } }
    .landing .quote h4 strong {
      font-weight: bold; }
    .landing .quote h4 bdi {
      display: inline-block;
      margin-left: 0.625rem; }
    .landing .quote h4 a {
      transition: color 0.4s ease-out; }
      .landing .quote h4 a:hover {
        color: #CB023C; }
.landing .quote__wrapper {
  position: relative;
  padding: 6.25rem 0 5rem; }
.landing .quote__stripe {
  content: '';
  height: 50%;
  width: 0;
  position: absolute; }
.landing .quote__stripe--top {
  top: 0;
  left: 0;
  background-color: #111213; }
.landing .quote__stripe--bottom {
  bottom: 0;
  right: 0;
  background-color: #111213; }
.landing .download.only-title a {
  line-height: 1.875rem; }
.landing .download.only-title h3 {
  font-size: 2.5rem;
  margin: 0 0 0.25em 0; }
.landing .download.only-title .download__thumb:before {
  padding-top: 25%; }
@media (min-width: 20em) {
  .landing .download.only-title .content {
    padding-bottom: 0; } }
@media (min-width: 48.75em) {
  .landing .download.only-title .content {
    padding-bottom: 5rem; } }
.landing .download.only-title .download__stripe {
  margin-top: 0; }
@media (min-width: 20em) {
  .landing .download.only-title + .only-title .content {
    padding-top: 0;
    padding-bottom: 5rem; } }
@media (min-width: 48.75em) {
  .landing .download.only-title + .only-title .content {
    padding-bottom: 5rem; }
    .landing .download.only-title + .only-title .content .download__stripe {
      margin-top: -2.5rem; } }
.landing .download.flow--init .download__meta h3:after {
  width: 3.75rem; }
.landing .download h2 {
  margin: 0;
  padding: 0;
  font-family: "blanchcaps_light", Helvetica, sans-serif;
  font-size: 5rem;
  line-height: 0.8;
  color: #FFFFFF;
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }
.landing .download .container {
  position: relative;
  max-width: 100%; }
.landing .download .content {
  padding: 5rem 5% 5rem;
  max-width: 72.5rem;
  box-sizing: border-box;
  margin: 0 auto; }
.landing .download__stripe {
  background-color: #161719;
  width: 0;
  height: 12.5rem;
  position: absolute;
  margin-top: 2.5rem;
  top: 50%;
  left: 0;
  transform: translateY(-50%); }
.landing .download__node {
  position: relative;
  z-index: 1; }
  @media (min-width: 20em) {
    .landing .download__node {
      width: 100%;
      margin-bottom: 1.875rem; } }
  @media (min-width: 48.75em) {
    .landing .download__node {
      width: 100%;
      margin-bottom: 1.875rem; } }
  @media (min-width: 58.75em) {
    .landing .download__node {
      width: 45%;
      margin-bottom: 0; } }
  @media (min-width: 77.5em) {
    .landing .download__node {
      width: 45%;
      margin-bottom: 0; } }
  .landing .download__node:nth-child(1) {
    float: left; }
  .landing .download__node:nth-child(2) {
    float: right; }
.landing .download__thumb {
  position: relative;
  position: relative;
  overflow: hidden; }
  .landing .download__thumb:before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 100%; }
  .landing .download__thumb > .ratio-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
.landing .download__canvas {
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  background: #CB023C;
  opacity: 0.8; }
.landing .download__letter {
  font-family: "blanchcondensed_inline", Helvetica, sans-serif;
  line-height: 0.8;
  color: #FFFFFF;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px); }
  @media (min-width: 20em) {
    .landing .download__letter {
      font-size: 12.5rem;
      margin-top: -5rem; } }
  @media (min-width: 48.75em) {
    .landing .download__letter {
      font-size: 13.75rem;
      margin-top: -5.625rem; } }
  @media (min-width: 58.75em) {
    .landing .download__letter {
      font-size: 13.75rem;
      margin-top: -5.625rem; } }
  @media (min-width: 77.5em) {
    .landing .download__letter {
      font-size: 16.25rem;
      margin-top: -6.875rem; } }
.landing .download__meta {
  top: 50%;
  position: absolute;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  text-align: center; }
  .landing .download__meta h3 {
    font-family: "blanchcaps_light", Helvetica, sans-serif;
    color: #FFFFFF;
    line-height: 0.8;
    padding: 0;
    position: relative;
    margin-bottom: 1.25rem; }
  .landing .download__meta p {
    font-size: 0.875rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    color: #E6E6E6;
    margin: 0 0 20px 0; }
  .landing .download__meta a {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    font-family: "proxima-nova", Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.85714;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    transition: color 0.3s ease; }
    .landing .download__meta a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #FFFFFF; }
    .landing .download__meta a:hover {
      color: #E6E6E6; }
      .landing .download__meta a:hover::after {
        background: #E6E6E6; }
.landing .show-mobile {
  display: block;
  margin-bottom: 5px; }
  .landing .show-mobile strong {
    color: #1D1E20; }
  @media (min-width: 48.75em) {
    .landing .show-mobile {
      display: none !important; } }
.landing .custom-table {
  background: #FFFFFF;
  border: 1px solid #E6E6E6; }
  .landing .custom-table tr {
    border-bottom: 1px solid #E6E6E6; }
  .landing .custom-table td {
    padding: 5px 7px;
    border-left: 1px solid #E6E6E6; }
.landing .hero-landing {
  padding: 1.875rem 0 0 0;
  background: #111213; }
  @media (min-width: 48.75em) {
    .landing .hero-landing#hero-landing--1 {
      padding-top: calc((1.875rem * 2) + 80px); } }
  .landing .hero-landing #hero__content {
    position: relative;
    width: 100%; }
    @media (min-width: 20em) {
      .landing .hero-landing #hero__content {
        padding: 5rem 0; } }
    .landing .hero-landing #hero__content .hero__content__wrapper {
      position: relative;
      transform: none;
      top: 0; }
    .landing .hero-landing #hero__content #hero__text {
      margin-top: 0rem;
      margin-bottom: 1.5rem; }
      .landing .hero-landing #hero__content #hero__text h4 {
        font-family: "blanchcaps_light", Helvetica, sans-serif;
        font-size: 2.5rem;
        color: #FFFFFF;
        line-height: 1em; }
.landing .red {
  color: #CB023C; }

.el-lang .list__node--header__nav, .el-lang #header__settings {
  font-family: Helvetica; }
  @media (min-width: 20em) {
    .el-lang .list__node--header__nav, .el-lang #header__settings {
      font-size: 1rem; } }
  @media (min-width: 48.75em) {
    .el-lang .list__node--header__nav, .el-lang #header__settings {
      font-size: 1.625rem; } }
  @media (min-width: 58.75em) {
    .el-lang .list__node--header__nav, .el-lang #header__settings {
      font-size: 0.75rem; } }
  @media (min-width: 77.5em) {
    .el-lang .list__node--header__nav, .el-lang #header__settings {
      font-size: 0.8125rem; }
      .el-lang .list__node--header__nav a, .el-lang #header__settings a {
        padding: 32px 10px; } }
.el-lang #hero__content h1 {
  font-family: Helvetica; }
  @media (min-width: 20em) {
    .el-lang #hero__content h1 {
      font-size: 1rem; } }
  @media (min-width: 48.75em) {
    .el-lang #hero__content h1 {
      font-size: 1.625rem; } }
  @media (min-width: 58.75em) {
    .el-lang #hero__content h1 {
      font-size: 0.75rem; } }
  @media (min-width: 77.5em) {
    .el-lang #hero__content h1 {
      font-size: 5rem; } }
.el-lang .quote h2 {
  font-family: Helvetica; }
  @media (min-width: 20em) {
    .el-lang .quote h2 {
      font-size: 1rem; } }
  @media (min-width: 48.75em) {
    .el-lang .quote h2 {
      font-size: 1.625rem; } }
  @media (min-width: 58.75em) {
    .el-lang .quote h2 {
      font-size: 0.75rem; } }
  @media (min-width: 77.5em) {
    .el-lang .quote h2 {
      font-size: 3.125rem; } }