/* Globals */
html,
body {
  width: 100%;
  overflow-x: hidden;
  display: block;
}

p {
  font-family: 'Source Sans Pro', sans-serif;
}

.active a {
  color: #bbb !important;
}
/* Mobile Nav Bar */

.nav-icon {
  display: none;
}

.nav-icon a {
  font-size: 30px !important;
  margin-right: -40px !important;
  padding: 40px !important;
}


@media screen and (max-width: 1140px) {
  #bar {
    height: 50px !important;
    margin-left: 47px !important;
  }
  #logo {
    height: 50px !important;
    width: 47px !important;
  }
  #left-bar {
    height: 50px !important;
  }
  #right-bar {
    height: 50px !important;
    margin-right: 50px !important;
  }
}

@media screen and (max-width: 600px) {
  #left-bar > a > h1 {
    font-size: 22px !important;  
    position: absolute !important;
    margin-top: -13px;
  }
  .nav-icon a {
    font-size: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #home-slideshow-image {
    height: 100vh !important;
    margin-left: -50%;
    position: fixed !important;
    display: block !important;
  }
  #right-bar > ul > li.responsive.nav-icon {
    margin-top: 7px !important;
    padding-bottom: 8px !important;
  }

}


@media screen and (max-width: 1140px) {
  #right-bar > ul li:not(:first-child) {display: none;}
  #right-bar > ul li.nav-icon {
    float: right;
    display: block;
  }
}

/* This fixes the dropdown spacing bug */
@media screen and (min-width: 600px) , screen and (max-width: 1140px) {
  #right-bar > ul > li.responsive.nav-icon {
    margin-top: 1px;
    padding-bottom: 1px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1140px) {
  #right-bar > ul > li.responsive:not(:first-child) a {
    display: block !important;
    text-align: right !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    color: #000;
  }
  #right-bar > ul > li:nth-child(2) {
    border-top: 5px solid rgba(35, 93, 103, 1.0);  
  }
  #right-bar > ul li.responsive:not(:first-child) {
  -webkit-animation: fadein2 1s forwards;
     -moz-animation: fadein2 1s forwards;
      -ms-animation: fadein2 1s forwards;
       -o-animation: fadein2 1s forwards;
          animation: fadein2 1s forwards;

    background-color: #F7F7F7;
    display: block !important;
    clear: both;
    float: right !important;
    width: 140px;
    margin-right: -10px;
  }
  #arrw img {
    display: none;
  }
  #arrw.responsive {
    margin-right: 0;
  }

}


/* Animation */
@keyframes fadein {
  from { background-color: #F7F7F7; }
  to { background-color: #ddd; }
}

@-moz-keyframes fadein {
  from { background-color: #F7F7F7; }
  to { background-color: #ddd; }
}

@-webkit-keyframes fadein {
  from { background-color: #F7F7F7; }
  to { background-color: #ddd; }
}

@-ms-keyframes fadein {
  from { background-color: #F7F7F7; }
  to { background-color: #ddd; }
}

@-o-keyframes fadein {
  from { background-color: #F7F7F7; }
  to { background-color: #ddd; }
}

/* animation 2 */

@keyframes fadein2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-moz-keyframes fadein2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes fadein2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-ms-keyframes fadein2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-o-keyframes fadein2 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes img-hover {
  from { opacity: 1; }
  to { opacity: .9; }
}

@-moz-keyframes img-hover {
  from { opacity: 1; }
  to { opacity: .9; }
}

@-webkit-keyframes img-hover {
  from { opacity: 1; }
  to { opacity: .9; }
}

@-ms-keyframes img-hover {
  from { opacity: 1; }
  to { opacity: .9; }
}

@-o-keyframes img-hover {
  from { opacity: 1; }
  to { opacity: .9; }
}


/* Top Half */
#content {
  height: 100vh;
  width: 100%;
  display: block;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/* Gallery */
#home-slideshow {
  width: 100%;
  display: block;
  top: 0;
  left: 0;
  z-index: 1;
  position: absolute;
  overflow-x: hidden;
}

#home-slideshow-image {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

#home-slideshow-image img {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  overflow: hidden;
}

#navigation {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  display: inline-block;
  height: 74px;
}

#logo {
  float: left;
  width: 70px;
  height: 74px;
  display: block;
  background-color: rgba(35, 93, 103, 1.0);
}

#logo img {
  width: 100%;
}

#bar {
  width: 100%;
  top: 0;
  height: 74px;
  margin-left: 70px;
  display: block;
  background-color: rgba(26, 69, 76, 1.0);
  z-index: 10;
}

#left-bar {
  float: left;
  display: table;
  height: 74px;
  text-align: center;
}

#left-bar a {
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
}

#left-bar a h1 {
  color: #fff;
  font-family: 'Work Sans', sans-serif;
  font-size: 36px;
  padding-left: 15px;
  font-weight: 200;
  display: table-cell;
  vertical-align: middle;
}

#right-bar {
  float: right;
  height: 74px;
  display: table;
  text-align: center;
  margin-right: 100px;
}

