@charset "UTF-8";
/*=====================================
=            Master Styles            =
=====================================*/

 /*


 TABLE OF CONTENTS
  Css Files included ".scss"
  
  - screen .......... all element Base, Elements, Layout, Modules
  - styles .......... all element Base,screen, and function and grid system include in this master styles sheet file
  - Base ............ foundations, mixins, functions, vars
  - Elements ........ single elements
  - Layout .......... layout objects like grids, containers
  - Modules ......... objects created by combining elements

 */
/*------------------------------------------------------------------
[Table of contents sections in css]

1. general classes.
2. Loader Spinner.
3. headers.
4. Main Navigation and Dropdown menu .
5. Mobile Navigation .
6. Services Pages .
7. About us Pages .
8. Portfolio Pages .
9. Blog Pages .

-------------------------------------------------------------------*/
/* ==========================================================================
   general classes
   ========================================================================== */
/*===================================================
=            import the main libraries of sass      =
===================================================*/
/*=====================================
=            Master Styles            =
=====================================*/

 /*


  @base
---------------------------------------------------------

  Your CSS begins with some global variables, a reset which
  is basically Normalize, some mixins, and a print stylesheet.

-----------------------------------------------------  */
/**

  @variables
---------------------------------------------------------
  base/_vars.scss
--------------------------------------------------------

  Global variables are defined here.  Define your colors,
  spacing and grid settings.

-----------------------------------------------------  */
/* @colors
--------------------------------------------------------

  All color variables are defined here.

  We use real color names here.  Although naming something
  like 'brand' is in fact more generic and reusable, we've
  found that you end up creating variables like $brand-2,
  $brand-alt, $brand-complimentary etc.  While coding,
  it's too easy to forget what those mean.

  If the design changes drastically and the brand changes
  from, let's say, blue to green, just do a global
  find/replace - that's what text editors are for.

------------------------------------------------------ */
/* @breakpoints
---------------------------------------------------------

  Define global breakpoints as xs, sm, md, lg, xl, xxl

--------------------------------------------------------- */
/* @global spacing unit
---------------------------------------------------------

  Define an em value for $unit.  $unit is a helpful little
  variable that serves to keep your spacing consistent.

  Most often, 1 $unit is equal to your baseline height.  So
  if your baseline height is 1.125ems (which is 18px), that's
  the value of 1 $unit.

--------------------------------------------------------- */
/**

  @reset
---------------------------------------------------------
  base/_reset.scss
--------------------------------------------------------

  This reset institutes the border-box box model and then
  block and margin/padding resets.

  Throughout Skyline, each partial has it's own resets.
  This allows you to only use what you need.

  Credit goes to Normalize
  http://normalize.css v2.1.0 http://git.io/normalize

--------------------------------------------------------- */
@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,700,800,600");
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary,
audio,
canvas,
video {
  display: block;
}

/**

  @breakpoints mixin
-----------------------------------------------------
  base/_mixin-breakpoints.scss
-----------------------------------------------------

  This mixin makes using inline media queries easy.
  Options include bp-at-least for min-width, bp-until
  for max-width, and bp-between for min and max widths.

  You can use your breakpoint vars, or any other value.

  Usage: styles at medium breakpoint
  .some-element {
    @include bp-at-least($breakpoint__md){
      your-styles: go-here;
    }
  }

  Usage: styles at custom breakpoint
  .another-element {
    @include bp-until(83.45em){
      your-styles: go-here;
    }
  }

-----------------------------------------------------  */
/**

  @clearfix mixin
---------------------------------------------------------
  base/_clearfix.scss
--------------------------------------------------------

  Use @include clearfix(); in your CSS

  Usage: clearfix mixin
  .element-to-clearfix {
    @include cleafix();
  }


--------------------------------------------------------- */
.clearfix {
  zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/**

  @font-face importer mixin
-----------------------------------------------------------
  _base/_mixin-font-face-importer.scss
-----------------------------------------------------------

  Use this mixin to embed a font

  $font-name is used in your css in font-family declarations
  $font-filepath-and-name is the location of your font
  file and the filename WITHOUT the file extension.  The
  extensions are added here in the mixin

  Usage:
  @include embed-font($font-name, $font-filepath-and-name);

--------------------------------------------------------- */
/**

  @gradual media queries mixin
--------------------------------------------------------
  base/_mixin-gradual-media-queries.scss
--------------------------------------------------------

 The mixin takes arguments of start-width, start-fontsize,
 end-width, and end-fontsize and then creates media queries
 between those start and end points at another argument
 value, increment-width.

 Usage: Gradually increase the font size of the html
 html {
  @include gradual-queries(20em, 80%, 70em, 100%, 10em)
 }

 In the above usage, the html fontsize will start out at
 80% at 20em and end up at 100% at 70em - and the gradual
 changes in the fontsize percentage will be calculated
 at 10em intervals.

 See http://codepen.io/jeffschram/pen/IixqA

------------------------------------------------------ */
/**

  @fonts
--------------------------------------------------------
  base/_fonts.scss
--------------------------------------------------------

  Define the fonts used in this app and declare silent
  classes to be used in your CSS.

  If you are using a webfont that you're hosting, add 
  the @embed-font() mixin from base/_mixin-font-face-importer.scs 
  before you declare your fonts.

  Usage: Create a font-family named "interstate-light" using a font at /fonts/interstate_light-webfont.woff (and other extensions)
  @include embed-font("interstate-light", "/fonts/interstate_light-webfont");
  
  If you are using Google Fonts, you can add the
  import code before you declare your fonts.

  @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);

-------------------------------------------------------- */
/* @sans
--------------------------------------------------------

  This is your basic sans font.

  Usage: use sans regular on a p
  p {
    @extend %sans--regular;
  }

------------------------------------------------------ */
.site-credits, header#main.contact-image .container h2, header#main.type-writer .typer .scene, #content .news .wrapper .content-news p, #content .news .block-1 .content p:nth-of-type(1), #content .news .block-2 .content p, #content .news .block-3 .content p, #content .featured-blog .featured-img .inner a p, article#services.hh-services section #first p, article#services .left-row .color aside.contentP h2, article#services .services-title .title h2 span, article.services_2 section aside h3, .services_4 section h1, #projects .block-1 aside h1, #projects .block-2 .media h3, #projects .side .qoute p, #portfolio aside.title h2 span, .about-info section aside h3, #skills .info p:nth-of-type(1), .full-blog-post .wrapper-post.text-only .post-text p, .full-blog-post .wrapper-post.video-wrapper .post-info h6, .full-blog-post .wrapper-post.video-wrapper .post-info p, .full-blog-post .wrapper-post.qoutes blockquote, .other-posts h2, .comment section h1, .comment section .client p, section.content h3, #wrapper-contact #contact-details .box h2, #wrapper-contact #contact-details .box.color h1, #contact--details section h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
}

body, .btn, header#main p, #content .news .wrapper .content-news small, #content .featured-blog.featured-about h1 span, article#services.hh-services section #first h3, article#services.hh-services section .widget aside h4, article#services .left-row .client p, article#services .services-title .title h2, article.services_3 section aside .lower article h4, #information .container.flex-wrapper .second-box .box h2, #information .container.flex-wrapper .second-box .box span, #information .container.flex-wrapper .second-box .media h3, #information .container.flex-wrapper .third-box .box.first p:nth-of-type(1), #information .container.flex-wrapper .third-box h4, #portfolio .caption .portfolio-wrapper aside span, #portfolio aside.title h2, #portfolio .more, .about-info.services_page section .icon__services .titler h3, #skills .skills-box .info-2 h1, #skills .skills-box .skill-wrapper .skill-bar label, #blog .blog-wrapper .blog-post h3, #blog .blog-wrapper .blog-post small, #about-1 aside h1, .full-blog-post .wrapper-post.video-wrapper .post-info blockquote p, .author-info .client span, .author-info .client p, section.content .input__field--kaede, section.content .input__label--kaede, section.content button.btn, #wrapper-contact .form-section section h2, #wrapper-contact .form-section section p, #pricing section article aside .upper h2, #pricing section article aside .upper span:after, #contact--details section h4 {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#content #main-nav .site-nav ul li .sub-links li a, #content .news .block-3 .content small, #content .news .block-3 .content p strong, article#services .left-row .color aside.contentP h2 strong, .about-info section .icon__services aside div h4, #wrapper-contact #contact-details .box.color h4, #wrapper-contact #contact-details .box.color p, #contact--details section aside small {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.title--middle p, #content .news .wrapper .content-news h3, #content .featured-blog.featured-about h1, article#services .left-row .client .media h3, #information .container.flex-wrapper .flex .video h3, #information .container.flex-wrapper .second-box .media p, #information .container.flex-wrapper .third-box .box.first h5, #projects .block-1 aside h3, #projects .block-2 .media p, #blog .blog-wrapper .blog-post a.more, #icon-boxes aside div h4, .naver a, .full-blog-post .wrapper-post .info .client h3, .full-blog-post .wrapper-post .info .meta-info small, .full-blog-post .wrapper-post .info .meta-info ul li, .full-blog-post .wrapper-post.video-wrapper .post-info .meta-info small, .full-blog-post .wrapper-post.video-wrapper .post-info .meta-info ul li, .author-info .client h1, .comment section .client .comment-name h2, #wrapper-contact #contact-details .box p, #wrapper-contact #contact-details .box.color a, #pricing section article aside .upper span {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

#content .featured-blog .featured-img .inner a p strong, article.services_3 section aside h3, .full-blog-post .wrapper-post.qoutes blockquote p::before, .full-blog-post .wrapper-post.qoutes blockquote p:after, #pricing section article aside .upper span:before {
  font-family: "Open Sans", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* @monte
--------------------------------------------------------

  This is your basic serif font.

  Usage: use serif regular on a p
  p {
    @extend %serif--regular;
  }

-------------------------------------------------------- */
input, input::-webkit-input-placeholder, input:-moz-placeholder, textarea {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}

#content #main-nav .site-nav ul li a, #team .client-wrapper figcaption .client-name h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

header#main h1, #content #main-nav .branding, #content .mobile-nav .banner-mobile aside .branding, #information .container.flex-wrapper .third-box span, #portfolio .caption .portfolio-wrapper aside h3, .site-footer article .branding {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

body {
  background-color: #f5f5f5;
}

/**

  @dev helpers
--------------------------------------------------------
  base/_dev-helpers.scss
--------------------------------------------------------

  Dev helpers highlight elements and/or show information
  about the site and its current state (breakpoints, etc.)

  These are made active by adding classes to the HTML
  element. A JS system to toggle these classes is in
  the works. 

  This partial requires:
  * base/_vars.scss
  * base/_mixin-breakpoints.scss

-------------------------------------------------------- */
/* @highlight elements at breakpoint
--------------------------------------------------------
  
  Highlight an element at certain breakpoints by changing
  its color;

  Add .dev--highlight to the HTML element to enable this.

  Example: Highlight a title at MD breakpoint
  <h1 class="md-highlight">I will change color at MD breakpoint</h1>

-------------------------------------------------------- */
@media screen and (min-width: 20em) {
  .dev--highlight-elements [class*="-highlight"] {
    color: inherit;
  }
  .dev--highlight-elements .xs-highlight {
    color: #94c1c8;
  }
}
@media screen and (min-width: 34.375em) {
  .dev--highlight-elements [class*="-highlight"] {
    color: inherit;
  }
  .dev--highlight-elements .sm-highlight {
    color: #a2bb60;
  }
}
@media screen and (min-width: 48em) {
  .dev--highlight-elements [class*="-highlight"] {
    color: inherit;
  }
  .dev--highlight-elements .md-highlight {
    color: #eb6d58;
  }
}
@media screen and (min-width: 64em) {
  .dev--highlight-elements [class*="-highlight"] {
    color: inherit;
  }
  .dev--highlight-elements .lg-highlight {
    color: #0D699C;
  }
}
@media screen and (min-width: 78.5em) {
  .dev--highlight-elements [class*="-highlight"] {
    color: inherit;
  }
  .dev--highlight-elements .xl-highlight {
    color: #c492bc;
  }
}
@media screen and (min-width: 100em) {
  .dev--highlight-elements [class*="-highlight"] {
    color: inherit;
  }
  .dev--highlight-elements .xxl-highlight {
    color: #76400b;
  }
}

/* @highlight grids in dev mode
--------------------------------------------------------
  
  Indicate grids using responsive widths at certain breakpoints.

  Add .dev--grids to the HTML element to enable this.

  No extra classes are needed on the grids themselves.

-------------------------------------------------------- */
.dev--highlight-grids .g > *, .dev--highlight-grids .grid > * {
  min-height: 4em;
  background: rgba(193, 199, 208, 0.5);
  border: 1px solid rgba(193, 199, 208, 0.5);
}
@media screen and (min-width: 20em) {
  .dev--highlight-grids .g[class*="xs-"] > *, .dev--highlight-grids .grid[class*="xs-"] > * {
    border-color: #94c1c8;
    background: rgba(148, 193, 200, 0.25);
  }
}
@media screen and (min-width: 34.375em) {
  .dev--highlight-grids .g[class*="sm-"] > *, .dev--highlight-grids .grid[class*="sm-"] > * {
    border-color: #a2bb60;
    background: rgba(162, 187, 96, 0.25);
  }
}
@media screen and (min-width: 48em) {
  .dev--highlight-grids .g[class*="md-"] > *, .dev--highlight-grids .grid[class*="md-"] > * {
    border-color: #eb6d58;
    background: rgba(235, 109, 88, 0.25);
  }
}
@media screen and (min-width: 64em) {
  .dev--highlight-grids .g[class*="lg-"] > *, .dev--highlight-grids .grid[class*="lg-"] > * {
    border-color: #0D699C;
    background: rgba(13, 105, 156, 0.25);
  }
}
@media screen and (min-width: 78.5em) {
  .dev--highlight-grids .g[class*="xl-"] > *, .dev--highlight-grids .grid[class*="xl-"] > * {
    border-color: #c492bc;
    background: rgba(196, 146, 188, 0.25);
  }
}
@media screen and (min-width: 100em) {
  .dev--highlight-grids .g[class*="xxl-"] > *, .dev--highlight-grids .grid[class*="xxl-"] > * {
    border-color: #76400b;
    background: rgba(118, 64, 11, 0.25);
  }
}
@media screen and (min-width: 20em) {
  .dev--highlight-grids .gw[class*="xs-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="xs-"][class*="-up"] > * > * {
    border-color: #94c1c8;
    background: rgba(148, 193, 200, 0.25);
  }
}
@media screen and (min-width: 34.375em) {
  .dev--highlight-grids .gw[class*="sm-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="sm-"][class*="-up"] > * > * {
    border-color: #a2bb60;
    background: rgba(162, 187, 96, 0.25);
  }
}
@media screen and (min-width: 48em) {
  .dev--highlight-grids .gw[class*="md-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="md-"][class*="-up"] > * > * {
    border-color: #eb6d58;
    background: rgba(235, 109, 88, 0.25);
  }
}
@media screen and (min-width: 64em) {
  .dev--highlight-grids .gw[class*="lg-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="lg-"][class*="-up"] > * > * {
    border-color: #0D699C;
    background: rgba(13, 105, 156, 0.25);
  }
}
@media screen and (min-width: 78.5em) {
  .dev--highlight-grids .gw[class*="xl-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="xl-"][class*="-up"] > * > * {
    border-color: #c492bc;
    background: rgba(196, 146, 188, 0.25);
  }
}
@media screen and (min-width: 100em) {
  .dev--highlight-grids .gw[class*="xxl-"][class*="-up"] > * > *, .dev--highlight-grids .grid-wrap[class*="xxl-"][class*="-up"] > * > * {
    border-color: #76400b;
    background: rgba(118, 64, 11, 0.25);
  }
}

/* @show the current breakpoint
--------------------------------------------------------
  
  Adds a badge to the bottom right of the body to show
  the current breakpoint.

  To enable this, add .dev--show-breakpoint to the HTML
  element

-------------------------------------------------------- */
.dev--show-breakpoint body:before {
  content: "-";
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 1em;
  border: 1px solid #b0b3b3;
  background: rgba(176, 179, 179, 0.25);
  font-size: .25em;
  line-height: 1;
  color: #b0b3b3;
}
@media screen and (min-width: 20em) {
  .dev--show-breakpoint body:before {
    content: "XS";
    color: #94c1c8;
    background: rgba(148, 193, 200, 0.25);
    border-color: #94c1c8;
  }
}
@media screen and (min-width: 34.375em) {
  .dev--show-breakpoint body:before {
    content: "SM";
    color: #a2bb60;
    background: rgba(162, 187, 96, 0.25);
    border-color: #a2bb60;
  }
}
@media screen and (min-width: 48em) {
  .dev--show-breakpoint body:before {
    content: "MD";
    color: #eb6d58;
    background: rgba(235, 109, 88, 0.25);
    border-color: #eb6d58;
  }
}
@media screen and (min-width: 64em) {
  .dev--show-breakpoint body:before {
    content: "LG";
    color: #0D699C;
    background: rgba(13, 105, 156, 0.25);
    border-color: #0D699C;
  }
}
@media screen and (min-width: 78.5em) {
  .dev--show-breakpoint body:before {
    content: "XL";
    color: #c492bc;
    background: rgba(196, 146, 188, 0.25);
    border-color: #c492bc;
  }
}
@media screen and (min-width: 100em) {
  .dev--show-breakpoint body:before {
    content: "XXL";
    color: #76400b;
    background: rgba(118, 64, 11, 0.25);
    border-color: #76400b;
  }
}

/**

  @print
--------------------------------------------------------
  base/_print.scss
--------------------------------------------------------

  Print Stylesheet from http://h5bp.com/r

-----------------------------------------------------  */
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   CREDIT: HTML5 Boilerplate
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    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) ")";
  }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
    /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}
/***

  @elements
---------------------------------------------------------

  Global styling of elements.

---------------------------------------------------------  */
/**

  @body
--------------------------------------------------------
  elements/_body.scss
--------------------------------------------------------

  Body should contain the document's default font and
  background color for the content, if that background
  color is different than the html.

------------------------------------------------------ */
body {
  line-height: 1.5;
  color: #515554;
}

/**

  @buttons
--------------------------------------------------------
  elements/_buttons.scss
--------------------------------------------------------

  Buttons are a common UI component in sites/apps.  They
  are usually either anchor, button, or input elements
  with a classname of 'btn'.  They provide an easily
  identified clickable target.

  Buttons commonly have modifying classes that apply
  specific styles.  Examples of these are .btn--large and
  .btn--inline

  Example: Buttons using anchors
  <p><a href="#" class="btn">Regular Button</a></p>

  Example: Buttons using buttons
  <p><button class="btn">Regular Button</button></p>

------------------------------------------------------ */
button:focus, button:active {
  outline: none;
  box-shadow: none;
  border: none;
}

.btn {
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  background: #515554;
  color: #fff;
  border: none;
  font-size: 1.25em;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .225em;
  padding: 1em 1.25em;
}
.btn:hover, .btn:focus, .btn:active {
  outline: none;
  opacity: .85;
}

/* @btn--secondary
--------------------------------------------------------

  A btn modifier, secondary

  Example: .btn--secondary
  <a class="btn btn--secondary">Secondary button</a>

------------------------------------------------------ */
.btn--secondary {
  background: none;
  border: 1px solid #fff;
  color: #fff;
}

/* @btn--large
--------------------------------------------------------

  A btn modifier, large

  Example: .btn--large
  <a class="btn btn--large">Large button</a>

------------------------------------------------------ */
@media screen and (min-width: 34.375em) {
  .btn--large {
    font-size: 1.25em;
    padding: 1.25em 2.75em;
  }
}

/* @btn--inline
--------------------------------------------------------

  A btn modifier, if this button is in a paragraph or
  in anything else that has a defined font-size, this
  modifier will make the btn inherit the font-size of
  the partent.

  Example: .btn--inline
  <p>Here's some text <a class="btn btn--inline">Cool button</a> text keeps going</p>

------------------------------------------------------ */
.btn--inline {
  font-size: 1em;
}

/* @btn--block
--------------------------------------------------------

  A btn modifier - makes the button display block, 100%
  width and aligns the text to the center.  Removes left
  and right padding since the text is center aligned, it
  is not needed.  Actually sometimes having the padding
  on the left and right causes problems if the centered
  text is quite long - so we just remove it.

  Example: .btn--block
  <a href="#" class="btn btn--block">Block button</a>

------------------------------------------------------ */
.btn--block {
  display: block;
  width: 100%;
  text-align: center;
  padding-right: 0;
  padding-left: 0;
}

/* @btn--icon
--------------------------------------------------------

  A btn modifier - makes the button display block, 100%
  width and aligns the text to the center.  Removes left
  and right padding since the text is center aligned, it
  is not needed.  Actually sometimes having the padding
  on the left and right causes problems if the centered
  text is quite long - so we just remove it.

  Example: .btn--icon
  <button class="btn--icon ss-icon">Block button</button>

------------------------------------------------------ */
.btn--icon {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 1em;
}

/**

  @code
--------------------------------------------------------
  elements/_code.scss
--------------------------------------------------------

  Code elements like <code> and <pre>

  Example: Code in a paragraph
  <p>This is a cool paragraph about a classname called <code>.franz</code></p>


-----------------------------------------------------  */
code {
  vertical-align: middle;
  padding: .25em .5em;
  background: rgba(193, 199, 208, 0.3);
}

/**

  @forms
---------------------------------------------------------
  elements/_forms.scss
--------------------------------------------------------

  Base styles for all forms and form related elements

  Below you'll set styles for all forms, and if you have
  any specific kinds of forms, like a search form that you
  create a classname of form--search, put that at the
  bottom of this partial.

  This scss partial is pretty big.  Here's how it is
  organized.

  * Base styling on form elements

  * Styles for form & form modules


--------------------------------------------------------- */
/* @text inputs
--------------------------------------------------------

  Base styles for inputs

  Example: Text Input
  <input type="text" name="schramburger" placeholder="Your Name">

  Inputs can use sizing classes, .input--s .input--l

  Example: Text Small Input
  <input class="input--s" type="text" name="schramburger" placeholder="Your Name">

  Example: Text Input
  <input class="input--l" type="text" name="schramburger" placeholder="Your Name">

------------------------------------------------------ */
input {
  -webkit-appearance: none;
  border-radius: 0;
  width: 100%;
  padding: 1em;
  border: 1px solid #515554;
  color: #515554;
}
input:focus {
  outline: none;
}
input.input--s {
  font-size: .5rem;
}
input.input--l {
  font-size: 1.5rem;
}

input::-webkit-input-placeholder {
  color: #515554;
}
input:-moz-placeholder {
  color: #515554;
}
input::-moz-placeholder {
  color: #515554;
}
input:-ms-input-placeholder {
  color: #515554;
}

input:focus::-webkit-input-placeholder {
  opacity: .3;
}
input:focus:-moz-placeholder {
  opacity: .3;
}
input:focus::-moz-placeholder {
  opacity: .3;
}
input:focus:-ms-input-placeholder {
  opacity: .3;
}

