@font-face {
  font-family: Oswald;
  src: url("../fonts/Oswald-Regular.ttf") format("truetype");
}
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Oswald, serif;
  margin: 0;
}
body a {
  text-decoration: none;
}

.hide {
  display: none !important;
}

#nav-logo-menu {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 30px;
  margin-bottom: 20px;
}
#nav-logo-menu #logo {
  display: inline-block;
  margin-left: 50px;
  width: 20%;
}
@media screen and (max-width: 1000px) {
  #nav-logo-menu #logo {
    width: 177px;
  }
}
#nav-logo-menu #logo svg:hover {
  transform: scale(1.04);
}
#nav-logo-menu #logo #logo-svg {
  transition: 0.7s;
}
#nav-logo-menu #burger {
  margin-right: 40px;
  bottom: 0;
  right: 0;
  display: none;
  position: absolute;
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  #nav-logo-menu #burger {
    display: inline-block;
  }
}
#nav-logo-menu #navbar {
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 20px;
}
@media screen and (max-width: 1000px) {
  #nav-logo-menu #navbar {
    display: none;
    height: 300vh;
    background-color: white;
    top: 6.6vh;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    width: 40%;
    margin: 0;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    z-index: 2;
  }
}
#nav-logo-menu #navbar.nav-active {
  transform: translateX(0%) !important;
  display: flex !important;
}
#nav-logo-menu #navbar .navbar-item {
  display: inline-block;
}
#nav-logo-menu #navbar .navbar-item a {
  color: #969696;
  transition: all 1s;
  font-size: 1.4em;
  margin: 10px 20px;
  color: #969696;
  text-transform: uppercase;
  display: inline-block;
}
#nav-logo-menu #navbar .navbar-item a:hover {
  color: black;
  transform: scale(1.1);
}

.nav-line {
  background: linear-gradient(270deg, #FFFFFF 0.93%, #000000 53.45%, #FFFFFF 100.78%), #000000;
  height: 2px;
}

#nav-social-container {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1000px) {
  #nav-social-container {
    flex-direction: column;
  }
}
#nav-social-container #nav-social {
  min-width: 270px;
  text-align: right;
  margin: 10px 30px;
}
@media screen and (max-width: 1000px) {
  #nav-social-container #nav-social {
    margin: 0 30px;
  }
}
#nav-social-container #nav-text {
  margin: 0 48px;
  margin-top: 10px;
  font-size: 20px;
}
@media screen and (max-width: 550px) {
  #nav-social-container #nav-text {
    font-size: 18px;
  }
}
#nav-social-container svg {
  height: 25px;
  margin: 20px;
  transition: all 0.6s;
}
#nav-social-container svg:hover {
  transform: rotate(360deg) scale(1.5);
}

#intro-image {
  display: flex;
  justify-content: center;
}
#intro-image video {
  width: 95%;
  margin-bottom: 40px;
}

#who-we-are-section {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 1000px) {
  #who-we-are-section {
    flex-direction: column;
  }
}
#who-we-are-section h2 {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1.7em;
  text-align: center;
}
#who-we-are-section p {
  font-size: 1.2em;
  text-align: center;
}
#who-we-are-section a {
  color: #7097b0;
}
#who-we-are-section #quote {
  margin-top: 60px;
  font-size: 1.5em;
}
@media screen and (max-width: 550px) {
  #who-we-are-section #quote {
    margin-top: 20px;
  }
}

#who-we-are-image-container {
  width: 50%;
  display: flex;
  justify-content: center;
}
#who-we-are-image-container div {
  min-width: 500px;
  min-height: 430px;
  position: relative;
  margin-left: 15%;
}
@media screen and (max-width: 550px) {
  #who-we-are-image-container div {
    min-width: 370px;
    min-height: 330px;
  }
}

#who-we-are-text-container {
  width: 50%;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 1000px) {
  #who-we-are-text-container {
    width: 80%;
    font-size: 13px;
  }
}
#who-we-are-text-container div {
  width: 500px;
  margin: 0 50px;
  margin-right: 15%;
}
@media screen and (max-width: 1000px) {
  #who-we-are-text-container div {
    margin: 0;
  }
}

#who-we-are-image {
  height: 400px;
  width: 400px;
  margin: 30px 0 0 100px;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 550px) {
  #who-we-are-image {
    height: 300px;
    width: 300px;
    margin: 30px 0 0 34px;
  }
}

@media screen and (max-width: 550px) {
  #dotted-bg {
    height: 300px;
    width: 300px;
  }
}

