@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700,500);
/* End variables.css */
.app {
  opacity: 1; }
  .app.ng-hide-add, .app.ng-hide-remove {
    transition: all linear 0.5s; }
  .app.ng-hide {
    opacity: 0; }

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1170px; }

.full-height {
  height: 100%; }

#footer {
  padding: 0 50px;
  margin: 24px 10px; }
  @media screen and (max-width: 600px) {
    #footer {
      padding: 10px; } }
  #footer h4, #footer .social {
    line-height: 28px;
    font-size: 1.5em;
    font-weight: lighter;
    margin: 0;
    padding: 0 5px; }
    @media screen and (max-width: 600px) {
      #footer h4, #footer .social {
        text-align: center; } }
  @media screen and (max-width: 600px) {
    #footer h4 {
      margin-bottom: 15px; } }

html {
  background-color: Grey; }
  html body {
    font-family: 'Roboto', sans-serif;
    background-color: White; }
    html body .full-width {
      width: 100%; }
    html body .initial-height {
      height: initial;
      min-height: 100vh; }
    html body .initial-max-height {
      max-height: initial !important; }
    html body .word-wrap {
      word-wrap: break-word; }
    html body, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
      font-weight: normal; }
    html body h1 {
      font-size: 2em; }
    html body h2 {
      font-size: 1.8em; }
    html body h3 {
      font-size: 1.5em; }
    html body h4 {
      font-size: 1.2em; }
    html body h5 {
      font-size: 1em; }
    html body p {
      font-size: 1.5em; }
    html body a {
      text-decoration: none; }
    html body abbr:hover {
      cursor: help; }
    html body a:hover abbr {
      cursor: pointer; }
    html body md-content {
      background-color: White; }
    html body p {
      color: Grey; }
    html body a, html body b {
      color: DimGrey; }
    html body form label {
      color: #FCB702; }
    html body form input {
      color: Grey; }
    html body form md-input-container:not(.md-input-invalid).md-input-focused .md-input {
      border-color: #FCB702;
      color: Grey; }
    html body form md-input-container:not(.md-input-invalid) .md-input {
      border-color: Grey;
      color: DimGrey; }
    html body form md-input-container:not(.md-input-invalid).md-input-has-value label {
      color: #FCB702; }
    html body form md-input-container.md-input-invalid [ng-message] {
      color: #EF5350; }
    html body form md-input-container.md-input-invalid .md-input {
      color: #EF5350;
      border-color: #EF5350; }
    html body form md-input-container.md-input-invalid label {
      color: #EF5350; }
    html body form md-input-container.md-input-invalid.md-input-focused label {
      color: #EF5350; }
    html body form md-input-container:not(.md-input-invalid).md-input-focused label {
      color: #FCB702; }
    html body form md-input-container:not(.md-input-invalid) label {
      color: Grey; }
    html body form .md-button.md-primary.md-raised:not([disabled]) {
      background-color: #57565B;
      color: White; }
    html body form .md-button.md-primary.md-raised:not([disabled]):hover {
      background-color: #FCB702; }
    html body .brand-alt {
      background-color: Grey; }
      html body .brand-alt md-content {
        background-color: Grey; }
      html body .brand-alt h1, html body .brand-alt h2, html body .brand-alt h3, html body .brand-alt h4, html body .brand-alt h5, html body .brand-alt h6, html body .brand-alt p, html body .brand-alt a, html body .brand-alt b {
        color: White; }
      html body .brand-alt a:hover {
        color: #FCB702; }
      html body .brand-alt form label, html body .brand-alt form input {
        color: White; }
      html body .brand-alt form md-input-container:not(.md-input-invalid).md-input-focused .md-input {
        border-color: White;
        color: White; }
      html body .brand-alt form md-input-container:not(.md-input-invalid) .md-input {
        border-color: White;
        color: White; }
      html body .brand-alt form md-input-container.md-input-invalid [ng-message] {
        color: #EF5350; }
      html body .brand-alt form md-input-container.md-input-invalid .md-input {
        color: #EF5350;
        border-color: #EF5350; }
      html body .brand-alt form md-input-container.md-input-invalid.md-input-focused label {
        color: #EF5350; }
      html body .brand-alt form md-input-container:not(.md-input-invalid).md-input-focused label {
        color: White; }
      html body .brand-alt form md-input-container:not(.md-input-invalid) label {
        color: White; }
      html body .brand-alt form .md-button.md-primary.md-raised[disabled] {
        background-color: DimGrey;
        color: White; }
      html body .brand-alt form .md-button.md-primary.md-raised:not([disabled]) {
        background-color: White;
        color: DimGrey; }
      html body .brand-alt form .md-button.md-primary.md-raised:not([disabled]):hover {
        background-color: #FCB702; }
    html body #mobile-message p {
      font-size: 12px;
      margin: 0;
      padding: 2px 4px;
      text-align: center; }

@keyframes grow-fade-in {
  from {
    font-size: 0;
    opacity: 0; }
  50% {
    font-size: 1em;
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes grow-fade-out {
  from {
    opacity: 1;
    font-size: 1em; }
  50% {
    font-size: 1em;
    opacity: 0; }
  to {
    font-size: 0; } }

nav #navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 15px 15px;
  z-index: 9999;
  transition: padding linear 0.1s;
  transition: background-color linear 0.1s; }
  nav #navbar.scroll {
    background-color: rgba(0, 0, 0, 0.75);
    padding: 5px 15px; }
    nav #navbar.scroll .logo img {
      height: 60px;
      transform: scale(1.5, 1.5);
      transform-origin: 50% 50%; }
      @media screen and (max-height: 960px) {
        nav #navbar.scroll .logo img {
          transform: scale(1, 1); } }
  nav #navbar .logo {
    margin-left: 6px; }
    @media screen and (min-width: 960px) {
      nav #navbar .logo {
        margin-left: 35px; } }
    nav #navbar .logo img {
      transition: height linear 0.1s;
      height: 80px; }
  nav #navbar .md-button:not(.burger) {
    padding: 13px 30px;
    margin: 5px;
    min-width: 88px;
    border-radius: 0px;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    border: 0;
    outline: none;
    color: #FFF;
    font-family: 'Roboto', sans-serif; }
    nav #navbar .md-button:not(.burger) .md-ripple-container {
      border-radius: 0; }
  nav #navbar .md-button.burger {
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center; }
    nav #navbar .md-button.burger .md-ripple-container {
      border-radius: 0; }

nav #hamburger-menu {
  position: fixed;
  top: 70;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: black; }
  nav #hamburger-menu .md-button {
    color: #fff;
    border-bottom: 2px solid #777777;
    width: 100%;
    padding: 13px 30px;
    margin: 0;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    color: #FFF;
    font-family: 'Roboto', sans-serif; }
    nav #hamburger-menu .md-button:first-child {
      border-top: 2px solid #777777; }
    nav #hamburger-menu .md-button .md-ripple-container {
      border-radius: 0; }
    @media screen and (max-height: 392px) {
      nav #hamburger-menu .md-button {
        padding: 0; } }

