* {
  box-sizing: border-box;
}
html {
  background-color: #B0DDE4;
}
.topnav span.icon {
    color: #DF4C73;
}
.topnav .icon {
    display: none;
}
ul.contactinfo li {
    display: flex;
    align-items: center;
}
span.icon {
    text-align: center;
    padding: 24.5px 36px;
    text-decoration: none;
    font-size: 26px;
    font-family: 'Karla', sans-serif;
    font-weight: 500;
}
a.selectedpage {
  background-color: #286FB4;
  color: #fff !important;
}
.topnav img {
  width: 182px;
  height: 55px;
}
.thumbnail {
  height: 324px;
  width: 580px;
}
#cta div.buttons a {
    height: 54px;
}
#workbutton {
    margin-bottom: 25px;
}
#cta {
  height: calc(100vh - 78px);
  background-color: #B0DDE4;
  color: #151424;
  display: flex;
  align-items:center;
  justify-content:center;
}
div.ctatext {
  width: 90%;
  margin: 0 auto;
  max-width: 685px;
  height: calc(100vh - 78px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-height: 80%;
}
div.ctatext h1,
footer h4 {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 40px;
  text-align: center;
}
div.ctatext p.ctatitle {
  font-family: 'Spectral', serif;
  font-weight: 500;
  text-align: center;
  font-size: 32px;
  margin: 0
}
div.ctatext p,
footer p {
  font-family: 'Spectral', serif;
  font-weight: 400;
  text-align: center;
  font-size: 18px;
  line-height: 26px;
}
div.buttons {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 450px;
  width: 100%;
}
div.buttons a,
div.work a,
#about a.button {
  text-decoration: none;
  font-family: 'Karla', sans-serif;
  font-weight: 500;
  font-size: 32px;
  text-align: center;
  color: #151424;
  border: 3px solid #151424;
  border-radius: 8px;
  padding: 8px 25px;
}
span.pink {
  color: #a53754;
  font-weight: bold;
}
.button:hover,
#about a.button:hover,
#contact form #submit:hover {
  background-color: #DF4C73;
  color: #fff;
  transition: 0.75s ease;
  border: 3px solid #FFF;
  cursor: pointer;
}
#recent {
  background-color: #fff;
  padding-bottom: 2%;
}
div.banner {
  background-image: url("../img/recent_banner.png");
  color: #FFFFFF;
  padding: 5%;
}
div.banner h2 {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-size: 55px;
  line-height: 64px;
  text-align: center;
}
div.banner p {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 49px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.work {
  color: #151424;
}
.projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.project {
  width: 90%;
  max-width: 580px;
  margin: 32px auto;
}
.project img {
  width: 100%;
  max-width: 580px;
  height: auto;
}
.project p.projecttitle {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 30px;
}
.project p.projectdesc {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
}
div.work a,
#about a.button {
  margin: 0 auto;
  display: block;
  width: 264px;
}
div.work a.button {
    margin: 15px 3% 15px auto !important;
}
div.projects a {
  margin: 0;
  display: inline;
  width: 100%;
  text-align: left;
  border: none;
  padding: 0;
}
div.projects a:hover .project img {
  filter: saturate(200%);
  transition: 0.75s ease;
}
div.projects a:hover {
  color: #286FB4;
  transition: 0.75s ease;
}
#about {
  padding: 5%;
}
#about h2,
#contact h2 {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-size: 55px;
  line-height: 64px;
  color: #DF4C73;
  text-align: center;
  margin-bottom: 25px;
}
#about p {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
}
#about a.button {
  width: 175px;
  margin: 25px auto;
}
#contact {
  background-color: #fff;
  padding: 5%;
}
#contact .side {
  display: none;
}
#contact form label {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 30px;
  color: #151424;
}
#contact form input {
  width: 100%;
  height: 55px;
  padding-left: 5px;
  font-size: 20px;
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  margin-bottom: 25px;
  border: 3px solid #286FB4;
}
#contact form textarea {
  width: 100%;
  height: 300px;
  padding-left: 5px;
  font-size: 20px;
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  border: 3px solid #286FB4;
}
#contact #submit {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 37px;
  text-align: center;
  color: #151424;
  width: 250px;
  background: none;
  border: 3px solid #151424;
  border-radius: 5px;
  margin-top: 25px;
}
#contact form {
  max-width: 841px;
  margin: 0 auto;
}
#contact div.contactform {
  max-width: 841px;
  margin: 0 auto;
}
footer {
  padding: 15px 5%;
}
footer h4 {
  font-size: 55px;
}
footer ul,
#about ul,
#contact ul.socials {
  display: flex;
  justify-content: space-around;
  list-style: none;
  max-width: 450px;
  margin: 0 auto;
}
footer ul a,
#about ul a {
  color: #151424;
  text-decoration: none;
}
footer p {
  max-width: 720px;
  margin: 25px auto;
}
footer i,
#about i {
  font-size: 50px;
}
ul.socials i:hover,
footer ul i:hover {
  color: #DF4C73;
  transition: 0.75s ease;
  cursor: pointer;
}
#resumepage {
    margin-top: 0;
}
#resumepage img {
    width: 80%;
    max-width: 1020px;
    margin: 35px auto;
    display: block;
}

