/* ------------------------------------------------------------------------------ */
/* Schecter and Co. */
/* Last updated: Jan 3, 2017 */
/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */
/* TABLE OFF CONTENT
  1. GLOBAL CSS
  2. TYPOGRAPHY
  3. UTILITY CLASS
  4. BUTTON
  5. GRIDS SYSTEM 6
  6. BLOCK GRID
  7. UI
*/

/* ------------------------------------------------------------------------------ */
/* 1. GLOBAL CSS */
/* ------------------------------------------------------------------------------ */
/* NOTE: Set box-sizing globally to handle padding and border widths to pushing into the actual width (support in IE8 up) */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
html,
body {
  height: 100%;
  font-size: 100% /* Set font size to default browser font-size (typically 16px) */
}
body {
  position: relative;
  cursor: default;
  color: #555;
  font-family: "Gotham Rounded", "Helvetica", Helvetica, Verdana, Arial, sans-serif;
  font-size: 16px; font-size: 1rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1.7;
  padding: 0;
  margin: 0;
  background: #fff
}

/* ------------------------------------------------------------------------------ */
/* 2. TYPOGRAPHY */
/* ------------------------------------------------------------------------------ */
/* Typography resets
-------------------------------------------------------- */
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
  margin: 0;
  padding: 0
}

/* Default header styles
-------------------------------------------------------- */
/* styles for mobile screen */
h1 { font-size: 38px; font-weight: 200; line-height: 1.1}
h2 { font-size: 30px; font-weight: 300; line-height: 1.3}
h3 { font-size: 24px; font-weight: 300; line-height: 1.3}
h4 { font-size: 20px; font-weight: 300; line-height: 1.3}
h5 { font-size: 18px; font-weight: 300; line-height: 1.5}
h6 { font-size: 16px; font-weight: 400; line-height: 1.5}
/* styles for screen larger than 48.063em = 769px */
@media screen and (min-width: 48.063em) {
  h1 { font-size: 45px; font-weight: 200}
  h2 { font-size: 37px; font-weight: 300}
  h3 { font-size: 27px; font-weight: 300}
  h4 { font-size: 23px; font-weight: 300}
  h5 { font-size: 20px; font-weight: 300}
  h6 { font-size: 18px; font-weight: 400}
}

/* styles for screen smaller than 480px */
@media all and (max-width: 480px) {
  h1 { font-size: 34px}
  h2 { font-size: 30px}
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Gotham Rounded", "Helvetica", Helvetica, Verdana, Arial, sans-serif;
  color: #444;
  text-rendering: optimizeLegibility;
  margin-top: 0;
  margin-bottom: 30px
}
h3.sub-title {
  color: #ee6557
}
h6.sub-title {
  color: #ee6557;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  white-space: normal;
  letter-spacing: 3px
}
.number {
  font-family: "Helvetica", Helvetica, Verdana, Arial, sans-serif
}
.headline {
  font-family: "Gotham Rounded", "Helvetica", Helvetica, Verdana, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: -1px;
  margin-top: 40px;
  margin-bottom: 40px
}
.no-margin {
  margin: 0
}
/* Default Link Styles
-------------------------------------------------------- */
a {
  color: #ee6557;
  text-decoration: none;
  line-height: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  outline: 0
}
a:hover,
a:focus,
a:active
 {
  cursor: pointer;
  color: #d25133;
  text-decoration: none;
  border-bottom: 1px solid #d25133
}
a.link-secondary {
  color: #444;
  text-decoration: none;
  border-bottom: 0
}
a.link-secondary:hover,
a.link-secondary:focus,
a.link-secondary:active {
  color: #777;
  text-decoration: none;
  border-bottom: 0
}
/* Text Highlights
-------------------------------------------------------- */
::selection {
  color: #f4f4f4;
  background: #e50e14 /* WebKit/Blink Browsers */
}
::-moz-selection {
  color: #f4f4f4;
  background: #e50e14 /* Gecko Browsers */
}

/* Image
-------------------------------------------------------- */
/* NOTE: Grid Defaults to get images to work properly */
img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: none;
  -ms-interpolation-mode: bicubic /* Fix resizing images dimensions issue in IE */
}
.img-gutter {
  margin-top: 30px;
  margin-bottom: 70px
}
@media screen and (max-width: 768px) {
  .img-gutter {
    margin-top: 20px;
    margin-bottom: 20px
  }
}
.img-border {
  border: 1px solid #ddd
}
/* Default paragraph styles
-------------------------------------------------------- */
p {
  margin-bottom: 30px;
  text-rendering: optimizeLegibility
}
p.lead {
  font-size: 20px;
  font-weight: 200
}
@media screen and (max-width: 480px) {
  p.lead {
    font-size: 18px
  }
}
p.last {
  margin-bottom: 0 /* set last p margin */
}
p.gutter-space {
  padding-left: 10px;
  padding-right: 10px
}
/* Default Horizontal Rule styles
-------------------------------------------------------- */
hr {
  clear: both;
  border-top: solid #ddd;
  border-width: 1px 0 0;
  margin: 40px 0;
  height: 0
}

hr.hr--clear {
  border-top-color: transparent
}

hr.hr--small {
  width: 100px;
  margin: 25px auto
}

hr.hr--medium {
  width: 200px;
  margin: 25px auto
}

hr.dark {
  border-color: #222
}

hr.thick {
  border-width: 2px 0 0 0
}

hr.hr--gutter-small {
  margin: 15px 0
}

/* Helpful Typography Defaults
-------------------------------------------------------- */
em, .em, i {
  font-style: italic;
  line-height: inherit
}
strong, b {
  font-weight: bold;
  line-height: inherit
}
small {
  display: inline-block;
  font-size: 75%;
  line-height: 1.4
}
code {
  color: #222;
  font-family: "Consolas", "Liberation Mono", Courier, monospace;
  font-size: 13px; font-size: 0.8125rem;
  padding: 0.125rem 0.3125rem 0.0625rem;
  border: 1px solid #ccc;
  background-color: #eee
}
kbd, .keystroke {
  color: #222222;
  font-family: "Consolas", "Menlo", "Courier", monospace;
  font-size: inherit;
  padding: 0.125rem 0.25rem 0;
  margin: 0;
  border: 1px solid #ddd;
  background-color: #ededed;
  border-radius: 3px
}

/* Lists
-------------------------------------------------------- */
ul, ol, dl {
  font-family: inherit;
  list-style-position: outside;
  margin-bottom: 30px
}
ul {
  margin-left: 15px
}
ul.no-bullet {
  margin-left: 0
}
ul.no-bullet li ul,
ul.no-bullet li ol {
  list-style: none;
  margin-left: 15px;
  margin-bottom: 0
}
ul li, ol li {
  line-height: 1.5;
  margin-bottom: 20px
}
ul li p {
  line-height: 1.7
}

/* Unordered Lists
-------------------------------------------------------- */
ul li ul,
ul li ol {
  margin-top: 30px;
  margin-left: 15px;
  margin-bottom: 30px
}
ul.square li ul, ul.circle li ul, ul.disc li ul {
  list-style: inherit
}
ul.square {
  list-style-type: square;
  margin-left: 15px
}
ul.circle {
  list-style-type: circle;
  margin-left: 15px
}
ul.disc {
  list-style-type: disc;
  margin-left: 15px
}
ul.no-bullet {
  list-style: none
}
/* Inline-list creates a horizontal list.*/
.inline-list {
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0 0 1.0625rem -1.375rem
}
.inline-list > li {
  display: block;
  float: left;
  list-style: none;
  margin-left: 1.375rem
}
.inline-list > li > * {
  display: block
}

/* Ordered Lists
-------------------------------------------------------- */
ol {
  margin-left: 15px
}
ol li ul,
ol li ol {
  margin-top: 30px;
  margin-left: 15px;
  margin-bottom: 30px
}

/* Definition Lists
-------------------------------------------------------- */
dl dt {
  font-weight: bold;
  margin-bottom: 0.3rem
}
dl dd {
  margin-bottom: 0.75rem
}

/* Abbreviations
-------------------------------------------------------- */
abbr,
acronym {
  text-transform: uppercase;
  font-size: 90%;
  color: #222222;
  border-bottom: 1px solid #ddd;
  cursor: help
}
abbr {
  text-transform: none
}

/* Blockquotes
-------------------------------------------------------- */
blockquote {
  width: 90%;
  padding: 15px 10px;
  margin: 0
}
blockquote p {
  color: #888;
  font-size: 20px;
  font-weight: 200;
  font-style: italic;
  line-height: 1.5;
  text-indent: -.65em
}
blockquote p:before {
  content: '\201C'
}
blockquote p:after {
  content: '\201D'
}
blockquote.testimonial-quote h5 {
  display: inline-block;
  padding-top: 15px;
  margin-bottom: 0px;
  border-top: 1px solid #aaa
}

/* TYPOGRAPHY: Print styles
-------------------------------------------------------- */
.print-only {
  display: none
}
@media print {
  .print-only {
    display: block !important
  }
  .print-header {
    padding: 30px 20px 10px 20px;
    border-bottom: 1px solid #777
  }
  .print-only img.logo-main {
    width: 280px;
    margin-bottom: 20px
  }
  @page {
    margin: 0.5cm
  }
  body {
    font-size: 14px;
    color: #000
  }
  nav {
    display: none
  }
  h1 {
    font-size: 27px;
    margin-top: 30px
  }
  a.button {
    display: none
  }
  img {
    max-width: 400px
  }
  .block-grid img {
    max-width: 150px
  }
  .hero {
    display: none
  }
  footer img {
    display: none
  }
  div.row-wrapper {
    margin: 0
  }
}

/* ------------------------------------------------------------------------------ */
/* 3. UTILITY CLASS */
/* ------------------------------------------------------------------------------ */
/* Float Class
-------------------------------------------------------- */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table
}
.clearfix:after {
  clear: both
}
.word-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto
}
.no-wrap {
  white-space: nowrap
}
.primary {
  color: #2380be
}
.success {
  color: #78a000
}

