/*
 *   #CORE-FUNCTIONS
 *  ================================================================
 *   All core framework functions must be added here.
 *   Is the first partial loaded for the entire project.
 *   Functions added here are used for the core of the framework
 *
 *  ===============================================================
 */
/* - Type Checking
 * -----------------------------------------------------------------------------
 *  A collection of function for advanced type checking.
 *  @author Hugo Giraudel:
 *  https://css-tricks.com/snippets/sass/advanced-type-checking/
 *  Added "is-null" and "is-boolean" for general purpose
*/
/* - Remove Units
 * -----------------------------------------------------------------------------
 *  Remove the unit of a length
 *  https://css-tricks.com/snippets/sass/strip-unit-function/
 */
/* - Pixel Conversion
 * -----------------------------------------------------------------------------
 *  Include value in pixels to convert in em or rem.
 *  Default reference value is "16". But it can be changed. 
 *  For example, when you need to adjust units according to parent values:
 *    .element {
 *      font-size: em(20px);
 *      padding: em(10px,20);
 *    }
*/
/* - Power Functions
 * -----------------------------------------------------------------------------
 *  https://css-tricks.com/snippets/sass/power-function/
*/
/* - Decimal Rounds
 * -----------------------------------------------------------------------------
 *  Round a number to specified digits.
 *  
 *  $number: A number to round.
 *  $digits: Digits to output (default: 0).
 *  $mode: How to round a number (options: ceil|floor|round - default: ceil)
 *  Example:
 *      decimal-round(0.333)    => 0
 *      decimal-round(0.333, 1) => 0.3
 *      decimal-round(0.333, 2) => 0.33
 *      decimal-round(0.666)    => 1
 *      decimal-round(0.666, 1) => 0.7
 *      decimal-round(0.666, 2) => 0.67
*/
/* - Estructure
 * -----------------------------------------------------------------------------
 */
/* - Site Font Settings:
 * -----------------------------------------------------------------------------
 */
/* - Font Weights
 * -----------------------------------------------------------------------------
*/
/* - Widths
 * -----------------------------------------------------------------------------
 *  Ref.- Why use em for media query https://zellwk.com/blog/media-query-units/
 */
/* - Ratios
 * -----------------------------------------------------------------------------
 */
/* - Grid Settings
 * -----------------------------------------------------------------------------
 * 1. Use Flexbox based grid.
 * 2. Use Floated based grid.
 * 3. Use grid as "SCSS Placeholder".
 * 4. Grid maximum width.
 * 5. Number of columns for layout.
 * 6. Set the gutter between columns.
 * 7. Side margin for the container.
 */
/* - CSS Animations
 * -----------------------------------------------------------------------------
 */
/*----------------------------------------------------------------------------*\
  #COLORS
\*----------------------------------------------------------------------------*/
/* Palette
 * -----------------------------------------------------------------------------
 * Coolors Palette - http://coolors.co/df4661-672146-ffd100-f5f5f5-36494e
 */
/* Gradients
 * -----------------------------------------------------------------------------
 */
/* Site Color Settings
 * -----------------------------------------------------------------------------
 */
/*----------------------------------------------------------------------------*\
  #TYPOGRAPHY
\*----------------------------------------------------------------------------*/
/* - Font Families
 * -----------------------------------------------------------------------------
 */
/* Type Scale
 * -----------------------------------------------------------------------------
 * Ratios:
 * $minor-second:     1.067;  // Minor Second
 * $major-second:     1.125;  // Major Second
 * $minor-third:      1.200;  // Minor Third
 * $major-third:      1.250;  // Major Third
 * $perfect-fourth:   1.333;  // Perfect Fourth
 * $augmented-fourth: 1.414;  // Augmented Fourth
 * $perfect-fifth:    1.500;  // Perfect Fifth
 * $golden-ratio:     1.618;  // Golden Ratio
 */
/*
 *  Defaults:
 *    $base-font: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 *    $second-font: Georgia, serif !default;
 *    $monospace-font: "Lucida Console", Monaco, monospace !default;
 */
/*
//  #MIXINS
//  ===============================================================
//   Include al useful mixins here.
//
//  ===============================================================
*/
/* -----------------------------------------------------------------------------
 * Media Breakpoints:
 * Named media query breakpoints with dynamic value.
 * .usage { @include phone-land { %Content {} }; }
 */
/* Wrapper
 * -----------------------------------------------------------------------------
 * https://css-tricks.com/best-way-implement-wrapper-css/
 * .usage { @include wrap($width: 960px, $padding: 10px); }
 */
/* Full width background for wrapped box
 * -----------------------------------------------------------------------------
 * This add a background box with full width behind a wrapped box
 *
 * .wraped-box {
 *   position: relative;   
 *   @include full-width-wrapped-bg(white);
 * }
 *
 */
/* -----------------------------------------------------------------------------
 * BEM Syntax helpers - 
 * https://css-tricks.com/snippets/sass/bem-mixins/
 * Mixins to include BEM syntax in a more comprehensive way.
 * Usage:
 * .navigation { 
 *    	@include element('item') { padding: 2em; } 
 * }
 * Output: .navigation__item { padding: 2em; }
 */