/* Start app-menu.css */
app-menu {
  position: fixed;
  top: 0;
  right: 0;
  font-size: 2em;
  z-index: 9999; }
  app-menu.open {
    bottom: 0;
    left: 0; }
  app-menu #app-menu-controller button {
    background: #57565B !important; }
    app-menu #app-menu-controller button .fa-bars {
      font-size: 24px;
      color: #FCB702; }
    app-menu #app-menu-controller button:hover .fa-bars {
      color: White; }
  app-menu .layout-padding {
    padding: 16px; }

/* End app-menu.css */
#process {
  background-color: #FFF;
  padding: 50px 0 20px 0; }
  @media only screen and (min-width: 1200px) {
    #process {
      font-size: 2em; } }
  @media only screen and (max-width: 1200px) and (min-width: 960px) {
    #process {
      font-size: 2em; } }
  @media only screen and (max-width: 960px) and (min-width: 600px) {
    #process {
      font-size: 1.8em; } }
  @media only screen and (max-width: 600px) {
    #process {
      font-size: 1.8em; } }
  @media only screen and (max-width: 600px) {
    #process h2 {
      font-size: 0.75em; } }
  #process .bucket {
    z-index: 10;
    margin: 0;
    text-align: center;
    display: block;
    padding: 5px; }
    #process .bucket .circle {
      border-radius: 50%;
      background-color: #FCB702;
      width: 100px;
      height: 100px;
      margin: 0 auto;
      box-shadow: 2px 4px 5px 0 rgba(0, 0, 0, 0.26); }
      @media only screen and (max-width: 600px) {
        #process .bucket .circle {
          width: 75px;
          height: 75px; } }
      #process .bucket .circle img {
        margin-top: 25px; }
        @media only screen and (max-width: 600px) {
          #process .bucket .circle img {
            margin-top: 14px; } }
    #process .bucket h2 {
      color: #FCB702;
      font-size: 1em;
      margin-top: 10px;
      margin-bottom: 10px; }
      #process .bucket h2:hover {
        color: #FCB702; }
    #process .bucket .scroller p {
      font-size: 0.5em;
      margin-top: 8px;
      margin-bottom: 8px;
      color: Grey; }
    #process .bucket .scroller .extra {
      font-size: 0;
      opacity: 0;
      display: none; }
    #process .bucket .scroller .line-hide {
      font-size: 0;
      display: block;
      opacity: 0; }
      #process .bucket .scroller .line-hide.ng-animate {
        animation: grow-fade-out 0.5s linear 0s 1 normal forwards running; }
    #process .bucket .scroller .line-show {
      font-size: 1em;
      display: block;
      opacity: 1; }
      #process .bucket .scroller .line-show.ng-animate {
        animation: grow-fade-in 0.5s linear 0s 1 normal forwards running; }