/* Antialiased
-------------------------------------------------------- */
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

/* Text Alignment Class
-------------------------------------------------------- */
.text-justify {
  text-align: justify !important
}

/* Text Style Class
-------------------------------------------------------- */
.all-caps  {
  text-transform: uppercase
}
.text-uppercase {
  text-transform: uppercase
}

/* Spacing Class
-------------------------------------------------------- */
.margin-top {
  margin-top: 40px
}

/* ------------------------------------------------------------------------------ */
/* 4. BUTTON */
/* ------------------------------------------------------------------------------ */
/* Default Button
-------------------------------------------------------- */
button, .button {
  cursor: pointer;
  display: inline-block;
  position: relative;
  color: white;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
  text-decoration: none;
  text-align: center;
  padding: 16px 32px 14px 32px;
  margin: 0 0 30px;
  border-color: #007095;
  border-style: solid;
  border-width: 0px;
  background-color: #ee6557;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -webkit-appearance: none;
  transition: background-color 300ms ease-out
}
button:hover, button:focus, .button:hover, .button:focus {
  color: white;
  background-color: #d25133;
  border-width: 0px;
  outline: none
}
button::-moz-focus-inner {
  border: 0;
  padding: 0
}

/* Secondary Button
-------------------------------------------------------- */
button.secondary, .button.secondary {
  color: white;
  background-color: #002634;
  border-color: #002634
}
button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
  color: #fff;
  background-color: #d25133
}

/* Button Style
-------------------------------------------------------- */
button.expand, .button.expand {
  width: 100%;
  padding-right: 0px;
  padding-left: 0px
}
button.large, .button.large {
  font-size: 1.25rem;
  font-weight: 300;
  padding: 18px 35px 16px 35px
}
.button.clear  {
  border: 3px solid #eee;
  background-color: transparent
}
.button.clear:hover {
  border: 3px solid #d25133;
  background-color: #d25133
}
.button.outline, .button.outline:focus {
  color: #333;
  border: 1px solid #333;
  background-color: transparent
}
.button.outline:hover {
  color: #fff;
  border: 1px solid #d25133;
  background-color: #d25133
}
.button.small {
  font-size: 14px;
  padding: 10px 20px 8px 20px
}
.button.xsmall {
  font-size: 12px;
  padding: 7px 10px 5px 10px
}
/* Button - Media Query
-------------------------------------------------------- */
@media only screen and (min-width: 40.063em) {
  button, .button {
    display: inline-block
  }
}
@media all and (max-width: 768px) {
  button, .button {
    font-size: 16px;
    padding: 16px 25px 14px 25px
  }
  button.large, .button.large {
    font-size: 18px;
    padding: 16px 28px 14px 28px
  }
}
@media all and (max-width: 480px) {
  button, .button {
    font-size: 14px;
    padding: 16px 25px 14px 25px
  }
  button.large, .button.large {
    font-size: 16px;
    padding: 16px 28px 14px 28px;
    margin-top: 5px;
    margin-bottom: 10px
  }
}

/* ------------------------------------------------------------------------------ */
/* 5. GRIDS SYSTEM 6 */
/* ------------------------------------------------------------------------------ */
.grid,
.grid--rev,
.grid--full,
.grid-uniform {
  *zoom:1;
  list-style: none;
  margin: 0;
  padding:0;
  margin-left:-30px /* [grid gutter] */
}
.grid:after,
.grid--rev:after,
.grid--full:after,
.grid-uniform:after {
  content: '';
  display:table;
  clear:both
}
.grid__item.clear {
  clear:both
}
.grid__item {
  box-sizing: border-box;
  float: left;
  min-height: 1px;
  padding-left: 30px; /* [grid gutter] */
  vertical-align: top;
  width:100%
}
/* Grid | revirse
-------------------------------------------------------- */
.grid--rev {
  direction: rtl;
  text-align: left
}
.grid--rev>.grid__item {
  direction: ltr;
  text-align: left;
  float: right
}
/* Grid | full
-------------------------------------------------------- */
.grid--full {
  margin-left: 0
}
.grid--full>.grid__item {
  padding-left:0
}

/* Grid | table
-------------------------------------------------------- */
.grid--table {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-left: 0
}
.grid--table>.grid__item {
  float: none;
  display: table-cell;
  vertical-align: middle;
  min-height: 1px;
  padding-left: 0
}

/* Grid - layout
-------------------------------------------------------- */
.one-whole      { width: 100% }
.one-half       { width: 50% }
.one-third      { width: 33.333% }
.two-thirds     { width: 66.666% }
.one-quarter    { width: 25% }
.two-quarters   { width: 50% }
.three-quarters { width: 75% }
.one-fifth      { width: 20% }
.two-fifths     { width: 40% }
.three-fifths   { width: 60% }
.four-fifths    { width: 80% }
.one-sixth      { width: 16.666% }
.two-sixths     { width: 33.333% }
.three-sixths   { width: 50% }
.four-sixths    { width: 66.666% }
.five-sixths    { width: 83.333% }
.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% }
.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% }
.one-twelfth    { width: 8.333% }
.two-twelfths   { width: 16.666% }
.three-twelfths { width: 25% }
.four-twelfths  { width: 33.333% }
.five-twelfths  { width: 41.666% }
.six-twelfths   { width: 50% }
.seven-twelfths { width: 58.333% }
.eight-twelfths { width: 66.666% }
.nine-twelfths  { width: 75% }
.ten-twelfths   { width: 83.333% }
.eleven-twelfths{ width: 91.666% }
.show           { display: block !important }
.hide           { display: none }
.text-left      { text-align: left !important }
.text-right     { text-align: right !important }
.text-center    { text-align: center !important }
.left           { float: left !important }
.right          { float: right !important }

@media only screen and (max-width: 480px) {
  .small--one-whole       { width: 100% }
  .small--one-half        { width: 50% }
  .small--one-third       { width: 33.333% }
  .small--two-thirds      { width: 66.666% }
  .small--one-quarter     { width: 25% }
  .small--two-quarters    { width: 50% }
  .small--three-quarters  { width: 75% }
  .small--one-fifth       { width: 20% }
  .small--two-fifths      { width: 40% }
  .small--three-fifths    { width: 60% }
  .small--four-fifths     { width: 80% }
  .small--one-sixth       { width: 16.666% }
  .small--two-sixths      { width: 33.333% }
  .small--three-sixths    { width: 50% }
  .small--four-sixths     { width: 66.666% }
  .small--five-sixths     { width: 83.333% }
  .small--one-eighth      { width: 12.5% }
  .small--two-eighths     { width: 25% }
  .small--three-eighths   { width: 37.5% }
  .small--four-eighths    { width: 50% }
  .small--five-eighths    { width: 62.5% }
  .small--six-eighths     { width: 75% }
  .small--seven-eighths   { width: 87.5% }
  .small--one-tenth       { width: 10% }
  .small--two-tenths      { width: 20% }
  .small--three-tenths    { width: 30% }
  .small--four-tenths     { width: 40% }
  .small--five-tenths     { width: 50% }
  .small--six-tenths      { width: 60% }
  .small--seven-tenths    { width: 70% }
  .small--eight-tenths    { width: 80% }
  .small--nine-tenths     { width: 90% }
  .small--one-twelfth     { width: 8.333% }
  .small--two-twelfths    { width: 16.666% }
  .small--three-twelfths  { width: 25% }
  .small--four-twelfths   { width: 33.333% }
  .small--five-twelfths   { width: 41.666% }
  .small--six-twelfths    { width: 50% }
  .small--seven-twelfths  { width: 58.333% }
  .small--eight-twelfths  { width: 66.666% }
  .small--nine-twelfths   { width: 75% }
  .small--ten-twelfths    { width: 83.333% }
  .small--eleven-twelfths { width: 91.666% }
  .small--show            { display: block !important }
  .small--hide            { display: none !important }
  .small--text-left       { text-align: left !important }
  .small--text-right      { text-align: right !important }
  .small--text-center     { text-align: center !important }
  .small--left            { float: left !important }
  .small--right           { float: right !important }

  .grid-uniform .small--one-half:nth-child(2n+1),
  .grid-uniform .small--one-third:nth-child(3n+1),
  .grid-uniform .small--one-quarter:nth-child(4n+1),
  .grid-uniform .small--one-fifth:nth-child(5n+1),
  .grid-uniform .small--one-sixth:nth-child(6n+1),
  .grid-uniform .small--two-sixths:nth-child(3n+1),
  .grid-uniform .small--three-sixths:nth-child(2n+1),
  .grid-uniform .small--two-eighths:nth-child(4n+1),
  .grid-uniform .small--four-eighths:nth-child(2n+1),
  .grid-uniform .small--five-tenths:nth-child(2n+1),
  .grid-uniform .small--one-twelfth:nth-child(12n+1),
  .grid-uniform .small--two-twelfths:nth-child(6n+1),
  .grid-uniform .small--three-twelfths:nth-child(4n+1),
  .grid-uniform .small--four-twelfths:nth-child(3n+1),
  .grid-uniform .small--six-twelfths:nth-child(2n+1) { clear:both }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .medium--one-whole      { width: 100% }
  .medium--one-half       { width: 50% }
  .medium--one-third      { width: 33.333% }
  .medium--two-thirds     { width: 66.666% }
  .medium--one-quarter    { width: 25% }
  .medium--two-quarters   { width: 50% }
  .medium--three-quarters { width: 75% }
  .medium--one-fifth      { width: 20% }
  .medium--two-fifths     { width: 40% }
  .medium--three-fifths   { width: 60% }
  .medium--four-fifths    { width: 80% }
  .medium--one-sixth      { width: 16.666% }
  .medium--two-sixths     { width: 33.333% }
  .medium--three-sixths   { width: 50% }
  .medium--four-sixths    { width: 66.666% }
  .medium--five-sixths    { width: 83.333% }
  .medium--one-eighth     { width: 12.5% }
  .medium--two-eighths    { width: 25% }
  .medium--three-eighths  { width: 37.5% }
  .medium--four-eighths   { width: 50% }
  .medium--five-eighths   { width: 62.5% }
  .medium--six-eighths    { width: 75% }
  .medium--seven-eighths  { width: 87.5% }
  .medium--one-tenth      { width: 10% }
  .medium--two-tenths     { width: 20% }
  .medium--three-tenths   { width: 30% }
  .medium--four-tenths    { width: 40% }
  .medium--five-tenths    { width: 50% }
  .medium--six-tenths     { width: 60% }
  .medium--seven-tenths   { width: 70% }
  .medium--eight-tenths   { width: 80% }
  .medium--nine-tenths    { width: 90% }
  .medium--one-twelfth    { width: 8.333% }
  .medium--two-twelfths   { width: 16.666% }
  .medium--three-twelfths { width: 25% }
  .medium--four-twelfths  { width: 33.333% }
  .medium--five-twelfths  { width: 41.666% }
  .medium--six-twelfths   { width: 50% }
  .medium--seven-twelfths { width: 58.333% }
  .medium--eight-twelfths { width: 66.666% }
  .medium--nine-twelfths  { width: 75% }
  .medium--ten-twelfths   { width: 83.333% }
  .medium--eleven-twelfths{ width: 91.666% }
  .medium--show           { display: block !important }
  .medium--hide           { display: none !important }
  .medium--text-left      { text-align: left !important }
  .medium--text-right     { text-align: right !important }
  .medium--text-center    { text-align: center !important }
  .medium--left           { float: left !important }
  .medium--right          { float: right !important }

  .grid-uniform .medium--one-half:nth-child(2n+1),
  .grid-uniform .medium--one-third:nth-child(3n+1),
  .grid-uniform .medium--one-quarter:nth-child(4n+1),
  .grid-uniform .medium--one-fifth:nth-child(5n+1),
  .grid-uniform .medium--one-sixth:nth-child(6n+1),
  .grid-uniform .medium--two-sixths:nth-child(3n+1),
  .grid-uniform .medium--three-sixths:nth-child(2n+1),
  .grid-uniform .medium--two-eighths:nth-child(4n+1),
  .grid-uniform .medium--four-eighths:nth-child(2n+1),
  .grid-uniform .medium--five-tenths:nth-child(2n+1),
  .grid-uniform .medium--one-twelfth:nth-child(12n+1),
  .grid-uniform .medium--two-twelfths:nth-child(6n+1),
  .grid-uniform .medium--three-twelfths:nth-child(4n+1),
  .grid-uniform .medium--four-twelfths:nth-child(3n+1),
  .grid-uniform .medium--six-twelfths:nth-child(2n+1) { clear:both }
}