/* -----------------------------------------------------------------------------
 * Clearfix: contain floats 
 * Source: http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
 * .usage { @include clearfix(); }
 */
/* -----------------------------------------------------------------------------
 * Hidden Visually:
 * Hide elements only visually, but have it available for screen readers.
 * Source: https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
 * .usage { @include visuallyhidden(); }
 */
/* - Gradients 
 * -----------------------------------------------------------------------------
 *  Accepts multiple colors (into parentheses) and degree values
 *  Predefined directions can be: to bottom, to top, to right, to left, 
 *  to bottom right, etc. Declared without "".
 *    .usage { @include linear-gradient( (#ccc, #999), to bottom ); }
 */
/* - Vertical Center 
 * -----------------------------------------------------------------------------
 *  Center elements vertically. Parent element must be "position: relative"
 *    .box { position: relative; }
 *    .box__element { @include vertical-center(); }
 */
/* - Hover Underline Remove 
 * -----------------------------------------------------------------------------
 *  Removes underlines in normal links and shows it at mouse over (hover)
 *    a, .link { @include hover-underline(); }
 */
/*
 *  #TYPOGRAPHY
 *  ============================================================================
 *   Type and font tools added here.   
 *
 *  ============================================================================
 */
/* - Type Scale
 * -----------------------------------------------------------------------------
 *  Automatic type scale tool.
 *  Inspired by: https://type-scale.com.
 *    Usage: h2 { @include font-scale(h2); }
 */
/* - Font Smoothing
 * -----------------------------------------------------------------------------
 *  Test and include according your font appearance.
 *  It can be used broadly with "body" tag, in specific classes/rules
 *  or in special screens using @media queries.
 *  - https://www.zachleat.com/web/font-smooth/
 *  - http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
 *    .usage { @include font-smooth(); }
 */
/*
 *  #GRID-BUILDER
 *  ============================================================================
 *   This the grid builder for available grid systems. This tool generates
 *   the grid system as usable classes or placeholders for @extend in your own
 *   classes (or selectors).
 *
 *  ============================================================================
 */
/*----------------------------------------------------------------------------*\
  # Grid Builder Settings & Mixins
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
  #FLOATED-GRID
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
  #FLEXBOXGRID
\*----------------------------------------------------------------------------*/
/*
 *  #ANIMATION-TOOLS
 *  ============================================================================
 *   Only load CSS animation libraries and mixins here. No classes or styles are
 *   generated in this file. To keep a clean architecture for the project, just
 *   generate styles in generic/_animations.scss. To avoid confusion all usage 
 *   documentation about these tools are in the file _animations.scss too.
 *
 *  ============================================================================
 */
/* - Animate.css
 * -----------------------------------------------------------------------------
 *  Unselect o load animate.css animations mixins.  
*/
/*
 *  #ANIMATE.CSS
 *  ============================================================================
 *   Inpired in animate.css, loaded via Mixins with Placeholder option.
 *   Usage:
 *   @include animatecss-animated(); 
 *   // Generates required .animated class                               
 *   // Options: 
 *   // $time: Duration in seconds or miliseconds (default: 1s)
 *   // $selector: Selector to @extend (default: .animated)
 *   // $infinite: Generates .infinite class (default: false)
 *
 *   @include animatecss-bounce();   
 *   // Animation type - Format: animatecss-(Animation Type), this case "bounce". 
 *   // Option: 
 *   // $selector: Selector to @extend (default: Animation Type, eg. ".bounce")
 * 
 *
 *   animate.css -http://daneden.me/animate
 *   Version - 3.6.0
 *   Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 *   Copyright (c) 2018 Daniel Eden  
 *
 *  ============================================================================
 */
/*
// - Normalize
//  ====================================================================================
//
//   normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css
//   Source: https://github.com/necolas/normalize.css/blob/master/normalize.css
//
//  ====================================================================================
*/
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Montserrat:700");
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*
// - Reset
//  ========================================================
//   All reset styles goes here.
//
//  ========================================================
*/
body,
h1, h2, .diff__head, .serv__ttl, .contact__head, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
  margin: 0;
  padding: 0;
}

h1, h2, .diff__head, .serv__ttl, .contact__head, h3, h4, h5, h6 {
  font-weight: normal;
}

ul {
  list-style: none;
}

li > ol,
li > ul {
  margin-bottom: 0;
}

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

label, button {
  cursor: pointer;
}

/*
 * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
 *    on fieldsets.
 */
fieldset {
  min-width: 0;
  /* [1] */
  border: 0;
}

/*
 * Box-Sizing - More sensible default box-sizing
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

img, video, embed, object {
  max-width: 100%;
}

/*
 *  #FONTS
 *  ============================================================================
 *   Load fonts here. E.g Google Fonts, FontAwesome or Custom Fonts.
 *
 *  ============================================================================
 */