/* @select inputs
--------------------------------------------------------

  Base styling for all selects

  Example: Select Input
  <select name="schramburger">
    <option value="value-1">Option 1</option>
    <option value="value-2">Option 2</option>
    <option value="value-3">Option 3</option>
    <option value="value-4">Option 4</option>
  </select>

  Selects can have added sizing classes, .select--s and .select--l

  Example: Small select
  <select name="schramburger" class="select--s">
    <option value="value-1">Option 1</option>
    <option value="value-2">Option 2</option>
    <option value="value-3">Option 3</option>
    <option value="value-4">Option 4</option>
  </select>

  Example: Large select
  <select name="schramburger" class="select--l">
    <option value="value-1">Option 1</option>
    <option value="value-2">Option 2</option>
    <option value="value-3">Option 3</option>
    <option value="value-4">Option 4</option>
  </select>

------------------------------------------------------ */
select {
  width: 100%;
  font-size: 1rem;
}
select.select--sm {
  font-size: .5rem;
}
select.select--lg {
  font-size: 1.5rem;
}

/* @textareas
--------------------------------------------------------

  Base styling for textareas

  Textareas can have .textarea--s or .textarea--l classes
  for different sizes

  Example: Textarea
  <textarea name="schramburger">Hello, there.</textarea>

  Example: Small Textarea
  <textarea class="textarea--s" name="schramburger">Hello, there.</textarea>

  Example: Large Textarea
  <textarea class="textarea--l" name="schramburger">Hello, there.</textarea>

------------------------------------------------------ */
textarea {
  width: 100%;
  min-height: 6em;
  padding: 1em;
  border: solid 1px #515554;
}
textarea:focus {
  outline: none;
}
textarea.textarea--s {
  font-size: .5rem;
}
textarea.textarea--l {
  font-size: 1.5rem;
}

/* @radio inputs
--------------------------------------------------------

  Base styling for radio inputs.  Radios are surrounded
  by a label for better click targets.

  Example: Radio
  <label class="label--radio" for="radio-1"><input id="radio-1" type="radio" value="yes"> Radio label</label>

  Example: Radio with super-long label
  <label class="label--radio" for="radio-3"><input id="radio-3" type="radio" value="yes"> Radio label Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, accusantium ipsum animi perspiciatis officiis iure voluptatibus corporis. Enim, officia, tempora vitae libero dolore sint voluptatum. Blanditiis odit laudantium minus repellat</label>


------------------------------------------------------ */
input[type=radio] {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #444;
  background: transparent;
}
input[type=radio]:checked {
  background: #222;
}

.label--radio {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 1em;
}
.label--radio input {
  position: absolute;
  top: .7em;
  left: 0;
}

/* @checkbox inputs
--------------------------------------------------------

  Base styling for checkbox inputs.  Checkboxes are surrounded
  by a label for better click targets.

  Example: Checkbox
  <label class="label--checkbox" for="checkbox-1"><input id="checkbox-1" type="checkbox" value="yes"> Checkbox label</label>

  Example: Checkbox with super-long label
  <label class="label--checkbox" for="checkbox-3"><input id="checkbox-3" type="checkbox" value="yes"> Checkbox label Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, accusantium ipsum animi perspiciatis officiis iure voluptatibus corporis. Enim, officia, tempora vitae libero dolore sint voluptatum. Blanditiis odit laudantium minus repellat</label>


------------------------------------------------------ */
input[type=checkbox] {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  padding: 0;
  border: 1px solid #444;
  background: transparent;
}
input[type=checkbox]:checked {
  background: #222;
}

.label--checkbox {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 1em;
}
.label--checkbox input {
  position: absolute;
  top: .7em;
  left: 0;
}

/* @textareas
--------------------------------------------------------

  Base styling for textareas

  Example: Textarea
  <textarea name="schramburger">Hello, there.</textarea>

------------------------------------------------------ */
textarea {
  width: 100%;
}

/* @labels
--------------------------------------------------------

  Base styling for labels

  Example: label
  <label>Don't label me, I'm a free spirit</labe>

------------------------------------------------------ */
label {
  font-size: 1em;
  font-weight: bold;
}

/* @form
--------------------------------------------------------

  Like the bootstrap convention, apply standard styling
  on any form with the classname .form

  This allows us to create modifier classnames like
  .form--inline and .form--horizontal, which will be
  laid out further below.

------------------------------------------------------ */
.form {
  display: block;
  padding: 2em;
  border: 1px solid #888;
  background: #eee;
}

/* @form-header
--------------------------------------------------------

  A form header usually consists of a title and some
  copy.

  Example: Form header
  <header class="form__header">
    <h2>Contact Us</h2>
    <p>Use this form to contact us.  We love talking to
    our customers.</p>
  </header>

-------------------------------------------------------- */
.form__header {
  padding-bottom: 1em;
  margin-bottom: 2em;
  border-bottom: 1px solid #888;
}

/* @fieldsets
--------------------------------------------------------

  Fieldsets group together related fields.

  Example: Fieldset
  <fieldset>
    <legend>Personal Information</legend>
    <article class="field">
      <label class="field__label" for="exampleInput1">Your Name</label>
      <input class="field__input="exampleInput1" type="text" required="required" placeholder="Your name">
      <span class="field__feedback"></span>
      <span class="field__hint"></span>
    </article>
    <article class="field">
      <label class="field__label" for="exampleInput2">Your Email</label>
      <input class="field__input="exampleInput2" type="email" required="required" placeholder="Your email">
      <span class="field__feedback"></span>
      <span class="field__hint">Must be a valid email address</span>
    </article>
  </fieldset>

  Fieldsets are also nested inside other fieldsets.

  Example: Nested Fieldsets
  <fieldset>
    <legend>Personal Information</legend>
    <article class="field">
      <label class="field__label" for="exampleInput31">Your Name</label>
      <input class="field__input="exampleInput31" type="text" required="required" placeholder="Your name">
      <span class="field__feedback"></span>
      <span class="field__hint"></span>
    </article>
    <article class="field">
      <label class="field__label" for="exampleInput32">Your Email</label>
      <input class="field__input="exampleInput32" type="email" required="required" placeholder="Your email">
      <span class="field__feedback"></span>
      <span class="field__hint">Must be a valid email address</span>
    </article>
    <fieldset>
      <legend>Address</legend>
        <article class="field">
          <label class="field__label" for="exampleInput33">Address 1</label>
          <input class="field__input="exampleInput33" type="text" required="required" placeholder="Address 1">
          <span class="field__feedback"></span>
          <span class="field__hint">Must be a valid email address</span>
        </article>
        <article class="field">
          <label class="field__label" for="exampleInput34">Address 2</label>
          <input class="field__input="exampleInput34" type="text" required="required" placeholder="Address 2">
          <span class="field__feedback"></span>
          <span class="field__hint">Must be a valid email address</span>
        </article>
    </fieldset>
  </fieldset>

-------------------------------------------------------- */
fieldset {
  border: none;
}

/* @fields
--------------------------------------------------------

  A field is an article that contains the input and anything
  related to the input.

  Example: Field for a text input
  <article class="field">
    <label class="field__label" for="exampleInput1">Your Name</label>
    <input class="field__input="exampleInput1" type="text" required="required" placeholder="Your name">
    <span class="field__feedback"></span>
    <span class="field__hint"></span>
  </article>

  Example: Field with hint
  <article class="field">
    <label class="field__label" for="exampleInput2">Your Email</label>
    <input class="field__input="exampleInput2" type="email" required="required" placeholder="Your email">
    <span class="field__feedback"></span>
    <span class="field__hint">Must be a valid email address</span>
  </article>

  Example: Field with Error
  <article class="field is-error">
    <label class="field__label" for="exampleInput3">Your Email</label>
    <input class="field__input="exampleInput3" type="email" required="required" placeholder="Your email">
    <span class="field__feedback">Sorry, that email is in use.</span>
    <span class="field__hint"></span>
  </article>

  Example: Field for a select input
  <article class="field">
    <label class="field__label" for="exampleInput4" >Select your favorite</label>
    <select class="field__input input--select" id="exampleInput4"  name="favorite-food">
      <option>Pizza</option>
      <option>Tacos</option>
      <option>Burgers</option>
    </select>
    <span class="field__feedback"></span>
    <span class="field__hint"></span>
  </article>

  Example: Field for a textarea input
  <article class="field">
    <label class="field__label">Your Name</label>
    <textarea class="field__input">Hello, there</textarea>
    <span class="field__feedback"></span>
    <span class="field__hint"></span>
  </article>

-------------------------------------------------------- */
.field {
  position: relative;
  margin-bottom: 2em;
}

.field__label {
  display: block;
}

.field__hint {
  color: #888;
  font-size: .75em;
  padding: .25em 0;
  font-style: italic;
}

.field__feedback {
  display: none;
  font-size: .75em;
  padding: .25em .75em;
  background: rgba(218, 35, 0, 0.3);
  color: white;
}

.field.is-error .field__feedback {
  display: block;
}
.field.is-error input {
  border: 1px solid rgba(218, 35, 0, 0.3);
}

/* @input group
--------------------------------------------------------

  Group containing multiple inputs, helpful for lists
  of radios or checkboxes.  Shown below in a field...

  Example: Field with input group of radios
  <article class="field">
    <label class="field__label">Choose your favorite</label>
    <div class="field__input-group">
      <label class="label--radio" for="favorite-food-1"><input id="favorite-food-1" name="favorite-food" type="radio" value="pizza"> Pizza</label>
      <label class="label--radio" for="favorite-food-2"><input id="favorite-food-2" name="favorite-food" type="radio" value="tacos"> Tacos</label>
      <label class="label--radio" for="favorite-food-3"><input id="favorite-food-3" name="favorite-food" type="radio" value="burgers"> Burgers</label>
    </div>
    <span class="field__feedback"></span>
    <span class="field__hint"></span>
  </article>

  Example: Field with input group of checkboxes
  <article class="field">
    <label class="field__label">Select your favorites</label>
    <div class="field__input-group">
      <label class="label--checkbox" for="favorite-food-4"><input id="favorite-food-4" name="favorite-food-alt" type="checkbox" value="pizza"> Pizza</label>
      <label class="label--checkbox" for="favorite-food-5"><input id="favorite-food-5" name="favorite-food-alt" type="checkbox" value="tacos"> Tacos</label>
      <label class="label--checkbox" for="favorite-food-6"><input id="favorite-food-6" name="favorite-food-alt" type="checkbox" value="burgers"> Burgers</label>
    </div>
    <span class="field__feedback"></span>
    <span class="field__hint"></span>
  </article>

  Example: Field with input group list modifier
  <article class="field">
    <label class="field__label">Select your favorites</label>
    <div class="field__input-group--list">
      <label class="label--checkbox" for="favorite-food-7"><input id="favorite-food-7" name="favorite-food-alt2" type="checkbox" value="pizza"> Pizza</label>
      <label class="label--checkbox" for="favorite-food-8"><input id="favorite-food-8" name="favorite-food-alt2" type="checkbox" value="tacos"> Tacos</label>
      <label class="label--checkbox" for="favorite-food-9"><input id="favorite-food-9" name="favorite-food-alt2" type="checkbox" value="burgers"> Burgers</label>
    </div>
    <span class="field__feedback"></span>
    <span class="field__hint"></span>
  </article>

------------------------------------------------------ */
.field__input-group {
  display: block;
}
.field__input-group > * {
  display: inline-block;
  margin-right: .5em;
}
.field__input-group > *:last-child {
  margin-right: 0;
}

.field__input-group--list {
  display: block;
}
.field__input-group--list > * {
  display: block;
  margin: .5em 0;
}
.field__input-group--list > *:last-child {
  margin-bottom: 0;
}

/* @form action
--------------------------------------------------------

  Each form has an actions footer at the bottom to
  submit the form

  Example: Form Actions Footer
  <footer class="form__actions">
  <article class="field two-fiths">
    <label class="field__label is-visually-hidden" for="exampleInput7" >Submit</label>
    <input class="field__input btn btn--block" type="submit" id="exampleInput7" value="Submit">
    <span  class="field__feedback"></span>
    <span  class="field__hint"></span>
  </article>
  </footer>

--------------------------------------------------------- */
.form__actions {
  padding-top: 1em;
  margin-top: 2em;
  border-top: 1px solid #888;
}

/**

  @headings
--------------------------------------------------------
  elements/_headings.scss
--------------------------------------------------------

  We set any base styles for any headings that have
  no classnames.

  Example: Headings
  <h1>This is an h1 heading</h1>
  <h2>This is an h2 heading</h2>
  <h3>This is an h3 heading</h3>
  <h4>This is an h4 heading</h4>
  <h5>This is an h5 heading</h5>
  <h6>This is an h6 heading</h6>

  Additionally, we add classnames so you
  can apply the styling of, for instance, an h1 to an h2.

  Example: H1 styled like an H3
  <h1 class="h3">This is an h1 but looks like an h3</h1>

------------------------------------------------------ */
h1, .h1 {
  margin-bottom: 1em;
}

h2, .h2 {
  margin-bottom: 1em;
}

h3, .h3 {
  margin-bottom: 1em;
}

h4, .h4 {
  margin-bottom: 1em;
}

h5, .h5 {
  margin-bottom: 1em;
}

h6, .h6 {
  margin-bottom: 1em;
}

/**

   @hr
--------------------------------------------------------
  elements/_hr.scss
--------------------------------------------------------

  Horizontal Rule

  Example:
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <hr>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

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

/**

   @html
--------------------------------------------------------
  elements/_html.scss
--------------------------------------------------------

  HTML should contain the site's default background color
  and font-size

------------------------------------------------------ */
html {
  font-size: 80%;
}
@media (min-width: 20em) {
  html {
    font-size: 80%;
  }
}
@media (min-width: 30em) {
  html {
    font-size: 83.33333%;
  }
}
@media (min-width: 40em) {
  html {
    font-size: 86.66667%;
  }
}
@media (min-width: 50em) {
  html {
    font-size: 90%;
  }
}
@media (min-width: 60em) {
  html {
    font-size: 93.33333%;
  }
}
@media (min-width: 70em) {
  html {
    font-size: 96.66667%;
  }
}
@media (min-width: 80em) {
  html {
    font-size: 100%;
  }
}

* {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**

  @images
---------------------------------------------------------
  elements/_images.scss
--------------------------------------------------------

  Base styling for images, plus some helpful utility
  classes that modify images.

  Note: You won't add any styling to these image classes,
  these are just utility classes

--------------------------------------------------------- */
/* @images
--------------------------------------------------------

  Base Image Style is 100% width by default

  Example: Image
  <img src="http://fillmurray.com/600/300">

------------------------------------------------------ */
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* @img--natural
--------------------------------------------------------

  Natural Images are 100% max-width, but their natural width by default

  Example: Image, Natural Width
  <img class="img--natural" src="http://fillmurray.com/600/300">

------------------------------------------------------ */
.img--natural {
  width: auto;
}

/* @img--title
--------------------------------------------------------

  Title images fit within a heading/title element

  Example: Image inside a title (.img--title)
  <h1><img class="img--title" src="http://fillmurray.com/300/300"> Title Here versions of Lorem Ipsum.</h1>
  <h2><img class="img--title" src="http://fillmurray.com/300/300"> Title Here versions of Lorem Ipsum.</h2>
  <h3><img class="img--title" src="http://fillmurray.com/300/300"> Title Here versions of Lorem Ipsum.</h3>

------------------------------------------------------ */
.img--title {
  height: 1em;
  width: auto;
  vertical-align: top;
}

/* @image placement
--------------------------------------------------------

  Here are a few helper classes to position images, particularly
  helpful inside paragraphs.

  Example: Image Right
  <p><img class="img--right" src="http://fillmurray.com/400/300"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  Example: Image, Natural Width
  <p><img class="img--left" src="http://fillmurray.com/400/300"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  Example: Image, Center
  <p><img class="img--center" src="http://fillmurray.com/400/300"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

------------------------------------------------------ */
.img--right {
  width: auto;
  float: right;
  margin-bottom: 1.125em;
  margin-left: 1.125em;
}

.img--left {
  width: auto;
  float: left;
  margin-right: 1.125em;
  margin-bottom: 1.125em;
}

.img--center {
  width: auto;
  display: block;
  margin-right: auto;
  margin-bottom: 1.125em;
  margin-left: auto;
}

.img--right img,
.img--left img,
.img--center img {
  width: auto;
}

/* @img--circle
--------------------------------------------------------

  Popular circle image for bios etc.

  Example: Circle image
  <img class="img--circle" src="http://fillmurray.com/400/400">

------------------------------------------------------ */
.img--circle {
  border-radius: 50%;
}

/* @img full background
-----------------------------------------------------------

  use this classes to embeded full background with content
  
  Example:

  <div class="img-holder">
   <img class="background-image" src="http://fillmurray.com/400/400">
  </div>

----------------------------------------------------------- */
.img-holder {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover !important;
  z-index: 0;
  background-position: 50% 50% !important;
}

/*------------------------------------------------------
use this class to embded side content
------------------------------------------------------ */
.img-container {
  overflow: hidden;
  position: absolute !important;
  height: 100%;
  padding: 0px;
  top: 0px;
  right: 0;
}
.img-container.header-full-image {
  width: 100%;
}
.img-container.img-left {
  left: 0;
}

.img-side {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 120%;
  width: 100%;
  background-size: cover !important;
  z-index: 0;
  background-position: 50% 50% !important;
}
.img-side.full {
  height: 100%;
}

/**

  @icons
---------------------------------------------------------
  elements/_icons.scss
--------------------------------------------------------

  Your icon set may vary. In this partial, you may wish
  to load in a font icon set and add all the associated
  css that goes with it. This would be the case if you
  were using something like Symbolset or IcoMoon for
  example.

--------------------------------------------------------- */
/* @icon
--------------------------------------------------------

  This is a basic icon element. We set some basic
  structural styles and display styles to get the ball
  rolling.

  Example: Open Icon
  <i class="icon icon--open">&plus;</i>

  Example: Close Icon
  <i class="icon icon--close">&times;</i>

------------------------------------------------------ */
.icon {
  color: inherit;
  display: inline-block;
  font-style: normal;
  vertical-align: middle;
  font-size: 1em;
}

/**

  @links
--------------------------------------------------------
  elements/_links.scss
--------------------------------------------------------

  Links, <a> etc. & Webkit tap highlight

  Example: link
  <p>Lorem Ipsum is simply <a href="#">dummy text</a> of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

-------------------------------------------------------- */
/* @anchors
--------------------------------------------------------

  Anchors will have this base styling

------------------------------------------------------ */
a {
  color: inherit;
}
a:hover, a:focus {
  opacity: .75;
}

/* @webkit-tap-highlight
--------------------------------------------------------

  Declare the webkit tap highlight style

------------------------------------------------------ */
body {
  -webkit-tap-highlight-color: rba(0, 0, 0, 0.35);
}

/**

  @lists
--------------------------------------------------------
  elements/_lists.scss
--------------------------------------------------------

  Structure for lists

  Example: Unordered List
  <ul>
    <li>List item here</li>
    <li>List item here</li>
    <li>List item here</li>
    <li>List item here</li>
    <li>
      <ul>
        <li>Nested Item</li>
        <li>Nested Item</li>
        <li>Nested Item</li>
        <li>Nested Item</li>
      </ul>
    </li>
  </ul>

  Example: Ordered List
  <ol>
    <li>List item here</li>
    <li>List item here</li>
    <li>List item here</li>
    <li>List item here</li>
    <li>
      <ol>
        <li>Nested Item</li>
        <li>Nested Item</li>
        <li>Nested Item</li>
        <li>Nested Item</li>
      </ul>
    </li>
  </ol>

-------------------------------------------------------- */
ul,
ol {
  padding-left: 0;
  margin-left: 1.125em;
  margin-bottom: 1.125em;
}
ul li,
ol li {
  line-height: 2;
}

/**

  @quotes
--------------------------------------------------------
  elements/_quotes.scss
--------------------------------------------------------

  Blockquotes and pull quotes

-----------------------------------------------------  */
/* @blockquote
--------------------------------------------------------

  Example:
  <blockquote>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <cite><a href="http://foo.com">The source</a></cite>
  </blockquote>

-------------------------------------------------------- */
/* @pull-quote
--------------------------------------------------------

  Large quotes pulled from body text.

  Example:
  <blockquote class="pull-quote">
    <p>This is an awesome pull quote!</p>
  </blockquote>

-------------------------------------------------------- */
/**

  @text
--------------------------------------------------------
  elements/_text.scss
--------------------------------------------------------

  Some basic styles to paragraphs and
  inline styles

-----------------------------------------------------  */
/* @paragraphs
--------------------------------------------------------

  Example: Paragraphs
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

--------------------------------------------------------  */
p {
  margin-bottom: 1em;
  line-height: 1.40625em;
}

/* @inline
--------------------------------------------------------

  Common inline elements

  Example: inline elements
  <p>Lorem Ipsum is <b>bold</b> text of the <strong>strong</strong> printing and typesetting industry. Lorem Ipsum is <i>italic</i> simply dummy text <em>emphasized</em> of the printing and typesetting industry.</p<

-------------------------------------------------------- */
b,
strong {
  font-weight: bold;
}

i,
em {
  font-style: italic;
}

/***

  @layout
---------------------------------------------------------

  A large portion of CSS is structural layout. You will use
  these helpers to create the scaffolding that will support
  the elements and modules that make up your site.

---------------------------------------------------------  */
/**

  @container
--------------------------------------------------------
  layout/_container.scss
--------------------------------------------------------

  The .container class is applied to restrict the
  max-width of an element, usually a bit of content.

  Often, you will place a .container div within another
  element that has a background color. This gives you
  a full-bleed background, but the content is contained
  within the max-width.

  Example: Container within a section
  <section class="awesome-section-with-background-color">
    <div class="container">
      <p>Your content goes here... </p>
    </div>
  </section>

------------------------------------------------------ */
.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 73.125em;
  padding: 0 1.6875em;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 34.375em) {
  .container {
    padding: 0 1.125em;
  }
}