@media only screen and (max-width: 768px) {
  .medium-down--one-whole       { width: 100% }
  .medium-down--one-half        { width: 50% }
  .medium-down--one-third       { width: 33.333% }
  .medium-down--two-thirds      { width: 66.666% }
  .medium-down--one-quarter     { width: 25% }
  .medium-down--two-quarters    { width: 50% }
  .medium-down--three-quarters  { width: 75% }
  .medium-down--one-fifth       { width: 20% }
  .medium-down--two-fifths      { width: 40% }
  .medium-down--three-fifths    { width: 60% }
  .medium-down--four-fifths     { width: 80% }
  .medium-down--one-sixth       { width: 16.666% }
  .medium-down--two-sixths      { width: 33.333% }
  .medium-down--three-sixths    { width: 50% }
  .medium-down--four-sixths     { width: 66.666% }
  .medium-down--five-sixths     { width: 83.333% }
  .medium-down--one-eighth      { width: 12.5% }
  .medium-down--two-eighths     { width: 25% }
  .medium-down--three-eighths   { width: 37.5% }
  .medium-down--four-eighths    { width: 50% }
  .medium-down--five-eighths    { width: 62.5% }
  .medium-down--six-eighths     { width: 75% }
  .medium-down--seven-eighths   { width: 87.5% }
  .medium-down--one-tenth       { width: 10% }
  .medium-down--two-tenths      { width: 20% }
  .medium-down--three-tenths    { width: 30% }
  .medium-down--four-tenths     { width: 40% }
  .medium-down--five-tenths     { width: 50% }
  .medium-down--six-tenths      { width: 60% }
  .medium-down--seven-tenths    { width: 70% }
  .medium-down--eight-tenths    { width: 80% }
  .medium-down--nine-tenths     { width: 90% }
  .medium-down--one-twelfth     { width: 8.333% }
  .medium-down--two-twelfths    { width: 16.666% }
  .medium-down--three-twelfths  { width: 25% }
  .medium-down--four-twelfths   { width: 33.333%}
  .medium-down--five-twelfths   { width: 41.666% }
  .medium-down--six-twelfths    { width: 50% }
  .medium-down--seven-twelfths  { width: 58.333% }
  .medium-down--eight-twelfths  { width: 66.666% }
  .medium-down--nine-twelfths   { width: 75% }
  .medium-down--ten-twelfths    { width: 83.333% }
  .medium-down--eleven-twelfths { width: 91.666% }
  .medium-down--show            { display: block !important }
  .medium-down--hide            { display: none !important }
  .medium-down--text-left       { text-align: left !important }
  .medium-down--text-right      { text-align: right !important }
  .medium-down--text-center     { text-align: center !important }
  .medium-down--left            { float: left !important }
  .medium-down--right           { float: right !important }

  .grid-uniform .medium-down--one-half:nth-child(2n+1),
  .grid-uniform .medium-down--one-third:nth-child(3n+1),
  .grid-uniform .medium-down--one-quarter:nth-child(4n+1),
  .grid-uniform .medium-down--one-fifth:nth-child(5n+1),
  .grid-uniform .medium-down--one-sixth:nth-child(6n+1),
  .grid-uniform .medium-down--two-sixths:nth-child(3n+1),
  .grid-uniform .medium-down--three-sixths:nth-child(2n+1),
  .grid-uniform .medium-down--two-eighths:nth-child(4n+1),
  .grid-uniform .medium-down--four-eighths:nth-child(2n+1),
  .grid-uniform .medium-down--five-tenths:nth-child(2n+1),
  .grid-uniform .medium-down--one-twelfth:nth-child(12n+1),
  .grid-uniform .medium-down--two-twelfths:nth-child(6n+1),
  .grid-uniform .medium-down--three-twelfths:nth-child(4n+1),
  .grid-uniform .medium-down--four-twelfths:nth-child(3n+1),
  .grid-uniform .medium-down--six-twelfths:nth-child(2n+1) { clear:both }
}

@media only screen and (min-width: 769px) {
  .large--one-whole       { width: 100% }
  .large--one-half        { width: 50% }
  .large--one-third       { width: 33.333% }
  .large--two-thirds      { width: 66.666% }
  .large--one-quarter     { width: 25% }
  .large--two-quarters    { width: 50% }
  .large--three-quarters  { width: 75% }
  .large--one-fifth       { width: 20% }
  .large--two-fifths      { width: 40% }
  .large--three-fifths    { width: 60% }
  .large--four-fifths     { width: 80% }
  .large--one-sixth       { width: 16.666% }
  .large--two-sixths      { width: 33.333% }
  .large--three-sixths    { width: 50% }
  .large--four-sixths     { width: 66.666% }
  .large--five-sixths     { width: 83.333% }
  .large--one-eighth      { width: 12.5% }
  .large--two-eighths     { width: 25% }
  .large--three-eighths   { width: 37.5% }
  .large--four-eighths    { width: 50% }
  .large--five-eighths    { width: 62.5% }
  .large--six-eighths     { width: 75% }
  .large--seven-eighths   { width: 87.5% }
  .large--one-tenth       { width: 10% }
  .large--two-tenths      { width: 20% }
  .large--three-tenths    { width: 30% }
  .large--four-tenths     { width: 40% }
  .large--five-tenths     { width: 50% }
  .large--six-tenths      { width: 60% }
  .large--seven-tenths    { width: 70% }
  .large--eight-tenths    { width: 80% }
  .large--nine-tenths     { width: 90% }
  .large--one-twelfth     { width: 8.333% }
  .large--two-twelfths    { width: 16.666% }
  .large--three-twelfths  { width: 25% }
  .large--four-twelfths   { width: 33.333% }
  .large--five-twelfths   { width: 41.666% }
  .large--six-twelfths    { width: 50% }
  .large--seven-twelfths  { width: 58.333% }
  .large--eight-twelfths  { width: 66.666% }
  .large--nine-twelfths   { width: 75% }
  .large--ten-twelfths    { width: 83.333% }
  .large--eleven-twelfths { width: 91.666% }
  .large--show            { display: block !important }
  .large--hide            { display: none !important }
  .large--text-left       { text-align: left !important }
  .large--text-right      { text-align: right !important }
  .large--text-center     { text-align: center !important }
  .large--left            { float: left !important }
  .large--right           { float: right !important }

  .grid-uniform .large--one-half:nth-child(2n+1),
  .grid-uniform .large--one-third:nth-child(3n+1),
  .grid-uniform .large--one-quarter:nth-child(4n+1),
  .grid-uniform .large--one-fifth:nth-child(5n+1),
  .grid-uniform .large--one-sixth:nth-child(6n+1),
  .grid-uniform .large--two-sixths:nth-child(3n+1),
  .grid-uniform .large--three-sixths:nth-child(2n+1),
  .grid-uniform .large--two-eighths:nth-child(4n+1),
  .grid-uniform .large--four-eighths:nth-child(2n+1),
  .grid-uniform .large--five-tenths:nth-child(2n+1),
  .grid-uniform .large--one-twelfth:nth-child(12n+1),
  .grid-uniform .large--two-twelfths:nth-child(6n+1),
  .grid-uniform .large--three-twelfths:nth-child(4n+1),
  .grid-uniform .large--four-twelfths:nth-child(3n+1),
  .grid-uniform .large--six-twelfths:nth-child(2n+1) { clear:both }
}

