/**
 * MAGDESIGN
 * 
 * Roger Glenn
 * roger@mach1media.com
 * June 2015
 *
 * Compiled using CodeKit 2
 * http://incident57.com/codekit
 */
@import url(../bower_components/normalize-css/normalize.css);
@import url(../bower_components/fontawesome/css/font-awesome.min.css);
@import url(pure-min.css);
html {
  box-sizing: border-box; }

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

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
*,
*:after,
*::before {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*:focus {
  outline: 0; }

body {
  font-family: "proxima-nova", 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #6d6d6d;
  background-color: #f2f2f2; }

h1, h2, h3, h4 {
  font-family: "proxima-nova", 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #333;
  margin-top: 0;
  line-height: 1.5em; }

h1 {
  font-size: 64px;
  line-height: 1.2em; }
  @media all and (max-width: 960px) {
    h1 {
      font-size: 41px; } }
  @media all and (max-width: 570px) {
    h1 {
      font-size: 36px; } }

h2 {
  font-size: 48px;
  line-height: 1.2em; }
  @media all and (max-width: 960px) {
    h2 {
      font-size: 36px; } }
  @media all and (max-width: 570px) {
    h2 {
      font-size: 28px; } }

h3 {
  font-size: 1em;
  line-height: 1.2em;
  text-transform: uppercase;
  margin-bottom: 0; }

p, ol, ul {
  margin-top: 0; }

.subheading {
  font-size: 32px;
  line-height: 1.2em;
  color: #6d6d6d;
  padding: 0 60px;
  margin: 0; }
  @media all and (max-width: 570px) {
    .subheading {
      font-size: 24px;
      padding: 0; } }

.lead {
  font-size: 1.5em; }

.clearfix:before,
.clearfix:after {
  display: table;
  content: " "; }

.clearfix:after {
  clear: both; }

.flexbox-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center; }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.red {
  color: #d32a1d; }

.green {
  color: #97C427; }

.orange {
  color: #FC9E29; }

.alert {
  padding: 20px;
  margin-bottom: 20px; }
  .alert.success {
    background: #d1f8cb;
    color: green;
    border: 1px solid green; }
    .alert.success h2, .alert.success h3, .alert.success h4, .alert.success p, .alert.success li {
      color: green !important; }
  .alert.error {
    background: #fdc3c3;
    color: red;
    border: 1px solid red; }
    .alert.error h2, .alert.error h3, .alert.error h4, .alert.error p, .alert.error li {
      color: red !important; }
  .alert.info {
    background: #d8eaf6;
    color: navy;
    border: 1px solid navy; }
    .alert.info h2, .alert.info h3, .alert.info h4, .alert.info p, .alert.info li {
      color: red !important; }
  .alert h2:first-of-type,
  .alert h3:first-of-type,
  .alert p:first-of-type,
  .alert ol:first-of-type,
  .alert ul:first-of-type {
    margin-top: 0; }
  .alert p:last-of-type,
  .alert ol:last-of-type,
  .alert ul:last-of-type {
    margin-bottom: 0; }

.linkedin .fa-circle {
  color: #007bb6; }

.twitter .fa-circle {
  color: #00aced; }

.facebook .fa-circle {
  color: #3b5998; }

.behance .fa-circle {
  color: #1769ff; }

.google-plus .fa-circle {
  color: #dd4b39; }

.blog .fa-circle {
  color: #00cc00; }

.bg-parallax {
  position: relative; }
  .bg-parallax.divider {
    clear: both;
    position: relative;
    display: block;
    width: 100%; }
  .bg-parallax .shadow {
    position: absolute;
    display: block;
    top: 0;
    height: 10px;
    width: 100%;
    background: url("/assets/img/shadow.png") center top repeat-x; }
  @media all and (min-width: 570px) {
    .bg-parallax {
      background: none;
      background-attachment: fixed;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover; } }
  @media all and (max-width: 570px) {
    .bg-parallax {
      background-position: 50% 50%;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover; } }

.wrap {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px; }

/**
 * 2 COLUMNS
 */
.cols-2 {
  display: block; }
  .cols-2::after {
    clear: both;
    content: "";
    display: table; }
  .cols-2 article {
    margin-bottom: 20px;
    float: left;
    display: block;
    margin-right: 2.3576515979%;
    width: 48.821174201%; }
    .cols-2 article:last-child {
      margin-right: 0; }
    .cols-2 article:nth-child(2n) {
      margin-right: 0; }
    .cols-2 article:nth-child(2n+1) {
      clear: left; }

/**
 * 3 COLUMNS
 */
.cols-3 {
  display: block; }
  .cols-3::after {
    clear: both;
    content: "";
    display: table; }
  .cols-3 article {
    margin-bottom: 20px; }
    @media all and (min-width: 570px) {
      .cols-3 article {
        float: left;
        display: block;
        margin-right: 2.3576515979%;
        width: 31.7615656014%; }
        .cols-3 article:last-child {
          margin-right: 0; }
        .cols-3 article:nth-child(3n) {
          margin-right: 0; }
        .cols-3 article:nth-child(3n+1) {
          clear: left; } }
    @media all and (max-width: 570px) {
      .cols-3 article {
        float: left;
        display: block;
        margin-right: 2.3576515979%;
        width: 100%;
        margin-right: 0; }
        .cols-3 article:last-child {
          margin-right: 0; } }

/**
 * 4 COLUMNS
 */
.cols-4 {
  display: block; }
  .cols-4::after {
    clear: both;
    content: "";
    display: table; }
  .cols-4 article {
    margin-bottom: 20px;
    /*
    @media all and (min-width:$bp_sm) and (max-width:$bp_md) {
    	@include span-columns(6);
    	@include omega(2n);
    }
    */ }
    @media all and (min-width: 570px) {
      .cols-4 article {
        float: left;
        display: block;
        margin-right: 2.3576515979%;
        width: 23.2317613015%; }
        .cols-4 article:last-child {
          margin-right: 0; }
        .cols-4 article:nth-child(4n) {
          margin-right: 0; }
        .cols-4 article:nth-child(4n+1) {
          clear: left; } }
    @media all and (max-width: 570px) {
      .cols-4 article {
        float: left;
        display: block;
        margin-right: 2.3576515979%;
        width: 48.821174201%; }
        .cols-4 article:last-child {
          margin-right: 0; }
        .cols-4 article:nth-child(2n) {
          margin-right: 0; }
        .cols-4 article:nth-child(2n+1) {
          clear: left; } }

/**
 * RESPONSIVE SQUARES
 */
.square {
  padding-bottom: 100%;
  position: relative;
  background-color: #efefef; }
  .square .inner {
    /* Flexbox wrapper styles */
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Vertical Centering */
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* Horizontal Centering */
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .square .inner .hidden {
      position: absolute;
      left: -9999em; }

/**
 * SLIDER CAROUSEL
 */
.slider {
  position: relative;
  display: block;
  text-align: center;
  height: 500px;
  margin: 40px auto; }
  .slider .prev,
  .slider .next {
    position: absolute;
    display: block;
    font-size: 100px;
    color: #d32a1d;
    top: 50%;
    margin-top: -50px;
    cursor: pointer;
    z-index: 999; }
    .slider .prev:hover,
    .slider .next:hover {
      color: #e54a3e; }
  .slider .prev {
    left: 0; }
  .slider .next {
    right: 0; }
  .slider .cycle-slideshow,
  .slider .carousel {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%; }
    .slider .cycle-slideshow .cycle-slide,
    .slider .carousel .cycle-slide {
      overflow: hidden; }
    .slider .cycle-slideshow .slide,
    .slider .carousel .slide {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center; }
      .slider .cycle-slideshow .slide .flexbox-container,
      .slider .carousel .slide .flexbox-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%; }
    .slider .cycle-slideshow img,
    .slider .carousel img {
      max-width: 100%;
      height: auto;
      margin: 0 auto; }
  .slider .carousel-pager {
    position: absolute;
    display: block;
    width: 100%;
    height: 30px;
    bottom: -40px;
    text-align: center;
    font-size: 24px; }
    .slider .carousel-pager span {
      position: relative;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin: 0 5px;
      border-radius: 50%;
      background: transparent;
      border: 3px solid #d32a1d; }
      .slider .carousel-pager span:hover {
        cursor: pointer; }
      .slider .carousel-pager span.cycle-pager-active {
        background: #d32a1d; }
  @media all and (max-width: 570px) {
    .slider {
      height: 300px; }
      .slider .prev,
      .slider .next {
        font-size: 50px;
        margin-top: -25px; }
      .slider .carousel-pager {
        bottom: -60px; } }

/**
 * OFFCANVAS STUFF
 */
[role="navigation"],
[role="main"] {
  transition: .3s all ease;
  width: 100%; }

.js [role="main"] {
  margin-left: 0;
  float: left; }

.js [role="navigation"] {
  margin-right: -200%;
  float: left;
  width: 80%; }

.active-sidebar [role="navigation"] {
  margin-right: -100%; }

.active-sidebar [role="main"] {
  margin-left: -80%; }

body > .container {
  width: 100%;
  overflow: hidden; }

.offcanvas {
  background: #333;
  min-height: 100vh; }
  .offcanvas ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .offcanvas ul li {
      position: relative;
      display: block;
      margin: 0;
      padding: 0; }
      .offcanvas ul li a {
        position: relative;
        display: block;
        width: 100%;
        padding: 15px;
        font-size: 18px;
        text-decoration: none;
        text-transform: uppercase;
        color: #fff;
        text-align: right;
        border-bottom: 1px solid #404040; }
        .offcanvas ul li a:hover, .offcanvas ul li a:active {
          color: #d32a1d;
          background: #404040; }
        .offcanvas ul li a .fa {
          font-size: 1.2em;
          float: left; }

/**
 * MASTHEAD
 */
body {
  padding-top: 91px; }
  @media all and (max-width: 960px) {
    body {
      padding-top: 50px; } }

.masthead {
  position: fixed;
  top: 0;
  z-index: 1000;
  display: block;
  width: 100%;
  background: #fff;
  height: 91px;
  line-height: 91px;
  -webkit-box-shadow: 0px 0px 17px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 17px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 17px 3px rgba(0, 0, 0, 0.25); }
  .masthead .logo {
    position: relative;
    display: block;
    float: left;
    margin: 25px 0 0 0;
    padding: 0;
    float: left;
    font-size: 1em;
    line-height: 1em; }
    .masthead .logo img {
      height: 40px;
      width: auto; }
  .masthead nav {
    position: relative;
    display: block;
    float: right; }
    .masthead nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0; }
      .masthead nav ul li {
        position: relative;
        display: block;
        float: left;
        margin: 0 0 0 60px;
        padding: 0; }
        .masthead nav ul li a {
          position: relative;
          display: block;
          line-height: 91px;
          color: #6d6d6d;
          text-decoration: none;
          text-transform: uppercase;
          font-size: 18px;
          color: #333; }
          .masthead nav ul li a:hover, .masthead nav ul li a:active, .masthead nav ul li a.current {
            color: #d32a1d; }
  .masthead .nav-mobile-trigger {
    display: none; }
  @media all and (max-width: 960px) {
    .masthead {
      height: 50px;
      line-height: 50px; }
      .masthead .logo {
        margin-top: 13px;
        margin-left: 5px; }
        .masthead .logo img {
          height: 24px;
          width: auto; }
      .masthead nav {
        margin-right: 10px; }
        .masthead nav ul li {
          margin-left: 30px; }
          .masthead nav ul li a {
            font-size: 14px;
            line-height: 50px; } }
  @media all and (max-width: 570px) {
    .masthead {
      background: #d32a1d; }
      .masthead .wrap {
        padding-left: 10px; }
      .masthead .logo {
        width: 100%;
        height: 50px;
        margin-top: 0;
        margin-left: 0;
        text-align: center; }
        .masthead .logo img {
          display: none;
          height: 20px;
          width: auto; }
        .masthead .logo a {
          position: relative;
          display: block;
          width: 120px;
          height: 100%;
          margin: 0 auto;
          background: url("/assets/img/logo-magdesign-white.svg") center center no-repeat; }
      .masthead nav {
        display: none; }
      .masthead .nav-mobile-trigger {
        display: block;
        position: absolute;
        top: 0;
        right: 5px;
        color: #fff;
        line-height: 50px;
        font-size: 12px;
        text-decoration: none;
        text-transform: uppercase; }
        .masthead .nav-mobile-trigger .fa {
          position: absolute;
          display: block;
          font-size: 18px;
          top: 15px;
          right: 10px; }
        .masthead .nav-mobile-trigger .fa-close {
          font-size: 22px;
          top: 14px;
          right: 8px; } }

/**
 * MOBILE NAV
 */
nav.mobile {
  clear: both;
  display: none;
  width: 100%;
  float: left;
  background: #999;
  border-top: 1px solid #888;
  border-left: 1px solid #888; }
  nav.mobile > ul {
    position: relative;
    display: block;
    width: 100%;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0; }
  nav.mobile > ul > li {
    display: block;
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
    /*
    &:last-of-type {
    	width: 100%;
    }
    */ }
    nav.mobile > ul > li a {
      position: relative;
      display: block;
      width: 100%;
      padding: 15px;
      font-size: 18px;
      line-height: 1em;
      text-decoration: none;
      text-transform: uppercase;
      color: #fff;
      background: #333;
      text-align: center;
      text-decoration: none;
      border-bottom: 1px solid #404040; }
      nav.mobile > ul > li a:nth-of-type(odd) {
        border-right: 1px solid #404040; }
      nav.mobile > ul > li a:hover, nav.mobile > ul > li a:active {
        color: #d32a1d;
        background: #404040; }

/**
 * MAIN CONTENT
 */
.featured {
  padding-top: 60px !important; }
  .featured .wrap {
    padding-left: 0;
    padding-right: 0; }
  .featured h2 {
    margin-top: 0;
    margin-bottom: 30px !important; }

/**
 * DIVIDER
 */
section.divider {
  height: 248px; }

/**
 * MAIN CONTENT
 */
main.content {
  padding-top: 60px;
  padding-bottom: 60px; }
  @media all and (max-width: 570px) {
    main.content {
      padding-top: 30px;
      padding-bottom: 30px; } }

body > section.content {
  padding-top: 60px;
  padding-bottom: 60px; }
  @media all and (max-width: 570px) {
    body > section.content {
      padding-top: 30px;
      padding-bottom: 30px; } }
  body > section.content.bio .fa-stack-1x {
    font-size: .9em;
    line-height: 2.25em; }
  @media all and (min-width: 570px) {
    body > section.content.bio article {
      float: left;
      display: block;
      margin-right: 2.3576515979%;
      width: 65.8807828007%; }
      body > section.content.bio article:last-child {
        margin-right: 0; }
    body > section.content.bio aside {
      float: left;
      display: block;
      margin-right: 2.3576515979%;
      width: 31.7615656014%;
      margin-right: 0; }
      body > section.content.bio aside:last-child {
        margin-right: 0; }
      body > section.content.bio aside .square {
        margin-top: 5px; } }

/**
 * CONTACT
 */
body.contact form {
  display: block; }
  body.contact form::after {
    clear: both;
    content: "";
    display: table; }
  body.contact form select {
    height: 2.25em; }
  body.contact form button {
    background: #97C427;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    padding-top: .75em;
    padding-bottom: .75em;
    font-size: 1.2em; }
  body.contact form .form-group {
    padding: 10px 0; }
    @media all and (min-width: 570px) {
      body.contact form .form-group {
        float: left;
        display: block;
        margin-right: 2.3576515979%;
        width: 48.821174201%; }
        body.contact form .form-group:last-child {
          margin-right: 0; }
        body.contact form .form-group:nth-child(2n) {
          margin-right: 0; }
        body.contact form .form-group:nth-child(2n+1) {
          clear: left; } }

/**
 * FOOTER
 */
footer {
  position: relative;
  display: block;
  background: #333;
  color: #fff; }
  footer section {
    position: relative;
    display: block;
    float: left;
    background: url("/assets/img/footer-triptych.svg") -30px 0 no-repeat;
    background-size: 260px;
    padding-bottom: 50px; }
    footer section a {
      color: #6d6d6d; }
    footer section .logo {
      margin: 0;
      padding-top: 50px;
      padding-bottom: 30px; }
      footer section .logo img {
        width: 200px;
        height: auto; }
    footer section .address {
      font-size: 18px;
      color: #6d6d6d;
      text-transform: uppercase;
      line-height: 1.2em;
      margin: 0; }
      footer section .address .tel {
        position: relative;
        display: block;
        margin: 5px 0 0 0;
        padding: 10px 0 0 0;
        border-top: 1px solid #6d6d6d;
        text-decoration: none;
        font-size: 33px;
        font-weight: 600; }
        footer section .address .tel:hover, footer section .address .tel:active {
          color: #878787; }
  footer nav {
    position: relative;
    display: block;
    float: right;
    padding-top: 50px; }
    footer nav > ul {
      list-style-type: none;
      margin: 0;
      padding: 0; }
      footer nav > ul > li {
        position: relative;
        display: table-cell;
        vertical-align: top;
        margin: 0;
        padding: 0 0 0 40px;
        text-align: right; }
        footer nav > ul > li > a {
          position: relative;
          display: block;
          width: 100%;
          font-size: 18px;
          line-height: 1.5em;
          color: #fff;
          text-decoration: none;
          text-transform: uppercase; }
          footer nav > ul > li > a:hover, footer nav > ul > li > a:active {
            text-decoration: underline; }
        footer nav > ul > li > ul {
          display: block;
          position: relative;
          text-align: right;
          width: 100%;
          margin: 0;
          padding: 0; }
          footer nav > ul > li > ul > li {
            position: relative;
            display: block;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: right; }
            footer nav > ul > li > ul > li > a {
              position: relative;
              display: block;
              font-size: 13px;
              color: #6d6d6d;
              text-decoration: none;
              line-height: 1em;
              padding: 5px 0; }
              footer nav > ul > li > ul > li > a:hover, footer nav > ul > li > ul > li > a:active {
                text-decoration: underline; }
    @media all and (max-width: 800px) {
      footer nav > ul > li {
        padding: 0 0 0 20px; } }
  @media all and (max-width: 680px) {
    footer .wrap {
      width: 100%;
      text-align: center; }
    footer section {
      width: 200px;
      margin: 0 auto !important;
      float: none; }
      footer section .address {
        text-align: left; }
    footer nav {
      display: none; } }

/**
 * SOCIAL
 */
.social {
  position: relative;
  display: block;
  width: 100%;
  background: #d32a1d;
  color: #fff; }
  .social ul {
    position: relative;
    display: block;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .social ul li {
      position: relative;
      display: inline-block;
      margin: 0;
      padding: 0; }
      .social ul li a {
        position: relative;
        display: block;
        float: left;
        height: 36px;
        width: 36px;
        font-size: 24px;
        line-height: 40px;
        margin-top: 10px;
        margin-right: 10px;
        background: #fff;
        opacity: 0.5;
        border-radius: 50%;
        text-align: center;
        color: #d32a1d;
        text-decoration: none;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out; }
        .social ul li a:hover {
          opacity: 1; }
  .social p {
    position: relative;
    display: block;
    float: right;
    opacity: 0.7;
    margin: 0;
    font-size: 12px;
    text-transform: uppercase; }
  @media all and (min-width: 570px) {
    .social {
      height: 57px;
      line-height: 57px; }
      .social ul {
        height: 57px; }
      .social p {
        line-height: 57px; } }
  @media all and (max-width: 570px) {
    .social {
      text-align: center;
      height: auto; }
      .social ul, .social p {
        width: 100%;
        float: none;
        float: left;
        text-align: center; }
      .social p {
        margin: 10px 0;
        font-size: 10px; } }

/**
 * WORK
 */
body.work .square {
  color: #fff;
  opacity: .5;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  body.work .square a {
    color: #fff;
    text-decoration: none; }
  body.work .square:hover {
    opacity: 1; }
    body.work .square:hover a {
      color: #fff;
      text-decoration: none; }

/**
 * INTRO SECTION
 */
.intro {
  position: relative;
  display: block;
  text-align: center;
  padding: 40px 0; }
  .intro h2 {
    font-size: 64px;
    line-height: .9em;
    margin-bottom: 40px; }
  .intro .cols-3 article {
    text-align: center;
    margin: 30px 0;
    padding: 0 20px; }
    .intro .cols-3 article h3 {
      font-size: 32px;
      color: #333 !important;
      line-height: 1.2em;
      font-weight: 600;
      margin-bottom: 0;
      text-transform: none; }
    .intro .cols-3 article p {
      font-size: 18px;
      line-height: 1.2em;
      margin-top: 1em;
      margin-bottom: 1em; }
      .intro .cols-3 article p:last-of-type {
        margin-bottom: 0; }
    .intro .cols-3 article img {
      max-width: 100%;
      height: auto; }
      .intro .cols-3 article img.icon {
        max-width: 100px;
        margin: 0 auto; }
    @media all and (max-width: 570px) {
      .intro .cols-3 article h3 {
        font-size: 28px;
        line-height: 1em; }
      .intro .cols-3 article p {
        font-size: 18px;
        line-height: 1.2em; } }
  @media all and (max-width: 570px) {
    .intro {
      padding: 20px 0; }
      .intro h2 {
        font-size: 36px;
        margin-bottom: 20px; } }

/**
 * HOME PAGE
 */
.home .hero {
  position: relative;
  display: block;
  /*
  background:url('/assets/img/shadow.png') center top repeat-x,
  	url('/assets/img/photo-wall-paint.jpg') center top no-repeat;
  background-size: 10px, cover;
  */
  background: url("/assets/img/photo-wall-paint.jpg") center top no-repeat;
  background-size: cover; }
  .home .hero h1 {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0 10px;
    width: 50%;
    top: 90px;
    right: 0;
    font-size: 41px; }
  @media all and (min-width: 960px) {
    .home .hero {
      height: 802px; } }
  @media all and (min-width: 570px) and (max-width: 960px) {
    .home .hero {
      height: 600px; }
      .home .hero h1 {
        font-size: 36px;
        line-height: 1.2em; } }
  @media all and (max-width: 570px) {
    .home .hero {
      height: 300px;
      width: 100%; }
      .home .hero .wrap {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        display: block; }
      .home .hero h1 {
        padding: 0;
        margin: 0;
        font-size: 36px;
        line-height: 1em;
        width: 100%;
        top: 20px;
        right: inherit;
        text-align: center; } }
.home .intro {
  background: #f2f2f2;
  padding: 40px 0; }
.home .slider {
  background: url("/assets/img/laptop2.svg") center top no-repeat;
  background-size: 100%;
  width: 960px;
  height: 586px;
  margin: 40px auto; }
  .home .slider .prev,
  .home .slider .next {
    top: 35%;
    margin-top: 0; }
  .home .slider .cycle-slideshow,
  .home .slider .carousel {
    width: 680px;
    height: 431px;
    top: 40px;
    left: 50%;
    margin-left: -348px;
    background: #fff; }
    .home .slider .cycle-slideshow div,
    .home .slider .carousel div {
      display: block;
      width: 680px;
      height: 431px; }
      .home .slider .cycle-slideshow div img,
      .home .slider .carousel div img {
        max-width: 100%;
        height: auto; }
  @media all and (min-width: 570px) and (max-width: 960px) {
    .home .slider {
      width: 570px;
      height: 354px; }
      .home .slider .cycle-slideshow,
      .home .slider .carousel {
        width: 404px;
        height: 255px;
        top: 24px;
        left: 50%;
        margin-left: -207px; }
        .home .slider .cycle-slideshow div,
        .home .slider .carousel div {
          width: 404px;
          height: 255px; } }
  @media all and (max-width: 570px) {
    .home .slider {
      width: 300px;
      height: 186px; }
      .home .slider .prev,
      .home .slider .next {
        font-size: 56px;
        top: 30%; }
      .home .slider .cycle-slideshow,
      .home .slider .carousel {
        width: 213px;
        height: 135px;
        top: 12px;
        left: 50%;
        margin-left: -109px; }
        .home .slider .cycle-slideshow div,
        .home .slider .carousel div {
          width: 213px;
          height: 135px; }
      .home .slider .carousel-pager {
        bottom: -40px; } }

/**
 * CATEGORY BUTTONS
 */
.category-buttons {
  text-align: center;
  padding: 20px 0;
  font-size: .85em; }
  .category-buttons a {
    position: relative;
    display: inline-block;
    margin: 5px;
    padding: 0 1em;
    line-height: 2em;
    text-decoration: none;
    text-transform: uppercase;
    color: #6d6d6d;
    background: transparent;
    border: 1px solid #6d6d6d;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    border-bottom-left-radius: 1em;
    border-top-left-radius: 1em;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
    .category-buttons a:hover, .category-buttons a.active {
      color: #fff;
      background: #d32a1d;
      border-color: #d32a1d; }

/**
 * CLIENTS
 */
.client-logo {
  position: relative;
  height: 100px; }
  .client-logo a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10; }

#contact-button .fa {
  display: none; }
#contact-button .fa-refresh {
  -webkit-animation: spin 1s infinite linear;
  animation: spin 0.5s infinite linear; }
#contact-button .label {
  font-weight: normal; }
#contact-button.processing .fa-refresh {
  display: inline-block; }
#contact-button.processing .label {
  display: none; }
#contact-button.success .fa-check {
  display: inline-block; }
#contact-button.success .label {
  display: none; }