/*----------------------------------------------------------------------------*\
  Google Font
\*----------------------------------------------------------------------------*/
/*
 *  #GRIDS
 *  ============================================================================
 *   Grid loader... This load the entire grid system or just a few classes.
 *   To do it, use the grid as "Placeholder" setting $grid-as-placeholder to
 *   "true" in _config.scss file (settings/_config.scss). 
 *   You can choose which "Grid Type" to use in _config.scss file too. For
 *   example, if you want to use "Flexbox Grid" you need to set "true"
 *   "$use-flexboxgrid" value in _config.scss. 
 * 
 *	 Use Grid as "Placeholder".-
 *	 The grid can be used as a placeholder and output only the grid 
 *	 styles used by your project. This approach generates a smaller
 *	 CSS file. You can create abstractions and @extend styles like this:
 * 		<div class"my-box-1 row></div>
 * 		<div class"my-box-2 row></div>
 * 		<div class"my-box-3 row></div>
 * 	 Abstract in this way: .my-box-1, .my-box-2, .my-box-3 { @extend %row; }
 * 	 And remove the "row" class in the HTML file.
 *	  
 *  ============================================================================
 */
/*----------------------------------------------------------------------------*\
  # Load Flexbox Grid 
\*----------------------------------------------------------------------------*/
.l-test,
.l-hero,
.l-diff,
.l-serv__cont,
.l-more__cont,
.l-contact__cont,
.l-footer__cont {
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

.l-test {
  padding-right: 2rem;
  padding-left: 2rem;
}

.l-hero__row, .l-diff__row, .l-diff-list__row, .l-serv__row, .l-more__row, .l-contact__row, .l-footer__row, .l-test__row {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
      flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem;
}

/* Fraction based class generator
  * ----------------------------------------------------------------------------
  */
/* Column number class generator
  * ----------------------------------------------------------------------------
  */
/*
  @if $grid-as-placeholder == false { 	
  	[class*="col-xs"] {
  	  flex-grow: 0;
  	  flex-shrink: 0;
  	  padding-right: $half-gutter-width;
  	  padding-left:  $half-gutter-width;
  	  flex-basis: auto;
  	}
  }
*/
.l-test__content,
.l-more__col1,
.l-hero__col1,
.l-hero__col2,
.l-diff__col-head,
.l-diff__col-list,
.l-diff-list__item,
.l-serv__col,
.l-more__col2,
.l-contact__col1,
.l-contact__col2,
.l-footer__col1,
.l-footer__col2,
.l-more__col1 {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-right: 1rem;
  padding-left: 1rem;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
}


.l-more__col1 {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-right: 1rem;
  padding-left: 1rem;
  -ms-flex-preferred-size: 83.33333%;
      flex-basis: 83.33333%;
  max-width: 83.33333%;
}


.l-hero__col1,
.l-hero__col2,
.l-diff__col-head,
.l-diff__col-list,
.l-diff-list__item,
.l-serv__col,
.l-more__col2,
.l-contact__col1,
.l-contact__col2,
.l-footer__col1,
.l-footer__col2 {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-right: 1rem;
  padding-left: 1rem;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
}

.l-test__content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  max-width: 100%;
}


.l-more__col1 {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-left: 8.33333%;
}