#right-bar ul {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
}

#right-bar ul li {
  float: left;
  list-style: none;
  font-size: 16px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 200;
  margin-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
}

#right-bar > ul > li > a {
  text-decoration: none;
  color: #fff;
  padding-top: 40px;
  padding-bottom: 40px;
}

#right-bar > ul > li > a:hover {
  color: #bbb;
}

#right-bar ul li img {
  position: absolute;
  padding-top: 2px;
  padding-left: 2px;
  width: 20px;
}

#arrw {
  margin-right: 20px;
}

#arrw:hover > #dropdown {
  display: block;
  -webkit-animation: fadein2 .75s forwards;
     -moz-animation: fadein2 .75s forwards;
      -ms-animation: fadein2 .75s forwards;
       -o-animation: fadein2 .75s forwards;
          animation: fadein2 .75s forwards;

}

#dropdown ul {
  width: 250px;
  background-color: #F7F7F7;
  float: right;
  margin-right: 10px;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
}

#dropdown ul li {
  display: inline-block;
  text-align: right;
  float: right;
  clear: both;
  width: 100%;
  margin-right: 10px;
}

#dropdown ul li a {
  padding-left: 10px;
  padding-right: 10px;
  display: block;
  width: 100%;
}

#dropdown ul li a:hover {
  -webkit-animation: fadein .5s forwards;
     -moz-animation: fadein .5s forwards;
      -ms-animation: fadein .5s forwards;
       -o-animation: fadein .5s forwards;
          animation: fadein .5s forwards;
}

#dropdown {
  display: none; 
  position: absolute;
  width: 300px;
  margin-left: -200px;
  margin-top: 25px;
  background-color: #F7F7F7;
  border-top: 5px solid rgba(35, 93, 103, 1.0);
}

#dropdown ul li a p {
  color: #000;
}

#dropdown ul li a p {
  display: inline-block;
  text-align: right;
  margin-top: 7px;
  margin-bottom: 7.5px;
}

.projects-container {
  margin-top: 80px;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: left;
  width: 100%;
  margin-left: .5vw;
}

.fade-in {
  opacity: 0;
}

.projects-container li {
  width: 33vw;
  height: 22.4vw;
  color: #fff;
  text-align: center; 
  padding-top: .25vw;
  padding-bottom: .25vw;
}

.projects-container li img {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  display: block;

}

.projects-container li {
  color: #666;
  text-decoration: none;
}

.projects-container li a {
  text-decoration: none;
  color: #666;
}

.main-project {
  margin-top: 100px;
  width: 100%;
  display: block; 
  font-family: 'Work Sans', open-sans;
  clear: both;
}

.project-left {
  float: left;
  width: 50%;
}

.project-left h1 {
  margin-left: 2vw;
  color: #444;
  font-size: 40px;
  font-weight: 300;
}

.project-left p {
  margin-left: 2vw;
  color: #222;
  font-weight: 300;
  font-size: 16px;
}