#questions {
  padding: 100px 0; }
  #questions h1 {
    color: #444;
    font-size: 3em;
    font-weight: normal;
    text-align: center; }
    @media screen and (max-width: 960px) {
      #questions h1 {
        font-size: 2em; } }
  #questions ul li {
    color: #222;
    font-size: 22px;
    font-weight: lighter;
    margin-bottom: 12px; }
    @media screen and (max-width: 960px) {
      #questions ul li {
        font-size: 18px;
        line-height: 1.4em; } }

#services h1 {
  color: #333;
  font-size: 3em;
  font-weight: normal;
  text-align: center; }
  @media screen and (max-width: 960px) {
    #services h1 {
      font-size: 2em; } }

#services h2 {
  color: #111;
  font-size: 1.5em;
  font-weight: lighter;
  text-align: center; }

#services p {
  color: #111;
  font-size: 18px;
  font-weight: lighter;
  line-height: 26px;
  text-align: center; }

#services .answer {
  padding: 40px; }
  #services .answer md-icon {
    height: 50px;
    width: 50px;
    color: green; }

#portfolio h1, #portfolio h2, #portfolio p {
  font-weight: lighter; }

#portfolio h1 {
  text-align: center;
  font-size: 2.5em; }

#portfolio h2 {
  text-align: left; }

#portfolio p {
  font-size: 16px;
  line-height: 1.4em;
  text-align: justify; }

#portfolio ul.carousel {
  height: 50%; }

#portfolio ul.slides {
  list-style-type: none; }
  #portfolio ul.slides li {
    padding: 0; }
  #portfolio ul.slides .image {
    overflow: hidden; }

#portfolio h2.no-top-margin {
  margin-top: 0; }

#portfolio .carousel-indicators {
  background-color: rgba(0, 0, 0, 0.75);
  padding: 5px;
  border-radius: 5px; }

#teamwork {
  background-image: url("/assets/jpg/teamwork_wide.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
  position: relative; }
  #teamwork .placeholder {
    opacity: 0; }
  #teamwork .container {
    position: absolute;
    z-index: 15;
    top: 100px;
    left: 0;
    bottom: 100px;
    right: 0; }
  #teamwork .overlay {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3); }
  #teamwork h1 {
    color: #f5f5f5;
    text-align: center;
    font-size: 3.5em;
    font-weight: lighter; }

.button-contact {
  padding: 10px 40px !important;
  border-radius: 0 !important; }

#statement {
  background-image: url("/assets/jpg/no8wire_nocopy.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 15px #000;
  z-index: 1; }
  #statement .slogans {
    margin-top: 80px; }
    #statement .slogans .slogan {
      margin: 0;
      margin-bottom: 7px;
      padding: 0;
      font-size: 18px;
      color: #FFF;
      text-align: center;
      text-shadow: 1px 2px #444; }
      @media screen and (min-width: 960px) {
        #statement .slogans .slogan {
          font-size: 28px; } }
      #statement .slogans .slogan:first-child {
        font-size: 32px;
        color: #FCB702;
        margin-bottom: 20px; }
        @media screen and (min-width: 960px) {
          #statement .slogans .slogan:first-child {
            font-size: 60px; } }
      #statement .slogans .slogan.ng-move, #statement .slogans .slogan.ng-enter, #statement .slogans .slogan.ng-leave {
        transition: all linear 0.5s; }
      #statement .slogans .slogan.ng-leave.ng-leave-active, #statement .slogans .slogan.ng-move, #statement .slogans .slogan.ng-enter {
        opacity: 0; }
      #statement .slogans .slogan.ng-leave, #statement .slogans .slogan.ng-move.ng-move-active, #statement .slogans .slogan.ng-enter.ng-enter-active {
        opacity: 1; }
  #statement .call p {
    margin: 0;
    padding: 20px 40px;
    background-color: rgba(255, 255, 255, 0.5);
    color: #222; }
    @media screen and (max-height: 350px) {
      #statement .call p {
        font-size: 1em; } }