/**

  @grids
---------------------------------------------------------
  layout/_grids.scss
--------------------------------------------------------

  Skyline uses a simple grid system.  It starts with
  a wrapper div that can have a classname of .grid-wrap
  or .gw for short.  Inside of that div, you'll nest
  your grid units.  These are divs with classname of
  either .grid or .g for short.

  To specify the responsive behavior of the grid,
  add width classes from layout/_widths.scss.

  Example: Grid with responsive width classes
  <div class="gw">
    <div class="g sm-one-whole md-one-half  lg-one-third    xl-one-twelfth">...</div>
    <div class="g sm-one-half  md-one-half  lg-one-third    xl-one-twelfth">...</div>
    <div class="g sm-one-half  md-one-third lg-one-third    xl-one-twelfth">...</div>
    <div class="g sm-one-whole md-one-third lg-one-fifth    xl-one-twelfth">...</div>
    <div class="g sm-one-half  md-one-third lg-three-fifths xl-one-twelfth">...</div>
    <div class="g sm-one-half  md-one-half  lg-one-fifth    xl-one-twelfth">...</div>
    <div class="g sm-one-whole md-one-half  lg-one-sixth    xl-one-twelfth">...</div>
    <div class="g sm-one-half  md-one-third lg-one-sixth    xl-one-twelfth">...</div>
    <div class="g sm-one-half  md-one-third lg-one-sixth    xl-one-twelfth">...</div>
    <div class="g sm-one-whole md-one-third lg-one-sixth    xl-one-twelfth">...</div>
    <div class="g sm-one-half  md-one-half  lg-one-sixth    xl-one-twelfth">...</div>
    <div class="g sm-one-half  md-one-half  lg-one-sixth    xl-one-twelfth">...</div>
  </div>

  For a grid wrap containing equally-sized grid units, like
  a gallery of thumbnails for instance, use the responsive ups
  classes from layout/_widths.scss. With these classes
  applied to the .grid-wrap/.gw, you won't need to specify
  widths on the individual grid units, just on the wrapper.

  Example: Grid with responsive ups classes
  <div class="gw two-up sm-three-up md-four-up lg-six-up">
    <div class="g">...</div>
    <div class="g">...</div>
    <div class="g">...</div>
    <div class="g">...</div>
    <div class="g">...</div>
    <div class="g">...</div>
    <div class="g">...</div>
    <div class="g">...</div>
    <div class="g">...</div>
    <div class="g">...</div>
    <div class="g">...</div>
    <div class="g">...</div>
  </div>
  
  NOTE: see some test styles at the bottom of this partial
  Remove them if you don't need them.

------------------------------------------------------ */
.grid-wrap,
.gw {
  display: block;
  list-style-type: none;
  margin-bottom: 0em;
}
.grid-wrap:after,
.gw:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 20em) {
  .grid-wrap,
  .gw {
    margin: 0 0 -1.125em -0.525em;
  }
}

.grid,
.g {
  min-height: 1px;
  position: relative;
  padding-bottom: 0.625em;
  display: block;
  width: 100%;
}
.grid:after,
.g:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 20em) {
  .grid,
  .g {
    padding: 0 0 .625em .625em;
    float: left;
  }
}

/**

  @hide
---------------------------------------------------------
  layout/_hide.scss
--------------------------------------------------------

  Utility state classes to hide things in different ways

--------------------------------------------------------- */
.is-hidden {
  display: none !important;
  visibility: hidden !important;
}