@media only screen and (min-width: 1024px) {
  .xlarge--one-whole       { width: 100% }
  .xlarge--one-half        { width: 50% }
  .xlarge--one-third       { width: 33.333% }
  .xlarge--two-thirds      { width: 66.666% }
  .xlarge--one-quarter     { width: 25% }
  .xlarge--two-quarters    { width: 50% }
  .xlarge--three-quarters  { width: 75% }
  .xlarge--one-fifth       { width: 20% }
  .xlarge--two-fifths      { width: 40% }
  .xlarge--three-fifths    { width: 60% }
  .xlarge--four-fifths     { width: 80% }
  .xlarge--one-sixth       { width: 16.666% }
  .xlarge--two-sixths      { width: 33.333% }
  .xlarge--three-sixths    { width: 50% }
  .xlarge--four-sixths     { width: 66.666% }
  .xlarge--five-sixths     { width: 83.333% }
  .xlarge--one-eighth      { width: 12.5% }
  .xlarge--two-eighths     { width: 25% }
  .xlarge--three-eighths   { width: 37.5% }
  .xlarge--four-eighths    { width: 50% }
  .xlarge--five-eighths    { width: 62.5% }
  .xlarge--six-eighths     { width: 75% }
  .xlarge--seven-eighths   { width: 87.5% }
  .xlarge--one-tenth       { width: 10% }
  .xlarge--two-tenths      { width: 20% }
  .xlarge--three-tenths    { width: 30% }
  .xlarge--four-tenths     { width: 40% }
  .xlarge--five-tenths     { width: 50% }
  .xlarge--six-tenths      { width: 60% }
  .xlarge--seven-tenths    { width: 70% }
  .xlarge--eight-tenths    { width: 80% }
  .xlarge--nine-tenths     { width: 90% }
  .xlarge--one-twelfth     { width: 8.333% }
  .xlarge--two-twelfths    { width: 16.666% }
  .xlarge--three-twelfths  { width: 25% }
  .xlarge--four-twelfths   { width: 33.333% }
  .xlarge--five-twelfths   { width: 41.666% }
  .xlarge--six-twelfths    { width: 50% }
  .xlarge--seven-twelfths  { width: 58.333% }
  .xlarge--eight-twelfths  { width: 66.666% }
  .xlarge--nine-twelfths   { width: 75% }
  .xlarge--ten-twelfths    { width: 83.333% }
  .xlarge--eleven-twelfths { width: 91.666% }
  .xlarge--show            { display: block !important }
  .xlarge--hide            { display: none !important }
  .xlarge--text-left       { text-align: left !important }
  .xlarge--text-right      { text-align: right !important }
  .xlarge--text-center     { text-align: center !important }
  .xlarge--left            { float: left !important }
  .xlarge--right           { float: right !important }

  .grid-uniform .xlarge--one-half:nth-child(2n+1),
  .grid-uniform .xlarge--one-third:nth-child(3n+1),
  .grid-uniform .xlarge--one-quarter:nth-child(4n+1),
  .grid-uniform .xlarge--one-fifth:nth-child(5n+1),
  .grid-uniform .xlarge--one-sixth:nth-child(6n+1),
  .grid-uniform .xlarge--two-sixths:nth-child(3n+1),
  .grid-uniform .xlarge--three-sixths:nth-child(2n+1),
  .grid-uniform .xlarge--two-eighths:nth-child(4n+1),
  .grid-uniform .xlarge--four-eighths:nth-child(2n+1),
  .grid-uniform .xlarge--five-tenths:nth-child(2n+1),
  .grid-uniform .xlarge--one-twelfth:nth-child(12n+1),
  .grid-uniform .xlarge--two-twelfths:nth-child(6n+1),
  .grid-uniform .xlarge--three-twelfths:nth-child(4n+1),
  .grid-uniform .xlarge--four-twelfths:nth-child(3n+1),
  .grid-uniform .xlarge--six-twelfths:nth-child(2n+1) { clear:both }
}

[class*="push--"]         { position: relative }
.push--one-whole          { left: 100% }
.push--one-half           { left: 50% }
.push--one-third          { left: 33.333% }
.push--two-thirds         { left: 66.666% }
.push--one-quarter        { left: 25% }
.push--two-quarters       { left: 50% }
.push--three-quarters     { left: 75% }
.push--one-fifth          { left: 20% }
.push--two-fifths         { left: 40% }
.push--three-fifths       { left: 60% }
.push--four-fifths        { left: 80% }
.push--one-sixth          { left: 16.666% }
.push--two-sixths         { left: 33.333% }
.push--three-sixths       { left: 50% }
.push--four-sixths        { left: 66.666% }
.push--five-sixths        { left: 83.333% }
.push--one-eighth         { left: 12.5% }
.push--two-eighths        { left: 25% }
.push--three-eighths      { left: 37.5% }
.push--four-eighths       { left: 50% }
.push--five-eighths       { left: 62.5% }
.push--six-eighths        { left: 75% }
.push--seven-eighths      { left: 87.5% }
.push--one-tenth          { left: 10% }
.push--two-tenths         { left: 20% }
.push--three-tenths       { left: 30% }
.push--four-tenths        { left: 40% }
.push--five-tenths        { left: 50% }
.push--six-tenths         { left: 60% }
.push--seven-tenths       { left: 70% }
.push--eight-tenths       { left: 80% }
.push--nine-tenths        { left: 90% }
.push--one-twelfth        { left: 8.333% }
.push--two-twelfths       { left: 16.666% }
.push--three-twelfths     { left: 25% }
.push--four-twelfths      { left: 33.333% }
.push--five-twelfths      { left: 41.666% }
.push--six-twelfths       { left: 50% }
.push--seven-twelfths     { left: 58.333% }
.push--eight-twelfths     { left: 66.666% }
.push--nine-twelfths      { left: 75% }
.push--ten-twelfths       { left: 83.333% }
.push--eleven-twelfths    { left: 91.666% }

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .push--medium--one-whole      { left: 100% }
  .push--medium--one-half       { left: 50% }
  .push--medium--one-third      { left: 33.333% }
  .push--medium--two-thirds     { left: 66.666% }
  .push--medium--one-quarter    { left: 25% }
  .push--medium--two-quarters   { left: 50% }
  .push--medium--three-quarters { left: 75% }
  .push--medium--one-fifth      { left: 20% }
  .push--medium--two-fifths     { left: 40% }
  .push--medium--three-fifths   { left: 60% }
  .push--medium--four-fifths    { left: 80% }
  .push--medium--one-sixth      { left: 16.666% }
  .push--medium--two-sixths     { left: 33.333% }
  .push--medium--three-sixths   { left: 50% }
  .push--medium--four-sixths    { left: 66.666% }
  .push--medium--five-sixths    { left: 83.333% }
  .push--medium--one-eighth     { left: 12.5% }
  .push--medium--two-eighths    { left: 25% }
  .push--medium--three-eighths  { left: 37.5% }
  .push--medium--four-eighths   { left: 50% }
  .push--medium--five-eighths   { left: 62.5% }
  .push--medium--six-eighths    { left: 75% }
  .push--medium--seven-eighths  { left: 87.5% }
  .push--medium--one-tenth      { left: 10% }
  .push--medium--two-tenths     { left: 20% }
  .push--medium--three-tenths   { left: 30% }
  .push--medium--four-tenths    { left: 40% }
  .push--medium--five-tenths    { left: 50% }
  .push--medium--six-tenths     { left: 60% }
  .push--medium--seven-tenths   { left: 70% }
  .push--medium--eight-tenths   { left: 80% }
  .push--medium--nine-tenths    { left: 90% }
  .push--medium--one-twelfth    { left: 8.333% }
  .push--medium--two-twelfths   { left: 16.666% }
  .push--medium--three-twelfths { left: 25% }
  .push--medium--four-twelfths  { left: 33.333% }
  .push--medium--five-twelfths  { left: 41.666% }
  .push--medium--six-twelfths   { left: 50% }
  .push--medium--seven-twelfths { left: 58.333% }
  .push--medium--eight-twelfths { left: 66.666% }
  .push--medium--nine-twelfths  { left: 75% }
  .push--medium--ten-twelfths   { left: 83.333% }
  .push--medium--eleven-twelfths{ left: 91.666% }
}