#our-goals {
  margin: 40px 0;
}
@media screen and (max-width: 550px) {
  #our-goals {
    margin: 20px 0;
  }
}

#our-goals-head {
  text-align: center;
  margin: 10px;
  font-weight: normal;
  font-size: 1.6em;
  text-transform: uppercase;
}
@media screen and (max-width: 550px) {
  #our-goals-head {
    font-size: 1.2em;
  }
}

#our-goals-list {
  margin: 30px 30px;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-transform: uppercase;
  font-size: 1.1em;
  text-align: center;
}
@media screen and (max-width: 550px) {
  #our-goals-list {
    font-size: 0.9em;
    margin: 10px 30px;
  }
}

#nav-line-goals {
  height: 2px;
  background: linear-gradient(270deg, #FFFFFF 0.93%, black 53.45%, #FFFFFF 100.78%), black;
  margin: 0 28%;
}

.our-goals-elements {
  margin: 10px;
}

.parallax {
  height: 420px;
  background: transparent;
  margin-top: 40px;
  margin-bottom: 40px;
}
@media screen and (max-width: 550px) {
  .parallax {
    height: 210px;
  }
}

#gallery {
  margin: 3%;
}
#gallery .gallery-row {
  display: flex;
  height: 40vw;
  margin: 1%;
}
#gallery .image-container {
  display: inline-block;
  background-size: cover;
  background-position: center;
  margin: 0.5%;
  position: relative;
  cursor: pointer;
}
#gallery .horizontal-image {
  height: 100%;
  width: 60%;
}
#gallery .vertical-image {
  height: 100%;
  flex: auto;
}
#gallery .image-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 1s;
}
#gallery .image-overlay:hover {
  opacity: 1;
}
#gallery .image-overlay p {
  color: white;
  font-size: 2vw;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}
@media screen and (max-width: 550px) {
  #gallery .image-overlay p {
    font-size: 1.2em;
  }
}
#gallery .image-overlay h1 {
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #A9A9A9;
  font-weight: normal;
  font-size: 2vw;
  text-align: center;
  margin: 0;
}
@media screen and (max-width: 550px) {
  #gallery .image-overlay h1 {
    font-size: 0.9em;
  }
}

#modal-gallery {
  user-select: none;
  display: none;
  justify-content: space-between;
  align-items: center;
}
#modal-gallery.visible {
  display: flex;
}

.gallery-image-modal-container {
  width: auto;
  height: 95%;
  display: flex;
  justify-content: center;
}
.gallery-image-modal-container img {
  object-fit: scale-down;
  max-width: 100%;
  max-height: 100%;
}

.arrow-container {
  min-width: 20px;
  display: flex;
  justify-content: center;
}
.arrow-container svg {
  width: 70%;
}

.arrows {
  cursor: pointer;
}

.modal-close-style {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

#lets-do-more h3 {
  text-transform: uppercase;
  letter-spacing: 0.215em;
  font-size: 25px;
  text-align: center;
  font-weight: 200;
}
#lets-do-more #get-in-touch-button-container {
  display: flex;
  justify-content: center;
  margin: 45px;
}
#lets-do-more #get-in-touch-button-container a {
  text-align: center;
  width: 300px;
}

.button {
  text-transform: uppercase;
  text-decoration: none;
  border: 2px black solid;
  padding: 18px;
  color: black;
  font-size: 22px;
  transition: transform 1s;
}

.button:hover {
  background-color: black;
  color: white;
  transform: scale(1.1);
}

footer {
  background-color: #000000;
  display: flex;
}
footer > :first-child {
  flex: 1;
  display: flex;
  justify-content: center;
}
footer > :last-child {
  flex: 1;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 1000px) {
  footer {
    flex-direction: column;
  }
}
footer h3 {
  text-transform: uppercase;
  color: #FFFFFF;
  text-align: center;
  font-weight: normal;
  font-size: 1.5em;
  margin: 0;
}
footer #contact-us {
  margin-top: 30px;
}
footer #contact-us p {
  color: #FFFFFF;
  font-size: 1em;
  text-align: center;
}
footer #contact-us #address {
  color: #696969;
}
footer #get-social {
  margin-top: 30px;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  footer #get-social {
    margin-top: 0;
  }
}
footer .footer-inner-container {
  margin-bottom: 20px;
}
footer #bottom-social svg {
  height: 25px;
  margin: 20px 20px;
  fill: #FFFFFF;
  transition: 0.7s;
}
footer #bottom-social svg:hover {
  transform: scale(1.5);
}
footer #footer-logo {
  margin-top: 46px;
}
@media screen and (max-width: 1000px) {
  footer #footer-logo {
    margin-top: 0;
  }
}
footer #footer-logo svg {
  width: 260px;
  fill: #FFFFFF;
}

