* {
  margin: 0;
  padding: 0;
  border: 0;
}

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
  display: block;
}

html {
  overflow-x: hidden;
}

/************************* STICKY FOOTER  *************************/
.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
}

.site-content {
  flex: 1;
}

/************************* STICKY FOOTER  *************************/
/* Kansasnew SemiBold
		font-family: kansasnew, serif;
		font-weight: 600;
		font-style: normal; */

  /* font-family: filson-pro, sans-serif;
  font-weight: 200;
  font-style: normal; */
  /* font-family: filson-pro, sans-serif;
  font-weight: 400;
  font-style: normal; */
  /* font-family: filson-pro, sans-serif;
  font-weight: 700;
  font-style: normal; */

/* pink #f6ad9b
cream #fcf1e7
dark gray #292324
red #f04c1f
medium blue #3c7cc3 */
/* light blue #53cbdc
yellow #f0b32a */

body {
  background-color: #fcf1e7;
  font-family: filson-pro, sans-serif;
  font-weight: 200;
  font-style: normal;
  color: #292324;
  overflow-x: hidden;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: fixed;
  z-index: 99;
  background-color: #fcf1e7;
  height: 80px;
  width: 100%;
  border-bottom: 4px solid rgb(0 0 0 / 3%);
}

header img {
  width: 75px;
  padding: 10px 0 0 10px;
}

.logo {
  display: flex;
  align-items: center;
}

h5 {
  display: none;
}

.desktop-nav {
  display: none;
}

/***************************HAMBURGER MENU STYLES*******************************/
.bg-cover {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #292324;
  z-index: 0;
  transition: all 350ms ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.reveal {
  opacity: .85;
  display: block;
  pointer-events: auto;
  visibility: visible;
}

.hamburger-shell {
  margin: 0;
  position: fixed;
  overflow: hidden;
  width: 65px;
  height: 75px;
  overflow: auto;
  left: calc(100% - 85px);
  top: 0;
  cursor: pointer;
  padding: 0;
  background: transparent;
  border: none;
}

.top, .middle {
  position: absolute;
  width: 62px;
  height: 10px;
  background-color: #f04c1f;
  opacity: 70%;
  transition: all 350ms ease-in-out;
  top: 20px;
}

.middle {
  top: 40px;
}

#menu {
  position: fixed;
  left: calc(100% - 292px);
  top: 10px;
  color: #292324;
  display: none;
  margin: 120px 5%;
  text-decoration: none;
  font-weight: 300;
  font-size: 1.5rem;
  color: #fcf1e7;
  padding: 24px;
  width: 200px;
  text-align: right;
}

/***************************** NAV UNDERLINE EFFECT *****************************/
.mobile-link {
  list-style-type: none;
  padding-top: 40px;
}

.mobile-link a {
  color: #fcf1e7;
  font-weight: 400;
}

.mobile-link>a {
  position: relative;
  text-decoration: none;
}

.mobile-link>a:hover {
  transition: all 0.3s ease-in-out 0s;
}

.mobile-link>a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: -13px;
  left: 0;
  background-color: #f6ad9b;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.mobile-link>a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

/***************************** NAV UNDERLINE EFFECT *****************************/
.menu-open .top {
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  top: 30px;
  background-color: #f6a894;
  height: 10px;
  opacity: 100%;
}

.menu-open .middle {
  transform: rotate(-225deg);
  -webkit-transform: rotate(-225deg);
  top: 30px;
  background-color: #f6a894;
  height: 10px;
  opacity: 100%;
}

/*************************** HAMBURGER MENU STYLES *******************************/
/**** HOME SECTION ****/

#home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh
}

#home h1 {
  padding-top: 230px;
}

#home h1, #home h2 {
  line-height: 120%;
  font-family: filson-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.8rem;
  text-align: center;
  z-index: 75;
}

.home-shapes-mobile {
  width: 100%;
  max-width: 757px;
  z-index: -10;
  margin-top: auto;
  margin-bottom: auto;
}

.home-text {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  top: 0;
  padding: 0 5%;
}

.home-shapes {
  display: none;
}

/**** ABOUT SECTION ****/
#about {
  padding: 100px 5% 50px;
}

h4 {
  font-family: filson-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  padding: 10px 0;
  margin-bottom: 40px;
  font-size: 1.8rem;
  display: inline-block;
  border-bottom: 10px solid rgba(240, 179, 42, .7);
}

.about-pic {
  width: 100%;
  max-width: 430px;
}

figure {
  text-align: center;
}

figcaption {
  padding-top: 10px;
  font-size: .9rem;
}

#about h3 {
  font-family: filson-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  padding-top: 45px;
  font-size: 1.8rem;
}

.pink-lines {
  padding: 20px 0;
}

#about p {
  font-size: 1rem;
  padding-bottom: 12px;
}

/**** WORK SECTION ****/
#work {
  padding: 100px 5%;
}

.work-container {
  padding: 20px 20px 60px;
  background-color: #292324;
  border-radius: 15px;
}

/**** CONTACT SECTION ****/
#contact {
  padding: 100px 5% 100px;
  color: #292324;
  margin: 0 auto;
}

#contact h3 {
  font-family: filson-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2rem;
  text-align: center;
  padding-bottom: 10px;
  }

.contact-shapes {
  display: none;
}

.contact-shapes-line {
  width: 90%;
  max-width: 1644px;
}

.contact-content-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#contact p {
  font-size: 1rem;
  padding-bottom: 20px;
  text-align: center;
}

.contact-form {
  border-radius: 5px;
  color: #292324;
  font-family: filson-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  padding-top: 30px;
}

