html{

}
body{
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  overflow-x: hidden;
  margin: 0px;
  font-size: 14px;
}
h1{
  font-weight: 800;
}
h4{
  font-size: 1.3rem;
}
.h4{
  font-size: 1.3rem;
}
.h5{
  font-size: 1rem;
  font-weight: 600;
}
/* COLORS */
.navy{
  color: #00122D;
}
.gold{
  color: #DBC487;
}
.white{
  color: #FFFFFF;
}
.bg-white{
  background-color: #FFFFFF;
}
.bg-grey{
  background-color: #F2F2F2 !important;
}
.btn-prim{
  padding: 10px 50px 10px 50px;
  border: none;
  border-radius: 20px;
  background-color: #00122D;
  color: #E2C98C;
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-prim:hover{
  background-color: #002152;
  color: #FDF1B1;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-sec{
  padding: 10px 50px 10px 50px;
  border-radius: 20px;
  background-color: #DBC487;
  color: #00122D;
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-sec:hover{
  background-color: #FDF1B1;
  color: #002152;s
  text-decoration: none;
  transition: all 0.2s ease;
}
.navbar-brand{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.blue-overlay{
  width: 100%;
  height: inherit;
  background: rgba(0, 18, 45, 0.5);
}
.nav-link{
  color: #5A667B;
  transition: all 0.4s ease;
}
.nav-link:hover{
  color: #00122D;
  transition: all 0.4s ease;
}
.nav-link.active{
  color: #00122D;
}
.navbar-toggler:focus{
  outline: none;
}
#secondary-nav{
  display: flex;
  transform: translateY(-300px);
  visibility: hidden;
  background-color: #FFFFFF;
  transition: transform 0.9s ease-in, visibility 0s linear;
  transition-delay: 0s, 0.9s;
  box-shadow: 0px 0px 20px #00122D;
}
#secondary-nav.show{
  transform: translateY(0px);
  visibility: visible;
  transition: visibility 0s linear, transform 0.8s ease-in;
}
.footer-dropdown .dropdown-menu{
  font-size: 14px;
  right: auto;
  left: -70%;
  min-width: 420px;
  padding-right: 50px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
}
.dropdown-item{
  background: transparent;
  color: #5A667B;
}
.dropdown-item.active{
  color: #00122D !important;
  background: transparent;
}
.dropdown-item:hover{
  color: #00122D;
}
.dropdown-menu{
  border: none;
  border-radius: 0px;
}
.dropdown-item{
  color: #5A667B;
}
.dropdown-item.label{
  font-weight: 600;
}
.dropdown-item:hover{
  background: transparent;
  color: #00122D;
}
.dropdown-icon{
  transition: transform 0.4s ease;
}
.banner-info{
  height: calc(100% - 60px);
  width: 100%;
}
.banner-info h1{
  opacity: 0;
  transform: translateY(20px);
}
.banner-info h1.fade-in{
  opacity: 1;
  transform: translateY(0px);
  transition: all 0.5s ease-in;
}
.banner-info p{
  opacity: 0;
  transform: translateY(20px);
}
.banner-info p.fade-in{
  opacity: 1;
  transform: translateY(0px);
  transition: all 0.5s ease-in;
  transition-delay: 0.3s;
}
.banner-info .links{
  opacity: 0;
  transform: translateY(20px);
}
.banner-info .links.fade-in{
  opacity: 1;
  width: 100%;
  transform: translateY(0px);
  transition: all 0.3s ease-in;
  transition-delay: 0.6s;
}
.social-links{
  position: relative;
  height: 52%;
  top: 28%;
}
.social-container{
  position: relative;
}
.social-links:hover{
  color: #FDF1B1;
}
.phone-label{
  position: absolute;
  left: 26px;
  top: 0;
  background-color: transparent;
  border-radius: 40px;
  width: 40px;
  white-space: nowrap;
  padding: 10px 10px 10px 13px;
  overflow: hidden;
  transition: width 0.3s ease-out, background-color 0.3s ease-in;
  transition-delay: 0s, 0.4s;
}
.phone-label:hover{
  background-color: #00122D;
  width: 150px;
  transition: background-color 0.3s ease-in, width 0.3s ease-out;
  transition-delay: 0s, 0.4s;
}
.contact-icon{
  color: #00122D;
  font-size: 20px;
  transition: all 0.3s ease-in;
  transition-delay: 0.4s;
}
.phone-label:hover .contact-icon{
  color: #DBC487;
  transition: all 0.3s ease-in;
}
.contact-info{
  text-decoration: none;
  color: #DBC487;
}
.contact-info:hover{
  text-decoration: none;
  color: #FDF1B1;
}
.email-label{
  position: absolute;
  left: 25px;
  top: 20%;
  background-color: transparent;
  border-radius: 40px;
  width: 40px;
  padding: 10px;
  overflow: hidden;
  transition: width 0.3s ease-out, background-color 0.3s ease-in;
  transition-delay: 0s, 0.4s;
}
.email-label:hover{
  background-color: #00122D;
  width: 310px;
  transition: background-color 0.3s ease-in, width 0.3s ease-out;
  transition-delay: 0s, 0.4s;
}
.email-label:hover .contact-icon{
  color: #DBC487;
  transition: all 0.3s ease-in;
}

#specialty{
  background-image: url(../img/overlays/living-room-stone-fireplace.jpg);
  background-size: cover;
  background-position: center;
}
#home-gallery{
  position: relative;
}
.gallery-container{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#interested{
  background-image: url(../img/overlays/deck-overlooking-mountains.jpg);
  background-size: cover;
  background-position: center;
}
.footer-divider{
  display: block;
  border-top: 1px solid #F2F2F2;

}
.footer-divider::before{
  content: '';
  position: absolute;
  border-top: 3px solid #00122D;
  width: 15%;
  top: 25px;
}
.footer-links{
    color: #00122D;
}
.footer-links:hover{
    color: #002152;
    text-decoration: none;
}
.list-style-none{
  list-style: none;
}