.l-serv__row {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.l-hero__row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (min-width: 48em) {
  
  .l-hero,
  .l-diff,
  .l-serv__cont,
  .l-more__cont,
  .l-contact__cont,
  .l-footer__cont {
    width: 46rem;
  }
  /*
  	  @if $grid-as-placeholder == false {
  	  	[class*="col-sm"] {
  	  	  flex-grow: 0;
  	  	  flex-shrink: 0;
  	  	  padding-right: $half-gutter-width;
  	  	  padding-left:  $half-gutter-width;
  	  	  flex-basis: auto;
  	  	}
  	  }
*/
  
  .l-contact__col1,
  .l-contact__col2,
  .l-diff__col-head,
  .l-diff__col-list,
  .l-serv__col,
  .l-serv__row {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
  
  .l-contact__col1,
  .l-contact__col2 {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  
  .l-diff__col-head,
  .l-diff__col-list,
  .l-serv__col {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
  }
  
  .l-serv__row {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    max-width: 100%;
  }
  .l-contact__row {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
  }
}

@media only screen and (min-width: 60em) {
  
  .l-hero,
  .l-diff,
  .l-serv__cont,
  .l-more__cont,
  .l-contact__cont,
  .l-footer__cont {
    width: 58rem;
  }
  /*
  	  @if $grid-as-placeholder == false {
  	  	[class*="col-md"] {
  	  	  flex-grow: 0;
  	  	  flex-shrink: 0;
  	  	  padding-right: $half-gutter-width;
  	  	  padding-left:  $half-gutter-width;
  	  	  flex-basis: auto;
  	  	}
  	  }
*/
  
  .l-serv__col,
  .l-diff__col-head,
  .l-more__col1,
  .l-more__col2,
  .l-hero__col1,
  .l-hero__col2,
  .l-diff-list__item,
  .l-footer__col1,
  .l-footer__col2,
  .l-test__content,
  .l-diff__col-list,
  .l-serv__row,
  .l-serv__row,
  .l-test__content {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
  
  .l-serv__col {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  
  .l-diff__col-head,
  .l-more__col1,
  .l-more__col2 {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  
  .l-hero__col1,
  .l-hero__col2,
  .l-diff-list__item,
  .l-footer__col1,
  .l-footer__col2,
  .l-test__content {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
  }
  
  .l-diff__col-list {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
  
  .l-serv__row {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: 83.33333%;
        flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
  
  .l-serv__row {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 8.33333%;
  }
  
  .l-test__content {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 25%;
  }
  .l-footer__col2 {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    text-align: right;
  }
}

@media only screen and (min-width: 75em) {
  
  .l-hero,
  .l-diff,
  .l-serv__cont,
  .l-more__cont,
  .l-contact__cont,
  .l-footer__cont {
    width: 73rem;
  }
  /*
  	  @if $grid-as-placeholder == false {
  	  	[class*="col-lg"] {
  	  	  flex-grow: 0;
  	  	  flex-shrink: 0;
  	  	  padding-right: $half-gutter-width;
  	  	  padding-left:  $half-gutter-width;
  	  	  flex-basis: auto;
  	  	}
  	  }
*/
  
  .l-hero__col1,
  .l-hero__col2 {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
  
  .l-hero__col1 {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  
  .l-hero__col2 {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
}

/*----------------------------------------------------------------------------*\
  # Load Floated Grid
\*----------------------------------------------------------------------------*/
/*
 *  #ANIMATIONS
 *  ============================================================================
 *   Load all animations used in the project here. It can be custom or created
 *   by libraries tools loaded here as Animate.css.
 *
 *  ============================================================================
 */
@-webkit-keyframes animScale {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes animScale {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
    transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

/*
// - Elements
//  =================================================================
//   Include styles only for HTML tags here.
//   These styles set the base or default behavior of HTML elements.
//
//  =================================================================
*/
html {
  font-size: 100%;
  line-height: 1.5;
  min-height: 100%;
}

body {
  background-color: #efefef;
  color: #413b59;
  font-size: 1em;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, .diff__head, .serv__ttl, .contact__head, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

h2, .diff__head, .serv__ttl, .contact__head {
  font-size: 2rem;
  line-height: 2rem;
  letter-spacing: -1px;
}

@media (min-width: 30em) {
  h2, .diff__head, .serv__ttl, .contact__head {
    font-size: 2.25rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 48em) {
  h2, .diff__head, .serv__ttl, .contact__head {
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -2px;
  }
}

h3 {
  font-size: 1rem;
  line-height: 1rem;
}

strong {
  font-weight: 700;
}

button {
  -webkit-appearance: none;
  background: transparent;
  color: inherit;
  border: none;
  outline: none;
}

button:not([disabled]) {
  cursor: pointer;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

/*
 * Remove text-shadow in selection highlight. ------------------------
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #ba160a;
  color: white;
  text-shadow: none;
}
::selection {
  background: #ba160a;
  color: white;
  text-shadow: none;
}

/*
 * Customize the input placeholder.
 */
::-webkit-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #f99d97;
  opacity: 1;
  /* Firefox */
}
:-ms-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #f99d97;
  opacity: 1;
  /* Firefox */
}
::-ms-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #f99d97;
  opacity: 1;
  /* Firefox */
}
::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #f99d97;
  opacity: 1;
  /* Firefox */
}

/*
 * References:
 * 1. https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
 */
/*
 *  #LAYOUT
 *  ============================================================================
 *   General layout file. Grid can be loaded as a placeholder and extended here. 
 *   Layout classes has an "l-" prefix to separate structure from components.
 *   The extending approach allows to remove additional breakpoints classes in
 *   HTML files, because media queries are generated here.  
 *
 *  ============================================================================
 */
/*
// - Custom Sections
//  ================================================================
//   Import every custom section developed here.
//   was created to keep a clean main.scss file.
//   For example, It can be a "Contact", "Post" or "Hero" section.
//   Use only @import statements.
//
//  ===============================================================
*/
/* Pages Stack
 * -----------------------------------------------------------------------------
 */
/*----------------------------------------------------------------------------*\
  #PAGES
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
    # Full Page
\*----------------------------------------------------------------------------*/
/*
 * - #OBJECTS
 *  ================================================================
 *   Import every custom object developed here.
 *   was created to keep a clean main.scss file.
 *   Use only @import statements.
 *
 *  ===============================================================
*/
/* Boxes
 * -----------------------------------------------------------------------------
 */
/*
 * - #BOXES
 *  ================================================================
 *   Base styles for boxes.
 *
 *  ===============================================================
*/
/* Browser-like Box
 * -----------------------------------------------------------------------------
 */
/* Hamburger
 * -----------------------------------------------------------------------------
 */
/*
 *  #HAMBURGER
 *  ============================================================================
 *   CSS hamburger icon generator object
 *
 *   Source: Hamburgers
 *   @description Tasty CSS-animated hamburgers
 *   @author Jonathan Suh @jonsuh
 *   @site https://jonsuh.com/hamburgers
 *   @link https://github.com/jonsuh/hamburgers
 *  
 *  ============================================================================
 */
/*
 *  HTML Layout
 *  -----------------------------------------------------------------------------
 *  <button class="hamburger" type="button">
 *    <span class="hamburger-box">
 *      <span class="hamburger-inner"></span>
 *    </span>
 *  </button> 
 */
/* Pages
 * -----------------------------------------------------------------------------
 */
/*----------------------------------------------------------------------------*\
  #PAGES
\*----------------------------------------------------------------------------*/
/* Ratio
 * -----------------------------------------------------------------------------
 */
/* ==========================================================================
   #RATIO
   ========================================================================== */
/**
 * Create ratio-bound content blocks, to keep media (e.g. images, videos) in
 * their correct aspect ratios.
 *
 * http://alistapart.com/article/creating-intrinsic-ratios-for-video
 *
 * 1. Default is a 1:1 ratio (i.e. a perfect square).
 */
.hero-slide__vbox {
  position: relative;
  display: block;
}

.hero-slide__vbox:before {
  content: "";
  display: block;
  width: 100%;
}


.hero-slide__vbox > iframe,
.hero-slide__vbox > embed,
.hero-slide__vbox > object {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* Ratio variants.
   ========================================================================== */
/**
 * Generate a series of ratio classes to be used like so:
 *
 *   <div class="o-ratio  o-ratio--golden-ratio">
 *
 */
.hero-slide__vbox:before {
  padding-bottom: 56.25%;
}

/* Contain modifier.
   ========================================================================== */
/**
 * Only works with image content.
 * Contains the image to the boundaries, without cropping or stretching it.
 */
/*
//   #SECTIONS
//  ================================================================
//   Import every component SCSS file developed here.
//   was created to keep a clean main.scss file.
//   For example, It can be a "Contact Form" component.
//   Use only @import statements.
//
//  ===============================================================
*/
/* Header
 * -----------------------------------------------------------------------------
 */
/*----------------------------------------------------------------------------*\
  #HEADER
\*----------------------------------------------------------------------------*/
.header {
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  z-index: 20;
}

/*----------------------------------------------------------------------------*\
  #NAVIGATION
\*----------------------------------------------------------------------------*/
.navigation {
  display: none;
}

/*----------------------------------------------------------------------------*\
  #LOGO
\*----------------------------------------------------------------------------*/
.logo {
  position: absolute;
  top: 2rem;
  left: 0;
  z-index: 20;
  width: 100%;
  text-align: center;
}

.logo img {
  width: 200px;
  height: auto;
}

@media (min-width: 48em) {
  .logo {
    top: 4rem;
    text-align: left;
    padding-left: 3rem;
  }
  .logo img {
    width: 240px;
  }
}

@media (min-width: 75em) {
  .logo {
    padding-left: 5rem;
  }
}

/* Sections
 * -----------------------------------------------------------------------------
 */
/*----------------------------------------------------------------------------*\
  #HERO
\*----------------------------------------------------------------------------*/
/*
  HTML Structure
--------------------------------------------------------------------------------
<section class="hero l-hero">
  <div class="hero-slider l-hero__row">
    <div class="hero-slide l-hero__col-main">
      <h1 class="hero-slide__ttl">Integrated marketing & digital mindset</h1>
      <p class="hero-slide__desc">
        We are a digital agency focused on content marketing, graphic design,
        video production and social media strategy
      </p>
    </div>
  </div>
</section>
--------------------------------------------------------------------------------
*/
.hero {
  background-color: #1f1d2b;
  text-align: center;
  background: url(../imgs/bg-sm-hero.jpg) no-repeat center top;
  background-size: cover;
}

@media (min-width: 48em) {
  .hero {
    text-align: left;
    background: url(../imgs/bg-lg-hero.jpg) no-repeat center top;
    background-attachment: fixed;
    background-size: cover;
  }
}

.hero-slide__ttl {
  position: relative;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  color: white;
  font-size: 2.25rem;
  line-height: 2.25rem;
  letter-spacing: -1px;
}

@media (min-width: 48em) {
  .hero-slide__ttl {
    font-size: 2.9375rem;
    line-height: 3rem;
    letter-spacing: -2px;
  }
}

.hero-slide__ttl:after {
  content: "";
  width: 40px;
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #f44336;
}

@media (min-width: 48em) {
  .hero-slide__ttl:after {
    left: 0;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
}

.hero-slide__desc {
  margin: 0 auto;
  color: #efefef;
}

@media (min-width: 30em) {
  .hero-slide__desc {
    max-width: 66.66667%;
  }
}

@media (min-width: 48em) {
  .hero-slide__desc {
    margin: 0;
  }
}

@media (min-width: 60em) {
  .hero-slide__desc {
    max-width: none;
  }
}

.hero-slide__vbox {
  margin-top: 2rem;
  background: #000;
}

@media (min-width: 60em) {
  .hero-slide__vbox {
    margin-top: 0;
    margin-left: 2rem;
  }
}

/*----------------------------------------------------------------------------*\
  #HERO-LAYOUT
\*----------------------------------------------------------------------------*/
.l-hero {
  min-height: 100vh;
  padding-top: 9rem;
  padding-bottom: 4rem;
}

@media (min-width: 48em) {
  .l-hero {
    height: 100vh;
    padding-top: 12rem;
  }
}

@media (min-width: 60em) {
  .l-hero {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.l-hero__row {
  min-height: 100%;
}

/*----------------------------------------------------------------------------*\
  #DIFFERENT - "What makes us different?"
\*----------------------------------------------------------------------------*/
/*
  HTML Structure
--------------------------------------------------------------------------------
<section class="diff l-diff">
  <div class="l-diff__row">
    <div class="l-diff__col-head">
      <h1 class="diff__head">What makes us different?</h1>
    </div>
    <div class="l-diff__col-list">
      <ul class="diff__list l-diff-list__row">
        <li class="diff__item l-diff-list__item">
          <div class="diff-item__head">
            <span class="diff-item__num">1</span> 
            <h3 class="diff-item__ttl">We are responsive.</h3>
            <p class="diff-item__desc">
              We will make sure you hear back from us as soon as you contact us.
            </p>
          </div>
        </li>
        .
        .
        .
      </ul>
    </div>
    <div class="diff__bg"></div>
  </div>
</section>
--------------------------------------------------------------------------------
*/
.diff {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 8rem;
  background: #f44336 50%;
  background: -webkit-linear-gradient(225deg, #f44336 50%, #CC2824 100%);
  background: -o-linear-gradient(225deg, #f44336 50%, #CC2824 100%);
  background: linear-gradient(225deg, #f44336 50%, #CC2824 100%);
  color: white;
}

.diff:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../imgs/bg-lg-diff.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 80%;
  opacity: .3;
}

@media (min-width: 48em) {
  .diff:before {
    background-size: 42%;
    background-attachment: fixed;
    opacity: 1;
  }
}

@media (min-width: 48em) {
  .diff {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.diff__head {
  position: relative;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  text-shadow: 0 2px 40px #b71c1c;
}

@media (min-width: 30em) {
  .diff__head {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 48em) {
  .diff__head {
    max-width: 20rem;
    text-align: right;
    margin-right: 1.5rem;
  }
}

.diff__head:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
          transform: translateX(50%);
  width: 40px;
  height: 4px;
  background-color: #b71c1c;
}

@media (min-width: 48em) {
  .diff__head:after {
    right: 0;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
}

.diff__item {
  text-align: center;
  margin-bottom: 3rem;
}

@media (min-width: 48em) {
  .diff__item {
    text-align: left;
  }
}

.diff-item__head {
  position: relative;
  margin: 0 auto;
}

@media (min-width: 30em) {
  .diff-item__head {
    max-width: 80%;
  }
}

@media (min-width: 48em) {
  .diff-item__head {
    max-width: none;
  }
}

.diff-item__ttl {
  position: relative;
  max-width: 20rem;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 48em) {
  .diff-item__ttl {
    font-size: 1.125rem;
    width: 12rem;
    padding-left: 2.5rem;
    margin-left: 0;
    margin-right: 0;
  }
}

.diff-item__num {
  display: inline-block;
  width: 3rem;
  border-radius: 50%;
  background-color: #CC2824;
  line-height: 3rem;
  font-family: "Open Sans", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  color: #f44336;
}

@media (min-width: 48em) {
  .diff-item__num {
    position: absolute;
    left: 0;
  }
}

.diff-item__num:before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1px solid #f77066;
}

@media (min-width: 48em) {
  .diff-item__num:before {
    left: -1rem;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
}

.diff-item__desc {
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

/*----------------------------------------------------------------------------*\
  #DIFFERENT-LAYOUT
\*----------------------------------------------------------------------------*/
.l-diff {
  min-height: 100vh;
}

@media (min-width: 75em) {
  .l-diff {
    min-height: 80vh;
  }
}

.l-diff__row {
  min-height: 100%;
}

/*----------------------------------------------------------------------------*\
  #SERVICES
\*----------------------------------------------------------------------------*/
.serv {
  text-align: center;
}

.serv__head {
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}

.serv__head:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2rem;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #efefef;
  -webkit-transform: rotate(45deg) translateX(-50%);
      -ms-transform: rotate(45deg) translateX(-50%);
          transform: rotate(45deg) translateX(-50%);
}

.serv__ttl {
  position: relative;
  padding-bottom: 1.5rem;
  margin-bottom: 1rem;
}

.serv__ttl:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background-color: #b71c1c;
}

.serv__txt {
  margin: 0 auto;
  padding: 0 1rem;
  font-size: 1.25rem;
  line-height: 2rem;
  color: #635987;
}

.serv__list {
  padding-top: 5rem;
  padding-bottom: 6rem;
  background-color: white;
  position: relative;
}

.serv__list:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%);
  margin: 0 -0.5rem;
  width: 100vw;
  height: 100%;
  background: white;
}

.serv-item__icon {
  padding: 1.5rem;
}

.serv-item__ttl {
  padding: .5rem;
}

.serv-item__desc {
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin-bottom: 2rem;
}

/*----------------------------------------------------------------------------*\
  #SERVICES-LAYOUT
\*----------------------------------------------------------------------------*/
.l-serv__head {
  max-width: 33rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 30em) {
  .l-serv__col {
    max-width: 50%;
  }
}

/*----------------------------------------------------------------------------*\
  #SERVICES
\*----------------------------------------------------------------------------*/
.more {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #1f1d2b;
  background: url(../imgs/bg-sm-more.jpg) no-repeat center top;
  background-size: cover;
}

@media (min-width: 48em) {
  .more {
    padding-top: 8rem;
    padding-bottom: 8rem;
    background: url(../imgs/bg-lg-more.jpg) no-repeat center top;
    background-attachment: fixed;
    background-size: cover;
  }
}

.more__ttl {
  position: relative;
  margin-bottom: 1rem;
  color: white;
  font-size: 1.375rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  text-shadow: 0 2px 20px rgba(65, 59, 89, 0.4);
}

.more__ttl:before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: -1.5rem;
  width: 12px;
  height: 12px;
  background: #f44336;
}

.more__desc {
  color: #efefef;
}

.more__sep {
  margin: 2rem 0;
  height: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid #4c4568;
}

.more__img {
  width: 100%;
  height: auto;
  max-width: 380px;
  margin-top: 3rem;
}

@media (min-width: 60em) {
  .more__img {
    margin-top: 0;
    max-width: 480px;
  }
}

/*----------------------------------------------------------------------------*\
  #SERVICES-LAYOUT
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
  #CONTACT
\*----------------------------------------------------------------------------*/
.contact {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 12rem;
  color: white;
  background: #f44336 50%;
  background: -webkit-linear-gradient(225deg, #f44336 50%, #CC2824 100%);
  background: -o-linear-gradient(225deg, #f44336 50%, #CC2824 100%);
  background: linear-gradient(225deg, #f44336 50%, #CC2824 100%);
}

@media (min-width: 48em) {
  .contact {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.contact__main {
  text-align: center;
  padding-right: 2rem;
}

@media (min-width: 48em) {
  .contact__main {
    text-align: right;
  }
}

.contact__head {
  position: relative;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  text-shadow: 0 2px 40px #b71c1c;
}

.contact__head:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 50%;
  -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
          transform: translateX(50%);
  width: 40px;
  height: 4px;
  background-color: #b71c1c;
}

@media (min-width: 48em) {
  .contact__head:after {
    right: 0;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
}

.contact__info {
  margin-bottom: 1rem;
  position: absolute;
  font-size: 0.875rem;
  line-height: 1.5rem;
  bottom: 1rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media (min-width: 48em) {
  .contact__info {
    position: relative;
    font-size: 1rem;
  }
}

.contact__note {
  display: inline-block;
  margin-top: 1rem;
  max-width: 14rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: #f99d97;
}

.contact-form {
  position: relative;
}

.contact-form__input,
.contact-form__textarea {
  display: block;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
  background: transparent;
  border: 2px solid white;
  font-size: 1.0625rem;
  color: white;
}

.contact-form__input {
  height: 4rem;
  line-height: 2rem;
}

.contact-form__textarea {
  height: 12rem;
}

.contact-form__btn {
  width: 100%;
  height: 4rem;
  padding: 1rem;
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: white;
  letter-spacing: 4px;
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  background: #b71c1c;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.contact-form__btn:hover {
  background: #891515;
  border-radius: 16px;
}

.contact-form__resp {
  position: absolute;
  left: 15%;
  bottom: 4.75rem;
  width: 70%;
  padding: 1rem 1.5rem;
  background: white;
  -webkit-box-shadow: 0 25px 5px -15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 25px 5px -15px rgba(0, 0, 0, 0.1);
  border-width: 5px;
  border-radius: 8px;
  border-style: solid;
  font-size: 90%;
  font-weight: 700;
  pointer-events: none;
  -webkit-transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
          transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
  opacity: 0;
  -webkit-transition: opacity 0.15s, -webkit-transform 0.25s;
  transition: opacity 0.15s, -webkit-transform 0.25s;
  -o-transition: transform 0.25s, opacity 0.15s;
  transition: transform 0.25s, opacity 0.15s;
  transition: transform 0.25s, opacity 0.15s, -webkit-transform 0.25s;
}

.contact-form__resp.success, .contact-form__resp.error {
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
          transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  opacity: 1;
}

.contact-form__resp.success {
  color: #28a745;
  border-color: #86e29b;
}

.contact-form__resp.error {
  color: #dc3545;
  border-color: #f3b7bd;
}

/* Growl-style notifications */
.ns-growl {
  top: 30px;
  left: 30px;
  max-width: 300px;
  border-radius: 5px;
}

/*
@-webkit-keyframes animScale {
	0% { opacity: 0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
	100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); }
}
*/
[class^="ns-effect-"].ns-growl.ns-hide,
[class*=" ns-effect-"].ns-growl.ns-hide {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

/* Individual effects */
/* Scale */
.ns-effect-scale {
  background: #67c58f;
  -webkit-box-shadow: 0 25px 10px -15px rgba(0, 0, 0, 0.05);
          box-shadow: 0 25px 10px -15px rgba(0, 0, 0, 0.05);
}

.ns-effect-scale.ns-show,
.ns-effect-scale.ns-hide {
  -webkit-animation-name: animScale;
  animation-name: animScale;
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
}

/*----------------------------------------------------------------------------*\
  #CONTACT-LAYOUT
\*----------------------------------------------------------------------------*/
@media (min-width: 60em) {
  .l-contact {
    min-height: 100vh;
  }
}

/*----------------------------------------------------------------------------*\
  #CONTACT
\*----------------------------------------------------------------------------*/
.footer {
  min-height: 6rem;
  padding: 1rem 0;
  color: #efefef;
  background-color: #891515;
  font-size: 0.875rem;
  text-align: center;
}

@media (min-width: 48em) {
  .footer {
    font-size: 1rem;
    min-height: 8rem;
    padding: 3rem 0;
    text-align: left;
  }
}

.social-foot {
  display: none;
}

.social-foot__item {
  display: inline-block;
}

/*----------------------------------------------------------------------------*\
  #CONTACT-LAYOUT
\*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*\
  #BUTTONS
\*----------------------------------------------------------------------------*/
/*
// - Extra Components
//  =======================================================
//   Add here all other extra or miscellaneous components.
//
//  =======================================================
*/
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/*
// - Helper Clasess
//  ========================================================
//   Styles used to assist in providing some functionality.
//   Reusable miscellaneous, commonly used styles goes here.
//   Mixins/Tools can become helpers here via @include.
//
//  ========================================================
*/
/* -----------------------------------------------------------------------------
 * Hide visually and from screen readers
 */
.hidden {
  display: none !important;
}

/* -----------------------------------------------------------------------------
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/* -----------------------------------------------------------------------------
 * Clearfix (.cf) - Contain floats
 * Source: //src/sass/tools/_mixins.scss
 */
.cf:after {
  content: "";
  display: block;
  clear: both;
}

/* -----------------------------------------------------------------------------
 * Align helpers
 * Align Left (.al) - Align Center (.ac) - Align Right (.ar)
 */
.al {
  text-align: left;
}

.ac {
  text-align: center;
}

.ar {
  text-align: right;
}

/* -----------------------------------------------------------------------------
 * Pull helpers
 * Pull Left (.pl) -  Pull Right (.pr)
 */
.pl {
  float: left;
}

.pr {
  float: right;
}

/* -----------------------------------------------------------------------------
 * Opacity helpers
 * Opacity: 0 (.op-0) -  Opacity: 1 (.op-1)
 */
.op-0 {
  opacity: 0;
}

.op-1 {
  opacity: 1;
}

/* -----------------------------------------------------------------------------
 * Headings
 * Redefine headings size. Use this when you need a semantic heading,
 * but sized different. For example, H2 sized like an H1.
 *
 * Usage: <h2 class="h1"></h2>
 */
.h1 {
  font-size: 3.998em;
}

.h2 {
  font-size: 2.827em;
}

.h3 {
  font-size: 1.999em;
}

.h4 {
  font-size: 1.414em;
}

.h5 {
  font-size: 0.707em;
}

.h6 {
  font-size: 0.5em;
}

/*
// - Hack & Testing
//  ================================================================
//   Modifiers and hacking styles can be added here.
//   These styles must be avoided or used in special cases.
//   Here you can place styles for testing purposes.
//   e.g., Extending other classes before final production.
//   This is the last SCSS partial (before _print.scss), 
//   so almost every rule can be modified here.
//   Try to keep this file clean. Styles stored here can mean  
//   things to do or bad practices.
//
//  ===============================================================
*/
.o-media {
  display: block;
}

.o-media:after {
  content: "";
  display: block;
  clear: both;
}

.o-media__img {
  float: left;
  margin-right: 1em;
}

.o-media__img > img {
  display: block;
}

.o-media__body {
  overflow: hidden;
  display: block;
}

.o-media__body,
.o-media__body > :last-child {
  margin-bottom: 0;
}

/*----------------------------------------------------------------------------*\
  #TESTING
\*----------------------------------------------------------------------------*/
.overflow-h {
  overflow: hidden;
}

.btn-tester {
  position: fixed;
  top: 2rem;
  right: 2rem;
  background: #f44336;
  color: white;
  padding: 1em 2em;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

.l-test {
  margin-top: 3em;
}

.wrap-test {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  background: cyan;
  height: 200px;
  padding: 2rem;
}

.wrap-test:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%);
  margin: 0 -0.5rem;
  width: 100vw;
  height: 100%;
  background: yellow;
}

/*
// - Print
//  =========================================================================
//   Styles for pbetter printing.
//   Source: HTML5 Boilerplate
//   https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
//  =========================================================================
*/
@media print {
  *, *:before, *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p, h2, .diff__head, .serv__ttl, .contact__head,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2, .diff__head, .serv__ttl, .contact__head,
  h3 {
    page-break-after: avoid;
  }
}

/*# sourceMappingURL=maps/main.css.map */