@media only screen and (max-width: 768px) {
  .push--medium-down--one-whole       { left: 100% }
  .push--medium-down--one-half        { left: 50% }
  .push--medium-down--one-third       { left: 33.333% }
  .push--medium-down--two-thirds      { left: 66.666% }
  .push--medium-down--one-quarter     { left: 25% }
  .push--medium-down--two-quarters    { left: 50% }
  .push--medium-down--three-quarters  { left: 75% }
  .push--medium-down--one-fifth       { left: 20% }
  .push--medium-down--two-fifths      { left: 40% }
  .push--medium-down--three-fifths    { left: 60% }
  .push--medium-down--four-fifths     { left: 80% }
  .push--medium-down--one-sixth       { left: 16.666% }
  .push--medium-down--two-sixths      { left: 33.333% }
  .push--medium-down--three-sixths    { left: 50% }
  .push--medium-down--four-sixths     { left: 66.666% }
  .push--medium-down--five-sixths     { left: 83.333% }
  .push--medium-down--one-eighth      { left: 12.5% }
  .push--medium-down--two-eighths     { left: 25% }
  .push--medium-down--three-eighths   { left: 37.5% }
  .push--medium-down--four-eighths    { left: 50% }
  .push--medium-down--five-eighths    { left: 62.5% }
  .push--medium-down--six-eighths     { left: 75% }
  .push--medium-down--seven-eighths   { left: 87.5% }
  .push--medium-down--one-tenth       { left: 10% }
  .push--medium-down--two-tenths      { left: 20% }
  .push--medium-down--three-tenths    { left: 30% }
  .push--medium-down--four-tenths     { left: 40% }
  .push--medium-down--five-tenths     { left: 50% }
  .push--medium-down--six-tenths      { left: 60% }
  .push--medium-down--seven-tenths    { left: 70% }
  .push--medium-down--eight-tenths    { left: 80% }
  .push--medium-down--nine-tenths     { left: 90% }
  .push--medium-down--one-twelfth     { left: 8.333% }
  .push--medium-down--two-twelfths    { left: 16.666% }
  .push--medium-down--three-twelfths  { left: 25% }
  .push--medium-down--four-twelfths   { left: 33.333% }
  .push--medium-down--five-twelfths   { left: 41.666% }
  .push--medium-down--six-twelfths    { left: 50% }
  .push--medium-down--seven-twelfths  { left: 58.333% }
  .push--medium-down--eight-twelfths  { left: 66.666% }
  .push--medium-down--nine-twelfths   { left: 75% }
  .push--medium-down--ten-twelfths    { left: 83.333% }
  .push--medium-down--eleven-twelfths { left: 91.666% }
}

@media only screen and (min-width: 769px) {
  .push--large--one-whole       { left: 100% }
  .push--large--one-half        { left: 50% }
  .push--large--one-third       { left: 33.333% }
  .push--large--two-thirds      { left: 66.666% }
  .push--large--one-quarter     { left: 25% }
  .push--large--two-quarters    { left: 50% }
  .push--large--three-quarters  { left: 75% }
  .push--large--one-fifth       { left: 20% }
  .push--large--two-fifths      { left: 40% }
  .push--large--three-fifths    { left: 60% }
  .push--large--four-fifths     { left: 80% }
  .push--large--one-sixth       { left: 16.666% }
  .push--large--two-sixths      { left: 33.333% }
  .push--large--three-sixths    { left: 50% }
  .push--large--four-sixths     { left: 66.666% }
  .push--large--five-sixths     { left: 83.333% }
  .push--large--one-eighth      { left: 12.5% }
  .push--large--two-eighths     { left: 25% }
  .push--large--three-eighths   { left: 37.5% }
  .push--large--four-eighths    { left: 50% }
  .push--large--five-eighths    { left: 62.5% }
  .push--large--six-eighths     { left: 75% }
  .push--large--seven-eighths   { left: 87.5% }
  .push--large--one-tenth       { left: 10% }
  .push--large--two-tenths      { left: 20% }
  .push--large--three-tenths    { left: 30% }
  .push--large--four-tenths     { left: 40% }
  .push--large--five-tenths     { left: 50% }
  .push--large--six-tenths      { left: 60% }
  .push--large--seven-tenths    { left: 70% }
  .push--large--eight-tenths    { left: 80% }
  .push--large--nine-tenths     { left: 90% }
  .push--large--one-twelfth     { left: 8.333% }
  .push--large--two-twelfths    { left: 16.666% }
  .push--large--three-twelfths  { left: 25% }
  .push--large--four-twelfths   { left: 33.333% }
  .push--large--five-twelfths   { left: 41.666% }
  .push--large--six-twelfths    { left: 50% }
  .push--large--seven-twelfths  { left: 58.333% }
  .push--large--eight-twelfths  { left: 66.666% }
  .push--large--nine-twelfths   { left: 75% }
  .push--large--ten-twelfths    { left: 83.333% }
  .push--large--eleven-twelfths { left: 91.666% }
}

@media only screen and (min-width: 1024px) {
  .push--xlarge--one-whole       { left: 100% }
  .push--xlarge--one-half        { left: 50% }
  .push--xlarge--one-third       { left: 33.333% }
  .push--xlarge--two-thirds      { left: 66.666% }
  .push--xlarge--one-quarter     { left: 25% }
  .push--xlarge--two-quarters    { left: 50% }
  .push--xlarge--three-quarters  { left: 75% }
  .push--xlarge--one-fifth       { left: 20% }
  .push--xlarge--two-fifths      { left: 40% }
  .push--xlarge--three-fifths    { left: 60% }
  .push--xlarge--four-fifths     { left: 80% }
  .push--xlarge--one-sixth       { left: 16.666% }
  .push--xlarge--two-sixths      { left: 33.333% }
  .push--xlarge--three-sixths    { left: 50% }
  .push--xlarge--four-sixths     { left: 66.666% }
  .push--xlarge--five-sixths     { left: 83.333% }
  .push--xlarge--one-eighth      { left: 12.5% }
  .push--xlarge--two-eighths     { left: 25% }
  .push--xlarge--three-eighths   { left: 37.5% }
  .push--xlarge--four-eighths    { left: 50% }
  .push--xlarge--five-eighths    { left: 62.5% }
  .push--xlarge--six-eighths     { left: 75% }
  .push--xlarge--seven-eighths   { left: 87.5% }
  .push--xlarge--one-tenth       { left: 10% }
  .push--xlarge--two-tenths      { left: 20% }
  .push--xlarge--three-tenths    { left: 30% }
  .push--xlarge--four-tenths     { left: 40% }
  .push--xlarge--five-tenths     { left: 50% }
  .push--xlarge--six-tenths      { left: 60% }
  .push--xlarge--seven-tenths    { left: 70% }
  .push--xlarge--eight-tenths    { left: 80% }
  .push--xlarge--nine-tenths     { left: 90% }
  .push--xlarge--one-twelfth     { left: 8.333% }
  .push--xlarge--two-twelfths    { left: 16.666% }
  .push--xlarge--three-twelfths  { left: 25% }
  .push--xlarge--four-twelfths   { left: 33.333% }
  .push--xlarge--five-twelfths   { left: 41.666% }
  .push--xlarge--six-twelfths    { left: 50% }
  .push--xlarge--seven-twelfths  { left: 58.333% }
  .push--xlarge--eight-twelfths  { left: 66.666% }
  .push--xlarge--nine-twelfths   { left: 75% }
  .push--xlarge--ten-twelfths    { left: 83.333% }
  .push--xlarge--eleven-twelfths { left: 91.666% }
}

/* Row Wrap - Padding
-------------------------------------------------------- */
.row-wrapper {
  padding: 60px 20px;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  background-color: #fff
}
.row-alt {
  border: none;
  background-color: #fafafa
}
.row-alt-dark {
  border: none;
  background-color: #ededed
}
@media all and (max-width: 768px) {
  .row-wrapper {
    padding: 40px 10px
  }
}

/* Content wrap
-------------------------------------------------------- */
.wrapper {
  *zoom: 1;
  max-width: 1040px; /* CHANGE site width here */
  margin: 0 auto;
  padding: 0 15px /* [grid gutter / 2] */
}
.wrapper:after {
  content: '';
  display: table;
  clear:both
}
@media screen and (min-width: 480px) {
  .wrapper {
    padding:0 30px /* [grid gutter] */
  }
}
.wrapper-large {
  max-width: 1400px
}