#breadcrumb-section{
  background-color: #F2F2F2;
  font-size: 14px;
  font-weight: 500;
  z-index: 1;
}
.breadcrumb{
  background-color: transparent;
}
.breadcrumb{
  margin-bottom: 0px;
}
.breadcrumb a{
  color: #202B38;
  text-decoration: none;
}
.breadcrumb a.active{
  color: #445374;
  text-decoration: none;
}
.profile-border{
  border-bottom: solid 1px #00122D;
}
ol.breadcrumb li+li::before {
  padding: 6px;
  color: #202B38;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  font-size: 12px;
  content: "\f054";
}
.skills li::before{
  padding: 6px;
  color: #202B38;
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  font-size: 12px;
  content: "\f054";
}
.project-nav a{
  color: #00122D;
}
.project-nav a:hover{
  text-decoration: none;
}

#copywrite{
  background-color: #F2F2F2;
  color: #00122D;
}
/* MEDIA */
@media (max-width: 991px){
  .form-control.btn-prim{
    height: 42px;
  }
  .breadcrumb li:last-child{
    display: inline-block;
    width: 174px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .project-link{
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dropdown.show .dropdown-icon{
    transform: rotateZ(180deg);
    transform-origin: center;
    transition: transform 0.4s ease;
  }
  .dropup.show .dropdown-icon{
    transform: rotateZ(180deg);
    transform-origin: center;
    transition: transform 0.4s ease;
  }
  .dropdown-menu .divider{
    display: block;
    height: 1px;
    width: 80%;
    margin-left: 5%;
    background-color: rgba(0, 0, 0, 0.2);
  }
  #primaryNav .dropdown-menu{
    font-size: 14px;
    background: rgba(255, 255, 255, 0.0);
  }
  .divider img{
    width: 75%;
  }
  #home-banner{
    background-image: url(../img/banners/house-exterior-front-door-extended.jpg);
    background-size: cover;
    background-position: left top;
    height: 90vh;
    position: relative;
  }
  #projects-banner{
    background-image: url(../img/banners/interior-slickrock-renovation-living-room-2.jpg);
    background-size: cover;
    background-position: left top;
    height: 90vh;
    position: relative;
  }
  #new-home-banner{
    background-image: url(../img/banners/exterior-windswept-driveway.jpg);
    background-size: cover;
    background-position: left top;
    height: 90vh;
    position: relative;
  }
  #renovation-banner{
    background-image: url(../img/banners/interior-green-hill-cabin-kitchen.jpg);
    background-size: cover;
    background-position: left top;
    height: 90vh;
    position: relative;
  }
  #about-banner{
    background-image: url(../img/banners/exterior-dupont-home-firepit.jpg);
    background-size: cover;
    background-position: left top;
    height: 90vh;
    position: relative;
  }
  #contact-banner{
    background-image: url(../img/banners/interior-appalachian-addition-living-room.jpg);
    background-size: cover;
    background-position: left top;
    height: 90vh;
    position: relative;
  }
  #slickrock-banner{
    background-image: url(../img/banners/exterior-slickrock-renovation-deck-railings.jpg);
    background-size: auto 100%;
    background-position: center top;
    height: 90vh;
    position: relative;
  }
  #appalachian-banner{
    background-image: url(../img/banners/interior-appalachian-library.jpg);
    background-size: cover;
    background-position: left top;
    height: 90vh;
    position: relative;
  }
  #greenhill-banner{
    background-image: url(../img/banners/interior-green-hill-cabin-kitchen.jpg);
    background-size: cover;
    background-position: center top;
    height: 90vh;
    position: relative;
  }
  #dupont-banner{
    background-image: url(../img/banners/exterior-dupont-home.jpg);
    background-size: cover;
    background-position: center top;
    height: 90vh;
    position: relative;
  }
  #asheville-banner{
    background-image: url(../img/banners/exterior-asheville-deck-view.jpg);
    background-size: cover;
    background-position: center top;
    height: 90vh;
    position: relative;
  }
  #camptown-banner{
    background-image: url(../img/banners/interior-dupont-home-living-room-stairs.jpg);
    background-size: cover;
    background-position: center top;
    height: 90vh;
    position: relative;
  }
  #pisgah-banner{
    background-image: url(../img/banners/interior-pisgah-forest-open-kitchen.jpg);
    background-size: cover;
    background-position: left top;
    height: 90vh;
    position: relative;
  }
  #windswept-banner{
    background-image: url(../img/banners/interior-windswept-living-room.jpg);
    background-size: cover;
    background-position: center top;
    height: 90vh;
    position: relative;
  }
  #wyoming-banner{
    background-image: url(../img/banners/interior-pisgah-forest-bathroom.jpg);
    background-size: cover;
    background-position: center top;
    height: 90vh;
    position: relative;
  }
  .right-blur{
    right: 0;
    width: 100%;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    /* background: inherit; */
    overflow: hidden;
    z-index: 1;
  }
  .banner-info-blur{
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30vh;
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    /* background: inherit; */
    /* background-size: 100vh; */
    overflow: hidden;
    z-index: 0;
  }
  .gallery-overlay{
    background-color: rgba(0, 18, 45, 0.8);
    color: #DBC487;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 0%;
    opacity: 0;
    transition: all 0.3s ease;
  }
  .gallery-container .gallery-overlay{
    opacity: 1;
    height: 20%;
    transition: all 0.3s ease;
  }

}
@media (min-width: 992px){
  #projects-banner::before{
    background: url(../img/banners/interior-slickrock-renovation-living-room-2.jpg) no-repeat top center;
  }
  #new-home-banner::before{
    background: url(../img/banners/exterior-windswept-driveway.jpg) no-repeat top center;
  }
  #renovation-banner::before{
    background: url(../img/banners/interior-green-hill-cabin-kitchen.jpg) no-repeat top center;
  }
  #appalachian-banner::before{
    background: url(../img/banners/interior-appalachian-library.jpg) no-repeat top center;
  }
  #camptown-banner::before{
    background: url(../img/banners/interior-dupont-home-living-room-stairs.jpg) no-repeat top center;
  }
  #dupont-banner::before{
    background: url(../img/banners/exterior-dupont-home.jpg) no-repeat top center;
  }
  #asheville-banner::before{
    background: url(../img/banners/exterior-asheville-deck-view.jpg) no-repeat top center;
  }
  #greenhill-banner::before{
    background: url(../img/banners/exterior-green-hill-cabin-picnic-table-2.jpg) no-repeat top center;
  }
  #pisgah-banner::before{
    background: url(../img/banners/interior-pisgah-forest-open-kitchen.jpg) no-repeat top center;
  }
  #slickrock-banner::before{
    background: url(../img/banners/exterior-slickrock-renovation-deck-railings.jpg) no-repeat top center;
  }
  #windswept-banner::before{
    background: url(../img/banners/interior-windswept-living-room.jpg) no-repeat top center;
  }
  #wyoming-banner::before{
    background: url(../img/banners/interior-pisgah-forest-bathroom.jpg) no-repeat top center;
  }
  .secondary-navbar-brand{
    position: relative !important;
    top: 0px !important;
    left: 0px !important;
  }
  .form-control.btn-prim{
    width: 200px;
    height: 42px;
  }
  .right-border{
    border-right: 1px solid #00122D;
  }
  .nav-link::after{
    content: '';
    display: block;
    background-color: #00122D;
    height: 2px;
    width: 120%;
    margin-left: -10%;
    margin-top: 5px;
    transition: all 0.4s ease;
    transform: scaleX(0.0);
  }
  .nav-link:hover::after{
    transform: scaleX(1.0);
    transition: all 0.2s ease;
  }
  .nav-link.active::after{
    transform: scaleX(1.0);
  }
  .dropdown .dropdown-menu{
    display: block;
    margin-top: 0;
    visibility: hidden;
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: top center;
  }
  .dropdown:hover .dropdown-menu{
    visibility: visible;
    opacity: 1;
    transform: rotateX(0deg);
    transition: transform 0.5s cubic-bezier(.8, 0,.2,1), opacity 0.4s linear;
  }
  .dropdown:hover .dropdown-icon{
    transform: rotateZ(180deg);
    transform-origin: center;
    transition: transform 0.4s ease;
  }
  .dropup .dropdown-menu{
    display: block;
    margin-top: 0;
    visibility: hidden;
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: bottom center;
  }
  .dropup:hover .dropdown-menu{
    visibility: visible;
    opacity: 1;
    transform: rotateX(0deg);
    transition: transform 0.5s cubic-bezier(.8, 0,.2,1), opacity 0.4s linear;
  }
  .dropup:hover .dropdown-icon{
    transform: rotateZ(180deg);
    transform-origin: center;
    transition: transform 0.4s ease;
  }
  #secondary-nav .dropdown-menu{
    font-size: 14px;
    right: auto;
    left: -90%;
    min-width: 430px;
    padding-right: 50px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
  }
  #primaryNav .dropdown-menu{
    font-size: 14px;
    right: auto;
    left: -70%;
    min-width: 430px;
    padding-right: 50px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
  }
  #primary-footer{
    background-color: #FFFFFF;
  }
  #footer-nav .dropdown-menu{
    font-size: 14px;
    min-width: 430px;
    padding-right: 50px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
  }
  .dropdown-menu .divider{
    display: block;
    height: 1px;
    width: 100%;
    margin-left: 10%;
    background-color: rgba(0, 0, 0, 0.2);
  }
  .divider img{
    width: 35%;
  }
  #home-banner{
    position: relative;
    height: 800px;
  }
  #home-banner::before{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(../img/banners/house-exterior-front-door.jpg) no-repeat;
    background-position: top -50px right 50%;
    background-attachment: fixed;
    will-change: transform;
    z-index: -1;
  }
  .secondary-banner{
    position: relative;
    height: 600px;
    width: 100%;
  }
  .secondary-banner::before{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    will-change: transform;
    z-index: -1;
  }
  #about-banner::before{
    background: url(../img/banners/exterior-dupont-home-firepit.jpg) no-repeat top center;
    background-size: 100% auto;
  }
  #contact-banner::before{
    background: url(../img/banners/interior-appalachian-addition-living-room.jpg) no-repeat top center;
    background-size: 100% auto;
  }

  .right-blur{
    right: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background: rgba(255,255,255,0.8);
  }
  .left-banner{
    position: absolute;
    z-index: 2;
    width: 90px;
    height: 100%;
  }
  .left-blur{
    left: 0;
    width: 90px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background: rgba(255,255,255,0.8);
  }
  .gallery-overlay{
    background-color: rgba(0, 18, 45, 0.8);
    color: #DBC487;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 0%;
    opacity: 0;
    transition: all 0.3s ease;
  }
  .gallery-container:hover{
    box-shadow: 6px 6px 20px rgba(0, 18, 45, 0.2);
    transition: all 0.2s ease;
  }
  .gallery-container{
    transition: all 0.2s ease;
  }
  .gallery-container:hover .gallery-overlay{
    opacity: 1;
    height: 100%;
    transition: all 0.3s ease;
  }
}

