/* small screens up */
html {
  position: relative;
}
@media only screen {
  body {
    background: #eee;
    overflow-x: hidden;
    font-family: "brandon-grotesque";
  }
  h1 {
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: "brandon-grotesque";
  }
  h2 {
    font-size: 7em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: "brandon-grotesque";
  }
  h3 {
    font-size: 1.2em;
    font-weight: 300;
    font-family: Helvetica, sans-serif;
  }
  h4 {
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: "brandon-grotesque";
  }
  h5 {
    font-size: 1em;
    font-weight: 300;
    font-style: italic;
  }
  p {
    font-family: Helvetica, arial, sans-serif;
    margin-bottom: 1.5em;
    font-size: .9em;
    color: #666;
    font-weight: 300;
  }
  #hdr {
    height: 90px;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 200;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding: 20px 0 20px 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  #hdr.sticky {
    height: 65px;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 200;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding: 0;
  }
  #hdrsm {
    height: 70px;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 200;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }
  #workhdr {
    height: 50px;
    background: #000;
  }
  #workhdr img {
    margin-top: 5px;
    margin-left: 5px;
    height: 40px;
  }
  #logo {
    position: absolute;
    left: 0;
    z-index: 300;
  }
  #logo img {
    max-height: 60px;
  }
  #logosm {
    position: absolute;
    left: 0;
    z-index: 300;
  }
  #logosm img {
    max-height: 70px;
  }
  #nav li {
    list-style: none;
    display: inline-block;
    margin-left: 20px;
  }
  #nav {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  #nav a {
    color: #000;
    text-transform: uppercase;
    font-family: "brandon-grotesque";
    font-size: 1em;
    display: block;
  }
  #nav a:hover {
    border-bottom: 2px solid #87cdb6;
  }
  #navsm {
    position: absolute;
    z-index: 201;
    display: none;
    background: #fff;
    width: 100%;
    top: 70px;
  }
  #navsm li {
    border-bottom: 1px solid #333;
    text-align: center;
    display: block;
    list-style: none;
    padding: 5px;
  }
  #navsm li:last-child {
    border-bottom: none;
  }
  #navsm a {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 700;
    color: #000;
  }
  #navsm a:hover {
    background: #ccc;
  }
  #navbtnsm {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .active {
    border-bottom: 2px solid #87cdb6;
  }
  #hero {
    position: relative;
    display: block;
  }
  #herovideo {
    padding: 0px;
    margin: 0px auto;
    min-width: 100%;
    min-height: 100%;
    text-align: center;
  }
  #featuredesc {
    background: #fff;
  }
  .padding {
    padding: 4%;
  }
  .nopadding {
    padding: 0 !important;
  }
  .nomargin {
    margin: 0;
  }
  .center {
    text-align: center;
  }
  .txtright {
    text-align: right;
  }
  .title {
    width: 100%;
  }
  .icon {
    text-align: center;
  }
  .icon img {
    max-height: 200px;
  }
  .spacer {
    height: 80px;
  }
  .txtwhite {
    color: #fff;
  }
  .txtgrey {
    color: #666;
  }
  .white {
    background: #fff;
  }
  .black {
    background: #000;
  }
  .grey {
    background: #e0e0e0;
  }
  #ftr {
    background: #000;
  }
  .arrow img {
    max-height: 50px;
  }
  #outside {
    position: relative;
  }
  .workthumbarrow {
    opacity: .5;
    -webkit-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
  }
  .workthumbarrow:hover {
    opacity: 1;
  }
  .workthumbarrow img {
    max-height: 50px;
  }
  .slideshow2 {
    overflow: visible !important;
  }
  .cycle-slide {
    width: 100%;
    height: 100%;
  }
  #prev {
    position: absolute;
    top: 45%;
    left: 0;
    z-index: 101;
  }
  #next {
    position: absolute;
    top: 45%;
    right: 0;
    z-index: 101;
  }
  #prev2 {
    position: absolute;
    top: 43%;
    left: 0;
    z-index: 101;
  }
  #next2 {
    position: absolute;
    top: 43%;
    right: 0;
    z-index: 101;
  }
  .italic {
    font-style: italic;
  }
  #featurebtn {
    position: absolute;
    z-index: 199;
    bottom: 2%;
    width: 100%;
    text-align: center;
  }
  #featurebtn a {
    display: block;
  }
  #featurebtnimg {
    background: url('../img/btn_moreprojects.png') bottom;
    height: 45px;
    width: 305px;
    margin: 0 auto;
  }
  #featurebtnimg:hover {
    background-position: 0 0;
  }
  #videodesc {
    position: absolute;
    z-index: 199;
    top: 40%;
    width: 100%;
    text-align: center;
  }
  #videobtn {
    position: absolute;
    z-index: 199;
    bottom: 35%;
    width: 100%;
    text-align: center;
  }
  #videobtn a {
    display: block;
  }
  #contactus {
    font-family: "brandon-grotesque";
    font-size: 1em;
    font-weight: 300;
    margin-bottom: 0;
    color: #000;
  }
  #mailto {
    font-size: 1.1em;
    line-height: 2em;
    font-weight: 300;
    color: #000;
    font-family: "brandon-grotesque";
    line-height: 1.2em;
    margin-top: 35px;
  }
  #mailto a {
    font-weight: 500;
    color: #000;
  }
  #mailto a:hover {
    font-weight: 500;
    color: #0fa2a0;
  }
  #address {
    font-family: arial, sans-serif;
    font-size: 1.2em;
    font-weight: 300;
  }
  #teamicons {
    position: initial;
  }
  #clienticons {
    position: initial;
  }
  .parallax-window {
    min-height: 400px;
    background: transparent;
    width: 100%;
  }
  #titlecontact {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 199;
  }
  #contact {
    position: relative;
  }
  #ftrnav {
    margin-top: 30px;
  }
  #ftrnav li {
    list-style: none;
    display: inline-block;
    margin-right: 10px;
    border-right: 1px solid #333;
    padding-right: 10px;
  }
  #ftrnav li:last-child {
    border-right: 0px;
  }
  #ftrnav a {
    color: #aaa;
    font-size: .9em;
    font-weight: 300;
    font-family: arial, sans-serif;
  }
  #ftrnav a:hover {
    color: #ccc;
  }
  #playvideo {
    max-width: 200px;
    margin: 0 auto;
    color: #fff;
    font-family: "brandon-grotesque";
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 50px;
    height: 50px;
    margin-top: 30px;
  }
  #playvideo i {
    font-size: 2.5em;
    height: 50px;
  }
  #playvideo a {
    color: #fff;
    background: #0fa2a0;
    padding: 0 !important;
  }
  #playvideo a:hover {
    color: #d7fafa;
    background: #157a79;
  }
  .upforair {
    background: transparent url('../img/feature_2.jpg') repeat-x center;
    min-height: 670px;
    height: auto;
  }
  .sectiontitle {
    border-bottom: 1px solid #000;
    text-align: center;
    display: inline-block;
    margin-bottom: 25px;
  }
  .section {
    padding-top: 45px;
  }
  #contactinfo {
    position: relative;
    background: #fff;
  }
  #map {
    position: relative;
    background: none;
  }
  #clouds {
    position: absolute;
    z-index: 155;
    top: 200px;
    right: -600px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  #clouds.sticky {
    right: 20px;
  }
  #clouds2 {
    position: absolute;
    z-index: 155;
    top: 270px;
    left: -500px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  #clouds2.sticky {
    left: 8%;
  }
  .projectlink {
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  .projectname {
    display: none;
    background: rgba(15, 162, 160, 0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 150;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3em;
    font-weight: 500;
    font-family: "brandon-grotesque";
    color: #fff;
  }
  .projectname p {
    position: absolute;
    z-index: 151;
    top: 40%;
    width: 100%;
    left: 0;
    display: block;
    height: 100%;
    font-weight: 500;
    font-family: "brandon-grotesque";
    color: #fff;
  }
  .projectname a:hover {
    color: #ccc;
  }
  .tealhr {
    border: 1px solid #0fa2a0;
  }
  #clienticons {
    background: transparent url('../img/bkgd_clients.jpg') no-repeat;
  }
  #teamicons {
    background: transparent url('../img/bkgd_team.jpg') no-repeat;
  }
  #servicesicons {
    background: transparent url('../img/bkgd_services.jpg') no-repeat;
  }
  #btnplay {
    max-height: 30px;
  }
  .credits {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .flex-video {
    padding: 0;
    padding-top: 600px;
  }
}
/* medium screens */
@media only screen and (min-width: 40.063em) {
  #mailto {
    font-size: 1.5em;
  }
  .section {
    padding-top: 85px;
  }
  .padtop {
    padding-top: 50px;
  }
  .padbtm {
    padding-bottom: 50px;
  }
  .padleft {
    padding-left: 50px;
  }
  .padright {
    padding-right: 50px;
  }
  #map {
    position: relative;
    background: transparent url('../img/map.jpg') repeat-x center center;
    min-height: 450px;
  }
  #contactinfo {
    position: absolute;
    z-index: 150;
    width: 70%;
    left: 15%;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    min-height: 144px;
  }
  #clienticons {
    width: 100%;
    background: none;
  }
  #teamicons {
    width: 100%;
    background: none;
  }
  #servicesicons {
    width: 100%;
    background: none;
  }
  .content {
    background-attachment: fixed;
  }
  #content1 {
    background-image: url("../img/bkgd_clients.jpg");
  }
  #content2 {
    background-image: url("../img/bkgd_team.jpg");
  }
  #content3 {
    background-image: url("../img/bkgd_services.jpg");
  }
  .img-zoom {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
  }
  .transition {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
/* large screens */
@media only screen and (min-width: 64.063em) {
  #contactinfo {
    width: 60%;
    left: 20%;
    bottom: 0;
    background: #fff;
  }
}
.hide {
  display: none;
}
h2 img {
  display: block;
  margin: 0 auto;
  width: 50vw;
}
.icon img {
  margin-bottom: 1rem;
  border-radius: 50%;
}
ul.team {
  padding: 2% 0;
}
ul.team li {
  list-style: none;
  width: 50%;
  padding: 1% 2%;
}
ul.team li .icon img {
  width: 100px;
}
@media only screen and (min-width: 40.063em) {
  ul.team li {
    width: auto;
  }
  ul.team li .icon img {
    width: auto;
  }
}