/* End statement.css */
#buckets {
  background-color: #FFF;
  padding: 50px 0 20px 0; }
  @media only screen and (min-width: 1200px) {
    #buckets {
      font-size: 2em; } }
  @media only screen and (max-width: 1200px) and (min-width: 960px) {
    #buckets {
      font-size: 2em; } }
  @media only screen and (max-width: 960px) and (min-width: 600px) {
    #buckets {
      font-size: 1.8em; } }
  @media only screen and (max-width: 600px) {
    #buckets {
      font-size: 1.8em; } }
  @media only screen and (max-width: 600px) {
    #buckets h2 {
      font-size: 0.75em; } }

/* Start bucket.css */
bucket {
  padding: 5px 10px; }

.bucket {
  z-index: 10;
  margin: 0;
  text-align: center;
  display: block;
  padding: 5px;
  /*button { 
    background-color: $brand-bg-alt;
    color: $brand-fg;
    &:hover {
      color: $brand-primary;
    }
  }*/ }
  .bucket .circle {
    border-radius: 50%;
    background-color: #FCB702;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    box-shadow: 2px 4px 5px 0 rgba(0, 0, 0, 0.26); }
    @media only screen and (max-width: 600px) {
      .bucket .circle {
        width: 75px;
        height: 75px; } }
    .bucket .circle img {
      margin-top: 25px; }
      @media only screen and (max-width: 600px) {
        .bucket .circle img {
          margin-top: 14px; } }
  .bucket h2 {
    color: #FCB702;
    font-size: 1em;
    margin-top: 10px;
    margin-bottom: 10px; }
    .bucket h2:hover {
      color: #FCB702; }
  .bucket .scroller p {
    font-size: 0.5em;
    margin-top: 8px;
    margin-bottom: 8px;
    color: Grey; }
  .bucket .scroller .extra {
    font-size: 0;
    opacity: 0;
    display: none; }
  .bucket .scroller .line-hide {
    font-size: 0;
    display: block;
    opacity: 0; }
    .bucket .scroller .line-hide.ng-animate {
      animation: grow-fade-out 0.5s linear 0s 1 normal forwards running; }
  .bucket .scroller .line-show {
    font-size: 1em;
    display: block;
    opacity: 1; }
    .bucket .scroller .line-show.ng-animate {
      animation: grow-fade-in 0.5s linear 0s 1 normal forwards running; }

/* End bucket.css */
/* Start services.css */
#services {
  background-color: #f5f5f5; }
  #services a, #services a:active, #services a:visited {
    color: #FCB702;
    text-decoration: none; }
    #services a:hover, #services a:active:hover, #services a:visited:hover {
      text-decoration: underline; }
    #services a .material-icons, #services a:active .material-icons, #services a:visited .material-icons {
      margin-top: 10px; }
  #services #logo {
    position: absolute;
    left: 0; }
  #services #service-cards {
    margin: 40px 0; }
  #services service-description:not(.active) {
    display: none; }
  @media only screen and (max-width: 960px) and (min-width: 600px) {
    #services service-description {
      font-size: 0.75em; } }
  @media only screen and (max-width: 600px) {
    #services service-description {
      font-size: 0.75em; } }
  #services .blip {
    z-index: -1;
    margin: -16.66667px auto 0 auto;
    border-radius: 50%;
    background-color: Grey;
    width: 50px;
    height: 50px; }

/* End services.css */
service-description {
  display: none; }
  service-description.active {
    display: block; }
  service-description .wrapper {
    margin: 20px 0; }
    @media only screen and (max-width: 360px) {
      service-description .wrapper .description {
        font-size: 0.75em; } }
  service-description h2 {
    text-align: left;
    margin-top: 0; }
  service-description .pic {
    height: 370px;
    position: relative;
    overflow: hidden; }
    service-description .pic img {
      width: 100%; }