.is-visually-hidden {
  position: absolute;
  left: -9999%;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

@media screen and (min-width: 20em) {
  .hide__xs {
    display: none;
  }
}
@media screen and (min-width: 34.375em) {
  .hide__sm {
    display: none;
  }
}
@media screen and (min-width: 48em) {
  .hide__md {
    display: none;
  }
}
@media screen and (min-width: 64em) {
  .hide__lg {
    display: none;
  }
}
@media screen and (min-width: 78.5em) {
  .hide__xl {
    display: none;
  }
}
/**

  @media
--------------------------------------------------------
  layout/_media.scss
--------------------------------------------------------

  The 'media' object is a common pattern in OOCSS.
  It consists of a wrapper element with a classname of
  .media and then two child elements, one that contains
  an image or video that is floated, and the other
  contains text.

  This used commonly in bios, or comments where you
  have an avatar to one site, and the comment next to it.

  Source: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

-----------------------------------------------------  */
/* @media objects
---------------------------------------------------------

  Example: Media object, left
  <article class="media">
    <div class="media__left one-fifth">
      <img src="http://fillmurray.com/300/300">
    </div>
    <div class="media__body">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
  </article>

  Example: Media object, right
  <article class="media">
    <div class="media__right one-fifth">
      <img src="http://fillmurray.com/300/300">
    </div>
    <div class="media__body">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
  </article>

---------------------------------------------------------  */
.media {
  display: block;
  margin-bottom: 1em;
}
.media:after {
  content: "";
  display: table;
  clear: both;
}

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

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

.media__left img,
.media__right img {
  display: block;
}

.media__body {
  overflow: hidden;
}

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

/**

  @ups
--------------------------------------------------------
  layout/_ups.scss
--------------------------------------------------------

  UPS?

  Yep, ups.  These are global classes that will set
  their direct children to a specific width.  You will
  mainly use these in grids, and maybe with tabs or
  navigations.

  For instance: four-up will set each child to 25%

  Set the ups configuration variables below in this partial
  to specify how many or how few classes you want available
  in your project.

  Example: Ups and grids
  <div class="gw two-up">
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
  </div><!--/gw-->
  <div class="gw three-up">
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
  </div><!--/gw-->

  Ups work like widths in that they have responsive behavior.  If
  you prepend an up class with a responsive prefix, like (s for small
  or m for medium) the behaviour will only kick in at those
  viewports.

  For example, if you want your gallery to be two-up at the smallest
  viewport, four-up at medium, six-up at large, and eight-up on the largest then use
  this.

  Example: Responsive Ups
  <div class="gw two-up m-four-up l-six-up xl-eight-up">
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
    <div class="g"><img src="http://fillmurray.com/500/300"></div>
  </div><!--/gw-->
  
  

-----------------------------------------------------  */
/*
  
  Widths at default Viewport 

---------------------------------------------------- */
.one-up > * {
  width: 100%;
}

.two-up > * {
  width: 50%;
}

.three-up > * {
  width: 33.33333%;
}

.four-up > * {
  width: 25%;
}

.five-up > * {
  width: 20%;
}

.six-up > * {
  width: 16.66667%;
}

.seven-up > * {
  width: 14.28571%;
}

.eight-up > * {
  width: 12.5%;
}

.nine-up > * {
  width: 11.11111%;
}

.ten-up > * {
  width: 10%;
}

.eleven-up > * {
  width: 9.09091%;
}

.twelve-up > * {
  width: 8.33333%;
}

/* 
  
  Responsive ups at $breakpoint__xs

---------------------------------------------------- */
@media screen and (min-width: 20em) {
  .xs-one-up > * {
    width: 100%;
  }

  .xs-two-up > * {
    width: 50%;
  }

  .xs-three-up > * {
    width: 33.33333%;
  }

  .xs-four-up > * {
    width: 25%;
  }

  .xs-five-up > * {
    width: 20%;
  }

  .xs-six-up > * {
    width: 16.66667%;
  }

  .xs-seven-up > * {
    width: 14.28571%;
  }

  .xs-eight-up > * {
    width: 12.5%;
  }

  .xs-nine-up > * {
    width: 11.11111%;
  }

  .xs-ten-up > * {
    width: 10%;
  }

  .xs-eleven-up > * {
    width: 9.09091%;
  }

  .xs-twelve-up > * {
    width: 8.33333%;
  }
}
/* 
  
  Responsive ups at $breakpoint__sm

---------------------------------------------------- */
@media screen and (min-width: 34.375em) {
  .sm-one-up > * {
    width: 100%;
  }

  .sm-two-up > * {
    width: 50%;
  }

  .sm-three-up > * {
    width: 33.33333%;
  }

  .sm-four-up > * {
    width: 25%;
  }

  .sm-five-up > * {
    width: 20%;
  }

  .sm-six-up > * {
    width: 16.66667%;
  }

  .sm-seven-up > * {
    width: 14.28571%;
  }

  .sm-eight-up > * {
    width: 12.5%;
  }

  .sm-nine-up > * {
    width: 11.11111%;
  }

  .sm-ten-up > * {
    width: 10%;
  }

  .sm-eleven-up > * {
    width: 9.09091%;
  }

  .sm-twelve-up > * {
    width: 8.33333%;
  }
}
/* 
  
  Responsive ups at $breakpoint__md

---------------------------------------------------- */
@media screen and (min-width: 48em) {
  .md-one-up > * {
    width: 100%;
  }

  .md-two-up > * {
    width: 50%;
  }

  .md-three-up > * {
    width: 33.33333%;
  }

  .md-four-up > * {
    width: 25%;
  }

  .md-five-up > * {
    width: 20%;
  }

  .md-six-up > * {
    width: 16.66667%;
  }

  .md-seven-up > * {
    width: 14.28571%;
  }

  .md-eight-up > * {
    width: 12.5%;
  }

  .md-nine-up > * {
    width: 11.11111%;
  }

  .md-ten-up > * {
    width: 10%;
  }

  .md-eleven-up > * {
    width: 9.09091%;
  }

  .md-twelve-up > * {
    width: 8.33333%;
  }
}
/* 
  
  Responsive ups at $breakpoint__lg

---------------------------------------------------- */
@media screen and (min-width: 64em) {
  .lg-one-up > * {
    width: 100%;
  }

  .lg-two-up > * {
    width: 50%;
  }

  .lg-three-up > * {
    width: 33.33333%;
  }

  .lg-four-up > * {
    width: 25%;
  }

  .lg-five-up > * {
    width: 20%;
  }

  .lg-six-up > * {
    width: 16.66667%;
  }

  .lg-seven-up > * {
    width: 14.28571%;
  }

  .lg-eight-up > * {
    width: 12.5%;
  }

  .lg-nine-up > * {
    width: 11.11111%;
  }

  .lg-ten-up > * {
    width: 10%;
  }

  .lg-eleven-up > * {
    width: 9.09091%;
  }

  .lg-twelve-up > * {
    width: 8.33333%;
  }
}
/* 
  
  Responsive ups at $breakpoint__xl

---------------------------------------------------- */
@media screen and (min-width: 78.5em) {
  .xl-one-up > * {
    width: 100%;
  }

  .xl-two-up > * {
    width: 50%;
  }

  .xl-three-up > * {
    width: 33.33333%;
  }

  .xl-four-up > * {
    width: 25%;
  }

  .xl-five-up > * {
    width: 20%;
  }

  .xl-six-up > * {
    width: 16.66667%;
  }

  .xl-seven-up > * {
    width: 14.28571%;
  }

  .xl-eight-up > * {
    width: 12.5%;
  }

  .xl-nine-up > * {
    width: 11.11111%;
  }

  .xl-ten-up > * {
    width: 10%;
  }

  .xl-eleven-up > * {
    width: 9.09091%;
  }

  .xl-twelve-up > * {
    width: 8.33333%;
  }
}
/* 
  
  Responsive ups at $breakpoint__xxl

---------------------------------------------------- */
@media screen and (min-width: 100em) {
  .xxl-one-up > * {
    width: 100%;
  }

  .xxl-two-up > * {
    width: 50%;
  }

  .xxl-three-up > * {
    width: 33.33333%;
  }

  .xxl-four-up > * {
    width: 25%;
  }

  .xxl-five-up > * {
    width: 20%;
  }

  .xxl-six-up > * {
    width: 16.66667%;
  }

  .xxl-seven-up > * {
    width: 14.28571%;
  }

  .xxl-eight-up > * {
    width: 12.5%;
  }

  .xxl-nine-up > * {
    width: 11.11111%;
  }

  .xxl-ten-up > * {
    width: 10%;
  }

  .xxl-eleven-up > * {
    width: 9.09091%;
  }

  .xxl-twelve-up > * {
    width: 8.33333%;
  }
}
/**

  @widths
---------------------------------------------------------
  layout/_widths.scss
--------------------------------------------------------

  Global Width Classes like .one-third or .seven-twelfths
  and responsive widths like .sm-one-third or .xl-one-half

  If you append the width class with a size indicator, the
  size will only be applied if the viewport is at least
  at that breakpoint size.

  Set the widths configuration variables below in this partial
  to specify how many or how few classes you want available
  in your project.

  Requires:
  * base/_vars.scss and the breakpoint mixin from
  * base/_mixin-breakpoints.scss

---------------------------------------------------------  */
/*
  
  Widths at default Viewport 

---------------------------------------------------- */
.one-whole {
  width: 100%;
}

.one-half {
  width: 50%;
}

.two-halves {
  width: 100%;
}

.one-third {
  width: 33.33333%;
}

.two-thirds {
  width: 66.66667%;
}

.three-thirds {
  width: 100%;
}

.one-fourth {
  width: 25%;
}

.two-fourths {
  width: 50%;
}

.three-fourths {
  width: 75%;
}

.four-fourths {
  width: 100%;
}

.one-fifth {
  width: 20%;
}

.two-fifths {
  width: 40%;
}

.three-fifths {
  width: 60%;
}

.four-fifths {
  width: 80%;
}

.five-fifths {
  width: 100%;
}

.one-sixth {
  width: 16.66667%;
}

.two-sixths {
  width: 33.33333%;
}

.three-sixths {
  width: 50%;
}

.four-sixths {
  width: 66.66667%;
}

.five-sixths {
  width: 83.33333%;
}

.six-sixths {
  width: 100%;
}

.one-seventh {
  width: 14.28571%;
}

.two-sevenths {
  width: 28.57143%;
}

.three-sevenths {
  width: 42.85714%;
}

.four-sevenths {
  width: 57.14286%;
}

.five-sevenths {
  width: 71.42857%;
}

.six-sevenths {
  width: 85.71429%;
}

.seven-sevenths {
  width: 100%;
}

.one-eighth {
  width: 12.5%;
}

.two-eighths {
  width: 25%;
}

.three-eighths {
  width: 37.5%;
}

.four-eighths {
  width: 50%;
}

.five-eighths {
  width: 62.5%;
}

.six-eighths {
  width: 75%;
}

.seven-eighths {
  width: 87.5%;
}

.eight-eighths {
  width: 100%;
}

.one-ninth {
  width: 11.11111%;
}

.two-ninths {
  width: 22.22222%;
}

.three-ninths {
  width: 33.33333%;
}

.four-ninths {
  width: 44.44444%;
}

.five-ninths {
  width: 55.55556%;
}

.six-ninths {
  width: 66.66667%;
}

.seven-ninths {
  width: 77.77778%;
}

.eight-ninths {
  width: 88.88889%;
}

.nine-ninths {
  width: 100%;
}

.one-tenth {
  width: 10%;
}

.two-tenths {
  width: 20%;
}

.three-tenths {
  width: 30%;
}

.four-tenths {
  width: 40%;
}

.five-tenths {
  width: 50%;
}

.six-tenths {
  width: 60%;
}

.seven-tenths {
  width: 70%;
}

.eight-tenths {
  width: 80%;
}

.nine-tenths {
  width: 90%;
}

.ten-tenths {
  width: 100%;
}

.one-eleventh {
  width: 9.09091%;
}

.two-elevenths {
  width: 18.18182%;
}

.three-elevenths {
  width: 27.27273%;
}

.four-elevenths {
  width: 36.36364%;
}

.five-elevenths {
  width: 45.45455%;
}

.six-elevenths {
  width: 54.54545%;
}

.seven-elevenths {
  width: 63.63636%;
}

.eight-elevenths {
  width: 72.72727%;
}

.nine-elevenths {
  width: 81.81818%;
}

.ten-elevenths {
  width: 90.90909%;
}

.eleven-elevenths {
  width: 100%;
}

.one-twelfth {
  width: 8.33333%;
}

.two-twelfths {
  width: 16.66667%;
}

.three-twelfths {
  width: 25%;
}

.four-twelfths {
  width: 33.33333%;
}

.five-twelfths {
  width: 41.66667%;
}

.six-twelfths {
  width: 50%;
}

.seven-twelfths {
  width: 58.33333%;
}

.eight-twelfths {
  width: 66.66667%;
}

.nine-twelfths {
  width: 75%;
}

.ten-twelfths {
  width: 83.33333%;
}

.eleven-twelfths {
  width: 91.66667%;
}

.twelve-twelfths {
  width: 100%;
}

/* 
  
  Responsive widths at $breakpoint__xs

---------------------------------------------------- */
@media screen and (min-width: 20em) {
  .xs-one-whole {
    width: 100%;
  }

  .xs-one-half {
    width: 50%;
  }

  .xs-two-halves {
    width: 100%;
  }

  .xs-one-third {
    width: 33.33333%;
  }

  .xs-two-thirds {
    width: 66.66667%;
  }

  .xs-three-thirds {
    width: 100%;
  }

  .xs-one-fourth {
    width: 25%;
  }

  .xs-two-fourths {
    width: 50%;
  }

  .xs-three-fourths {
    width: 75%;
  }

  .xs-four-fourths {
    width: 100%;
  }

  .xs-one-fifth {
    width: 20%;
  }

  .xs-two-fifths {
    width: 40%;
  }

  .xs-three-fifths {
    width: 60%;
  }

  .xs-four-fifths {
    width: 80%;
  }

  .xs-five-fifths {
    width: 100%;
  }

  .xs-one-sixth {
    width: 16.66667%;
  }

  .xs-two-sixths {
    width: 33.33333%;
  }

  .xs-three-sixths {
    width: 50%;
  }

  .xs-four-sixths {
    width: 66.66667%;
  }

  .xs-five-sixths {
    width: 83.33333%;
  }

  .xs-six-sixths {
    width: 100%;
  }

  .xs-one-seventh {
    width: 14.28571%;
  }

  .xs-two-sevenths {
    width: 28.57143%;
  }

  .xs-three-sevenths {
    width: 42.85714%;
  }

  .xs-four-sevenths {
    width: 57.14286%;
  }

  .xs-five-sevenths {
    width: 71.42857%;
  }

  .xs-six-sevenths {
    width: 85.71429%;
  }

  .xs-seven-sevenths {
    width: 100%;
  }

  .xs-one-eighth {
    width: 12.5%;
  }

  .xs-two-eighths {
    width: 25%;
  }

  .xs-three-eighths {
    width: 37.5%;
  }

  .xs-four-eighths {
    width: 50%;
  }

  .xs-five-eighths {
    width: 62.5%;
  }

  .xs-six-eighths {
    width: 75%;
  }

  .xs-seven-eighths {
    width: 87.5%;
  }

  .xs-eight-eighths {
    width: 100%;
  }

  .xs-one-ninth {
    width: 11.11111%;
  }

  .xs-two-ninths {
    width: 22.22222%;
  }

  .xs-three-ninths {
    width: 33.33333%;
  }

  .xs-four-ninths {
    width: 44.44444%;
  }

  .xs-five-ninths {
    width: 55.55556%;
  }

  .xs-six-ninths {
    width: 66.66667%;
  }

  .xs-seven-ninths {
    width: 77.77778%;
  }

  .xs-eight-ninths {
    width: 88.88889%;
  }

  .xs-nine-ninths {
    width: 100%;
  }

  .xs-one-tenth {
    width: 10%;
  }

  .xs-two-tenths {
    width: 20%;
  }

  .xs-three-tenths {
    width: 30%;
  }

  .xs-four-tenths {
    width: 40%;
  }

  .xs-five-tenths {
    width: 50%;
  }

  .xs-six-tenths {
    width: 60%;
  }

  .xs-seven-tenths {
    width: 70%;
  }

  .xs-eight-tenths {
    width: 80%;
  }

  .xs-nine-tenths {
    width: 90%;
  }

  .xs-ten-tenths {
    width: 100%;
  }

  .xs-one-eleventh {
    width: 9.09091%;
  }

  .xs-two-elevenths {
    width: 18.18182%;
  }

  .xs-three-elevenths {
    width: 27.27273%;
  }

  .xs-four-elevenths {
    width: 36.36364%;
  }

  .xs-five-elevenths {
    width: 45.45455%;
  }

  .xs-six-elevenths {
    width: 54.54545%;
  }

  .xs-seven-elevenths {
    width: 63.63636%;
  }

  .xs-eight-elevenths {
    width: 72.72727%;
  }

  .xs-nine-elevenths {
    width: 81.81818%;
  }

  .xs-ten-elevenths {
    width: 90.90909%;
  }

  .xs-eleven-elevenths {
    width: 100%;
  }

  .xs-one-twelfth {
    width: 8.33333%;
  }

  .xs-two-twelfths {
    width: 16.66667%;
  }

  .xs-three-twelfths {
    width: 25%;
  }

  .xs-four-twelfths {
    width: 33.33333%;
  }

  .xs-five-twelfths {
    width: 41.66667%;
  }

  .xs-six-twelfths {
    width: 50%;
  }

  .xs-seven-twelfths {
    width: 58.33333%;
  }

  .xs-eight-twelfths {
    width: 66.66667%;
  }

  .xs-nine-twelfths {
    width: 75%;
  }

  .xs-ten-twelfths {
    width: 83.33333%;
  }

  .xs-eleven-twelfths {
    width: 91.66667%;
  }

  .xs-twelve-twelfths {
    width: 100%;
  }
}
/* 
  
  Responsive widths at $breakpoint__sm

---------------------------------------------------- */
@media screen and (min-width: 34.375em) {
  .sm-one-whole {
    width: 100%;
  }

  .sm-one-half {
    width: 50%;
  }

  .sm-two-halves {
    width: 100%;
  }

  .sm-one-third {
    width: 33.33333%;
  }

  .sm-two-thirds {
    width: 66.66667%;
  }

  .sm-three-thirds {
    width: 100%;
  }

  .sm-one-fourth {
    width: 25%;
  }

  .sm-two-fourths {
    width: 50%;
  }

  .sm-three-fourths {
    width: 75%;
  }

  .sm-four-fourths {
    width: 100%;
  }

  .sm-one-fifth {
    width: 20%;
  }

  .sm-two-fifths {
    width: 40%;
  }

  .sm-three-fifths {
    width: 60%;
  }

  .sm-four-fifths {
    width: 80%;
  }

  .sm-five-fifths {
    width: 100%;
  }

  .sm-one-sixth {
    width: 16.66667%;
  }

  .sm-two-sixths {
    width: 33.33333%;
  }

  .sm-three-sixths {
    width: 50%;
  }

  .sm-four-sixths {
    width: 66.66667%;
  }

  .sm-five-sixths {
    width: 83.33333%;
  }

  .sm-six-sixths {
    width: 100%;
  }

  .sm-one-seventh {
    width: 14.28571%;
  }

  .sm-two-sevenths {
    width: 28.57143%;
  }

  .sm-three-sevenths {
    width: 42.85714%;
  }

  .sm-four-sevenths {
    width: 57.14286%;
  }

  .sm-five-sevenths {
    width: 71.42857%;
  }

  .sm-six-sevenths {
    width: 85.71429%;
  }

  .sm-seven-sevenths {
    width: 100%;
  }

  .sm-one-eighth {
    width: 12.5%;
  }

  .sm-two-eighths {
    width: 25%;
  }

  .sm-three-eighths {
    width: 37.5%;
  }

  .sm-four-eighths {
    width: 50%;
  }

  .sm-five-eighths {
    width: 62.5%;
  }

  .sm-six-eighths {
    width: 75%;
  }

  .sm-seven-eighths {
    width: 87.5%;
  }

  .sm-eight-eighths {
    width: 100%;
  }

  .sm-one-ninth {
    width: 11.11111%;
  }

  .sm-two-ninths {
    width: 22.22222%;
  }

  .sm-three-ninths {
    width: 33.33333%;
  }

  .sm-four-ninths {
    width: 44.44444%;
  }

  .sm-five-ninths {
    width: 55.55556%;
  }

  .sm-six-ninths {
    width: 66.66667%;
  }

  .sm-seven-ninths {
    width: 77.77778%;
  }

  .sm-eight-ninths {
    width: 88.88889%;
  }

  .sm-nine-ninths {
    width: 100%;
  }

  .sm-one-tenth {
    width: 10%;
  }

  .sm-two-tenths {
    width: 20%;
  }

  .sm-three-tenths {
    width: 30%;
  }

  .sm-four-tenths {
    width: 40%;
  }

  .sm-five-tenths {
    width: 50%;
  }

  .sm-six-tenths {
    width: 60%;
  }

  .sm-seven-tenths {
    width: 70%;
  }

  .sm-eight-tenths {
    width: 80%;
  }

  .sm-nine-tenths {
    width: 90%;
  }

  .sm-ten-tenths {
    width: 100%;
  }

  .sm-one-eleventh {
    width: 9.09091%;
  }

  .sm-two-elevenths {
    width: 18.18182%;
  }

  .sm-three-elevenths {
    width: 27.27273%;
  }

  .sm-four-elevenths {
    width: 36.36364%;
  }

  .sm-five-elevenths {
    width: 45.45455%;
  }

  .sm-six-elevenths {
    width: 54.54545%;
  }

  .sm-seven-elevenths {
    width: 63.63636%;
  }

  .sm-eight-elevenths {
    width: 72.72727%;
  }

  .sm-nine-elevenths {
    width: 81.81818%;
  }

  .sm-ten-elevenths {
    width: 90.90909%;
  }

  .sm-eleven-elevenths {
    width: 100%;
  }

  .sm-one-twelfth {
    width: 8.33333%;
  }

  .sm-two-twelfths {
    width: 16.66667%;
  }

  .sm-three-twelfths {
    width: 25%;
  }

  .sm-four-twelfths {
    width: 33.33333%;
  }

  .sm-five-twelfths {
    width: 41.66667%;
  }

  .sm-six-twelfths {
    width: 50%;
  }

  .sm-seven-twelfths {
    width: 58.33333%;
  }

  .sm-eight-twelfths {
    width: 66.66667%;
  }

  .sm-nine-twelfths {
    width: 75%;
  }

  .sm-ten-twelfths {
    width: 83.33333%;
  }

  .sm-eleven-twelfths {
    width: 91.66667%;
  }

  .sm-twelve-twelfths {
    width: 100%;
  }
}
/* 
  
  Responsive widths at $breakpoint__md

---------------------------------------------------- */
@media screen and (min-width: 48em) {
  .md-one-whole {
    width: 100%;
  }

  .md-one-half {
    width: 50%;
  }

  .md-two-halves {
    width: 100%;
  }

  .md-one-third {
    width: 33.33333%;
  }

  .md-two-thirds {
    width: 66.66667%;
  }

  .md-three-thirds {
    width: 100%;
  }

  .md-one-fourth {
    width: 25%;
  }

  .md-two-fourths {
    width: 50%;
  }

  .md-three-fourths {
    width: 75%;
  }

  .md-four-fourths {
    width: 100%;
  }

  .md-one-fifth {
    width: 20%;
  }

  .md-two-fifths {
    width: 40%;
  }

  .md-three-fifths {
    width: 60%;
  }

  .md-four-fifths {
    width: 80%;
  }

  .md-five-fifths {
    width: 100%;
  }

  .md-one-sixth {
    width: 16.66667%;
  }

  .md-two-sixths {
    width: 33.33333%;
  }

  .md-three-sixths {
    width: 50%;
  }

  .md-four-sixths {
    width: 66.66667%;
  }

  .md-five-sixths {
    width: 83.33333%;
  }

  .md-six-sixths {
    width: 100%;
  }

  .md-one-seventh {
    width: 14.28571%;
  }

  .md-two-sevenths {
    width: 28.57143%;
  }

  .md-three-sevenths {
    width: 42.85714%;
  }

  .md-four-sevenths {
    width: 57.14286%;
  }

  .md-five-sevenths {
    width: 71.42857%;
  }

  .md-six-sevenths {
    width: 85.71429%;
  }

  .md-seven-sevenths {
    width: 100%;
  }

  .md-one-eighth {
    width: 12.5%;
  }

  .md-two-eighths {
    width: 25%;
  }

  .md-three-eighths {
    width: 37.5%;
  }

  .md-four-eighths {
    width: 50%;
  }

  .md-five-eighths {
    width: 62.5%;
  }

  .md-six-eighths {
    width: 75%;
  }

  .md-seven-eighths {
    width: 87.5%;
  }

  .md-eight-eighths {
    width: 100%;
  }

  .md-one-ninth {
    width: 11.11111%;
  }

  .md-two-ninths {
    width: 22.22222%;
  }

  .md-three-ninths {
    width: 33.33333%;
  }

  .md-four-ninths {
    width: 44.44444%;
  }

  .md-five-ninths {
    width: 55.55556%;
  }

  .md-six-ninths {
    width: 66.66667%;
  }

  .md-seven-ninths {
    width: 77.77778%;
  }

  .md-eight-ninths {
    width: 88.88889%;
  }

  .md-nine-ninths {
    width: 100%;
  }

  .md-one-tenth {
    width: 10%;
  }

  .md-two-tenths {
    width: 20%;
  }

  .md-three-tenths {
    width: 30%;
  }

  .md-four-tenths {
    width: 40%;
  }

  .md-five-tenths {
    width: 50%;
  }

  .md-six-tenths {
    width: 60%;
  }

  .md-seven-tenths {
    width: 70%;
  }

  .md-eight-tenths {
    width: 80%;
  }

  .md-nine-tenths {
    width: 90%;
  }

  .md-ten-tenths {
    width: 100%;
  }

  .md-one-eleventh {
    width: 9.09091%;
  }

  .md-two-elevenths {
    width: 18.18182%;
  }

  .md-three-elevenths {
    width: 27.27273%;
  }

  .md-four-elevenths {
    width: 36.36364%;
  }

  .md-five-elevenths {
    width: 45.45455%;
  }

  .md-six-elevenths {
    width: 54.54545%;
  }

  .md-seven-elevenths {
    width: 63.63636%;
  }

  .md-eight-elevenths {
    width: 72.72727%;
  }

  .md-nine-elevenths {
    width: 81.81818%;
  }

  .md-ten-elevenths {
    width: 90.90909%;
  }

  .md-eleven-elevenths {
    width: 100%;
  }

  .md-one-twelfth {
    width: 8.33333%;
  }

  .md-two-twelfths {
    width: 16.66667%;
  }

  .md-three-twelfths {
    width: 25%;
  }

  .md-four-twelfths {
    width: 33.33333%;
  }

  .md-five-twelfths {
    width: 41.66667%;
  }

  .md-six-twelfths {
    width: 50%;
  }

  .md-seven-twelfths {
    width: 58.33333%;
  }

  .md-eight-twelfths {
    width: 66.66667%;
  }

  .md-nine-twelfths {
    width: 75%;
  }

  .md-ten-twelfths {
    width: 83.33333%;
  }

  .md-eleven-twelfths {
    width: 91.66667%;
  }

  .md-twelve-twelfths {
    width: 100%;
  }
}
/* 
  
  Responsive widths at $breakpoint__lg

---------------------------------------------------- */
@media screen and (min-width: 64em) {
  .lg-one-whole {
    width: 100%;
  }

  .lg-one-half {
    width: 50%;
  }

  .lg-two-halves {
    width: 100%;
  }

  .lg-one-third {
    width: 33.33333%;
  }

  .lg-two-thirds {
    width: 66.66667%;
  }

  .lg-three-thirds {
    width: 100%;
  }

  .lg-one-fourth {
    width: 25%;
  }

  .lg-two-fourths {
    width: 50%;
  }

  .lg-three-fourths {
    width: 75%;
  }

  .lg-four-fourths {
    width: 100%;
  }

  .lg-one-fifth {
    width: 20%;
  }

  .lg-two-fifths {
    width: 40%;
  }

  .lg-three-fifths {
    width: 60%;
  }

  .lg-four-fifths {
    width: 80%;
  }

  .lg-five-fifths {
    width: 100%;
  }

  .lg-one-sixth {
    width: 16.66667%;
  }

  .lg-two-sixths {
    width: 33.33333%;
  }

  .lg-three-sixths {
    width: 50%;
  }

  .lg-four-sixths {
    width: 66.66667%;
  }

  .lg-five-sixths {
    width: 83.33333%;
  }

  .lg-six-sixths {
    width: 100%;
  }

  .lg-one-seventh {
    width: 14.28571%;
  }

  .lg-two-sevenths {
    width: 28.57143%;
  }

  .lg-three-sevenths {
    width: 42.85714%;
  }

  .lg-four-sevenths {
    width: 57.14286%;
  }

  .lg-five-sevenths {
    width: 71.42857%;
  }

  .lg-six-sevenths {
    width: 85.71429%;
  }

  .lg-seven-sevenths {
    width: 100%;
  }

  .lg-one-eighth {
    width: 12.5%;
  }

  .lg-two-eighths {
    width: 25%;
  }

  .lg-three-eighths {
    width: 37.5%;
  }

  .lg-four-eighths {
    width: 50%;
  }

  .lg-five-eighths {
    width: 62.5%;
  }

  .lg-six-eighths {
    width: 75%;
  }

  .lg-seven-eighths {
    width: 87.5%;
  }

  .lg-eight-eighths {
    width: 100%;
  }

  .lg-one-ninth {
    width: 11.11111%;
  }

  .lg-two-ninths {
    width: 22.22222%;
  }

  .lg-three-ninths {
    width: 33.33333%;
  }

  .lg-four-ninths {
    width: 44.44444%;
  }

  .lg-five-ninths {
    width: 55.55556%;
  }

  .lg-six-ninths {
    width: 66.66667%;
  }

  .lg-seven-ninths {
    width: 77.77778%;
  }

  .lg-eight-ninths {
    width: 88.88889%;
  }

  .lg-nine-ninths {
    width: 100%;
  }

  .lg-one-tenth {
    width: 10%;
  }

  .lg-two-tenths {
    width: 20%;
  }

  .lg-three-tenths {
    width: 30%;
  }

  .lg-four-tenths {
    width: 40%;
  }

  .lg-five-tenths {
    width: 50%;
  }

  .lg-six-tenths {
    width: 60%;
  }

  .lg-seven-tenths {
    width: 70%;
  }

  .lg-eight-tenths {
    width: 80%;
  }

  .lg-nine-tenths {
    width: 90%;
  }

  .lg-ten-tenths {
    width: 100%;
  }

  .lg-one-eleventh {
    width: 9.09091%;
  }

  .lg-two-elevenths {
    width: 18.18182%;
  }

  .lg-three-elevenths {
    width: 27.27273%;
  }

  .lg-four-elevenths {
    width: 36.36364%;
  }

  .lg-five-elevenths {
    width: 45.45455%;
  }

  .lg-six-elevenths {
    width: 54.54545%;
  }

  .lg-seven-elevenths {
    width: 63.63636%;
  }

  .lg-eight-elevenths {
    width: 72.72727%;
  }

  .lg-nine-elevenths {
    width: 81.81818%;
  }

  .lg-ten-elevenths {
    width: 90.90909%;
  }

  .lg-eleven-elevenths {
    width: 100%;
  }

  .lg-one-twelfth {
    width: 8.33333%;
  }

  .lg-two-twelfths {
    width: 16.66667%;
  }

  .lg-three-twelfths {
    width: 25%;
  }

  .lg-four-twelfths {
    width: 33.33333%;
  }

  .lg-five-twelfths {
    width: 41.66667%;
  }

  .lg-six-twelfths {
    width: 50%;
  }

  .lg-seven-twelfths {
    width: 58.33333%;
  }

  .lg-eight-twelfths {
    width: 66.66667%;
  }

  .lg-nine-twelfths {
    width: 75%;
  }

  .lg-ten-twelfths {
    width: 83.33333%;
  }

  .lg-eleven-twelfths {
    width: 91.66667%;
  }

  .lg-twelve-twelfths {
    width: 100%;
  }
}
/* 
  
  Responsive widths at $breakpoint__xl

---------------------------------------------------- */
@media screen and (min-width: 78.5em) {
  .xl-one-whole {
    width: 100%;
  }

  .xl-one-half {
    width: 50%;
  }

  .xl-two-halves {
    width: 100%;
  }

  .xl-one-third {
    width: 33.33333%;
  }

  .xl-two-thirds {
    width: 66.66667%;
  }

  .xl-three-thirds {
    width: 100%;
  }

  .xl-one-fourth {
    width: 25%;
  }

  .xl-two-fourths {
    width: 50%;
  }

  .xl-three-fourths {
    width: 75%;
  }

  .xl-four-fourths {
    width: 100%;
  }

  .xl-one-fifth {
    width: 20%;
  }

  .xl-two-fifths {
    width: 40%;
  }

  .xl-three-fifths {
    width: 60%;
  }

  .xl-four-fifths {
    width: 80%;
  }

  .xl-five-fifths {
    width: 100%;
  }

  .xl-one-sixth {
    width: 16.66667%;
  }

  .xl-two-sixths {
    width: 33.33333%;
  }

  .xl-three-sixths {
    width: 50%;
  }

  .xl-four-sixths {
    width: 66.66667%;
  }

  .xl-five-sixths {
    width: 83.33333%;
  }

  .xl-six-sixths {
    width: 100%;
  }

  .xl-one-seventh {
    width: 14.28571%;
  }

  .xl-two-sevenths {
    width: 28.57143%;
  }

  .xl-three-sevenths {
    width: 42.85714%;
  }

  .xl-four-sevenths {
    width: 57.14286%;
  }

  .xl-five-sevenths {
    width: 71.42857%;
  }

  .xl-six-sevenths {
    width: 85.71429%;
  }

  .xl-seven-sevenths {
    width: 100%;
  }

  .xl-one-eighth {
    width: 12.5%;
  }

  .xl-two-eighths {
    width: 25%;
  }

  .xl-three-eighths {
    width: 37.5%;
  }

  .xl-four-eighths {
    width: 50%;
  }

  .xl-five-eighths {
    width: 62.5%;
  }

  .xl-six-eighths {
    width: 75%;
  }

  .xl-seven-eighths {
    width: 87.5%;
  }

  .xl-eight-eighths {
    width: 100%;
  }

  .xl-one-ninth {
    width: 11.11111%;
  }

  .xl-two-ninths {
    width: 22.22222%;
  }

  .xl-three-ninths {
    width: 33.33333%;
  }

  .xl-four-ninths {
    width: 44.44444%;
  }

  .xl-five-ninths {
    width: 55.55556%;
  }

  .xl-six-ninths {
    width: 66.66667%;
  }

  .xl-seven-ninths {
    width: 77.77778%;
  }

  .xl-eight-ninths {
    width: 88.88889%;
  }

  .xl-nine-ninths {
    width: 100%;
  }

  .xl-one-tenth {
    width: 10%;
  }

  .xl-two-tenths {
    width: 20%;
  }

  .xl-three-tenths {
    width: 30%;
  }

  .xl-four-tenths {
    width: 40%;
  }

  .xl-five-tenths {
    width: 50%;
  }

  .xl-six-tenths {
    width: 60%;
  }

  .xl-seven-tenths {
    width: 70%;
  }

  .xl-eight-tenths {
    width: 80%;
  }

  .xl-nine-tenths {
    width: 90%;
  }

  .xl-ten-tenths {
    width: 100%;
  }

  .xl-one-eleventh {
    width: 9.09091%;
  }

  .xl-two-elevenths {
    width: 18.18182%;
  }

  .xl-three-elevenths {
    width: 27.27273%;
  }

  .xl-four-elevenths {
    width: 36.36364%;
  }

  .xl-five-elevenths {
    width: 45.45455%;
  }

  .xl-six-elevenths {
    width: 54.54545%;
  }

  .xl-seven-elevenths {
    width: 63.63636%;
  }

  .xl-eight-elevenths {
    width: 72.72727%;
  }

  .xl-nine-elevenths {
    width: 81.81818%;
  }

  .xl-ten-elevenths {
    width: 90.90909%;
  }

  .xl-eleven-elevenths {
    width: 100%;
  }

  .xl-one-twelfth {
    width: 8.33333%;
  }

  .xl-two-twelfths {
    width: 16.66667%;
  }

  .xl-three-twelfths {
    width: 25%;
  }

  .xl-four-twelfths {
    width: 33.33333%;
  }

  .xl-five-twelfths {
    width: 41.66667%;
  }

  .xl-six-twelfths {
    width: 50%;
  }

  .xl-seven-twelfths {
    width: 58.33333%;
  }

  .xl-eight-twelfths {
    width: 66.66667%;
  }

  .xl-nine-twelfths {
    width: 75%;
  }

  .xl-ten-twelfths {
    width: 83.33333%;
  }

  .xl-eleven-twelfths {
    width: 91.66667%;
  }

  .xl-twelve-twelfths {
    width: 100%;
  }
}
/* 
  
  Responsive widths at $breakpoint__xxl

---------------------------------------------------- */
@media screen and (min-width: 100em) {
  .xxl-one-whole {
    width: 100%;
  }

  .xxl-one-half {
    width: 50%;
  }

  .xxl-two-halves {
    width: 100%;
  }

  .xxl-one-third {
    width: 33.33333%;
  }

  .xxl-two-thirds {
    width: 66.66667%;
  }

  .xxl-three-thirds {
    width: 100%;
  }

  .xxl-one-fourth {
    width: 25%;
  }

  .xxl-two-fourths {
    width: 50%;
  }

  .xxl-three-fourths {
    width: 75%;
  }

  .xxl-four-fourths {
    width: 100%;
  }

  .xxl-one-fifth {
    width: 20%;
  }

  .xxl-two-fifths {
    width: 40%;
  }

  .xxl-three-fifths {
    width: 60%;
  }

  .xxl-four-fifths {
    width: 80%;
  }

  .xxl-five-fifths {
    width: 100%;
  }

  .xxl-one-sixth {
    width: 16.66667%;
  }

  .xxl-two-sixths {
    width: 33.33333%;
  }

  .xxl-three-sixths {
    width: 50%;
  }

  .xxl-four-sixths {
    width: 66.66667%;
  }

  .xxl-five-sixths {
    width: 83.33333%;
  }

  .xxl-six-sixths {
    width: 100%;
  }

  .xxl-one-seventh {
    width: 14.28571%;
  }

  .xxl-two-sevenths {
    width: 28.57143%;
  }

  .xxl-three-sevenths {
    width: 42.85714%;
  }

  .xxl-four-sevenths {
    width: 57.14286%;
  }

  .xxl-five-sevenths {
    width: 71.42857%;
  }

  .xxl-six-sevenths {
    width: 85.71429%;
  }

  .xxl-seven-sevenths {
    width: 100%;
  }

  .xxl-one-eighth {
    width: 12.5%;
  }

  .xxl-two-eighths {
    width: 25%;
  }

  .xxl-three-eighths {
    width: 37.5%;
  }

  .xxl-four-eighths {
    width: 50%;
  }

  .xxl-five-eighths {
    width: 62.5%;
  }

  .xxl-six-eighths {
    width: 75%;
  }

  .xxl-seven-eighths {
    width: 87.5%;
  }

  .xxl-eight-eighths {
    width: 100%;
  }

  .xxl-one-ninth {
    width: 11.11111%;
  }

  .xxl-two-ninths {
    width: 22.22222%;
  }

  .xxl-three-ninths {
    width: 33.33333%;
  }

  .xxl-four-ninths {
    width: 44.44444%;
  }

  .xxl-five-ninths {
    width: 55.55556%;
  }

  .xxl-six-ninths {
    width: 66.66667%;
  }

  .xxl-seven-ninths {
    width: 77.77778%;
  }

  .xxl-eight-ninths {
    width: 88.88889%;
  }

  .xxl-nine-ninths {
    width: 100%;
  }

  .xxl-one-tenth {
    width: 10%;
  }

  .xxl-two-tenths {
    width: 20%;
  }

  .xxl-three-tenths {
    width: 30%;
  }

  .xxl-four-tenths {
    width: 40%;
  }

  .xxl-five-tenths {
    width: 50%;
  }

  .xxl-six-tenths {
    width: 60%;
  }

  .xxl-seven-tenths {
    width: 70%;
  }

  .xxl-eight-tenths {
    width: 80%;
  }

  .xxl-nine-tenths {
    width: 90%;
  }

  .xxl-ten-tenths {
    width: 100%;
  }

  .xxl-one-eleventh {
    width: 9.09091%;
  }

  .xxl-two-elevenths {
    width: 18.18182%;
  }

  .xxl-three-elevenths {
    width: 27.27273%;
  }

  .xxl-four-elevenths {
    width: 36.36364%;
  }

  .xxl-five-elevenths {
    width: 45.45455%;
  }

  .xxl-six-elevenths {
    width: 54.54545%;
  }

  .xxl-seven-elevenths {
    width: 63.63636%;
  }

  .xxl-eight-elevenths {
    width: 72.72727%;
  }

  .xxl-nine-elevenths {
    width: 81.81818%;
  }

  .xxl-ten-elevenths {
    width: 90.90909%;
  }

  .xxl-eleven-elevenths {
    width: 100%;
  }

  .xxl-one-twelfth {
    width: 8.33333%;
  }

  .xxl-two-twelfths {
    width: 16.66667%;
  }

  .xxl-three-twelfths {
    width: 25%;
  }

  .xxl-four-twelfths {
    width: 33.33333%;
  }

  .xxl-five-twelfths {
    width: 41.66667%;
  }

  .xxl-six-twelfths {
    width: 50%;
  }

  .xxl-seven-twelfths {
    width: 58.33333%;
  }

  .xxl-eight-twelfths {
    width: 66.66667%;
  }

  .xxl-nine-twelfths {
    width: 75%;
  }

  .xxl-ten-twelfths {
    width: 83.33333%;
  }

  .xxl-eleven-twelfths {
    width: 91.66667%;
  }

  .xxl-twelve-twelfths {
    width: 100%;
  }
}
/***

  @modules
---------------------------------------------------------

  Reusable objects that are combinations
  of elements and other modules.

  When you create a new module, make sure the partial is
  in the modules directory, and you import it below.

  Comment out any partial you don't need for this app.

---------------------------------------------------------  */
/**

   @site
--------------------------------------------------------
  modules/_site.scss
--------------------------------------------------------

  We use the naming convention of .site-* for global
  modules like the header, main, and footer.

  Sometimes it's beneficial to have a wrapping element
  around the site, directly following the <body>. In
  this case, we call that .site.

------------------------------------------------------ */
/**

  @site-header
--------------------------------------------------------
  modules/_site-header.scss
--------------------------------------------------------

  Site-wide header

------------------------------------------------------ */
.site-header {
  padding: 1.125em 0;
  border-bottom: 1px solid #cfd2d2;
}
.site-header:after {
  content: "";
  display: table;
  clear: both;
}

/* @branding
--------------------------------------------------------

  The logo & (optional) wordmark

  Example: Branding logo
  <a class="branding" href="/">
    <img class="branding__logo img--title" src="images/logo.svg" alt="My Company">
    <h1 class="branding__wordmark">My Company</h1>
  </a>

------------------------------------------------------ */
.branding {
  margin: 0 auto 1.125em;
  text-decoration: none;
  display: block;
  text-align: center;
}
@media screen and (min-width: 48em) {
  .branding {
    margin: 0;
    float: left;
    text-align: left;
  }
}

.branding__logo {
  height: 3.375em;
  width: 3.375em;
}
@media screen and (min-width: 48em) {
  .branding__logo {
    float: left;
    margin-right: 1.125em;
  }
}

.branding__wordmark {
  font-size: 1.6875em;
  white-space: nowrap;
  line-height: 2.25em;
  margin: 0;
}

/*

  @site-nav
--------------------------------------------------------

  The main site navigation.

-----------------------------------------------------  */
.site-nav {
  text-align: center;
}
@media screen and (min-width: 48em) {
  .site-nav {
    float: right;
  }
}
.site-nav a {
  display: inline-block;
  height: 3.375em;
  line-height: 3.375em;
  padding: 0 .5em;
  margin-left: 0.5625em;
}
.site-nav a:first-child {
  margin-left: 0;
}

/**

  @site-main
--------------------------------------------------------
  modules/_site-main.scss
--------------------------------------------------------

  The site's main content

------------------------------------------------------ */
.site-main {
  display: block;
}

/**

  @site-footer
--------------------------------------------------------
  modules/_site-footer.scss
--------------------------------------------------------

  The site's global footer

------------------------------------------------------ */
.site-footer {
  padding: 1.125em 0;
}

.site-credits {
  display: block;
  clear: both;
  float: right;
  font-size: .875em;
}

/**

  @pages
--------------------------------------------------------
  modules/_pages.scss
--------------------------------------------------------

  Pages contain content and can have styled headers
  and footers if you choose.

-----------------------------------------------------  */
.page__header {
  padding: 1.125em 0;
  margin-bottom: 1.125em;
  background: rgba(0, 0, 0, 0.025);
  border-bottom: 1px solid #cfd2d2;
}

/**

  @alerts
---------------------------------------------------------
  modules/_alerts.scss
--------------------------------------------------------

  Alerts are UI elements that give important info

  Example: Error
  <div class="alert alert--error">
    <a href="#" class="btn__close">&times;</a>
    <p>Uh oh - something went wrong</p>
  </div>

  Example: Warning
  <div class="alert alert--warning">
    <a href="#" class="btn__close">&times;</a>
    <p>Shake it fast, but watch yourself.</p>
  </div>

  Example: Success
  <div class="alert alert--success">
    <a href="#" class="btn__close">&times;</a>
    <p>The secret to my success is that I learn, 25 hours a day!</p>
  </div>

  Example: Info
  <div class="alert alert--info">
    <a href="#" class="btn__close">&times;</a>
    <p>Did you ever know that you're my hero?</p>
  </div>

  NOTE: The code below uses declared color units, if you'd
        prefer, declare those as variables in _vars.scss

------------------------------------------------------ */
.alert {
  position: relative;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 2.25em;
  padding: .5rem 4rem .5rem .5rem;
  line-height: 1.25;
}
.alert p {
  margin: 0;
}
.alert .btn__close {
  position: absolute;
  top: 50%;
  margin-top: -.75em;
  right: 1em;
  opacity: .5;
  -webkit-transition: all .3s;
  transition: all .3s;
  text-decoration: none;
}
.alert .btn__close:hover {
  opacity: 1;
}

.alert--error {
  color: #e04646;
  border-color: #e04646;
  background: #ffe6e6;
}
.alert--error .btn__close {
  color: #e04646;
}
.alert--error:after {
  border-color: #e04646;
}

.alert--warning {
  color: #b29804;
  border-color: #b29804;
  background: #fcf7d8;
}
.alert--warning .btn__close {
  color: #b29804;
}
.alert--warning:after {
  border-color: #b29804;
}

.alert--info {
  color: #537df6;
  border-color: #537df6;
  background: #e8f3ff;
}
.alert--info .btn__close {
  color: #537df6;
}
.alert--info:after {
  border-color: #537df6;
}

.alert--success {
  color: #0ca129;
  border-color: #0ca129;
  background: #dafce1;
}
.alert--success .btn__close {
  color: #0ca129;
}
.alert--success:after {
  border-color: #0ca129;
}

/**

  @blocks
--------------------------------------------------------
  modules/_blocks.scss
--------------------------------------------------------

  Blocks contain sections of content.  Blocks can have
  different visual styling, but usually have the same
  structure; one spacing unit margin at the bottom,
  and some have borders, and padding, etc.

-----------------------------------------------------  */
.block {
  margin-bottom: 0.70313em;
}

.block--ends {
  margin-top: 2.25em;
  margin-bottom: 2.25em;
}

/**

  @callouts
--------------------------------------------------------
  modules/_callouts.scss
--------------------------------------------------------

  Callouts, are sections of featured content that usually 
  contain an icon, a title, and some text. These are 
  usually in a row, and call attention to highlighted features.

  Example: Callout
  <article class="callout">
    <img class="callout__media" src="images/fpo-icon.png">
    <h3 class="callout__title">Feature</h3>
    <p>This callout is very impressive, and should command your attention</p>
  </article>

-----------------------------------------------------  */
.callout {
  text-align: center;
}

.callout__media {
  display: block;
  margin: 0 auto 1.125em;
  max-height: 3em;
  width: auto;
}

.callout__title {
  font-size: 1.5em;
}

/**

  @heroes
--------------------------------------------------------
  modules/_heroes.scss
--------------------------------------------------------

  Just your everyday, normal hero.  Contains a div that has
  the media (video or image) in the background, and a div
  for the main content.

  Example: Hero
  <div class="hero">
    <div class="hero__main">
      <h1 class="hero__leadin">This is the leadin</h1>
      <h2 class="hero__name">Name Here</h2>
    <div class="hero__media"><img src="http://fillmurray.com/1000/400"></div>
  </div>
------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 2.25em;
}

.hero__media {
  position: relative;
  z-index: 200;
}

.hero__main {
  position: absolute;
  z-index: 210;
  width: 100%;
  top: 50%;
  text-align: center;
  color: #fff;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: .75em;
}
@media screen and (min-width: 34.375em) {
  .hero__main {
    font-size: 1em;
  }
}
@media screen and (min-width: 64em) {
  .hero__main {
    font-size: 1.25em;
  }
}

/**

  @modals
---------------------------------------------------------
  modules/_modals.scss
--------------------------------------------------------

  These are very basic modals, which simply cover the entire
  viewport from top to bottom, left to right.  Feel free
  to edit the styles of modals to suit your needs.

--------------------------------------------------------- */
.modal {
  position: fixed;
  z-index: 200;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.96);
  display: none;
}