/* ------------------------------------------------------------------------------ */
/* 6. BLOCK GRID */
/* ------------------------------------------------------------------------------ */
[class*="block-grid-"] {
  display: block;
  padding: 0;
  margin: 0 -5px
}
[class*="block-grid-"]:before, [class*="block-grid-"]:after {
  content: " ";
  display: table
}
[class*="block-grid-"]:after {
  clear: both
}
[class*="block-grid-"] > li {
  display: block;
  float: left;
  height: auto;
  padding: 0 5px 10px
}
.block-grid img {
  padding: 5px
}
/* Fore screen width less than 640px*/
@media only screen {
  .small-block-grid-1 > li { width: 100%; list-style: none }
  .small-block-grid-1 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-1 > li:nth-of-type(1n+1) { clear: both }

  .small-block-grid-2 > li { width: 50%; list-style: none }
  .small-block-grid-2 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-2 > li:nth-of-type(2n+1) { clear: both }

  .small-block-grid-3 > li { width: 33.33333%; list-style: none }
  .small-block-grid-3 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-3 > li:nth-of-type(3n+1) { clear: both }

  .small-block-grid-4 > li { width: 25%; list-style: none }
  .small-block-grid-4 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-4 > li:nth-of-type(4n+1) { clear: both }

  .small-block-grid-5 > li { width: 20%; list-style: none }
  .small-block-grid-5 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-5 > li:nth-of-type(5n+1) { clear: both }

  .small-block-grid-6 > li { width: 16.66667%; list-style: none }
  .small-block-grid-6 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-6 > li:nth-of-type(6n+1) { clear: both }

  .small-block-grid-7 > li { width: 14.28571%; list-style: none }
  .small-block-grid-7 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-7 > li:nth-of-type(7n+1) { clear: both }

  .small-block-grid-8 > li { width: 12.5%; list-style: none }
  .small-block-grid-8 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-8 > li:nth-of-type(8n+1) { clear: both }

  .small-block-grid-9 > li { width: 11.11111%; list-style: none }
  .small-block-grid-9 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-9 > li:nth-of-type(9n+1) { clear: both }

  .small-block-grid-10 > li { width: 10%; list-style: none }
  .small-block-grid-10 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-10 > li:nth-of-type(10n+1) { clear: both }

  .small-block-grid-11 > li { width: 9.09091%; list-style: none }
  .small-block-grid-11 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-11 > li:nth-of-type(11n+1) { clear: both }

  .small-block-grid-12 > li { width: 8.33333%; list-style: none }
  .small-block-grid-12 > li:nth-of-type(1n) { clear: none }
  .small-block-grid-12 > li:nth-of-type(12n+1) { clear: both }
}
/* Fore screen width more than 640px*/
@media only screen and (min-width: 40em) {
  .medium-block-grid-1 > li { width: 100%; list-style: none }
  .medium-block-grid-1 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-1 > li:nth-of-type(1n+1) { clear: both }

  .medium-block-grid-2 > li { width: 50%; list-style: none }
  .medium-block-grid-2 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-2 > li:nth-of-type(2n+1) { clear: both }

  .medium-block-grid-3 > li { width: 33.33333%; list-style: none }
  .medium-block-grid-3 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-3 > li:nth-of-type(3n+1) { clear: both }

  .medium-block-grid-4 > li { width: 25%; list-style: none }
  .medium-block-grid-4 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-4 > li:nth-of-type(4n+1) { clear: both }

  .medium-block-grid-5 > li { width: 20%; list-style: none }
  .medium-block-grid-5 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-5 > li:nth-of-type(5n+1) { clear: both }

  .medium-block-grid-6 > li { width: 16.66667%; list-style: none }
  .medium-block-grid-6 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-6 > li:nth-of-type(6n+1) { clear: both }

  .medium-block-grid-7 > li { width: 14.28571%; list-style: none }
  .medium-block-grid-7 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-7 > li:nth-of-type(7n+1) { clear: both }

  .medium-block-grid-8 > li { width: 12.5%; list-style: none }
  .medium-block-grid-8 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-8 > li:nth-of-type(8n+1) { clear: both }

  .medium-block-grid-9 > li { width: 11.11111%; list-style: none }
  .medium-block-grid-9 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-9 > li:nth-of-type(9n+1) { clear: both }

  .medium-block-grid-10 > li { width: 10%; list-style: none }
  .medium-block-grid-10 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-10 > li:nth-of-type(10n+1) { clear: both }

  .medium-block-grid-11 > li { width: 9.09091%; list-style: none }
  .medium-block-grid-11 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-11 > li:nth-of-type(11n+1) { clear: both }

  .medium-block-grid-12 > li { width: 8.33333%; list-style: none }
  .medium-block-grid-12 > li:nth-of-type(1n) { clear: none }
  .medium-block-grid-12 > li:nth-of-type(12n+1) { clear: both }
}
/* Fore screen width more than 900px*/
@media only screen and (min-width: 56.250em) {
  .large-block-grid-1 > li { width: 100%; list-style: none }
  .large-block-grid-1 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-1 > li:nth-of-type(1n+1) { clear: both }

  .large-block-grid-2 > li { width: 50%; list-style: none }
  .large-block-grid-2 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-2 > li:nth-of-type(2n+1) { clear: both }

  .large-block-grid-3 > li { width: 33.33333%; list-style: none }
  .large-block-grid-3 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-3 > li:nth-of-type(3n+1) { clear: both }

  .large-block-grid-4 > li { width: 25%; list-style: none }
  .large-block-grid-4 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-4 > li:nth-of-type(4n+1) { clear: both }

  .large-block-grid-5 > li { width: 20%; list-style: none }
  .large-block-grid-5 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-5 > li:nth-of-type(5n+1) { clear: both }

  .large-block-grid-6 > li { width: 16.66667%; list-style: none }
  .large-block-grid-6 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-6 > li:nth-of-type(6n+1) { clear: both }

  .large-block-grid-7 > li { width: 14.28571%; list-style: none }
  .large-block-grid-7 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-7 > li:nth-of-type(7n+1) { clear: both }

  .large-block-grid-8 > li { width: 12.5%; list-style: none }
  .large-block-grid-8 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-8 > li:nth-of-type(8n+1) { clear: both }

  .large-block-grid-9 > li { width: 11.11111%; list-style: none }
  .large-block-grid-9 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-9 > li:nth-of-type(9n+1) { clear: both }

  .large-block-grid-10 > li { width: 10%; list-style: none }
  .large-block-grid-10 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-10 > li:nth-of-type(10n+1) { clear: both }

  .large-block-grid-11 > li { width: 9.09091%; list-style: none }
  .large-block-grid-11 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-11 > li:nth-of-type(11n+1) { clear: both }

  .large-block-grid-12 > li { width: 8.33333%; list-style: none }
  .large-block-grid-12 > li:nth-of-type(1n) { clear: none }
  .large-block-grid-12 > li:nth-of-type(12n+1) { clear: both }
}

/* ------------------------------------------------------------------------------ */
/* 7. UI */
/* ------------------------------------------------------------------------------ */
/* Fontawesome 4.6.3
-------------------------------------------------------- */
/* Default Style
---------------------------- */
@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fontawesome-webfont.eot?v=4.4.0');
    src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
.fa-2x {
  font-size: 2.25em
}
.fa-3x {
  font-size: 3em
}
/* List Icons Style
---------------------------- */
.fa-ul {
  padding-left: 0;
  margin-left: 0px;
  list-style-type: none
}
.fa-ul > li {
  position: relative;
  margin-bottom: 12px;
  margin-left: 8px
}
.fa-li {
  position: absolute;
  left: -38px;
  width: 40px;
  top: -1px;
  text-align: center;
  font-size: 23px
}
/* Icon Value
---------------------------- */
.fa-desktop:before {
  content: "\f108"
}
.fa-laptop:before {
  content: "\f109"
}
.fa-tablet:before {
  content: "\f10a"
}
.fa-mobile:before {
  content: "\f10b"
}
.fa-phone:before {
  content: "\f095"
}
.fa-twitter:before {
  content: "\f099"
}
.fa-linkedin:before {
  content: "\f0e1"
}
.fa-facebook:before {
  content: "\f09a"
}
.fa-wordpress:before {
  content: "\f19a"
}
.fa-drupal:before {
  content: "\f1a9"
}
.fa-code:before {
  content: "\f121"
}
.fa-cog:before {
  content: "\f013"
}
.fa-angle-double-right:before {
  content: "\f101"
}
.fa-bookmark-o:before {
  content: "\f097"
}
.fa-pencil:before {
  content: "\f040"
}
.fa-shopping-cart:before {
  content: "\f07a"
}
.fa-user:before {
  content: "\f007"
}
.fa-clock-o:before {
  content: "\f017"
}
.fa-folder-open-o:before {
  content: "\f07c"
}
.fa-check:before {
  content: "\f00c"
}
.fa-chevron-down:before {
  content: "\f078"
}
.fa-chevron-up:before {
  content: "\f077"
}
.fa-database:before {
  content: "\f1c0"
}
.fa-envelope-o:before {
  content: "\f003"
}
.fa-linkedin-square:before {
  content: "\f08c"
}

/* Navigation
-------------------------------------------------------- */
/* Page content transtion effect when click on hamburger menu
---------------------------- */
@media screen and (max-width: 1024px) {
  /* smaller screen: page content transition effect */
  .page-container {
    transition: transform 0.3s cubic-bezier(0.35, -0.25, 0.35, 0)
  }
  .nav-shelf-expanded .page-container {
    -webkit-transform: translateX(-270px);
    -moz-transform: translateX(-270px);
    -ms-transform: translateX(-270px);
    -o-transform: translateX(-270px);
    transform: translateX(-270px)
  }
}
.page-container {
  transition: transform 0.3s cubic-bezier(0.35, -0.25, 0.35, 0)
}
.nav-shelf-expanded .page-container {
  -webkit-transform: translateX(-270px);
  -moz-transform: translateX(-270px);
  -ms-transform: translateX(-270px);
  -o-transform: translateX(-270px);
  transform: translateX(-270px)
}

/* Nav Style
---------------------------- */
nav {
  z-index: 99;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px; /* larger screen: nav height */
  background-color: #fff; /* nav background color */
  transition: border-color 200ms ease-in-out, transform 0.3s cubic-bezier(0.35, -0.25, 0.35, 0)
}
@media screen and (max-width: 1024px) {
  nav {
    height: 55px /* smaller screen: nav height */
  }
  /* Right Off Canvas Nav Transtion Effect
  ---------------------------- */
  .nav-shelf-expanded nav {
    -webkit-transform: translateX(-270px);
    -moz-transform: translateX(-270px);
    -ms-transform: translateX(-270px);
    -o-transform: translateX(-270px);
    transform: translateX(-270px)
  }
}
nav>section {
  height: 100%;
  width: 100%;
  margin: 0px auto;
  padding: 0px 25px
}
@media screen and (max-width: 1024px) {
  nav>section {
    padding: 0px 15px /* smaller screen: nav padding */
  }
}
nav.nav-scrolled {
  padding-top: 0;
  background-color: #fff; /* all screen: nav background color when scrolled*/
  transition: background-color 300ms ease-in-out;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1)
}

/* Logo Style
---------------------------- */
.brand {
  display: inline-block;
  float: left;
  position: relative;
  top: 15px /* screen: smaller than 1024px*/
}
a.brand:hover, a.brand:focus {
  border-bottom-color: transparent
}
@media screen and (min-width: 1025px) {
  .brand {
    position: relative;
    top: 36px /* larger screen: logo position*/
  }
}
.brand .brand-logo {
  overflow: visible
}
@media screen and (min-width: 1025px) {
  .brand .brand-logo img.logo-main {
    width: 330px /* larger screen: logo-main width*/
  }
  .brand .brand-logo img.logo-scrolled {
    width: 330px /* larger screen: logo-scrolled width*/
  }
}
/* logo icon - for small screen */
.brand .brand-logo img.logo-main.logo-main--icon {
  width: 29px
}
.brand .brand-logo img.logo-scrolled.logo-scrolled--icon {
  width: 29px
}