@media screen and (min-width: 550px) {
 div.ctatext p,
footer p {
  font-size: 22px;
  line-height: 33px;
}
div.ctatext {
  /* max-height: none; */
}
  #about h2 {
    text-align: left;
  }
  #about a.button {
    margin: 25px 0;
  }
  #about ul {
    margin: 0;
    justify-content: space-between;
  }
}

@media screen and (min-width: 750px) {
  #contact form .formleft,
  #contact form .formright {
    display: flex;
    justify-content: space-between;
  }
  #contact form .formleft div,
  #contact form .formright div {
    width: 48%;
  }
}

@media screen and (min-width: 900px) {
    div.projects a {
	    width: 30%
    }
}

@media screen and (min-width: 1300px) {
  #cta {
    background-image: url("../img/cta_background.webp");
    background-position: right;
    background-size: cover;
    justify-content: left;
    padding: 0 5%;
  }
  div.ctatext p.ctatitle {
    font-size: 38px;
 }
 div.ctatext h1, footer h4 {
    font-size: 72px;
}
div.ctatext p, footer p {
    font-size: 26px;
}
  #cta div.ctatext {
    margin: 0;
    max-width: 50%;
    justify-content: left;
  }
  div.ctatext p.ctatitle,
  div.ctatext h1,
  div.ctatext p {
    text-align: left;
  }
  div.buttons {
    margin: 0;
    justify-content: space-between;
    max-width: 450px;
  }
  #about {
    background-image: url("../img/about_background.webp");
    background-position: left;
    background-size: cover;
    display: flex;
    justify-content: right;
  }
  #about .abouttext {
    max-width: 575px;
  }
}

@media screen and (min-width: 1600px) {
  div.ctatext p.ctatitle {
    font-size: 48px;
  }
  div.ctatext h1 {
    font-size: 110px;
  }
  div.ctatext p {
    font-size: 32px;
    line-height: 49px;
  }
  #cta .ctatext {
    max-width: 775px;
  }
  #about .abouttext {
    max-width: 775px;
  }
  #contact {
    display: flex;
    padding: 0;
  }
  #contact .side {
    display: flex;
    flex-wrap: wrap;
  }
  #contact div.contactform {
    max-width: none;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #contact h2 {
    text-align: left;
    display: none;
  }
  #contact div.side {
    max-width: 700px;
    width: auto;
  }
  #contact div.blue {
    background-color: #286FB4;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 5%;
  }
  #contact div.blue p {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 700;
    font-size: 64px;
    line-height: 75px;
    color: #FFFFFF;
    text-align: center;
  }
  #contact div.pink {
    background-color: #a53754;
    width: 100%;
    color: #fff;
    font-family: 'Karla';
    font-style: normal;
    padding: 3% 7%;
  }
  #contact div.pink h3 {
    font-weight: 700;
    font-size: 55px;
    line-height: 64px;
  }
  #contact ul {
    list-style: none;
  }
  #contact ul.socials {
    justify-content: space-between;
    margin: 50px 0;
  }
  #contact ul.contactinfo li {
    margin-bottom: 15px;
  }
  #contact ul.contactinfo li i {
    margin-right: 20px;
  }
  #contact div.pink a {
    text-decoration: none;
  }
  #contact div.pink i {
    font-size: 50px;
    color: #fff;
    width: 50px;
  }
  #contact div.pink h3 {
    margin-bottom: 45px;
  }
  #contact form {
    width: 100%;
  }
}






@media screen and (min-width: 422px) {
  div.buttons a {
    margin-top: 0;
  }
}















/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
#myTopnav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}
body {
  max-width: 1950px;
  margin-top: 78px;
}

/* Add a background color to the top navigation */
.topnav {
  background-color: #FFFFFF;
  overflow: hidden;
  border-bottom: 2px solid #151424;
}
div.topnav a:nth-child(1) {
  padding: 8.5px 12px;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 18px;
}
div.topnav a:nth-child(1) span {
  font-family: 'Spectral', serif;
  font-size: 14px;
  font-weight: 500;
}
/* Style the links */
.topnav a {
  float: left;
  display: block;
  color: #151424;
  text-align: center;
  padding: 24.5px 36px;
  text-decoration: none;
  font-size: 26px;
  font-family: 'Karla', sans-serif;
  font-weight: 500;
}
/* Change the color of links on hover */
.topnav a:hover {
  background-color: #286FB4;
  transition: 0.75s ease;
  color: #fff;
}
.topnav a.icon {
  color: #DF4C73;
}
.topnav a.icon:hover {
  color: #DF4C73;
  background-color: transparent;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1022px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav span.icon {
    float: right;
    display: block;
}
}

/* 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: 1022px) {
  .topnav.responsive {
    position: fixed;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive span.icon {
    position: absolute;
    right: 0;
    top: 0;
}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

@media screen and (min-width: 1022px) {
  div.topnav a:nth-child(1) {
    float: left;
  }
  
  div.topnav a:not(:nth-child(1)) {
    float: right;
  }
}