.modal__container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: table;
  height: 100%;
  padding: 1.125em;
}

.modal__close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0.37125em 0.37125em 0 0;
  font-size: 3em;
  border: none;
  background: none;
  display: block;
}
.modal__close:hover, .modal__close:focus {
  outline: none;
  border: none;
  opacity: .85;
}
.modal__close:active {
  opacity: .6;
}

.modal__body {
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
}
.modal__body p {
  margin-bottom: 1em;
  font-size: 1.5em;
}

/**

  @thumbnails
--------------------------------------------------------
  modules/_thumbnails.scss
--------------------------------------------------------

  Thumbnails are usually found within a grid or gallery,
  as a teaser or preview of more content. The common
  use is to have an image on top of a title and text
  below, while the entire thumbnail is an anchor link.

  Example: Thumbnail
  <a class="thumbnail" href="/some/article">
    <img class="thumbnail__media" src="http://fillmurray.com/400/200">
    <div class="thumbnail__caption">
      <h2>A caption title here</h2>
      <p>Some more text follows to tease the rest of
      the content</p>
    </div>
  </a>

-----------------------------------------------------  */
.thumbnail {
  display: block;
  padding: 0.5625em;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.thumbnail__media {
  margin-bottom: 0.5625em;
}

.thumbnail__caption {
  font-size: 85%;
}
.thumbnail__caption h1, .thumbnail__caption h2, .thumbnail__caption h3, .thumbnail__caption h4, .thumbnail__caption h5, .thumbnail__caption h5 {
  margin-bottom: 0.28125em;
}

/**

  @video
--------------------------------------------------------
  modules/_video-embeds.scss
--------------------------------------------------------

  Video Embeds

-----------------------------------------------------  */
.video-embed {
  display: block;
  width: 100%;
  height: 0;
  z-index: 1;
  position: relative;
  padding-top: 57%;
}
.video-embed iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100% !important;
  width: 100% !important;
  border: 0;
}

.embed-wrapper:before {
  position: absolute;
  top: 0;
  height: 85%;
  width: 100%;
  content: "";
  z-index: 1;
}

.video-holder {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 0;
}
@media screen and (max-width: 64.0525em) {
  .video-holder {
    position: relative;
    width: 100%;
    height: 28.125em;
    margin-top: 0;
  }
}
.video-holder iframe {
  height: 100%;
  width: 100%;
  position: absolute;
}
.video-holder.right {
  right: 0;
}

/* @colors
--------------------------------------------------------

  All color variables are defined here.

  We use real color names here.  Although naming something
  like 'brand' is in fact more generic and reusable, we've
  found that you end up creating variables like $brand-2,
  $brand-alt, $brand-complimentary etc.  While coding,
  it's too easy to forget what those mean.

  If the design changes drastically and the brand changes
  from, let's say, blue to green, just do a global
  find/replace - that's what text editors are for.

------------------------------------------------------ */
body {
  background-color: #f5f5f5;
}

.title--middle, #content #main-nav, #content .title aside, #content .news .wrapper .content-news, article#services .block, article#services.hh-services section, article.services_2 section, .services_4 section, .about-info section, #logo-banner section, #skills .skills-box, #wrapper-contact section, #wrapper-contact #contact-details .box, #pricing section, #contact--details section {
  background-color: #FFF;
}

#imagelightbox {
  position: fixed;
  z-index: 9999;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-box-shadow: 0 0 3.125em rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 3.125em rgba(0, 0, 0, 0.55);
}

.title--middle {
  padding: 6.68em 0;
}
.title--middle:after {
  content: "";
  display: table;
  clear: both;
}
.title--middle h2 {
  text-transform: uppercase;
  margin-bottom: 0;
  color: #EF9A9A;
  font-size: 2.1875em;
}
.title--middle h2.color {
  color: #EC407A;
}
.title--middle p {
  text-transform: uppercase;
  color: #929292;
  font-size: 1.125em;
}

html, body {
  overflow-x: hidden;
}

.block {
  position: relative !important;
  overflow: hidden !important;
}

.text-center {
  text-align: center;
}

.no-margin {
  margin: 0;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.no-pad {
  padding: 0 !important;
}

.no-pad-bottom {
  padding-bottom: 0 !important;
}

.auto {
  margin: auto !important;
}

.white-bg {
  background-color: #FFF;
}

.fadeIn {
  opacity: 1 !important;
}

/* ==========================================================================
   header
   ========================================================================== */
/* ==========================================================================
   Loader Spinner
   ========================================================================== */
#loader-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #FFF;
  z-index: 1000;
}
#loader-wrapper .spinner {
  -webkit-animation: colors 4.5s linear infinite, rotation 1.5s linear infinite;
  -moz-animation: colors 4.5s linear infinite, rotation 1.5s linear infinite;
  animation: colors 4.5s linear infinite, rotation 1.5s linear infinite;
  height: 3.125em;
  width: 3.125em;
  border: 8px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 50%;
  left: 0;
  margin: auto;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@keyframes rotation {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes colors {
  0% {
    border: 8px solid #4285F4;
    border-right-color: transparent;
  }
  25% {
    border: 8px solid #DE3E35;
    border-right-color: transparent;
  }
  50% {
    border: 8px solid #F7C223;
    border-right-color: transparent;
  }
  75% {
    border: 8px solid #1B9A59;
    border-right-color: transparent;
  }
  100% {
    border: 8px solid #4285F4;
    border-right-color: transparent;
  }
}
@-moz-keyframes colors {
  0% {
    border: 8px solid #4285F4;
    border-right-color: transparent;
  }
  25% {
    border: 8px solid #DE3E35;
    border-right-color: transparent;
  }
  50% {
    border: 8px solid #F7C223;
    border-right-color: transparent;
  }
  75% {
    border: 8px solid #1B9A59;
    border-right-color: transparent;
  }
  100% {
    border: 8px solid #4285F4;
    border-right-color: transparent;
  }
}
@keyframes colors {
  0% {
    border: 8px solid #4285F4;
    border-right-color: transparent;
  }
  25% {
    border: 8px solid #DE3E35;
    border-right-color: transparent;
  }
  50% {
    border: 8px solid #F7C223;
    border-right-color: transparent;
  }
  75% {
    border: 8px solid #1B9A59;
    border-right-color: transparent;
  }
  100% {
    border: 8px solid #4285F4;
    border-right-color: transparent;
  }
}
/* ==========================================================================
   Main Solid Color Header
   ========================================================================== */
header#main {
  background-color: #007141;
  min-height: 31.875em;
  position: relative;
}
@media screen and (max-width: 47.99em) {
  header#main {
    margin-bottom: 1.3em;
  }
}
header#main h1 {
  color: #FFF;
  font-size: 2.5em;
  margin-bottom: 15px !important;
}
header#main p {
  max-width: 36.975em;
  color: #FFF;
  font-size: 15px;
  line-height: 1.5;
}
header#main p.brand__wordmark {
  font-family: "Montserrat", sans-serif;
  letter-spacing: .2em;
  font-size: .875em;
  text-transform: uppercase;
}

/* ==========================================================================
   404 Page Error
   ========================================================================== */
header#main.error h1 {
  font-size: 6.25em;
}
header#main.error p {
  font-size: 1.2em;
}
header#main.error a {
  color: #e6e6e6;
  text-decoration: none;
}

/* ==========================================================================
   Header Slider
   ========================================================================== */
header#main #slides {
  max-height: 41.625em;
}
header#main #slides ul.slides-container li {
  position: relative;
  z-index: 2;
}
header#main #slides ul.slides-container li:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.3);
}
header#main #slides ul.slides-container li img {
  z-index: 9;
}
header#main #slides ul.slides-container li .container {
  z-index: 11;
  position: relative;
  top: 42%;
}

/* ==========================================================================
   comment
   ========================================================================== */
header#main.video-wrapper {
  position: relative;
  overflow: hidden;
}
header#main.video-wrapper .header-full-image {
  opacity: 0;
  -webkit-transition: all 0.38s ease;
  -moz-transition: all 0.38s ease;
  transition: all 0.38s ease;
}
@media screen and (max-width: 66.24em) {
  header#main.video-wrapper .header-full-image {
    opacity: 1;
  }
}
header#main.video-wrapper article {
  position: relative;
  overflow: hidden;
  padding: 15.9375em 0;
}
header#main.video-wrapper article .video-holder {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
header#main.video-wrapper article .video-holder video {
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (max-width: 52.8025em) {
  header#main.video-wrapper article .video-holder video {
    width: auto;
    display: none;
  }
}
@media screen and (max-width: 66.24em) {
  header#main.video-wrapper article .video-holder video {
    display: none;
  }
}
header#main.video-wrapper article .container {
  position: relative;
  z-index: 10;
}
header#main.video-wrapper article .container h1 {
  font-size: 2.8315em;
}
@media screen and (max-width: 34.365em) {
  header#main.video-wrapper article .container h1 {
    font-size: 150%;
  }
}
header#main.video-wrapper:after {
  background-color: #f44336;
  height: 100%;
  width: 100%;
  opacity: .7;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  z-index: 8;
}

/* ==========================================================================
   header Contact image 
   ========================================================================== */
header#main.contact-image:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #333;
  opacity: .4;
  content: "";
}
header#main.contact-image .img-container .img-side {
  height: 100%;
}
header#main.contact-image .container {
  position: relative;
  color: #FFF;
  z-index: 10;
}
header#main.contact-image .container small {
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 0.7281em;
  letter-spacing: .458em;
}
header#main.contact-image .container h2 {
  font-size: 2.49912em;
}

/* ==========================================================================
   header Full Google Map overlay
   ========================================================================== */
header#main.map-header {
  position: relative;
  background-color: transparent !important;
}
header#main.map-header:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-color: rgba(0, 0, 0, 0.02);
  height: 100%;
  width: 100%;
}
header#main.map-header .map-container {
  z-index: 10;
  position: relative;
}

/* ==========================================================================
   Header Typewriters Effects
   ========================================================================== */
header#main.type-writer .typer {
  position: relative;
  color: #FFF;
  z-index: 2;
}
header#main.type-writer .typer .scene {
  font-size: 355.96%;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  line-height: 1.6;
}
@media screen and (max-width: 47.99em) {
  header#main.type-writer .typer .scene {
    font-size: 260%;
  }
}
@-webkit-keyframes shake {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@-moz-keyframes shake {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes shake {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
header#main.type-writer .typer .saying:after {
  content: "|";
  font-size: 1.2em;
  line-height: 1;
  opacity: 1;
  display: inline-block;
  vertical-align: baseline;
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  -moz-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation: shake 500ms infinite;
}
header#main.type-writer:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* ==========================================================================
   Main Navigation and Dropdown menu 
   ========================================================================== */
#content {
  /*=========================================
  =            mobile navigation            =
  =========================================*/
}
#content #main-nav {
  border-bottom: 2px solid #ededed;
  padding: 1.5em 0;
  margin-bottom: 8px;
}
@media screen and (max-width: 54.6775em) {
  #content #main-nav {
    display: none;
  }
}
#content #main-nav .branding {
  color: #007141;
  font-size: 1.25em;
  display: block;
  text-transform: uppercase;
  -webkit-transform: translateY(0.505em);
  -moz-transform: translateY(0.505em);
  -ms-transform: translateY(0.505em);
  -o-transform: translateY(0.505em);
  transform: translateY(0.505em);
}
#content #main-nav .site-nav ul {
  list-style-type: none;
  margin: 0;
  z-index: 10;
}
#content #main-nav .site-nav ul li {
  display: inline-block;
  position: relative;
  -webkit-transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  color: #808080;
}
#content #main-nav .site-nav ul li a {
  text-transform: uppercase;
  text-decoration: none;
  font-size: .80em;
}
@media screen and (min-width: 48em) {
  #content #main-nav .site-nav ul li a {
    margin-left: 1.56em;
  }
  #content #main-nav .site-nav ul li a:last-child {
    margin-right: 0;
  }
}
#content #main-nav .site-nav ul li:hover {
  color: #007141;
  cursor: pointer;
}
#content #main-nav .site-nav ul li:nth-child(7) .sub-links {
  padding-left: 0;
  min-width: 7.5em;
  font-size: .875em;
}
#content #main-nav .site-nav ul li .sub-links {
  position: absolute;
  right: 0;
  left: 22px;
  padding: .5;
  min-width: 14.125em;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
  -webkit-transform: scale(0.99) translateY(-10%);
  -moz-transform: scale(0.99) translateY(-10%);
  -ms-transform: scale(0.99) translateY(-10%);
  -o-transform: scale(0.99) translateY(-10%);
  transform: scale(0.99) translateY(-10%);
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-box-shadow: 0 5px 5px rgba(126, 111, 111, 0.29);
  box-shadow: 0 5px 5px rgba(126, 111, 111, 0.29);
}
#content #main-nav .site-nav ul li .sub-links li {
  border-bottom: 1px solid rgba(222, 222, 222, 0.2);
  padding-left: 0;
  display: inherit;
  margin: 0 !important;
  text-align: left;
}
#content #main-nav .site-nav ul li .sub-links li a {
  display: block;
  color: #888;
  font-size: 0.83436em;
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
}
#content #main-nav .site-nav ul li:hover > .sub-links {
  -webkit-transform: scale(1) translateY(0);
  -moz-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  -o-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
  opacity: 1;
  z-index: 2;
  visibility: visible;
}
@media screen and (min-width: 54.6875em) {
  #content .mobile-nav .banner-mobile {
    display: none;
  }
}
#content .mobile-nav .banner-mobile aside {
  background-color: #fff;
  padding: .5em .9em;
}
#content .mobile-nav .banner-mobile aside .branding {
  color: #007141;
  font-size: 1.25em;
  float: left;
  display: block;
  text-transform: uppercase;
  -webkit-transform: translateY(0.625em);
  -moz-transform: translateY(0.625em);
  -ms-transform: translateY(0.625em);
  -o-transform: translateY(0.625em);
  transform: translateY(0.625em);
}
#content .mobile-nav .banner-mobile aside #naver {
  float: right;
  margin: 0 auto 0.125em;
  font-size: 2.6625em;
  text-decoration: none;
  color: #007141;
  margin-top: 4px;
}
#content .mm-title {
  color: red !important;
}
#content .title aside {
  padding: 0 3.5em;
}
#content .title aside:after {
  content: "";
  display: table;
  clear: both;
}
#content .title h1 {
  color: #007141;
  text-transform: uppercase;
  font-size: 1.5625em;
  padding-top: 1.125em;
}
#content .title p {
  color: #a5a5a5;
  margin-bottom: 3.1875em;
  line-height: 1.5;
}
#content .title.red h1 {
  color: #EF5350;
}
#content .news {
  margin-bottom: 0;
}
#content .news .wrapper .content-news {
  overflow: hidden;
  position: relative;
  min-height: 9.875em;
  padding: 0.6875em;
}
#content .news .wrapper .content-news.color-1 h3, #content .news .wrapper .content-news.color-1 span {
  color: #F55753;
}
#content .news .wrapper .content-news.color-2 h3, #content .news .wrapper .content-news.color-2 span {
  color: #10cfbd;
}
#content .news .wrapper .content-news span {
  float: right;
  display: block;
  margin-bottom: 0;
  font-size: 3.125em;
}
#content .news .wrapper .content-news h3 {
  font-size: .875em;
  margin-bottom: 0;
  text-transform: uppercase;
}
#content .news .wrapper .content-news p {
  font-size: 1.4375em;
  color: #505050;
  margin-bottom: .575em;
  overflow: hidden;
  display: block;
  max-height: 2.9em;
  min-width: 10.1em;
  line-height: 1.5em;
  text-overflow: ellipsis;
}
#content .news .wrapper .content-news p:after {
  content: "";
  display: table;
  clear: both;
}
#content .news .wrapper .content-news small {
  color: #ababab;
  font-size: .755em;
  display: block;
}
#content .news .block-1 {
  min-height: 21.875em;
}
#content .news .block-1 .img-holder:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: .5;
  content: "";
  background-image: -webkit-linear-gradient( top , transparent 0%, #010101 100%);
  background-image: linear-gradient(to bottom, transparent 0%, #010101 100%);
}
#content .news .block-1 .content {
  color: #FFF;
  position: relative;
  z-index: 3;
  max-width: 39.8125em;
  padding: 0 3.1875em;
  white-space: text-wrap;
  -webkit-transform: translateY(13em);
  -moz-transform: translateY(13em);
  -ms-transform: translateY(13em);
  -o-transform: translateY(13em);
  transform: translateY(13em);
}
#content .news .block-1 .content:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 29.99em) {
  #content .news .block-1 .content {
    -webkit-transform: translateY(6em);
    -moz-transform: translateY(6em);
    -ms-transform: translateY(6em);
    -o-transform: translateY(6em);
    transform: translateY(6em);
    padding: 7em 3.1875em;
  }
}
#content .news .block-1 .content h3 {
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: .875em;
}
#content .news .block-1 .content p:nth-of-type(1) {
  font-size: 1.451875em;
  margin-bottom: .5em;
}
#content .news .block-1 .content p:nth-of-type(2) {
  font-size: .9em;
  line-height: 1.5;
}
#content .news .block-2 {
  min-height: 15.875em;
  position: relative;
}
#content .news .block-2 .img-holder:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: .5;
  content: "";
  background-image: -webkit-linear-gradient( top , transparent 0%, #010101 100%);
  background-image: linear-gradient(to bottom, transparent 0%, #010101 100%);
}
#content .news .block-2 .content {
  position: relative;
  -webkit-transform: translate(1.4em, 7.7em);
  -moz-transform: translate(1.4em, 7.7em);
  -ms-transform: translate(1.4em, 7.7em);
  -o-transform: translate(1.4em, 7.7em);
  transform: translate(1.4em, 7.7em);
  color: #FFF;
}
@media screen and (min-width: 48em) {
  #content .news .block-2 .content {
    padding: 0 1.1875em;
    -webkit-transform: translate(0.4em, 7.7em);
    -moz-transform: translate(0.4em, 7.7em);
    -ms-transform: translate(0.4em, 7.7em);
    -o-transform: translate(0.4em, 7.7em);
    transform: translate(0.4em, 7.7em);
  }
}
#content .news .block-2 .content h3 {
  margin-bottom: 0;
  white-space: nowrap;
  font-size: .875em;
  text-transform: uppercase;
}
#content .news .block-2 .content p {
  font-size: 1.451875em;
  line-height: 1.3;
  margin-bottom: 0;
  margin-bottom: .2em;
}
#content .news .block-2 .content small {
  font-size: .86em;
}
#content .news .block-3 {
  overflow: inherit !important;
}
#content .news .block-3.color-1 {
  background-color: #48B0F7;
}
#content .news .block-3.color-2 {
  background-color: #009688;
}
#content .news .block-3.color-3 {
  background-color: #00BCD4;
}
#content .news .block-3 .content {
  color: #fff;
  position: relative;
  padding: 0 0.575em;
  min-height: 15.9375em;
}
#content .news .block-3 .content span {
  display: block;
  margin-bottom: .1em;
  -webkit-transform: translateY(0.2em);
  -moz-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  -o-transform: translateY(0.2em);
  transform: translateY(0.2em);
  font-size: 2.8125em;
}
#content .news .block-3 .content small {
  display: inline-block;
  margin-bottom: 1.5em;
  text-transform: uppercase;
  font-size: .75em;
}
#content .news .block-3 .content p {
  font-size: 1.231875em;
  float: left;
  max-height: 2.9em;
  text-overflow: ellipsis;
}
#content .news .block-3 .content p:after {
  content: "";
  display: table;
  clear: both;
}
#content .featured-blog.block {
  margin-bottom: 0;
}
#content .featured-blog .featured-img {
  min-height: 30.9375em;
  position: relative;
}
#content .featured-blog .featured-img .inner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding-left: 3em;
  color: #FFF;
}
@media screen and (max-width: 34.365em) {
  #content .featured-blog .featured-img .inner {
    padding-left: 1.6em;
  }
}
#content .featured-blog .featured-img .inner a {
  text-decoration: none;
  -webkit-transition: all 0.39s ease;
  -moz-transition: all 0.39s ease;
  transition: all 0.39s ease;
}
#content .featured-blog .featured-img .inner a:hover {
  opacity: .7;
}
#content .featured-blog .featured-img .inner a p {
  font-size: 2.875em;
  text-transform: uppercase;
  line-height: 1.3em;
}
@media screen and (min-width: 34.375em) {
  #content .featured-blog .featured-img .inner a p {
    max-width: 7.5em;
  }
}
@media screen and (max-width: 19.99em) {
  #content .featured-blog .featured-img .inner a p {
    padding-left: .6em;
  }
}
#content .featured-blog .featured-img .inner p {
  font-size: 1.125em;
  max-width: 20.5em;
}
#content .featured-blog.featured-about .inner {
  right: 0;
  padding-right: 3em;
  padding-left: 3em;
  padding-top: 3em;
}
#content .featured-blog.featured-about h1 {
  float: left;
  color: #e19230;
  line-height: .967em;
  font-size: 2.75em;
  text-transform: uppercase;
}
#content .featured-blog.featured-about h1 span {
  display: block;
  font-size: .965em;
  margin: 0;
  text-transform: capitalize;
}
#content .featured-blog.featured-about p {
  float: right;
  color: #747474;
  max-width: 32em !important;
  font-size: 1.0625em !important;
  line-height: 1.7;
}