/* Fixed Call Button Style
---------------------------- */
.fixed-call-button {
  float: left;
  color: #eee;
  font-size: 13px;
  line-height: 1;
  font-weight: 300;
  margin-top: 12px;
  padding: 8px 10px;
  border: solid 1px #ee6557;
  background-color: #ee6557;
  transition: all 200ms ease-in-out;
  border-radius: 4px
}
.fixed-call-button:hover,
.fixed-call-button:active,
.fixed-call-button:focus {
  color: #eee;
  border: solid 1px #d25133;
  background-color: #d25133
}
@media screen and (max-width: 1024px) {
  nav .fixed-call-button {
    display: none /* smaller screen: hide call button */
  }
  nav.nav-scrolled .fixed-call-button {
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -92px;
    opacity: 1 /* smaller screen: show call button when scalling */
  }
}
@media screen and (min-width: 1025px) {
  .fixed-call-button {
    display: none /* larger screen: hide call button  */
  }
}
@media screen and (max-width: 1024px) {
  .nav-shelf-expanded #fixed-call-button {
    display: none /* smaller screen: hide call button when scalling */
  }
}

/* Mobile Nav Toggle Style
---------------------------- */
button#showRightPush {
  padding: 3px 0px 3px 15px;
  height: 30px;
  margin-bottom: 0;
  background-color: transparent
}
#mobile-nav-toggle {
  float: right;
  margin-top: 12px
}
@media screen and (min-width: 1025px) {
  #mobile-nav-toggle {
    display: none /* larger screen: hide toggle menu */
  }
}
#mobile-nav-toggle .hamburger,
#mobile-nav-toggle .hamburger:before,
#mobile-nav-toggle .hamburger:after {
  background-color: #484848; /* hamburger color */
  width: 30px; /* hamburger width */
  height: 3px; /* hamburger each layer height*/
  display: block;
  border-radius: 6px;
  transition: top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, transform 0.3s ease
}
.nav-shelf-expanded #mobile-nav-toggle .hamburger,
.nav-shelf-expanded #mobile-nav-toggle .hamburger:before,
.nav-shelf-expanded #mobile-nav-toggle .hamburger:after {
  transition: top 0.3s ease, bottom 0.3s ease, background-color 0.3s ease, transform 0.3s 0.2s ease
}
#mobile-nav-toggle .hamburger:before,
#mobile-nav-toggle .hamburger:after {
  content: '';
  position: absolute;
  left: 0
}
#mobile-nav-toggle .hamburger {
  position: relative;
  top: 0px
}
#mobile-nav-toggle .hamburger:before {
  top: -8px
}
#mobile-nav-toggle .hamburger:after {
  bottom: -8px
}
.nav-shelf-expanded #mobile-nav-toggle .hamburger {
  background-color: transparent !important;
  box-shadow: none !important
}
.nav-shelf-expanded #mobile-nav-toggle .hamburger:before {
  top: 0;
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}
.nav-shelf-expanded #mobile-nav-toggle .hamburger:after {
  bottom: 0;
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.nav-shelf-expanded #mobile-nav-toggle .hamburger:hover {
  background-color: #edeff0 /* ??? */
}

/* nav-list Style
---------------------------- */
.nav-list {
  display: table;
  float: right;
  list-style: none;
  padding-left: 0;
  margin-top: 30px;
  margin-bottom: 0
}
@media screen and (max-width: 1024px) {
  .nav-list {
    z-index: 0;
    position: absolute;
    top: 0;
    right: -270px;
    width: 270px;
    height: 100vh;
    margin-top: 0px;
    padding-top: 55px;
    box-shadow: 50px 0 0 #0a1014;
    background-color: #161d23; /* smaller screen: off canvas nav background color*/
    border-left: solid 1px #0a1014
  }
  nav.nav-scrolled {
    opacity: 1 /* nav opacity when scrolled*/
  }
}
.nav-item {
  margin: 0
}
@media screen and (min-width: 1025px) {
  .nav-item {
    display: table-cell;
    font-size: 15px; /* big screen: font size */
    line-height: 1.7;
    vertical-align: middle;
    padding-left: 25px
  }
}
@media screen and (max-width: 1024px) {
  .nav-item:first-child {
    border-top: solid 1px #444
  }
  .nav-item:first-child a {
    margin-top: 8px
  }
}
.nav-anchor {
  display: inline-block;
  transition: all 200ms ease-in-out;
  color: #444;  /* larger screen: nav link color */
  font-weight: 300
}
.nav-anchor:hover,
.nav-anchor:active,
.nav-anchor:focus {
  color: #d25133 /* nav hover color */
}

@media screen and (max-width: 1024px) {
  .nav-anchor {
    transition: all 200ms ease-in-out;
    color: #eee; /* smaller screen: off canvas font color*/
    display: block;
    font-size: 15px;
    text-align: center;
    padding: 10px 0 10px; /* smaller screen: nav-anchor space*/
    margin-top: 0;
    margin-left: 0px
  }
  .nav-anchor:hover,
  .nav-anchor:active,
  .nav-anchor:focus,
  nav.nav-scrolled .nav-anchor:hover,
  nav.nav-scrolled .nav-anchor:active,
  nav.nav-scrolled .nav-anchor:focus {
    color: #f67264; /* smaller screen: off canvas font hover color*/
    border-bottom-color: transparent
  }
}
.scrolled-past-hero .nav-anchor {
    opacity: 0
}
.scrolled-past-hero.scrolling-up .nav-anchor,
.logged-in .nav-anchor {
    opacity: 1
}
@media screen and (min-width: 1025px) {
  .nav-item-home {
    display: none /* larger screen: hide home link*/
  }
}
.nav-item-call {
  transition: margin-left 200ms ease-in-out
}
.scrolled-past-hero .nav-item-call {
    margin-left: 37px
}
@media screen and (max-width: 1024px) {
  .nav-item-call {
    position: absolute;
    top: 6px;
    left: 22px;
    border-left: 0px /* smaller screen: border for phone icon */
  }
}

/* nav-list - current page link
---------------------------- */
.nav-item.current a {
  border-bottom: 1px solid #444
}
.nav-shelf-expanded .nav-item.current a {
  color: #f67264;
  border-bottom: 0px
}

/* Fontawesome - nav-list Style
---------------------------- */
a.fa-wrap {
  display: inline-block;
  color: #ee6557 /* larger screen: phone icon color */
}
a.fa-wrap:hover,
a.fa-wrap:active,
a.fa-wrap:focus {
  color: #d25133; /* larger screen: phone icon hover color */
  border-bottom-color: transparent
}
a.fa-wrap span {
  display: inline-block;
  width: 80px;
  font-size: 12px;
  line-height: 1.2;
  margin-left: 6px
}
@media screen and (max-width: 1024px) {
  a.fa-wrap {
    display: block;
    width: 227px; /* button width */
    color: #eee;
    font-size: 14px; /* phone icon size */
    font-weight: 300;
    text-align: center;
    padding: 0px;
    background-color: #ee6557; /* smaller screen: phone icon button color */
    transition: background-color 200ms ease-in-out;
    border-radius: 4px
  }
  a.fa-wrap:hover,
  a.fa-wrap:active,
  a.fa-wrap:focus,
  nav.nav-scrolled a.fa-wrap:hover,
  nav.nav-scrolled a.fa-wrap:active,
  nav.nav-scrolled a.fa-wrap:focus  {
    color: #fff;
    background-color: #d25133  /* smaller screen: phone icon button hover color */
  }
  a.fa-wrap span {
    font-size: 12px;
    line-height: 1;
    margin-left: 0
  }
}

/* hero content
-------------------------------------------------------- */
.hero {
  color: #eee;
  font-size: 18px;
  font-weight: 200;
  line-height: 1.5;
  margin-top: 100px /* reduce extra space from the navigation*/
}
.hero .hero-content {
  padding-top: 90px;
  padding-bottom: 90px
}
.hero h1 {
  color: #eee;
  margin-bottom: 0
}
.hero h5 {
  color: #eee;
  margin-bottom: 20px
}
.hero a.button {
  margin-top: 20px;
  margin-bottom: 30px
}
@media all and (max-width: 1024px) {
  .hero {
    margin-top: 55px /* screen: smaller than 1000 - reduce extra space from the navigation*/
  }
}
@media all and (max-width: 1024px) /*ipad-horizontal*/{
  .hero {
    font-size: 16px
  }
  .hero .hero-content {
    padding-top: 20px;
    padding-bottom: 20px
  }
  .hero h3{
    font-size: 20px;
    margin-bottom: 15px
  }
  .hero a.button {
    margin-bottom: 0px
  }
}