services-card {
  background-color: Grey;
  margin: 5px;
  padding: 10px;
  position: relative;
  height: 200px; }
  @media only screen and (max-width: 360px) {
    services-card {
      height: 100px; } }
  services-card h2.highlight {
    color: #FCB702; }
  services-card i {
    font-size: 2.5em; }
  services-card, services-card .front, services-card .back {
    transition: 0.5s ease all; }
  services-card .back, services-card .front {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; }
  services-card.active {
    background-color: #f2f2f2; }
    services-card.active .front {
      opacity: 1; }
    services-card.active .back {
      opacity: 0; }
    services-card.active .blip {
      opacity: 1; }
  services-card .front {
    opacity: 0;
    background-image: url("/assets/png/blind.png");
    background-size: auto 100%; }

#clients {
  padding: 100px 0; }
  #clients .client-buttons {
    margin-top: 10px; }
    #clients .client-buttons .md-button {
      border: 3px solid #5f5f5f;
      border-radius: 0;
      background-color: transparent;
      width: 95px;
      height: 95px; }
      #clients .client-buttons .md-button.active {
        border-color: #FCB702;
        box-shadow: none; }
      #clients .client-buttons .md-button img {
        width: 100%;
        border-radius: 0; }
  #clients .client h1, #clients .client p, #clients .client small {
    text-align: center; }
  #clients .client p, #clients .client small {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: lighter; }
  #clients .client h1 {
    text-transform: uppercase; }
  #clients .client p {
    font-size: 22px; }
  #clients .client small {
    text-transform: uppercase; }

/* Start client-card.css */
client-card {
  margin-bottom: 5px; }

.client {
  padding: 5px; }
  .client img {
    width: 100%;
    max-width: 128px;
    transition: width 1s;
    cursor: pointer; }
  .active .client img {
    width: 128px;
    cursor: default; }
  .active .client .client-content img {
    width: 64px;
    height: 64px;
    border-radius: 50%; }
  .active .client .client-content h1 {
    opacity: 1;
    font-size: 1.5em; }
  .active .client .client-content h2 {
    opacity: 1;
    font-size: 1.2em; }
  .active .client .client-content h3 {
    opacity: 1;
    font-size: 1em; }
  .client.no-img .client-content h1 {
    opacity: 1;
    font-size: 1.8em; }
  .client .client-content a {
    text-decoration: none;
    text-align: left; }
  .client .client-content img {
    width: 0;
    height: 0;
    border-radius: 50%;
    transition: height 1s, width 1s; }
  .client .client-content h1 {
    margin: 0;
    font-size: 0;
    opacity: 0;
    text-align: left;
    display: block;
    transition: opacity 1s, font-size 1s; }
  .client .client-content h2 {
    margin: 0;
    font-size: 0;
    opacity: 0;
    text-align: left;
    display: block;
    transition: opacity 1s, font-size 1s; }
  .client .client-content h3 {
    margin: 0;
    font-size: 0;
    font-style: italic;
    font-weight: 100;
    opacity: 0;
    text-align: left;
    display: block;
    transition: opacity 1s, font-size 1s; }

/* End client-card.css */
/* Start contact.css */
#contact {
  background-image: url("/assets/png/symphony.png");
  padding-top: 80px; }

@keyframes fade-to-invisible {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  #contact form {
    position: relative; }
    #contact form.invisible md-input-container, #contact form.invisible .md-button {
      animation-name: fade-to-invisible;
      animation-duration: 0.5s;
      animation-timing-function: linear;
      animation-fill-mode: forwards; }
  #contact #success-message {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
  #contact .ng-hide-add, #contact .ng-hide-remove {
    transition: 0.5s ease all; }
  #contact .ng-hide-add {
    opacity: 1; }
  #contact .ng-hide-add.ng-hide-add-active {
    opacity: 0; }
  #contact .ng-hide-remove {
    opacity: 0; }
  #contact .ng-hide-remove.ng-hide-remove-active {
    opacity: 1; }
  #contact #details {
    margin-bottom: 16px; }
    #contact #details > div {
      padding-top: 40px; }
      #contact #details > div > div {
        padding-top: 40px; }
      #contact #details > div i {
        padding: 0 20px; }
      #contact #details > div:first-child {
        padding-top: 0; }
  #contact span.md-subhead {
    font-size: 18px;
    text-align: center; }
  #contact #map {
    height: 450px;
    max-height: 80%; }
  #contact h3, #contact h2 {
    font-weight: lighter; }
  #contact h2 {
    margin-bottom: 10px; }
  #contact h3 {
    margin-top: 10px; }

/* End contact.css */