/* ==========================================================================
   Services Pages
   ========================================================================== */
article#services .contentP {
  padding: 1.2em;
}
article#services.hh-services section {
  padding: 4.3125em 4.3125em 1.3em 4.3125em;
}
article#services.hh-services section:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 34.365em) {
  article#services.hh-services section {
    padding: 2.1em;
  }
}
article#services.hh-services section #first {
  font-size: 1.25em;
}
article#services.hh-services section #first h3 {
  color: #EF5350;
  font-size: 1.1em;
  text-transform: capitalize;
}
article#services.hh-services section #first p {
  color: #595757;
  line-height: 1.5em;
}
@media screen and (min-width: 64em) {
  article#services.hh-services section #first p {
    max-width: 12em;
  }
}
@media screen and (max-width: 47.99em) {
  article#services.hh-services section #first {
    margin-bottom: .89em;
  }
}
article#services.hh-services section .widget {
  display: table;
  margin-bottom: 2.185em;
}
article#services.hh-services section .widget span {
  float: left;
  margin-right: 0.7575em;
  display: block;
  color: #EF5350;
  font-size: 2.75em;
}
article#services.hh-services section .widget span .icon-lightbulb {
  margin-right: 0.35em;
}
article#services.hh-services section .widget aside {
  display: table-cell;
  vertical-align: middle;
}
article#services.hh-services section .widget aside h4 {
  color: #434242;
  text-transform: capitalize;
  font-size: 1.110em;
}
article#services.hh-services section .widget aside p {
  color: #747474;
  line-height: 1.7;
  font-size: .975em;
}
@media screen and (min-width: 48em) {
  article#services.hh-services section .widget aside p {
    max-width: 13.75em;
  }
}
article#services .left-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* ==========================================================================
     Client section 
     ========================================================================== */
}
article#services .left-row .client {
  padding: 0 !important;
}
article#services .left-row .client .media {
  margin-bottom: 0.125em;
  border-bottom: 2px solid #f5f5f5;
  padding: 1.2em;
  position: relative;
  width: 100%;
}
article#services .left-row .client .media:after {
  content: "";
  display: table;
  clear: both;
}
article#services .left-row .client .media .media__left {
  max-width: 3em;
}
article#services .left-row .client .media:after {
  position: absolute;
  bottom: -4px;
  left: 22px;
  content: "";
  border-bottom: 2px solid #f44336;
  height: 0.625em;
  width: 6.875em;
}
article#services .left-row .client .media h3 {
  color: #7E57C2;
  font-size: .9375em;
  display: block;
  margin-bottom: 0;
}
article#services .left-row .client .second {
  width: 100%;
}
article#services .left-row .client .second:after {
  content: "";
  display: table;
  clear: both;
}
article#services .left-row .client p {
  color: #a5a5a5;
  font-size: .9375em;
  max-height: 4.5625em;
  overflow: hidden;
}
article#services .left-row .color {
  color: #FFF;
  background-color: #9575CD;
}
article#services .left-row .color aside.contentP {
  padding: .875em;
}
article#services .left-row .color aside.contentP h2 {
  font-size: 1.875em;
  line-height: 1.2em;
  margin-bottom: .5em;
}
article#services .left-row .color aside.contentP p {
  font-size: 1em;
  line-height: 1.4;
  max-height: 5.5625em;
  overflow: hidden;
}
article#services .services-title {
  min-height: 28.375em;
  position: relative;
  overflow: hidden;
}
article#services .services-title .title {
  color: #CD977C;
  text-align: center;
  position: relative;
  z-index: 3;
  margin-left: 30%;
  overflow: hidden;
  transform: translateY(50%);
}
@media screen and (max-width: 63.99em) {
  article#services .services-title .title {
    margin-left: 0;
    text-align: left;
  }
}
article#services .services-title .title h2 {
  font-size: 1.25em;
  float: left;
  line-height: 1.3em;
  text-align: right;
}
article#services .services-title .title h2 span {
  display: block;
  margin-left: .6575em;
  font-size: 1.5625em;
}
article#services .boxa {
  color: #7C7C7C;
  padding: 2.25em !important;
  margin-bottom: 0 !important;
  border-bottom: 2px solid #f5f5f5;
  border-right: 2px solid #f5f5f5;
  border-left: 2px solid #f5f5f5;
}
@media screen and (max-width: 63.99em) {
  article#services .boxa {
    text-align: center;
  }
}
article#services .boxa h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 1.3625em;
}
article#services .boxa p {
  font-size: .8225em;
  line-height: 1.7em;
  max-width: 204px;
  max-height: 6.5625em;
  overflow: hidden;
}
@media screen and (max-width: 63.99em) {
  article#services .boxa p {
    margin: auto;
  }
}

/* ==========================================================================
   services pages 2 
   ========================================================================== */
article.services_2 section {
  background: #fff;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 63.99em) {
  article.services_2 section {
    margin-bottom: 0.625em;
  }
}
article.services_2 section:after {
  content: "";
  display: table;
  clear: both;
}
article.services_2 section aside {
  padding: 2.25em 3.75em;
  z-index: 10;
  position: relative;
}
article.services_2 section aside h3 {
  font-size: 1.875em;
  color: #3d3d3d;
  max-width: 12.75em;
}
article.services_2 section aside p {
  color: #818181;
  font-size: 0.9375em;
  line-height: 1.6;
}
@media screen and (max-width: 47.99em) {
  article.services_2 section aside {
    padding: 3.75em 1.575em;
  }
}
@media screen and (max-width: 34.365em) {
  article.services_2 section .img-container {
    display: none !important;
  }
}

article.services_3 {
  position: relative;
}
article.services_3 section aside {
  color: #fff;
  background-color: #ef5350;
  min-height: 31.3125em;
}
article.services_3 section aside h3 {
  font-size: 1.5625em;
  margin-bottom: 0;
  text-transform: uppercase;
}
article.services_3 section aside small {
  display: block;
  font-size: 0.9375em;
  margin-bottom: 2.25em;
}
article.services_3 section aside p {
  font-size: 0.9375em;
  line-height: 1.6;
}
article.services_3 section aside .upper {
  padding: 45px 45px 0 45px;
}
article.services_3 section aside .lower {
  padding: 45px;
}
article.services_3 section aside .lower article h4 {
  font-size: 1.10em;
  margin-bottom: .5em;
}
article.services_3 section aside .lower article p {
  margin-bottom: 0;
}
@media screen and (max-width: 63.99em) {
  article.services_3 section aside .lower article p {
    margin-bottom: 1.9em;
  }
}
@media screen and (min-width: 64em) {
  article.services_3 section aside .lower article:nth-of-type(1) p {
    max-width: 13.5em;
  }
}
article.services_3 section:nth-of-type(2) aside {
  background-color: #FFF;
  color: #818181;
  padding: 50px;
}
article.services_3 section:nth-of-type(2) aside small {
  color: #EF5350;
}

.services_4 section:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 34.375em) {
  .services_4 section {
    padding: 5.3125em 5em;
  }
}
@media screen and (max-width: 34.365em) {
  .services_4 section {
    padding: 3.5em 2.5em;
  }
}
.services_4 section p {
  font-size: 1.01em;
  color: #26C6DA;
  margin-bottom: .5em;
}
.services_4 section h1 {
  color: #595757;
  font-size: 1.875em;
  text-transform: capitalize;
}
.services_4 section aside p {
  font-size: 1.01em;
  color: #787777;
  line-height: 1.6;
}

#information .container.flex-wrapper .flex .box {
  padding: 1.5em;
  position: relative;
}
#information .container.flex-wrapper .flex .video {
  background-color: #FF5252;
  color: #fff;
}
#information .container.flex-wrapper .flex .video .player {
  position: relative;
  padding: 264px 0 54px 0;
  display: inline-block;
  text-align: center;
  margin-bottom: 2.5em;
  text-indent: -9999px;
}
#information .container.flex-wrapper .flex .video .player:after {
  content: "";
  display: table;
  clear: both;
}
#information .container.flex-wrapper .flex .video .player:before {
  height: 0;
  width: 0;
  border-top: 3.4375em solid transparent;
  border-bottom: 3.4375em solid transparent;
  border-left: 4.6875em solid #fff;
  position: absolute;
  top: 50%;
  right: 0%;
  left: 0;
  display: block;
  z-index: 1;
  text-align: center;
  -webkit-transform: translateX(150%);
  -moz-transform: translateX(150%);
  -ms-transform: translateX(150%);
  -o-transform: translateX(150%);
  transform: translateX(150%);
  content: '';
}
#information .container.flex-wrapper .flex .video .player:after {
  position: absolute;
  bottom: -5px;
  left: 0;
}
#information .container.flex-wrapper .flex .video h3 {
  font-size: .9375em;
  text-transform: uppercase;
  letter-spacing: normal;
}
#information .container.flex-wrapper .second-box .box h2 {
  color: #F44336;
  margin-bottom: 0;
  font-size: 1.875em;
}
#information .container.flex-wrapper .second-box .box p {
  margin-bottom: 9.625em;
  color: #7C7C7C;
  font-size: 1em;
  line-height: 1.5;
}
#information .container.flex-wrapper .second-box .box span {
  display: inline-block;
  font-size: .975em;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 2.1375em;
}
#information .container.flex-wrapper .second-box .box span .color {
  color: #F44336;
}
#information .container.flex-wrapper .second-box .media {
  margin-bottom: 0;
}
#information .container.flex-wrapper .second-box .media h3 {
  color: #A8A8A8;
  margin-bottom: 0;
  font-size: 1em;
}
#information .container.flex-wrapper .second-box .media p {
  color: #F44336;
  letter-spacing: 2px;
}
#information .container.flex-wrapper .third-box .box {
  padding: 1.0125em 0.9375em;
}
#information .container.flex-wrapper .third-box .box.first {
  background-color: #ffb300;
  color: #fff;
}
#information .container.flex-wrapper .third-box .box.first h5 {
  font-size: .9375em;
  margin-bottom: 0;
  text-transform: uppercase;
}
#information .container.flex-wrapper .third-box .box.first p:nth-of-type(1) {
  text-transform: uppercase;
  font-size: 1.875em;
  margin-bottom: .7em;
}
#information .container.flex-wrapper .third-box .box.first p:nth-of-type(2) {
  font-size: .9375em;
  line-height: 1.3125;
}
#information .container.flex-wrapper .third-box .second {
  background-color: #FFF;
}
#information .container.flex-wrapper .third-box h4 {
  color: #BDBDBD;
  font-size: 1em;
  margin-bottom: 0;
}
#information .container.flex-wrapper .third-box span {
  font-size: 1.5625em;
  font-family: "Montserrat", sans-serif;
}
#information .container.flex-wrapper .third-box span.color-1 {
  color: #9FA8DA;
}
#information .container.flex-wrapper .third-box span.color-2 {
  color: #40C4FF;
}
#information .container.flex-wrapper .third-box small {
  color: #BDBDBD;
  font-size: .975em;
  display: inline-block;
  margin-left: 1.6875em;
}

/* ==========================================================================
   porjects section
   ========================================================================== */
#projects .block-1 {
  position: relative;
  overflow: hidden;
  min-height: 18.75em;
}
#projects .block-1 aside {
  color: #FFF;
  position: relative;
  max-width: 18.125em;
  float: right;
  margin-right: 17%;
  margin-top: 7%;
}
@media screen and (max-width: 34.365em) {
  #projects .block-1 aside {
    padding: 10px;
    margin-right: 7%;
  }
}
#projects .block-1 aside h3 {
  font-size: .915em;
  text-transform: uppercase;
  margin-bottom: 0;
}
#projects .block-1 aside h1 {
  margin-bottom: 0.5625em !important;
  font-size: 2.1875em;
  white-space: nowrap;
}
#projects .block-1 aside p {
  font-size: .975em;
  line-height: 1.5;
  max-height: 5.725em;
  overflow: hidden;
  margin-bottom: 4.375em;
}
#projects .block-2 .media {
  border-bottom: 2px solid #f5f5f5;
  margin-bottom: .3em;
  line-height: 2.2em;
}
#projects .block-2 .media h3 {
  color: #A8A8A8;
  margin-bottom: 0;
  font-size: 1em;
}
#projects .block-2 .media p {
  color: #F44336;
  font-size: .9375em;
  white-space: nowrap;
}
#projects .side .qoute {
  padding: 0.5em;
  margin-bottom: 1.25em;
}
#projects .side .qoute:after {
  content: "";
  display: table;
  clear: both;
}
#projects .side .qoute p {
  font-size: 1.775em;
  line-height: 1.3;
  color: #7C7C7C;
  max-height: 5.1875em;
  overflow: hidden;
  margin-bottom: .5em;
}
#projects .side .qoute p strong {
  color: #01C3C2;
}
#projects .side .qoute small {
  color: #494747;
  font-size: .975em;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#projects .side .qoute small span {
  color: #F44336;
}
@media screen and (min-width: 48em) and (max-width: 64em) {
  #projects .side .qoute {
    margin-bottom: 5.25em;
    background-color: transparent !important;
  }
}

/* ==========================================================================
   main protfolio images 
   ========================================================================== */
#portfolio a {
  display: block;
  text-decoration: none;
}
#portfolio .caption {
  display: block;
  height: 100%;
  width: 100%;
}
#portfolio .caption .portfolio-wrapper {
  overflow: hidden;
  position: relative;
  min-height: 17.375em;
}
#portfolio .caption .portfolio-wrapper.extra-tall {
  min-height: 35.375em;
}
#portfolio .caption .portfolio-wrapper:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  height: 100%;
  width: 100%;
  -webkit-transition: 0.6s all ease;
  -moz-transition: 0.6s all ease;
  transition: 0.6s all ease;
}
#portfolio .caption .portfolio-wrapper aside {
  position: relative;
  padding: 3em;
  opacity: 0;
  color: #4a4a4a;
  z-index: 2;
  -webkit-transition: 0.6s all ease;
  -moz-transition: 0.6s all ease;
  transition: 0.6s all ease;
  display: block;
}
#portfolio .caption .portfolio-wrapper aside h3 {
  font-size: 1.4875em;
  text-transform: uppercase;
  margin-bottom: 0;
  font-family: "Montserrat", sans-serif;
  -webkit-transition: 0.6s all ease;
  -moz-transition: 0.6s all ease;
  transition: 0.6s all ease;
  -webkit-transform: translateY(-6em);
  -moz-transform: translateY(-6em);
  -ms-transform: translateY(-6em);
  -o-transform: translateY(-6em);
  transform: translateY(-6em);
}
#portfolio .caption .portfolio-wrapper aside span {
  font-size: 0.8275em;
  -webkit-transition: 0.6s all ease;
  -moz-transition: 0.6s all ease;
  transition: 0.6s all ease;
  -webkit-transform: translateY(6em);
  -moz-transform: translateY(6em);
  -ms-transform: translateY(6em);
  -o-transform: translateY(6em);
  transform: translateY(6em);
  display: inline-block;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  letter-spacing: +3px;
}
#portfolio .caption .portfolio-wrapper:hover aside {
  opacity: 1;
}
#portfolio .caption .portfolio-wrapper:hover aside h3, #portfolio .caption .portfolio-wrapper:hover aside span {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
#portfolio .caption .portfolio-wrapper:hover:after {
  opacity: 1;
  background-image: -webkit-linear-gradient( top , white 35%, transparent 100%);
  background-image: linear-gradient(to bottom, white 35%, transparent 100%);
  z-index: 1;
}
#portfolio .main-img {
  overflow: hidden;
  position: relative;
  min-height: 35.4375em;
}
#portfolio .main-img:after {
  background: none !important;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 100%;
  width: 100%;
}
#portfolio aside.title {
  color: #CD977C;
  text-align: left;
  position: relative;
  z-index: 3;
  margin-left: 30%;
  overflow: hidden;
  -webkit-transform: translateY(50%);
  -moz-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}
#portfolio aside.title h2 {
  font-size: 1.45em !important;
  float: left;
  line-height: 1.3em;
}
#portfolio aside.title h2 span {
  display: block;
  margin-left: .6575em;
  font-size: 1.3em;
}
#portfolio .more {
  text-decoration: none;
  font-size: 1.5em;
  color: #C0C0C0;
  padding: 1.2em 0;
  text-transform: capitalize;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#portfolio .more:hover {
  background-color: #0BCCE4;
  color: #fff;
}
#portfolio .img-contain {
  min-height: 17.375em;
  position: relative;
  overflow: hidden;
}
#portfolio .work-info .banner {
  background-color: #FFF;
  overflow: hidden;
}
#portfolio .work-info .banner .post-padding {
  padding: 3.3125em 1.785em;
}
@media screen and (max-width: 63.99em) {
  #portfolio .work-info .banner .post-padding {
    padding: 1.812em .9em;
  }
}
#portfolio .work-info .banner h1 {
  font-size: 1.875em;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-bottom: 0.775em !important;
}
#portfolio .work-info .banner .first h1 {
  color: #FF5252;
}
#portfolio .work-info .banner .second h1 {
  color: #ba68c8;
}
#portfolio .work-info .banner .three h1 {
  color: #feba53;
}
#portfolio .work-info .banner p {
  color: #A8A8A8;
  font-size: .9875em;
  line-height: 1.7;
}
#portfolio.simple-gallery ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#portfolio.simple-gallery ul li {
  float: left;
  overflow: hidden;
  width: calc(100%/4);
}
@media screen and (min-width: 64em) {
  #portfolio.simple-gallery ul li {
    width: calc(100%/4);
  }
}
@media screen and (max-width: 63.99em) {
  #portfolio.simple-gallery ul li {
    width: calc(100%/4);
  }
}
@media screen and (max-width: 34.365em) {
  #portfolio.simple-gallery ul li {
    width: calc(100%/1);
  }
}
@media screen and (max-width: 47.99em) {
  #portfolio.simple-gallery ul li {
    width: calc(100%/2);
  }
}
#portfolio.simple-gallery ul li a img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   team
   ========================================================================== */
#team .client-wrapper {
  overflow: hidden;
  position: relative;
  max-width: 20em;
  margin: auto;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
@media screen and (max-width: 24.99em) {
  #team .client-wrapper {
    max-width: 100%;
    font-size: 130%;
    margin-bottom: .625em;
  }
}
#team .client-wrapper:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #f50057;
}
#team .client-wrapper img {
  -webkit-transition: opacity 0.35s, -webkit-transform 1.55s;
  transition: opacity 0.35s, transform 1.55s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