/* Hero - home
---------------------------- */
.hero-home {
  background: url("/images/bg_home.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}
.hero-home h1 span {
  display: block;
  color: #ee6557
}
.hero-home a.button {
  margin-bottom: 0px
}
@media all and (max-width: 640px) {
  .hero-home h1 span {
    margin-bottom: 0px
  }
  .hero-home a.button {
    margin-bottom: 0px
  }
}

/* Hero - services
---------------------------- */
.hero-services {
  background: url("/images/bg_services.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}
.hero-services h1 {
  color: #79d4d3
}

/* Hero - services | twilio
---------------------------- */
.hero-services-twilio {
  background: url("/images/bg_services_twilio.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}
.hero.hero-services-twilio .hero-content {
  padding-top: 70px;
  padding-bottom: 30px
}
.hero.hero-services-twilio .hero-icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  color: #fff;
  font-size: 50px;
  text-align: center;
  margin-top: 75px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #d51010
}
@media screen and (max-width: 1024px) {
  .hero.hero-services-twilio .hero-icon {
    margin: 30px auto 10px auto
  }
}
.hero.hero-services-twilio .fa {
  display: block;
  width: 44px;
  height: 44px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -27px;
  margin-top: -25px
}

/* Hero - works
---------------------------- */
.hero-works {
  background: url("/images/bg_works.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}
.hero-works h1 {
  color: #ee6557
}

/* Hero - works | ema
---------------------------- */
.hero-works-alvordtaylor {
  background: url("/images/bg_works_alvordtaylor.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

/* Hero - works | ema
---------------------------- */
.hero-works-ema {
  background: url("/images/bg_works_ema.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

/* Hero - works | call center
---------------------------- */
.hero-works-callcenter {
  background: url("/images/bg_works_callcenter.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}
.hero-text-wrap {
  width: 90%;
  margin: 0 auto
}
.hero-works-callcenter .fa-ul{
  margin-top: 25px;
  margin-left: 25px
}
.hero-works-callcenter .fa-li{
  color: #55bd27;
  margin-top: 5px
}
.hero.hero-works-callcenter .hero-content {
  padding-top: 30px;
  padding-bottom: 30px
}
.hero a.button.demo {
  margin-left: 10px
}
@media all and (max-width: 1024px) /*ipad-horizontal*/{
  .hero.hero-works-callcenter .hero-button {
    text-align: center
  }
  .hero-text-wrap {
    width: 100%
  }
}

/* Icon-block */
.icon-block {
  margin-top: 15px
}
.icon-block span {
  display: block;
  font-size: 13px;
  font-weight: 300;
  margin-top: 20px;
  margin-bottom: 20px
}
a.icon-block-link {
  display: block;
  color: #555;
  transition: all 200ms ease-in-out;
  text-decoration: none;
  border-bottom: 0
}
a.icon-block-link:hover {
  color: #111
}
a.icon-block-link img:hover {
  -webkit-filter: brightness(.90);
  filter: brightness(.90)
}

/* Hero - works | unitedway
---------------------------- */
.hero-works-unitedway {
  background: url("/images/bg_works_unitedWayOfGreaterAtlanta.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

/* Hero - works | asne
---------------------------- */
.hero-works-asne {
  background: url("/images/bg_works_asne.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

/* Hero - works | sunshineweek
---------------------------- */
.hero-works-sunshineweek {
  background: url("/images/bg_works_sunshineWeek.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

/* Hero - works | entityspaces
---------------------------- */
.hero-works-entityspaces {
  background: url("/images/bg_works_entityspaces.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

/* Hero - works | dnn
---------------------------- */
.hero-works-dnn {
  background: url("/images/bg_works_dnn.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

/* Hero - works | engle martin
---------------------------- */
.hero-works-englemartin {
  background: url("/images/bg_works_englemartin.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

/* Hero - works | deposco
---------------------------- */
.hero-works-deposco {
  background: url("/images/bg_works_deposco.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

/* Hero - customers
---------------------------- */
.hero-customers {
  background: url("/images/bg_customers.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

.hero-customers h1 {
  color: #5bc7b4
}

/* Hero - about
---------------------------- */
.hero.hero-about {
  background: url("/images/bg_aboutus.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}
.hero-about h1 {
  color: #eaa440
}

/* Hero - contact
---------------------------- */
.hero.hero-contact {
  background: url("/images/bg_contact.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}
.hero-contact h1 {
  color: #ee6557
}
.hero .block-grid img {
  margin-top: 15px;
  background-color: #111518;
  opacity: 0.8
}
.hero .block-grid li {
  padding-bottom: 0;
  margin-bottom: 0
}

/* hero footer
-------------------------------------------------------- */
.hero-footer {
  color: #eee;
  padding-top: 100px;
  padding-bottom: 100px;
  background: url("/images/bg_footer.jpg") no-repeat center center fixed;
  border-bottom: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}
.hero-footer h3 {
  margin-bottom: 15px
}
.hero-footer a.button {
  margin-top: 30px
}
@media all and (max-width: 768px) {
  .hero-footer {
    padding-top: 50px;
    padding-bottom: 30px
  }
}



/* Homepage - testimonial
-------------------------------------------------------- */
.services-intro h5{
  margin-bottom: 15px
}
.testimonial-featured {
  font-size: 13px;
  line-height: 1.5
}

.testimonial-title h6{
  margin-bottom: 0px
}
.testimonial-title small {
  display: block;
  height: 45px;
  font-size: 12px;
  line-height: 1.2;
  font-style: italic
}
.testimonial-title img {
  width: 80px;
  margin-bottom: 8px;
  border-radius: 50%
}
.testimonial-detail p {
  text-align: left;
  margin-bottom: 20px
}
.testimonial-detail p.testimonial-m-block {
  margin-top: 20px
}
.testimonial-detail p.testimonial-l-block {
  margin-top: 20px;
  margin-bottom: 0
}
.testimonial-detail .button {
  min-width: 80px;
  margin-top: 20px;
  margin-bottom: 10px
}

/* Service Page
-------------------------------------------------------- */
.services img {
  margin-bottom: 15px
}
@media all and (max-width: 768px) {
  .services h2 {
    margin-bottom: 25px
  }
}
@media all and (max-width: 480px) {
  .services h2 {
    margin-bottom: 15px
  }
}
/* Responsive Section Icon
---------------------------- */
.icon-responsive {
  margin-bottom: 30px
}
.icon-responsive .fa {
  color: #002838;
  font-size: 70px;
  margin: 0 10px
}
@media screen and (max-width: 768px) {
  .icon-responsive .fa {
    margin: 0 8px
  }
}
@media screen and (max-width: 480px) {
  .icon-responsive {
    margin-top: 30px;
    margin-bottom: 10px
  }
  .icon-responsive .fa {
    font-size: 60px;
    margin: 0 4px
  }
}

/* Works Page
-------------------------------------------------------- */
/* works - list page
---------------------------- */
.works-example  {
  margin-bottom: 20px
}
.works-example a {
  color: #555
}
.works-example a:hover img,
.works-example a:active img {
  -webkit-filter: brightness(.9);
   filter: brightness(.9)
}
.works-example a:hover .caption,
.works-example a:active .caption {
  background-color: #f4f4f4
}

.works-example img {
  display: block;
  width: 100%
}
.works-example .caption {
  padding: 10px
}
.works-example h6 {
  color: #ee6557;
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 10px
}
.works-example h4 {
  font-weight: 300;
  margin-bottom: 15px
}
.works-example p {
  margin-bottom: 10px
}

/* works - detail page - services & technologies list
---------------------------- */
.works-list h5 {
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc
}
.works-list .fa-ul {
  margin-left: 20px;
  margin-bottom: 0
}
.works-list .fa-ul > li {
  font-size: 14px;
  margin-bottom: 5px
}
.works-list .fa-li {
  font-size: 18px;
  margin-top: 3px
}

@media screen and (max-width: 768px) {
  .works-list img {
    display: block;
    margin-bottom: 30px
  }
  .works-list .fa-ul {
    margin-bottom: 30px
  }
}
/* About Page
-------------------------------------------------------- */
.colleague h2 {
  margin-bottom: 10px
}
.colleague h5 {
  margin-bottom: 20px
}
.colleague img {
  margin-bottom: 20px
}
.colleague .medium-3 {
  padding-right: 20px
}

@media all and (max-width: 640px) {
  .colleague .medium-3 {
    text-align: center;
    padding-right: 0
  }
}

/* Icon
---------------------------- */
.icon-fa a {
  display: inline-block;
  color: #222;
  font-size: 22px;
  margin: 0 5px;
  border-bottom: 0;
  text-decoration: none
}
.icon-fa a:hover,
.icon-fa a:active,
.icon-fa a:focus {
  color: #d25133;
  border-bottom: 0;
  text-decoration: none
}

/* About Icon
---------------------------- */
.side-list {
  list-style: none;
  padding-left: 30px;
  margin-left: 0px;
  margin-bottom: 0;
  border-left: 1px solid #ccc
}
.side-list li {
  margin-bottom: 12px
}
  .contact-info li {
    display: inline-block;
    margin-bottom: 0
  }
  .contact-info img {
    margin-right: 10px;
    margin-bottom: 0px
  }
  .contact-info li a:hover, .contact-info li a:focus {
    color: transparent;
    border-bottom: 0
  }

  @media all and (max-width: 768px) {
    .side-list {
      padding-left: 0;
      border-left: 0
    }
    .side-list li {
      display: inline-block;
      padding: 10px;
      margin-bottom: 5px;
      background-color: #eee
    }
    .side-list li p {
      margin-bottom: 0px
    }
    .contact-info li.side-content {
      padding: 0;
      background-color: transparent
    }
    .contact-info li.side-content p {
      margin-bottom: 25px
    }
    .contact-info img {
      margin-right: 0px
    }
  }

/* Footer
-------------------------------------------------------- */
footer {
  color: #eee;
  padding: 90px 15px;
  border-top: 1px solid #001d29;
  background-color: #00202c
}
footer h2, footer h4 {
  color: #eee;
  font-weight: 200;
  margin-bottom: 40px
}
footer h2 {
  font-weight: 500;
  margin-bottom: 15px
}
@media screen and (max-width: 1024px) {
  footer h3 {
    font-size: 22px
  }
  footer h4 {
    font-size: 20px
  }
}
@media screen and (max-width: 640px) {
  footer h2 {
    font-size: 28px
  }
  footer h3 {
    font-size: 20px
  }
  footer h4 {
    font-size: 18px;
    line-height: 1.4
  }
}
footer hr {
  width: 150px;
  margin: 50px auto;
  border-color: #d25133;
  border-width: 2px 0 0
}
@media screen and (max-width: 640px) {
  footer hr {
    width: 80px;
    margin: 30px auto
  }
}
footer a.button, footer a.button:hover, footer a.button:focus {
  color: #002b3c
}
a.footer-logo:hover, a.footer-logo:visited, a.footer-logo:focus {
  border-bottom-color: transparent
}
a.footer-logo img {
  width: 330px
}
@media screen and (max-width: 640px) {
  a.footer-logo img {
    width: 250px
  }
}
footer .social-links a {
  display: inline-block;
  width: 55px;
  height: 55px;
  margin: 0 6px;
  border: 2px solid #ee6557;
  border-radius: 100%;
  line-height: 2.4;
  text-align: center;
  font-size: 22px
}
@media screen and (min-width: 960px) {
  footer .social-links a {
    width: 65px;
    height: 65px;
    font-size: 27px
  }
}
footer .social-links a:hover {
  border: 2px solid #d25133;
  background: #d25133;
  color: #fff
}