.modal-bg.modal-open {
  display: flex !important;
}

.modal-bg {
  z-index: 10;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

#modal-contact {
  display: none;
  align-items: center;
  justify-content: center;
}

#modal-contact-container {
  height: 80%;
  max-height: 600px;
  min-height: 350px;
  width: 70%;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  min-width: 550px;
}
#modal-contact-container #modal-contact-image-container {
  width: 40%;
  background-image: url("../img/contact_img.jpg");
  background-position: center;
  background-size: cover;
}
@media screen and (max-width: 550px) {
  #modal-contact-container #modal-contact-image-container {
    display: none;
  }
}
#modal-contact-container #modal-contact-image-container p {
  text-align: center;
  font-size: 1.3em;
  font-weight: normal;
  color: #5f7b88;
  margin: 0;
}
#modal-contact-container #modal-contact-image-container h2 {
  text-align: center;
  font-size: 1.4em;
  font-weight: normal;
  margin: 70px 30px 0px 30px;
  color: #5f7b88;
}
@media screen and (max-width: 1000px) {
  #modal-contact-container #modal-contact-image-container {
    font-size: 0.7em;
  }
}
#modal-contact-container #modal-contact-image-container #email-container {
  display: flex;
  justify-content: center;
  align-items: baseline;
}
#modal-contact-container #modal-contact-image-container #email-container h3 {
  text-align: center;
  color: #969696;
  font-weight: 200;
  margin-left: 12px;
}
#modal-contact-container #modal-contact-form-container {
  position: relative;
  width: 60%;
  display: flex;
  justify-content: center;
}
#modal-contact-container #modal-contact-form-container form {
  width: 80%;
  margin-top: 70px;
  display: flex;
  flex-direction: column;
}
#modal-contact-container #modal-contact-form-container .contact-input-row {
  display: flex;
  justify-content: space-evenly;
  position: relative;
}
#modal-contact-container #modal-contact-form-container .contact-input-row .contact-input-element {
  width: 100%;
  margin: 5px;
}
#modal-contact-container #modal-contact-form-container .contact-input-row .contact-input-element input {
  border: none;
  outline: none;
  width: 100%;
  padding: 5px 10px;
  font-size: 1em;
  font-family: Oswald, serif;
}
#modal-contact-container #modal-contact-form-container .contact-input-row .line-contact {
  height: 2px;
  background: linear-gradient(270deg, #FFFFFF 0.93%, #969696 53.45%, #FFFFFF 100.78%), #969696;
}
#modal-contact-container #modal-contact-form-container .contact-input-message {
  display: flex;
  justify-content: center;
  flex: 1;
}
#modal-contact-container #modal-contact-form-container .contact-input-message textarea {
  border: 2px #b5b5b5 solid;
  outline: none;
  width: 100%;
  margin: 20px 5px;
  font-family: Oswald, serif;
  font-size: 1em;
  padding: 5px 10px;
  resize: none;
}
#modal-contact-container #modal-contact-form-container #button-send {
  margin: 5px;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 550px) {
  #modal-contact-container #modal-contact-form-container #button-send {
    justify-content: center;
  }
}
#modal-contact-container #modal-contact-form-container #button-send button {
  margin-bottom: 15px;
  font-size: 18px;
  font-family: Oswald, serif;
  text-transform: uppercase;
  padding: 10px 80px;
  background-color: #3C586B;
  color: #FFFFFF;
  border: none;
  opacity: 0.8;
  transition: 0.4s;
  cursor: pointer;
  outline: none;
  user-select: none;
}
#modal-contact-container #modal-contact-form-container #button-send button:hover {
  opacity: 1;
}

#message-contact-us {
  margin-top: 210px;
}
#message-contact-us h1 {
  font-size: 1.6em;
  text-transform: uppercase;
  font-weight: normal;
  color: #5f7b88;
}
#message-contact-us p {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.2em;
}

.services-image-section {
  width: 100%;
  height: 46vw;
  background-size: cover;
  background-position: center;
  margin: 30px 0;
  position: relative;
}

#interior-image {
  background-image: url("../img/services_interior.jpg");
}