#team .client-wrapper figcaption {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#team .client-wrapper figcaption .client-name {
  -webkit-transform: translate3d(0, 130px, 0);
  -moz-transform: translate3d(0, 130px, 0);
  -ms-transform: translate3d(0, 130px, 0);
  -o-transform: translate3d(0, 130px, 0);
  transform: translate3d(0, 130px, 0);
  position: absolute;
  bottom: 20%;
  left: 0%;
  color: #2F2320;
  padding: 2em;
  z-index: 1;
}
#team .client-wrapper figcaption .client-name.right {
  position: absolute;
  bottom: 20%;
  left: 25%;
  -webkit-transform: translate3d(0, 130px, 0);
  -moz-transform: translate3d(0, 130px, 0);
  -ms-transform: translate3d(0, 130px, 0);
  -o-transform: translate3d(0, 130px, 0);
  transform: translate3d(0, 130px, 0);
}
#team .client-wrapper figcaption .client-name h3 {
  font-size: 1.125em;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 0;
  -webkit-transition: all 0.57s ease;
  -moz-transition: all 0.57s ease;
  transition: all 0.57s ease;
  -webkit-transform: translate3d(0, -40px, 0);
  -moz-transform: translate3d(0, -40px, 0);
  -ms-transform: translate3d(0, -40px, 0);
  -o-transform: translate3d(0, -40px, 0);
  transform: translate3d(0, -40px, 0);
}
#team .client-wrapper figcaption .client-name small {
  display: inline-block;
  font-size: .875em;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  transition: all 0.7s ease;
  -webkit-transform: translate3d(0, -40px, 0);
  -moz-transform: translate3d(0, -40px, 0);
  -ms-transform: translate3d(0, -40px, 0);
  -o-transform: translate3d(0, -40px, 0);
  transform: translate3d(0, -40px, 0);
}
#team .client-wrapper figcaption .client-name ul {
  margin-left: 0;
  opacity: 0;
  -webkit-transition: all 0.9s ease;
  -moz-transition: all 0.9s ease;
  transition: all 0.9s ease;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
#team .client-wrapper figcaption .client-name ul li {
  overflow: hidden;
  list-style-type: none;
  float: left;
}
#team .client-wrapper figcaption .client-name ul li a {
  text-decoration: none;
  margin-right: 1.0em;
  font-size: 1.25em;
  color: #FFF;
}
#team .client-wrapper figcaption .client-name ul li a:hover {
  color: #40C4FF;
}
#team .client-wrapper:hover {
  cursor: pointer;
}
#team .client-wrapper:hover img {
  opacity: 1;
  filter: alpha(opacity=100);
}
#team .client-wrapper:hover img {
  -webkit-transform: translate3d(10%, 0, 0);
  -moz-transform: translate3d(10%, 0, 0);
  -ms-transform: translate3d(10%, 0, 0);
  -o-transform: translate3d(10%, 0, 0);
  transform: translate3d(10%, 0, 0);
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}
#team .client-wrapper:hover .client-name h3, #team .client-wrapper:hover .client-name small {
  -webkit-transform: translate3d(0, -200px, 0);
  -moz-transform: translate3d(0, -200px, 0);
  -ms-transform: translate3d(0, -200px, 0);
  -o-transform: translate3d(0, -200px, 0);
  transform: translate3d(0, -200px, 0);
  color: #FFF;
}
#team .client-wrapper:hover .client-name ul {
  -webkit-transform: translate3d(0, -40px, 0);
  -moz-transform: translate3d(0, -40px, 0);
  -ms-transform: translate3d(0, -40px, 0);
  -o-transform: translate3d(0, -40px, 0);
  transform: translate3d(0, -40px, 0);
  opacity: 1;
}
#team .client-wrapper:hover .client-name ul li:nth-of-type(1) {
  -webkit-animation: fadeIn;
  -moz-animation: fadeIn;
  animation: fadeIn;
  -webkit-animation-duration: 0.9s;
  -moz-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
#team .client-wrapper:hover .client-name ul li:nth-of-type(2) {
  -webkit-animation: fadeIn;
  -moz-animation: fadeIn;
  animation: fadeIn;
  -webkit-animation-duration: 1.9s;
  -moz-animation-duration: 1.9s;
  animation-duration: 1.9s;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
#team .client-wrapper:hover .client-name ul li:nth-of-type(3) {
  -webkit-animation: fadeIn;
  -moz-animation: fadeIn;
  animation: fadeIn;
  -webkit-animation-duration: 2.9s;
  -moz-animation-duration: 2.9s;
  animation-duration: 2.9s;
  -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
#team .client-wrapper:hover {
  position: relative;
}
#team .client-wrapper:hover:after {
  opacity: .7;
  filter: alpha(opacity=100);
}
#team.full--width-team figure {
  max-width: inherit;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 10;
}
#team.full--width-team figure figcaption .client-name {
  color: #FFF;
}
#team.full--width-team figure:after {
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}
#team.full--width-team figure:hover:after {
  background-color: #4cadaf;
}

.about-info section {
  padding: 3.4375em;
}
.about-info section:after {
  content: "";
  display: table;
  clear: both;
}
.about-info section aside {
  margin-bottom: 2em;
}
.about-info section aside h3 {
  margin-bottom: .5em;
  color: #e19230;
  font-size: 1.5625em;
}
.about-info section aside p {
  font-size: .9375em;
  color: #676768;
  line-height: 1.6;
  max-width: 521px;
}
.about-info section .icon__services aside {
  display: table;
  margin-bottom: 2.1875em;
}
.about-info section .icon__services aside span {
  float: left;
  color: #E8173D;
  font-size: 3.21em;
  margin-right: 0.7575em;
}
@media screen and (min-width: 48em) {
  .about-info section .icon__services aside span {
    margin-left: 0.125em;
  }
}
.about-info section .icon__services aside div {
  display: table-cell;
  vertical-align: middle;
  color: #676768;
}
.about-info section .icon__services aside div h4 {
  font-size: 0.9375em;
  text-transform: uppercase;
}
.about-info section .icon__services aside div p {
  margin-bottom: 0;
  line-height: 1.6;
  font-size: 0.9375em;
}
.about-info section .icon__services aside:nth-of-type(2) span {
  margin-right: 0.4em;
  -webkit-transform: translateX(-0.1375em);
  -moz-transform: translateX(-0.1375em);
  -ms-transform: translateX(-0.1375em);
  -o-transform: translateX(-0.1375em);
  transform: translateX(-0.1375em);
}
.about-info section .icon__services aside:nth-of-type(3) span {
  margin-right: 0.6em;
}
.about-info.services_page section {
  padding: 0;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 63.99em) {
  .about-info.services_page section {
    margin-bottom: 0.625em;
  }
}
.about-info.services_page section .icon__services {
  float: right;
  padding: 50px;
}
.about-info.services_page section .icon__services .titler h3 {
  color: #EF5350;
  font-size: 1.2em;
  margin-bottom: .5em;
}
.about-info.services_page section .icon__services .titler span {
  color: #818181;
  font-size: 1.25em;
  margin-bottom: 3.125em;
  display: block;
}
.about-info.services_page section .slider__half.img-slidr {
  position: absolute;
  height: 100%;
  padding: 0;
  top: 0;
}
@media screen and (max-width: 64.0525em) {
  .about-info.services_page section .slider__half.img-slidr {
    position: relative;
    width: 100%;
    height: 300px;
    margin-top: 80px;
  }
}
.about-info.services_page section .slider__half.img-slidr .image-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.about-info.services_page section .slider__half.img-slidr .image-slider .img-slide {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
}
.about-info.services_page section .slider__half.img-slidr .slides {
  height: 100%;
}
.about-info.services_page section .slider__half.img-slidr .slides li {
  height: 100%;
  width: 100%;
}

/* ==========================================================================
   Logos Banner
   ========================================================================== */
#logo-banner section {
  padding: 50px 68px;
}
#logo-banner section:after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
Skills
========================================================================== */
@media screen and (min-width: 1026px) {
  #skills {
    overflow: hidden;
    max-height: 17.5em;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #skills {
    max-height: 26.5em;
    overflow: hidden;
  }
}
@media screen and (min-width: 63.99em) and (max-width: 64em) {
  #skills {
    overflow: hidden;
    max-height: 17.5em;
  }
}
#skills .info {
  background-color: #4ABAF2;
  padding: .925em;
  color: #FFF;
  max-height: 17.5em;
}
#skills .info p:nth-of-type(1) {
  font-size: 1.675em;
  line-height: 1.4;
}
#skills .info p:nth-of-type(2) {
  font-size: .9375em;
  line-height: 1.5;
  overflow: hidden;
  max-height: 5.90em;
}
#skills .skills-box {
  padding: 25px 30px 25px 30px;
}
@media screen and (min-width: 768px) {
  #skills .skills-box {
    max-height: 16.9375em;
  }
}
#skills .skills-box .info-2 h1 {
  margin-bottom: 0;
  color: #C0CA33;
  text-transform: uppercase;
  font-size: 1.675em;
}
#skills .skills-box .info-2 small {
  color: #7C7C7C;
  font-size: .875em;
  margin-bottom: 2.25em;
  display: block;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#skills .skills-box .info-2 small span {
  color: #C0CA33;
}
#skills .skills-box .info-2 p {
  color: #7C7C7C;
  font-size: 1em;
  line-height: 1.5;
  max-height: 7.5em;
  overflow: hidden;
}
#skills .skills-box .skill-wrapper {
  padding: 0;
  -webkit-transform: rotate(-90deg) translateX(30%) translateY(-10%);
  -moz-transform: rotate(-90deg) translateX(30%) translateY(-10%);
  -ms-transform: rotate(-90deg) translateX(30%) translateY(-10%);
  -o-transform: rotate(-90deg) translateX(30%) translateY(-10%);
  transform: rotate(-90deg) translateX(30%) translateY(-10%);
  position: relative;
  width: 13.875em;
  margin: 0;
  overflow: hidden;
  float: right;
}
#skills .skills-box .skill-wrapper:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 766.99px) {
  #skills .skills-box .skill-wrapper {
    width: 100%;
    float: none;
    -webkit-transform: rotate(0) translateX(0) translateY(0);
    -moz-transform: rotate(0) translateX(0) translateY(0);
    -ms-transform: rotate(0) translateX(0) translateY(0);
    -o-transform: rotate(0) translateX(0) translateY(0);
    transform: rotate(0) translateX(0) translateY(0);
  }
}
#skills .skills-box .skill-wrapper .skill-bar {
  margin-bottom: 4.35em;
}
#skills .skills-box .skill-wrapper .skill-bar progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-size: auto;
  border: none;
  background-color: #e6e6e6;
  position: relative;
  height: 20px;
  width: 100%;
}
#skills .skills-box .skill-wrapper .skill-bar label {
  display: inherit;
  float: left;
}
#skills .skills-box .skill-wrapper .skill-bar .progress-value span {
  float: right;
}
#skills .skills-box .skill-wrapper .skill-bar .progress-value span:after {
  content: "";
  display: table;
  clear: both;
}
#skills .skills-box .skill-wrapper .skill-bar progress[value]::-webkit-progress-value {
  background-color: #c0ca33;
}
#skills .skills-box .skill-wrapper .skill-bar progress[value]::-moz-progress-bar {
  background-color: #c0ca33;
}
#skills .skills-box .skill-wrapper .skill-bar progress[value]::-moz-progress-value {
  background-color: #e6e6e6;
}
#skills .skills-box .skill-wrapper .skill-bar progress[value]::-webkit-progress-bar {
  background-color: #e6e6e6;
}
#skills .skills-box .skill-wrapper .skill-bar progress::-ms-fill {
  border: none;
}
#skills .skills-box .skill-wrapper .skill-bar progress[value]::-ms-fill {
  background-color: #c0ca33;
}

/* ==========================================================================
blog thumbs wrapper
========================================================================== */
@media screen and (max-width: 34.365em) {
  #blog {
    font-size: 110%;
  }
}
#blog .blog-wrapper {
  overflow: hidden;
  position: relative;
  min-height: 22.5em;
  padding: 10.3125em 1.25em;
}
#blog .blog-wrapper:after {
  -webkit-transition: background-color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: background-color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: background-color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.1);
}
#blog .blog-wrapper .blog-post {
  position: absolute;
  top: 65%;
  left: 0;
  padding: 2em;
  color: #FFF;
  z-index: 2;
  height: 100%;
  width: 100%;
}
#blog .blog-wrapper .blog-post a.more {
  -webkit-transition: all 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  opacity: 0;
  display: inline-block;
  text-transform: uppercase;
  font-size: .9375em;
  text-align: center;
  margin: auto;
  text-decoration: none;
  position: relative;
}
#blog .blog-wrapper .blog-post a.more:after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  content: "";
  height: 1px;
  width: 0;
  opacity: 0.5;
  margin: auto;
  background-color: #FFF;
  -webkit-transition: width 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: width 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: width 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  display: block;
}
#blog .blog-wrapper .blog-post a.more:hover:after {
  width: 100%;
}
#blog .blog-wrapper .blog-post p {
  -webkit-transition: all 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  opacity: 0;
  max-width: 12.9375em;
  max-height: 5.625em;
  overflow: hidden;
}
#blog .blog-wrapper .blog-post h3 {
  font-size: 1.110em;
  margin-bottom: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#blog .blog-wrapper .blog-post h3 a {
  text-decoration: none;
  -webkit-transition: opacity 0.19s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: opacity 0.19s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: opacity 0.19s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  position: relative;
  max-height: 3.10em;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  opacity: 1;
}
#blog .blog-wrapper .blog-post h3 a:hover {
  opacity: 0.8;
}
#blog .blog-wrapper .blog-post h3 a:after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  content: "";
  height: 1px;
  margin: auto;
  width: 0;
  opacity: 0.5;
  text-align: center;
  background-color: #FFF;
  -webkit-transition: width 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: width 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: width 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  display: block;
}
#blog .blog-wrapper .blog-post h3 a:hover:after {
  width: 100%;
}
#blog .blog-wrapper .blog-post small {
  text-transform: uppercase;
  -webkit-transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  display: inline-block;
}
#blog .blog-wrapper .blog-post .date {
  -webkit-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#blog .blog-wrapper .blog-post .info {
  -webkit-transition: position 0.5s ease;
  -moz-transition: position 0.5s ease;
  transition: position 0.5s ease;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  padding: 2em;
  color: #FFF;
  z-index: 2;
  height: 100%;
  width: 100%;
}
#blog .blog-wrapper:hover:after {
  opacity: 1;
  background-color: rgba(255, 110, 64, 0.7);
  cursor: pointer;
}
#blog .blog-wrapper:hover .blog-post h3 {
  -webkit-transform: translate3d(0, -13.625em, 0);
  -moz-transform: translate3d(0, -13.625em, 0);
  -ms-transform: translate3d(0, -13.625em, 0);
  -o-transform: translate3d(0, -13.625em, 0);
  transform: translate3d(0, -13.625em, 0);
}
#blog .blog-wrapper:hover .blog-post small {
  -webkit-transform: translate3d(0, -18.425em, 0);
  -moz-transform: translate3d(0, -18.425em, 0);
  -ms-transform: translate3d(0, -18.425em, 0);
  -o-transform: translate3d(0, -18.425em, 0);
  transform: translate3d(0, -18.425em, 0);
}
#blog .blog-wrapper:hover .blog-post .info p {
  opacity: 1;
  -webkit-animation: fadeIn;
  -moz-animation: fadeIn;
  animation: fadeIn;
  -webkit-animation-duration: 2.9s;
  -moz-animation-duration: 2.9s;
  animation-duration: 2.9s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
#blog .blog-wrapper:hover .blog-post .info a.more {
  opacity: 1;
  -webkit-animation: fadeIn;
  -moz-animation: fadeIn;
  animation: fadeIn;
  -webkit-animation-duration: 3.9s;
  -moz-animation-duration: 3.9s;
  animation-duration: 3.9s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
#blog .blog-wrapper:hover .info {
  position: absolute;
  top: -10em;
  left: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  opacity: 1;
}

/* ==========================================================================
   footer 
   ========================================================================== */
.site-footer {
  padding: 0 !important;
}
.site-footer article {
  background-color: #FFF;
  overflow: hidden;
  padding: 1.25em;
  line-height: 40px;
  vertical-align: middle;
}
.site-footer article:after {
  content: "";
  display: table;
  clear: both;
}
.site-footer article .branding {
  color: #007141;
  font-family: "Montserrat", sans-serif;
  font-size: 1.25em;
  text-transform: uppercase;
}
.site-footer article .site-nav {
  margin-top: .6em;
}

/* ==========================================================================
   About us page style
   ========================================================================== */
#about-1 section {
  min-height: 22em;
  position: relative;
  overflow: hidden;
}
#about-1 aside {
  padding: 2.2em;
  min-height: 21.4375em;
}
#about-1 aside h1 {
  color: #80DEEA;
  margin-bottom: .875em;
  line-height: 2;
  font-size: 1.5em;
}
#about-1 aside p {
  overflow: hidden;
  color: #7C7C7C;
  font-size: .9375em;
}

/* ==========================================================================
   Services Page style
   ========================================================================== */
#icon-boxes .container .gw {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#icon-boxes aside {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#icon-boxes aside div {
  background-color: #FFF;
  padding: 1.4375em;
}
#icon-boxes aside div h4 {
  font-size: .975em;
  text-transform: uppercase;
}
#icon-boxes aside div h4.color-1 {
  color: #1E88E5;
}
#icon-boxes aside div h4.color-2 {
  color: #f9a825;
}
#icon-boxes aside div h4.color-3 {
  color: #689f38;
}
#icon-boxes aside div h4.color-4 {
  color: #e57373;
}
#icon-boxes aside div p {
  color: #858585;
  font-size: .875em;
  line-height: 1.7em;
}

 /* ==========================================================================
Blog Page style 1 Metro 
========================================================================== */
.blog-wrapper.long {
  min-height: 45.5625em !important;
}
.blog-wrapper.long h3 {
  color: #C2185B;
}
.blog-wrapper.long small {
  color: #616161 !important;
}
.blog-wrapper.long .info p, .blog-wrapper.long .info .more {
  color: #616161;
}
.blog-wrapper.long:hover .info {
  top: -8em !important;
}
.blog-wrapper.long:hover .info p, .blog-wrapper.long:hover .info .more {
  color: #FFF;
}
.blog-wrapper.long:hover h3 {
  color: #FFF;
}
.blog-wrapper.long:hover .blog-post small {
  color: #FFF !important;
}
.blog-wrapper.half-long {
  min-height: 22.5em !important;
}
.blog-wrapper.half-long:hover .info {
  top: -8em !important;
}
.blog-wrapper.half-long .blog-post {
  top: 61% !important;
}
.blog-wrapper.text-only {
  color: #FA9022;
  min-height: 18.75em;
}
.blog-wrapper.text-only.color-1 {
  background-color: #FA9022 !important;
}
.blog-wrapper.text-only.color-2 {
  background-color: #f35284;
}
.blog-wrapper.text-only.color-3 {
  background-color: #BECF14;
}
.blog-wrapper.text-only.white-bg:after {
  background-color: #fff !important;
}
.blog-wrapper.text-only.white-bg .blog-post h3 {
  color: #7ACCC8;
}
.blog-wrapper.text-only.white-bg .blog-post small {
  color: #616161;
}
.blog-wrapper.text-only.white-bg .blog-post .info p, .blog-wrapper.text-only.white-bg .blog-post .info .more {
  color: #616161;
}

.naver.margin-b {
  margin-bottom: .625em;
}
.naver a {
  padding: 1.25em 0;
  vertical-align: middle;
  text-decoration: none;
  color: #616161;
  font-size: 1em;
  display: inline-block;
}
.naver a:nth-of-type(1) {
  float: left;
}
.naver a:nth-of-type(1) i {
  margin-right: 1.25em;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
  display: inline-block;
}
.naver a:nth-of-type(2) {
  float: right;
  margin-right: 1.25em;
}
.naver a:nth-of-type(2) i {
  margin-left: 1.25em;
  display: inline-block;
}

/* ==========================================================================
   Blog style 2 page
   ========================================================================== */