input:focus, textarea:focus {
    outline: none !important;
  }

.label_input_wrap {
  display: block;
  margin-bottom: 5px;
  font-size: 1rem;
  font-weight: 400;
}

.input-section {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.input-section input {
  border-radius: 4px;
  height: 35px;
  padding: 2%;
  width: 96%;
  margin: 0 auto;
  font-family: filson-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
}

textarea {
  border-radius: 4px;
  padding: 2%;
  width: 96%;
  height: 140px;
  font-family: filson-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
}

label {
  font-size: 1rem;
  font-weight: 600;
}

.submit-button {
  text-align: center;
}

.submit {
  margin-top: 20px;
  text-align: center;
}

.submit input {
  cursor: pointer;
  background-color: #f04c1f;
  opacity: .75;
  color: white;
  padding: 9px 24px;
  border-radius: 5px;
  font-size: 1.2rem;
  letter-spacing: .05rem;
  font-family: filson-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 250px;
  height: 55px;
  margin: 0 auto;
  transition: .3s;
}

.submit input:hover {
  opacity: 1;
  transition: .3s;
}
/**** FOOTER ****/
footer {
  text-align: center;
  color: #fcf1e7;
  background-color: #292324;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

footer p {
  padding: 10px 15px;
}

/************************************* START 380PX MEDIA QUERY *************************************/
@media (min-width: 380px) {

  /**** HOME SECTION ****/
  .home-shapes-mobile {
    display: none;
  }

  .home-shapes {
    display: block;
    z-index: -10;
    width: 90%;
    min-width: 400px;
    max-width: 635px;
    margin: 0 auto;
  }

  /**** ABOUT, WORK, CONTACT SECTIONS ****/
  h3, h4 {
    font-size: 2.2rem;
  }

  p {
    line-height: 1.3rem;
    font-size: 1rem;
  }
}

/************************************* END 380PX MEDIA QUERY *************************************/
/************************************* START 500PX MEDIA QUERY *************************************/
@media (min-width: 500px) {
  /**** HEADER ****/

  h5 {
    display: inline-block;
    font-family: filson-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2.2rem;
    padding-left: 5px;
    color: #292324;
  }

  .logo a {
    text-decoration: none;
  }

  /**** CONTACT SECTION ****/
  .form-flex-top, .form-flex-bottom {
    display: flex;
    align-content: space-around;
  }

  .input-section {
    display: block;
    width: 100%;
  }

  .first-name, .email {
    padding-right: 15px;
  }

  .last-name, .telephone {
    padding-left: 15px;
  }

  #contact h3 {
    font-size: 2.7rem;
    text-align: center;
    padding-bottom: 10px;
  }

  #contact p {
    padding-top: 20px;
  }

  p {
    font-size: 1.1rem;
  }

}
/************************************* END 500PX MEDIA QUERY *************************************/
/************************************* START 720PX MEDIA QUERY *************************************/
@media (min-width: 720px) {

  /**** HOME SECTION ****/
  #home h1, #home h2 {
    font-size: 3.2rem;
  }
}

/************************************* END 720PX MEDIA QUERY *************************************/
/************************************* START 850PX MEDIA QUERY *************************************/
@media (min-width: 850px) {
  .container {
    max-width: 1000px;
    margin: 0 auto;
  }

  /* DESKTOP-NAV STYLES START*/
  .hamburger-shell {
    display: none;
  }

  .desktop-nav {
    display: block;
    text-align: right;
    padding-top: 23px;
    font-size: 1.3rem;
  }

  .desktop-nav ul li {
    display: inline-block;
    margin-right: 45px;
  }

  .desktop-nav ul li a {
    color: #292324;
    text-decoration: none;
    font-weight: 400;
  }

  /***************************** NAV UNDERLINE EFFECT *****************************/
  .link>a {
    position: relative;
    color: #292324;
    text-decoration: none;
  }

  .link>a:hover {
    color: #292324;
    transition: all 0.3s ease-in-out 0s;
  }

  .link>a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: -13px;
    left: 0;
    background-color: #f6ad9b;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }

  .link>a:hover::before {
    visibility: visible;
    transform: scaleX(1);
  }

  /***************************** NAV UNDERLINE EFFECT *****************************/
  /* DESKTOP-NAV STYLES END*/

  /**** ABOUT SECTION ****/
  #about {
    max-width: none;
  }

  .about-flex {
    display: flex;
  }

  .about-flex-image {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .about-flex-text {
    padding-left: 5%;
    flex: 3;
  }

  .about-pic {
    min-width: 315px;
  }

  #about h3 {
    padding: 0;
    font-size: 2rem;
  }

  .pink-lines {
    padding: 20px 0;
    width: 38%;
  }

  /**** CONTACT SECTION ****/

  .contact-flex {
    display: flex;
    align-items: flex-start;
  }

  .contact-content-flex {
    flex: 1;
    padding-right: 24px;
    padding-top: 27px;
  }

  #contact h3 {
    font-size: 2.3rem;
  }

  #contact p {
    padding-top: 5px;
  }

  .contact-shapes-line {
    width: 70%;
    display: none;
  }

  .contact-shapes {
    display: block;
    width: 90%;
    max-width: 1079px;
  }

  .contact-form {
    flex: 1;
  }

  /* #contact h3, #contact p {
    text-align: left;
  } */

  .submit-button {
    text-align: left;
  }
}
/************************************* END 850PX MEDIA QUERY *************************************/
/************************************* START 1000PX MEDIA QUERY
*************************************/
@media (min-width: 1000px) {
  #contact h3 {
    font-size: 2.7rem;
  }
}
/************************************* END 1000PX MEDIA QUERY
*************************************/