#exterior-image {
  background-image: url("../img/services_exterior.jpg");
}

#product-image {
  background-image: url("../img/services_modeling.jpg");
}

#floorplans {
  background-image: url("../img/services_plan.jpg");
}

.video-container {
  height: 46vw;
  overflow: hidden;
  position: relative;
}

.video-bg {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.border-decoration {
  width: 56vw;
  height: auto;
  border: 3px solid white;
  border-left: none;
  border-right: none;
  border-bottom: none;
  position: absolute;
  top: 6.5vw;
}
@media screen and (max-width: 1000px) {
  .border-decoration {
    display: none;
  }
}

.service-description {
  background-color: white;
  position: absolute;
  z-index: 10;
  width: 50vw;
  height: auto;
  left: 6vw;
  top: 8vw;
  padding-bottom: 5px;
}
@media screen and (max-width: 1000px) {
  .service-description {
    height: auto;
    width: auto;
    left: 0;
    padding-bottom: 0;
  }
}
.service-description h2 {
  text-transform: uppercase;
  font-weight: normal;
  padding-left: 28px;
  font-size: 26px;
  margin: 1vw 0;
}
@media screen and (max-width: 1000px) {
  .service-description h2 {
    margin-right: 20px;
    font-size: 21px;
  }
}
.service-description p {
  padding: 0 20px;
  font-size: 14px;
  margin: 1vw;
}
@media screen and (max-width: 1000px) {
  .service-description p {
    display: none;
  }
}

#services-intro {
  text-align: center;
}
#services-intro div {
  margin-bottom: 24px;
}
#services-intro h2 {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 30px;
  margin: 0;
}
@media screen and (max-width: 1000px) {
  #services-intro h2 {
    font-size: 25px;
  }
}
#services-intro p {
  font-size: 19px;
  margin: 5px;
  margin-bottom: 10px;
}
@media screen and (max-width: 1000px) {
  #services-intro p {
    font-size: 14px;
  }
}

#nav-line-create {
  height: 2px;
  background: linear-gradient(270deg, #FFFFFF 0.93%, black 53.45%, #FFFFFF 100.78%), black;
  margin: 0 32%;
}

.scroll-point {
  height: 1px;
}

.nav-line-last {
  margin-bottom: 34px;
}

#modal-nav-services-bar {
  z-index: 10;
  position: fixed;
  width: 300px;
  height: 100vh;
  top: 0;
  right: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
  transition: transform 1s;
  transform: translateX(36vh);
}
@media screen and (max-width: 1000px) {
  #modal-nav-services-bar {
    width: 200px;
  }
}
#modal-nav-services-bar.modal-services-open {
  transform: translateX(0px);
}
#modal-nav-services-bar h2 {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1.5em;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 0.215em;
  margin-top: 130px;
}
#modal-nav-services-bar p {
  color: #969696;
}

.nav-line-white {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0.93%, #FFFFFF 28.49%, #FFFFFF 53.45%, #FFFFFF 76.86%, rgba(255, 255, 255, 0) 100.78%);
  height: 2px;
}

.services-ul {
  text-transform: uppercase;
  font-size: 1em;
  list-style-type: none;
}
.services-ul li {
  margin: 66px 0;
  display: flex;
  align-items: center;
}
.services-ul a {
  color: rgba(255, 255, 255, 0.7);
  transition: all 1s;
}
.services-ul .circle svg {
  position: absolute;
  left: 200px;
  transform: translateY(-8px);
}
.services-ul .circle .outer-circle {
  opacity: 0;
  transition: all 1s;
  transform: scale(0.75);
  transform-origin: center;
}
.services-ul .circle .inner-circle {
  transition: all 1s;
  fill: rgba(0, 0, 0, 0);
}
.services-ul a.selected {
  color: white;
}
.services-ul a.selected .outer-circle {
  opacity: 1;
  transform: scale(1);
}
.services-ul a.selected .inner-circle {
  fill: white;
}

#error {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 520px;
  text-align: center;
  margin-bottom: 100px;
}
#error h1 {
  font-size: 120px;
  font-weight: normal;
  margin: 0;
}
#error h2 {
  font-weight: normal;
  font-size: 36px;
  margin: 0;
}
#error p {
  font-size: 18px;
  color: #969696;
}
#error #go-to-home-button {
  margin-top: 100px;
}
#error #go-to-home-button a {
  padding: 10px 60px;
}

/*# sourceMappingURL=style.css.map */