.full-blog-post .wrapper-post {
  position: relative;
  overflow: hidden;
}
.full-blog-post .wrapper-post .min-half {
  min-height: 31em;
  position: relative;
}
.full-blog-post .wrapper-post .info {
  position: relative;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
}
.full-blog-post .wrapper-post .info .client {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.full-blog-post .wrapper-post .info .client img {
  max-width: 2.1875em;
  float: left;
  margin-right: .75em;
  line-height: 1.875;
}
.full-blog-post .wrapper-post .info .client h3 {
  color: #FFF;
  font-size: .9875em;
}
@media screen and (min-width: 48em) {
  .full-blog-post .wrapper-post .info .post-padding {
    padding: 1.9em 3.5em;
  }
}
@media screen and (max-width: 47.99em) {
  .full-blog-post .wrapper-post .info .post-padding {
    padding: .5em 2.1em;
  }
}
.full-blog-post .wrapper-post .info .meta-info {
  color: #FFF;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.full-blog-post .wrapper-post .info .meta-info small {
  display: inline-block;
  text-transform: capitalize;
  font-size: .9875em;
}
.full-blog-post .wrapper-post .info .meta-info ul {
  float: right;
}
.full-blog-post .wrapper-post .info .meta-info ul:after {
  content: "";
  display: table;
  clear: both;
}
.full-blog-post .wrapper-post .info .meta-info ul li {
  list-style-type: none;
  float: left;
  font-size: .9375em;
  margin-right: 2.3375em;
  text-transform: capitalize;
}
@media screen and (max-width: 34.365em) {
  .full-blog-post .wrapper-post .info .meta-info ul li {
    margin-right: .2em;
  }
}
.full-blog-post .wrapper-post .info .meta-info ul li span {
  margin: 0 .5em;
  font-size: .9875em;
  color: #FFF;
}
.full-blog-post .wrapper-post .info .meta-info ul li span {
  color: #fff;
}
.full-blog-post .wrapper-post .info .meta-info ul li label {
  font-size: 0.9875em;
  color: #FFF;
}
.full-blog-post .wrapper-post .info .meta-info ul li i {
  display: inline-block;
  font-size: 1.553em;
}
.full-blog-post .wrapper-post .info .meta-info ul li a {
  text-decoration: none;
}
@media screen and (max-width: 34.365em) {
  .full-blog-post .wrapper-post .info .meta-info ul li:nth-of-type(1) {
    display: none;
  }
}
.full-blog-post .wrapper-post .info .meta-info ul li:nth-of-type(2) a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.full-blog-post .wrapper-post .info .meta-info ul li:nth-of-type(2) a:hover {
  opacity: .5;
}
.full-blog-post .wrapper-post.small-post .post-padding {
  padding: 1.0em 1.5em;
}
.full-blog-post .wrapper-post.small-post .info {
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.full-blog-post .wrapper-post.small-post .info .client {
  -webkit-transform: translateY(-3.75em);
  -moz-transform: translateY(-3.75em);
  -ms-transform: translateY(-3.75em);
  -o-transform: translateY(-3.75em);
  transform: translateY(-3.75em);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.full-blog-post .wrapper-post.small-post .info .meta-info {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: translateY(3.75em);
  -moz-transform: translateY(3.75em);
  -ms-transform: translateY(3.75em);
  -o-transform: translateY(3.75em);
  transform: translateY(3.75em);
}
.full-blog-post .wrapper-post.small-post .info .meta-info ul {
  left: -10px;
}
.full-blog-post .wrapper-post.small-post .info .meta-info ul li {
  margin-right: 1.3375em;
}
.full-blog-post .wrapper-post.small-post .info .meta-info ul span {
  color: #fff;
}
.full-blog-post .wrapper-post.small-post .info .meta-info ul label {
  font-size: 0.9875em;
}
.full-blog-post .wrapper-post.small-post:hover .info {
  opacity: 1;
  cursor: pointer;
  background: rgba(233, 30, 99, 0.7);
}
.full-blog-post .wrapper-post.small-post:hover .info .client {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.full-blog-post .wrapper-post.small-post:hover .info .meta-info {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.full-blog-post .wrapper-post.text-only {
  background-color: #FFF;
}
.full-blog-post .wrapper-post.text-only .post-text {
  position: relative;
  overflow: hidden;
  padding: 5.625em 3.75em;
  z-index: 1;
}
@media screen and (max-width: 34.365em) {
  .full-blog-post .wrapper-post.text-only .post-text {
    padding: 3.625em 2.75em;
  }
}
.full-blog-post .wrapper-post.text-only .post-text p {
  color: #676768;
  font-size: 2.8125em;
  padding-bottom: 1.0em;
  border-bottom: 1px solid #E8E8E8;
  line-height: 1.3;
}
@media screen and (max-width: 47.99em) {
  .full-blog-post .wrapper-post.text-only .post-text p {
    font-size: 130%;
  }
}
.full-blog-post .wrapper-post.text-only .info {
  background-color: transparent;
}
.full-blog-post .wrapper-post.text-only .info .client > h3 {
  color: #BA68C8;
}
.full-blog-post .wrapper-post.text-only .info .meta-info {
  overflow: inherit;
  color: #BEBDBD;
  z-index: 2;
}
.full-blog-post .wrapper-post.text-only .info .meta-info small {
  float: left;
}
.full-blog-post .wrapper-post.text-only .info .meta-info small a {
  text-decoration: none;
}
.full-blog-post .wrapper-post.text-only .info .meta-info span {
  color: #BEBDBD;
}
.full-blog-post .wrapper-post.text-only .info .meta-info label {
  color: #BEBDBD;
  font-size: 0.9875em;
}
@media screen and (max-width: 47.99em) {
  .full-blog-post .wrapper-post.text-only .info .post-padding {
    padding: .8em 2.5em;
  }
}
.full-blog-post .wrapper-post.video-wrapper {
  /*==============================================
   =            Social Button ID style            =
   ==============================================*/
  /*==============================================
  =            Social Button ID style            =
  ==============================================*/
}
.full-blog-post .wrapper-post.video-wrapper iframe {
  z-index: 2;
  margin-bottom: 80px;
}
.full-blog-post .wrapper-post.video-wrapper .info {
  background-color: transparent !important;
}
.full-blog-post .wrapper-post.video-wrapper .info .client {
  z-index: 3;
  padding: 0;
  -webkit-transform: translate(2em, 1.9em);
  -moz-transform: translate(2em, 1.9em);
  -ms-transform: translate(2em, 1.9em);
  -o-transform: translate(2em, 1.9em);
  transform: translate(2em, 1.9em);
}
.full-blog-post .wrapper-post.video-wrapper .post-info {
  z-index: 4;
  padding: 4.5em;
  background-color: #FFF;
  position: relative;
}
@media screen and (max-width: 47.99em) {
  .full-blog-post .wrapper-post.video-wrapper .post-info {
    padding: 2em;
  }
}
.full-blog-post .wrapper-post.video-wrapper .post-info blockquote p {
  color: #676768;
  font-size: 1.562em;
  padding-left: 1.1875em;
  border-left: 2px solid #df6060 !important;
}
.full-blog-post .wrapper-post.video-wrapper .post-info h6 {
  color: #DF6060;
  font-size: 2.8125em;
  margin-bottom: .895em;
}
@media screen and (max-width: 34.365em) {
  .full-blog-post .wrapper-post.video-wrapper .post-info h6 {
    font-size: 180%;
  }
}
.full-blog-post .wrapper-post.video-wrapper .post-info p {
  color: #676768;
  font-size: 1.25em;
  line-height: 1.6;
  padding-bottom: 3.1em;
  border-bottom: 1px solid #e8e8e8;
}
.full-blog-post .wrapper-post.video-wrapper .post-info .meta-info {
  color: #BEBDBD;
}
@media screen and (max-width: 47.99em) {
  .full-blog-post .wrapper-post.video-wrapper .post-info .meta-info {
    overflow: hidden;
    margin-top: 2.5em;
  }
}
.full-blog-post .wrapper-post.video-wrapper .post-info .meta-info small {
  display: inline-block;
  float: left;
  font-size: .9875em;
  text-transform: capitalize;
}
.full-blog-post .wrapper-post.video-wrapper .post-info .meta-info small a {
  text-decoration: none;
  color: #989696;
}
.full-blog-post .wrapper-post.video-wrapper .post-info .meta-info ul {
  float: right;
}
.full-blog-post .wrapper-post.video-wrapper .post-info .meta-info ul li {
  float: left;
  list-style-type: none;
  font-size: .9375em;
  margin-right: 2.3375em;
  text-transform: capitalize;
}
@media screen and (max-width: 34.365em) {
  .full-blog-post .wrapper-post.video-wrapper .post-info .meta-info ul li:nth-of-type(1) {
    display: none;
  }
}
.full-blog-post .wrapper-post.video-wrapper .post-info .meta-info ul li a {
  text-decoration: none;
}
.full-blog-post .wrapper-post.video-wrapper .post-info .meta-info ul li span {
  margin: 0 .5em;
  font-size: 1.053em;
}
.full-blog-post .wrapper-post.video-wrapper .post-info .meta-info ul li span {
  color: #989696;
}
.full-blog-post .wrapper-post.video-wrapper .post-info .meta-info ul li label {
  color: #989696;
  font-size: 0.9875em;
}
.full-blog-post .wrapper-post.video-wrapper .post-info .meta-info ul li i {
  display: inline-block;
  font-size: 1.553em;
}
.full-blog-post .wrapper-post.video-wrapper .post-info.none p {
  border: none;
  margin-bottom: 1.45em;
  padding-bottom: 0.8em;
}
.full-blog-post .wrapper-post.video-wrapper.slider .info {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: red !important;
  height: 0;
}
@media screen and (max-width: 47.99em) {
  .full-blog-post .wrapper-post.video-wrapper .share-button.sharer-0 {
    margin-top: -0.4375em !important;
  }
}
.full-blog-post .wrapper-post.video-wrapper .share-button.sharer-0 label {
  background: transparent !important;
  color: #BEBDBD;
}
.full-blog-post .wrapper-post.video-wrapper .share-button.sharer-0 label span {
  text-transform: capitalize !important;
  font-size: 0.9375em !important;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 600;
  color: #BEBDBD;
}
.full-blog-post .wrapper-post.video-wrapper .share-button.sharer-0 label:before {
  display: none;
}
.full-blog-post .wrapper-post.video-wrapper .share-button.sharer-0 label:after {
  content: "" !important;
  font-family: "icomoon" !important;
  color: #BEBDBD;
}
.full-blog-post .wrapper-post.video-wrapper .share-button.sharer-0 .social ul {
  left: 0;
  right: 0;
}
.full-blog-post .wrapper-post.video-wrapper .share-button.sharer-0 .social ul li {
  margin-right: 0 !important;
  font-weight: 300 !important;
}
@media screen and (max-width: 47.99em) {
  .full-blog-post .wrapper-post.video-wrapper .meta-info {
    overflow: inherit !important;
    padding-bottom: 2.5em;
  }
}
.full-blog-post .wrapper-post.qoutes .post-padding {
  padding: 1.9em 1.5em;
}
@media screen and (max-width: 34.365em) {
  .full-blog-post .wrapper-post.qoutes .post-padding {
    padding: 1.3em 1.5em;
  }
}
.full-blog-post .wrapper-post.qoutes blockquote {
  vertical-align: middle;
  position: absolute;
  top: 17%;
  right: 0;
  bottom: 0;
  left: 0;
  color: #FFF;
  font-size: 1.25em;
}
.full-blog-post .wrapper-post.qoutes blockquote p {
  position: relative;
  max-width: 12.625em;
  padding: .625em 0;
}
.full-blog-post .wrapper-post.qoutes blockquote p::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "“";
  font-weight: 900;
  font-size: 5em;
}
.full-blog-post .wrapper-post.qoutes blockquote p:after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "”";
  font-weight: 900;
  font-size: 5em;
  -webkit-transform: translate(-27px, 32px);
  -moz-transform: translate(-27px, 32px);
  -ms-transform: translate(-27px, 32px);
  -o-transform: translate(-27px, 32px);
  transform: translate(-27px, 32px);
}
.full-blog-post .wrapper-post.qoutes blockquote.full {
  font-size: 1.75em;
  line-height: 1.5;
  top: 15%;
}
@media screen and (max-width: 34.365em) {
  .full-blog-post .wrapper-post.qoutes blockquote.full {
    margin-bottom: 2em;
    font-size: 150%;
  }
}
.full-blog-post .wrapper-post.qoutes blockquote.full p {
  max-width: 100%;
}
.full-blog-post .wrapper-post.qoutes blockquote.full p:after {
  -webkit-transform: translate(10px, 45px);
  -moz-transform: translate(10px, 45px);
  -ms-transform: translate(10px, 45px);
  -o-transform: translate(10px, 45px);
  transform: translate(10px, 45px);
}
@media screen and (max-width: 34.365em) {
  .full-blog-post .wrapper-post.qoutes blockquote.full p {
    font-size: 90%;
  }
}
.full-blog-post .wrapper-post.qoutes .meta-info ul > li {
  margin-right: 1.3375em;
}
.full-blog-post .wrapper-post.qoutes .min-half.solid {
  background-color: #D81B60;
}
.full-blog-post .wrapper-post.qoutes .info {
  background-color: transparent;
}

.author-info {
  background-color: #fff;
}
.author-info .client {
  overflow: hidden;
  padding: 2.5em;
}
@media screen and (max-width: 47.99em) {
  .author-info .client {
    text-align: center;
    margin: auto;
  }
}
.author-info .client span {
  display: block;
  color: #6B6B6B;
  font-size: 0.9375em;
  margin-top: 1.125em;
  text-transform: uppercase;
}
.author-info .client h1 {
  color: #DF6060;
  font-size: 1.875em;
  margin-bottom: 0.405em;
}
.author-info .client p {
  color: #676768;
  font-size: 1.125em;
  line-height: 1.7;
}
@media screen and (max-width: 766.99px) {
  .author-info .client ul {
    overflow: hidden;
    max-width: 15em;
    margin: auto;
  }
}
.author-info .client ul li {
  list-style-type: none;
  float: left;
}
.author-info .client ul li a {
  text-decoration: none;
  margin-right: 0.6em;
  font-size: 1.25em;
  color: #989696;
}
.author-info .client img {
  max-width: 11.375em;
  margin-right: 2.5em;
  float: left;
}
@media screen and (max-width: 47.99em) {
  .author-info .client img {
    float: none;
    margin: auto;
  }
}

/*=============================================
=            Other posts style            =
=============================================*/
.other-posts h2 {
  color: #3E3E3E;
  margin-bottom: 0;
  padding: 0.675em 0 1.3375em 0;
  font-size: 1.875em;
}

/*=============================================
=            comment section style            =
=============================================*/
.comment section {
  padding: 4em 5.5625em;
  background-color: #FFF;
}
@media screen and (min-width: 20em) and (max-width: 34.375em) {
  .comment section {
    padding: 1.8em 2.927em;
  }
}
.comment section h1 {
  color: #DF6060;
  font-size: 1.5625em;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 2.325em;
}
.comment section .client {
  padding: 2.8em 0;
  border-bottom: 1px solid #E8E8E8;
}
@media screen and (min-width: 20em) and (max-width: 48em) {
  .comment section .client {
    text-align: center;
  }
}
.comment section .client:last-child {
  border-color: transparent;
}
.comment section .client.reply {
  margin-left: 2.5em;
}
.comment section .client img {
  max-width: 5.59em;
  margin-right: 2.4em;
  float: left;
  margin-top: 1.1875em;
}
@media screen and (min-width: 20em) and (max-width: 48em) {
  .comment section .client img {
    float: none;
    margin: auto;
    margin-bottom: 1.5em;
  }
}
.comment section .client .comment-name {
  overflow: hidden;
}
.comment section .client .comment-name:after {
  content: "";
  display: table;
  clear: both;
}
.comment section .client .comment-name h2 {
  color: #DF6060;
  font-size: 1.775em;
  margin-bottom: .281em;
  float: left;
  display: inline-block;
}
.comment section .client .comment-name span {
  display: block;
  float: right;
  color: #DF6060;
  font-size: .93em;
}
@media screen and (min-width: 20em) and (max-width: 48em) {
  .comment section .client .comment-name span {
    margin-top: 0.5625em;
  }
}
.comment section .client .comment-name span a {
  -webkit-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  transition: all 0.28s ease;
}
.comment section .client p {
  color: #676768;
  font-size: 1.125em;
  line-height: 1.8;
}
@media screen and (min-width: 20em) and (max-width: 48em) {
  .comment section .client p {
    text-align: left;
  }
}

/*==========================================
 =            Form Comment Reply          =
==========================================*/
section.content {
  overflow: hidden;
}
section.content h3 {
  color: #DF6060;
  font-size: 1.5625em;
}
section.content .input--kaede {
  display: block;
  overflow: hidden;
  height: 3.75em;
  margin: 0 auto .625em auto;
  background: #f9f9f9;
  border: 1px solid transparent;
}
section.content textarea {
  margin: auto;
  background: #f9f9f9;
  color: #ABABAB;
  margin-bottom: 1.5em;
  border: 1px solid transparent;
}
section.content textarea::-webkit-input-placeholder {
  padding: 1em;
}
section.content textarea::-moz-placeholder {
  padding: 1em;
}
section.content textarea:-moz-placeholder {
  padding: 1em;
}
section.content textarea:-ms-input-placeholder {
  padding: 1em;
}
section.content .input {
  position: relative;
  z-index: 1;
  vertical-align: top;
  padding: 1em;
  color: #ABABAB;
  font-size: .9375em;
  width: calc(100%-2em);
}
section.content .input__field--kaede {
  position: absolute;
  top: 0;
  right: 100%;
  width: 60%;
  height: 100%;
  border-color: transparent;
  background: #fff;
  font-size: 1em;
  padding-right: 30px;
  color: #858585;
  -webkit-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-duration: 0.7s;
  -moz-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
section.content .input__label--kaede {
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: .9857em;
  text-align: left;
  cursor: text;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
section.content .input__label-content--kaede {
  padding: 2.5em 0;
}
section.content .input__field--kaede:focus,
section.content .input--filled .input__field--kaede {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition-delay: 0.06s;
  transition-delay: 0.06s;
}
section.content .input__field--kaede:focus + .input__label--kaede,
section.content .input--filled .input__label--kaede {
  -webkit-transform: translate3d(60%, 0, 0);
  transform: translate3d(60%, 0, 0);
  pointer-events: none;
}
@media screen and (max-width: 34em) {
  section.content .input__field--kaede:focus + .input__label--kaede,
  section.content .input--filled .input__label--kaede {
    -webkit-transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
    transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
    pointer-events: none;
  }
}
section.content button.btn {
  background: #df6060;
  color: #FFF;
  font-size: 0.9575em;
  font-family: "Open Sans", sans-serif;
  letter-spacing: normal;
  text-transform: capitalize;
}
section.content button:hover {
  cursor: pointer;
}

/* ==========================================================================
   Contacts US Page
   ========================================================================== */
/* 
 ######     #######   ##    ##   ########      ###      ######    ########   
##    ##   ##     ##  ###   ##      ##        ## ##    ##    ##      ##      
##         ##     ##  ####  ##      ##       ##   ##   ##            ##      
##         ##     ##  ## ## ##      ##      ##     ##  ##            ##      
##         ##     ##  ##  ####      ##      #########  ##            ##      
##    ##   ##     ##  ##   ###      ##      ##     ##  ##    ##      ##      
 ######     #######   ##    ##      ##      ##     ##   ######       ##      
 */
/*==========================================
=            Form Section Style            =
==========================================*/
#wrapper-contact section #map {
  min-height: 40.4375em;
  width: 100%;
}
#wrapper-contact .form-section section {
  padding: 1.6em 2.5em;
}
#wrapper-contact .form-section section h2 {
  margin-bottom: 0;
  color: #F57F17;
  font-size: 1.875em;
}
#wrapper-contact .form-section section p:nth-of-type(1) {
  font-size: 0.875em;
  margin-bottom: 2em;
}
#wrapper-contact .form-section section p:nth-of-type(1) span {
  color: #F57F17;
}
#wrapper-contact .form-section section p:nth-of-type(2) {
  color: #BEBDBD;
  font-size: 1.1em;
  line-height: 1.5;
  margin-bottom: 3.1875em;
  max-height: 3.3125em;
  overflow: hidden;
}
#wrapper-contact .form-section section form input, #wrapper-contact .form-section section form textarea {
  border-color: #ecebeb;
  font-size: .75em;
  text-transform: capitalize;
  padding: 1.3em;
  color: #979797;
  font-family: "Montserrat", sans-serif;
  margin-bottom: .825em;
}
#wrapper-contact .form-section section form input::-webkit-input-placeholder, #wrapper-contact .form-section section form textarea::-webkit-input-placeholder {
  color: #979797;
  font-family: "Montserrat", sans-serif;
}
#wrapper-contact .form-section section form input::-moz-placeholder, #wrapper-contact .form-section section form textarea::-moz-placeholder {
  color: #979797;
  font-family: "Montserrat", sans-serif;
}
#wrapper-contact .form-section section form input:-moz-placeholder, #wrapper-contact .form-section section form textarea:-moz-placeholder {
  color: #979797;
  font-family: "Montserrat", sans-serif;
}
#wrapper-contact .form-section section form input:-ms-input-placeholder, #wrapper-contact .form-section section form textarea:-ms-input-placeholder {
  color: #979797;
  font-family: "Montserrat", sans-serif;
}
#wrapper-contact .form-section section form input[type="submit"] {
  background-color: #f57f17;
  color: #fff;
  font-size: .9375em;
  -webkit-transition: all 0.27s ease;
  -moz-transition: all 0.27s ease;
  transition: all 0.27s ease;
}
#wrapper-contact .form-section section form input[type="submit"]:hover {
  cursor: pointer;
  background-color: #f79a48;
}
#wrapper-contact .form-section section form label {
  color: red;
  font-size: .8775em;
  overflow: hidden;
  display: inline-block;
  margin-bottom: .5em;
}
#wrapper-contact #contact-details .box {
  padding: 1.4375em;
  min-height: 12.4375em;
}
#wrapper-contact #contact-details .box h2 {
  font-size: 1.3725em;
}
#wrapper-contact #contact-details .box p {
  color: #979797;
  font-size: 0.9375em;
  overflow: hidden;
  max-height: 4.3em;
}
#wrapper-contact #contact-details .box.color {
  background-color: #BA68C8;
  color: #fff;
}
#wrapper-contact #contact-details .box.color h4 {
  font-size: 1.0625em;
  margin-bottom: 0;
}
#wrapper-contact #contact-details .box.color h1 {
  font-size: 1.625em;
}
#wrapper-contact #contact-details .box.color p {
  margin-bottom: 0;
  font-size: 0.9375em;
  color: #FFF;
}
#wrapper-contact #contact-details .box.color p:nth-of-type(2) {
  margin-bottom: 1.25em;
}
#wrapper-contact #contact-details .box.color a {
  text-decoration: none;
}

/* 
########   ########   ####   ######    ####  ##    ##    ######    
##     ##  ##     ##   ##   ##    ##    ##   ###   ##   ##    ##   
##     ##  ##     ##   ##   ##          ##   ####  ##   ##         
########   ########    ##   ##          ##   ## ## ##   ##   ####  
##         ##   ##     ##   ##          ##   ##  ####   ##    ##   
##         ##    ##    ##   ##    ##    ##   ##   ###   ##    ##   
##         ##     ##  ####   ######    ####  ##    ##    ######    
 */
/* ==========================================================================
   pricing tables section
   ========================================================================== */
#pricing section:after {
  content: "";
  display: table;
  clear: both;
}
#pricing section article {
  color: #fff;
}
#pricing section article aside {
  padding: 25px;
}
#pricing section article aside .upper {
  border-bottom: 1px solid #fff;
  overflow: hidden;
  padding-bottom: 1.5em;
}
#pricing section article aside .upper h2 {
  float: left;
  font-size: 1.6625em;
  text-transform: capitalize;
  line-height: 1.2;
  position: relative;
  top: 0.5em;
  max-width: 5em;
}
#pricing section article aside .upper span {
  float: right;
  display: inline-block;
  font-size: 3.75em;
  min-width: 1.55em;
  position: relative;
  line-height: 1;
}
#pricing section article aside .upper span:before {
  position: absolute;
  bottom: -17px;
  left: 0;
  content: "per month";
  text-transform: uppercase;
  font-size: .20em;
}
#pricing section article aside .upper span:after {
  position: absolute;
  right: 3px;
  bottom: 5px;
  content: "$";
  text-transform: uppercase;
  font-size: 33px;
}
#pricing section article aside .middle {
  padding: 2em 0px;
  border-bottom: 1px solid #fff;
}
#pricing section article aside .middle nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#pricing section article aside .middle nav > ul li {
  text-indent: -1.16em;
  padding-left: 1em;
  line-height: 1.3;
}
#pricing section article aside .middle nav > ul li:before {
  content: "\e674";
  font-family: 'icomoon';
  color: #FFF;
  font-size: 1.875em;
  position: relative;
  top: 5px;
  margin-right: .8875em;
}
#pricing section article aside .lower {
  padding-top: 28px;
}
#pricing section article aside .lower a {
  display: inline-block;
  text-decoration: none;
  margin-right: 2.4em;
  -webkit-transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
#pricing section article aside .lower a:after {
  content: "\e669";
  font-family: 'icomoon';
  font-size: 1.2em;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  display: inline-block;
  margin-left: -1px;
  position: relative;
  top: 3px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
#pricing section article aside .lower a:hover:after {
  color: #fff;
  margin-left: 10px;
  opacity: 1;
  visibility: visible;
}
#pricing section article:nth-of-type(1) {
  background-color: #FFB300;
}
#pricing section article:nth-of-type(2) {
  background-color: #ff8f00;
}
#pricing section article:nth-of-type(3) {
  background-color: #ff6f00;
}

/* ==========================================================================
   news section in the index.html
   ========================================================================== */
#news--2 .full-blog-post .wrapper-post .min-half {
  min-height: 25em;
}

/* ==========================================================================
   Contact Details
   ========================================================================== */
#contact--details section {
  padding: 8.125em 4.6875em;
}
#contact--details section:after {
  content: "";
  display: table;
  clear: both;
}
#contact--details section h4 {
  color: #4DD0E1;
  font-size: 1.3em;
  margin-bottom: 0;
}
#contact--details section h1 {
  color: #595757;
  font-size: 1.5625em;
  margin-bottom: .937em;
}
#contact--details section p {
  color: #787777;
  font-size: 0.9375em;
  line-height: 1.6;
}
#contact--details section aside {
  text-align: center;
}
#contact--details section aside span {
  display: block;
  color: #4DD0E1;
  font-size: 3.75em;
  margin-bottom: 34px;
}
#contact--details section aside small {
  color: #787777;
  font-size: 0.875em;
}

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