@media (min-width: 992px) and (max-width: 1085px){
  #projects-banner::before{
    background-size: 110% auto;
  }
  #new-home-banner::before{
    background-size: 110% auto;
  }
  #renovation-banner::before{
    background-size: 110% auto;
  }
  #appalachian-banner::before{
    background-size: 110% auto;
  }
  #camptown-banner::before{
    background-size: 110% auto;
  }
  #dupont-banner::before{
    background-size: 110% auto;
  }
  #asheville-banner::before{
    background-size: 110% auto;
  }
  #greenhill-banner::before{
    background-size: 110% auto;
  }
  #pisgah-banner::before{
    background-size: 110% auto;
  }
  #slickrock-banner::before{
    background-size: 110% auto;
  }
  #windswept-banner::before{
    background-size: 110% auto;
  }
  #wyoming-banner::before{
    background-size: 110% auto;
  }
}
@media (min-width: 992px) and (max-width: 1220px){
  #home-banner::before{
    background-size: 124% auto;
  }
}
@media (min-width: 1221px){
  #home-banner::before{
    background-size: 100% auto;
  }
}
@media (min-width: 1086px){
  #projects-banner::before{
    background-size: 100% auto;
  }
  #new-home-banner::before{
    background-size: 100% auto;
  }
  #renovation-banner::before{
    background-size: 100% auto;
  }
  #appalachian-banner::before{
    background-size: 100% auto;
  }
  #camptown-banner::before{
    background-size: 100% auto;
  }
  #dupont-banner::before{
    background-size: 100% auto;
  }
  #asheville-banner::before{
    background-size: 100% auto;
  }
  #greenhill-banner::before{
    background-size: 100% auto;
  }
  #pisgah-banner::before{
    background-size: 100% auto;
  }
  #slickrock-banner::before{
    background-size: 100% auto;
  }
  #windswept-banner::before{
    background-size: 100% auto;
  }
  #wyoming-banner::before{
    background-size: 100% auto;
  }
}
.modal-content{
  background: transparent;
  border: none;
}
.modal-body{
  background: transparent;
}
.modal-header{
  background: transparent;
  border: none;
}
.modal-header button span{
  color: #FFFFFF !important;
  font-size: 40px;
}
.modal-body a{
  opacity: .6;
  color: #FFFFFF;
}
.modal{
  background-color: rgba(0, 0, 0, 0.6);
}