.project-right {
  float: left;
  width: 40%;
}

.my-gallery {
  clear: both;
}

.project-right {
  display: block;
  float: left;
  margin-left: 2vw;
  margin-top: 4.25vw;
}

.project-right h3 {
  font-size: 24px;
  margin: 0;
}

.project-right {
  font-weight: 300;
}

.project-right p {
  font-size: 16px;
}

.project-right div {
  height: 100px;
}

@media screen and (max-width: 1140px) {
  .main-project {
    margin-top: 75px;
  }
  .project-left {
    width: 100%;
  }
  .project-left h1 {
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .project-left p {
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .project-right {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }
  .project-right div {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  #content {
    overflow-x: hidden;
  }
}

.about {
  width: 100%;
  display: block;
  margin-top: 70px;
}

@media screen and (min-width: 601px) {

  .about-left {
    width: 50%;
    height: 130vh;
    display: block;
    float: left;
    font-family: 'Work Sans', open-sans;
  }

  .about-left h1 {
    margin-left: 2vw;
    margin-top: 5vw;
    font-size: 30px;
    width: 80%;
  }

  .about-left p {
    margin-left: 2vw;
    font-size: 16px;
    font-weight: 300;
    width: 80%;
  }

  .about-right {
    width: 50%;
    float: left;
    height: 130vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
}

@media screen and (max-width: 600px) {
  .about-left {
    width: 100%;
    height: 130vh;
    display: block;
    float: right;
    clear: both;
    font-family: 'Work Sans', open-sans;
  }

  .about-left h1 {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 5vw;
    font-size: 30px;
    width: 90%;
  }

  .about-left p {
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-size: 16px;
    font-weight: 300;
    width: 90%;
  }

  .about-right {
    width: 100%;
    float: right;
    height: 130vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

}

@media screen and (min-width: 1200px) {
  .about-right img {
    height: auto;
    width: 100%;
  }
}

@media screen and (max-width: 1199px) {
  .about-right img {
    height: 100%;
    width: auto;
  }
}

@media screen and (max-width: 1140px) {
  .about {
    margin-top: 50px !important;
  }
}

.contact {
  width: 100%;
  display: block;
  margin-top: 70px;
  overflow: hidden;
}


input[type="text"],
input[type="submit"],
input[type="email"],
textarea {
  border-radius: 0px;
}

.contact-left {
  width: 50%;
  height: 92vh;
  display: block;
  float: left;
  font-family: 'Work Sans', open-sans;
}

.contact-left h1 {
  margin-left: 2vw;
  margin-top: 5vw;
  font-size: 30px;
  width: 80%;
}

.contact-left p {
  margin-left: 2vw;
  font-size: 16px;
  font-weight: 300;
  width: 80%;
}

.contact-right {
  width: 50%;
  float: left;
  height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.contact form {
  margin-left: 2vw;
  width: 80%;
  font-family: 'Work Sans', open-sans;
  font-weight: 300;
}

.contact form textarea {
  height: 200px;
}

.contact-right img {
  height: auto;
  width: 100%;
}

@media screen and (max-width: 1140px) {
  .contact {
    margin-top: 50px;
  }
  .contact-right img {
    height: auto;
    width: 100%;
  }
}

@media screen and (max-width: 820px) {
  .contact-right img {
    height: 100%;
    width: auto; 
  }
}

@media screen and (max-width: 700px) {
  .contact-left {
    width: 100%;
    display: block;
  }
  .contact-left h1 {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 90%;
  }
  .contact-left p {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 90%;
  }
  .contact-left form {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 90%;
  }
  .contact-right {
    width: 100%;
    display: block;
    height: 100vh;
    margin-top: 70px;
  }
  .contact-right img {
    width: 100%;
    height: auto;
  }
}

.journal {
  width: 100%;
  display: block;
  margin-top: 70px;
}

.journal-left {
  width: 65%;
  display: block;
  float: left;
  font-family: 'Work Sans', open-sans;
}

.journal-left h1 {
  margin-left: 2vw;
  margin-top: 5vw;
  font-size: 30px;
  width: 80%;
}

.journal-left p {
  margin-left: 2vw;
  font-size: 16px;
  font-weight: 300;
  width: 80%;
}

.journal-right {
  width: 30%;
  float: left;
  height: 100%;
  margin-top: 5vw;
  font-family: 'Work Sans', open-sans;
  overflow: hidden;
}

.journal-left li {
  margin-left: 2vw;
}

.journal-right h1 {
  margin-left: 2vw;
  font-size: 30px;
  width: 80%;
}

.journal-right p {
  margin-left: 2vw;
  font-size: 16px;
  font-weight: 300;
  width: 80%;
}

.journal-left li {
  list-style: none;
}

.other-posts {
  padding-top: 2vw;
}

.other-posts a {
  text-decoration: none;
}
.journal li a {
  text-decoration: none;
}

.journal-right img {
  height: auto;
  width: 100%;
}

@media screen and (max-width: 1140px) {
  .journal-left {
    width: 70%;
  }
  .journal-right {
    width: 30%;
  }
}

@media screen and (max-width: 700px) {
  .journal-left {
    width: 100%;
  }
  .journal-right {
    display: none;
  }
  .journal-left h1 {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    display: block;
  }
  .journal-left ul li {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    display: block;
  }
  .journal-left p {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    display: block;
  }

}


@media (max-width: 1199px) {
  .projects-container li {
    width: 33vw;
    height: 22.4vw;
    color: #fff;
    text-align: center; 
    padding-top: .5vw;
    padding-bottom: .5vw;
  }

  .projects-container li img {
    display: block;
  }

  .projects-container li {
    color: #999;
  }

  .projects-container {
    margin-left: .5vw;
  }
  
}

@media (max-width: 1140px) {
  .projects-container li {
    width: 50vw;
    height: 33.5vw;
    color: #fff;
    text-align: center; 
    padding-top: .5vw;
    padding-bottom: .5vw;
  }

  .projects-container li img {
    display: block;
  }

  .projects-container li {
    color: #999;
  }
  
  .projects-container {
    margin-left: 0;
  }

}

@media screen and (max-width: 1140px) {
  .projects-container {
    margin-top: 55px;
  }
}

@media screen and (max-width: 500px) {
  .projects-container li {
    width: 100vw;
    height: 67vw;
    color: #fff;
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 1vw;
  }
}

.journal-img {
 height: 200px;
 display: block;
 float: left;
 padding-left: 2vw;
 padding-bottom: 1vw;
}

.journal-left ul p {
  clear: both;
}

.journal-left p {
  clear: both;
}

.press {
  width: 100%;
  display: block;
  margin-top: 70px;
  overflow: hidden;
}

.press-left {
  width: 100%;
  display: block;
  float: left;
  font-family: 'Work Sans', open-sans;
}

.press-left h1 {
  margin-left: 2vw;
  margin-top: 5vw;
  font-size: 30px;
  width: 80%;
}

.press-left p {
  margin-left: 2vw;
  font-size: 16px;
  font-weight: 300;
  width: 80%;
}

.press-left a {
  text-decoration: none;
  color: #222;
}

.press-left ul li p {
  font-weight: 300;
  font-size: 16px;
  padding-left: 75px;
  padding-top: 50px;
  color: #222;
}

.press-left ul {
  width: 98%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.press-left ul li {
  width: 31%;
  padding: 1%;
  display: block;
  float: left;
  height: 125px;
}

.press-left ul li a div {
  float: left;
  height: 125px;
  width: 95px;
  background-color: gray;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.press-left ul li:nth-child(1) a div {
  background-image: url("../img/press/mag1.png");
}

.press-left ul li:nth-child(2) a div {
  background-image: url("../img/press/mag2.png");
}

.press-left ul li:nth-child(3) a div {
  background-image: url("../img/press/mag3.png");
}

.press-left ul li:nth-child(4) a div {
  background-image: url("../img/press/mag4.png");
}

.press-left ul li:nth-child(5) a div {
  background-image: url("../img/press/mag5.png");
}

.press-left ul li:nth-child(6) a div {
  background-image: url("../img/press/mag6.png");
}

.press-left ul li:nth-child(7) a div {
  background-image: url("../img/press/mag7.png");
}

.press-left ul li:nth-child(8) a div {
  background-image: url("../img/press/mag8.png");
}

.press-left ul li:nth-child(9) a div {
  background-image: url("../img/press/mag9.png");
}

@media screen and (max-width: 1140px) {
  .press {
    margin-top: 50px;
  }
  .press-left ul li {
    width: 48%;
    padding: 1%;
    display: block;
    float: left;
    height: 125px;
  }
  .press-left ul li:nth-child(9) {
    display: none;  
  }
}

@media screen and (max-width: 700px) {
  .press-left {
    width: 100%;
    display: block;
  }
  .press-left h1 {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 90%;
  }
  .press-left p {
    margin-left: auto;
    margin-right: auto;
    display: none;
    width: 90%;
  }
  .press-left ul li a div {
    float: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto; 
  }
  .tv-left ul li {
    width: 100% !important; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    padding-bottom: 10px !important;
  }
  .tv-left ul li div {
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: none !important;
  }
  .tv-left ul li p {
    float: none;
    text-align: center;  
    width: 100% !important;
  }

}


.tv-appearances {
  width: 100%;
  display: block;
  overflow: hidden;
}

.tv-left {
  width: 100%;
  display: block;
  float: left;
  font-family: 'Work Sans', open-sans;
}

.tv-left h1 {
  margin-left: 2vw;
  margin-top: 5vw;
  font-size: 30px;
  width: 80%;
}

.tv-left p {
  font-size: 16px;
  font-weight: 300;
  width: 80%;
  color: #222;
}

.tv-left ul li p {
  font-weight: 300;
  font-size: 16px;
  color: #222;
  clear: both;
  padding-top: 5px;
}

.tv-left ul {
  width: 98%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.tv-left ul li {
  width: 31%;
  padding: 1%;
  display: block;
  float: left;
  height: 200px;
}

.tv-left ul li div {
  float: left;
  height: 90px;
  width: 150px;
  background-color: gray;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.tv-left ul li:nth-child(1) div {
  background-image: url("../img/press/curb-appeal.jpeg");
}

.tv-left ul li:nth-child(2) div {
  background-image: url("../img/press/start-at-home.jpg");
}

.tv-left ul li:nth-child(3) div {
  background-image: url("../img/press/hgtv.jpeg");
}

.testimonials {
  width: 100%;
  display: block;
  overflow: hidden;
}

.testimonials-left {
  width: 50%;
  display: block;
  float: left;
  font-family: 'Work Sans', open-sans;
}

.testimonials-left h1 {
  margin-left: 2vw;
  margin-top: 5vw;
  font-size: 30px;
  width: 80%;
}

.testimonials-left p {
  margin-left: 2vw;
  font-size: 16px;
  font-weight: 300;
  width: 80%;
}

@media screen and (max-width: 700px) {
  .testimonials-left {
    width: 100%;
    display: block;
    margin-top: none !important;
  }
  .testimonials-left h1 {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 90%;
  }
  .testimonials-left p {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 90%;
  }
  .testimonials div:nth-child(2) h1 {
    display: none !important;
  } 
  .testimonials div:nth-child(2) p:first-of-type {
    display: none !important;
  }

}


/* large screen monitors */
@media screen and (min-width: 1600px) {
  .about-right {
    width: 30% !important;
  }
  .about-left {
    width: 70% !important;
  }
  .contact-right {  
    width: 30% !important;  
  } 
  .contact-left {
    width: 70% !important;  
  }
}

.project-right div p {
  margin-bottom: 0;
}

@media screen and (max-width: 350px) {
  #left-bar a h1 {
    font-size: 18px !important;
    margin-top: -10px !important;
  }
}