/*****************UNIVERSAL STYLING******************/
* {
  margin: 0;
  padding: 0;
  border: 0;
}

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

h1 {
  font-family: 'Grand Hotel', serif;
}

h2 {
  font-family: 'Cinzel', serif;
}

h3, h4, h5, h6, p {
  font-family: 'Nunito', sans-serif;
  line-height: 25px;
}

p {
  font-size: 1rem;
}

.p-link {
  color: #E17E73;
  text-decoration: none;
}

/********BACKGROUND IMG*******/
/* body {
background-image: url("../images/background.png");
background-color: #FFCCCC;
background-attachment: fixed;
background-size: cover;
opacity: 1;
transition: 0.7s opacity;
} */
/**************END UNIVERSAL STYLING******************/

/***********************HEADER***********************/
.top-container {
  background-color: #e17e723b;
  padding: 20px 0;
  text-align: center;
}

.header {
  padding: 10px 3%;
  background: #E17E73;
  color: #fff;
  z-index: 1;
}

header img {
  min-width: 200px;
  width: 100%;
  max-width: 250px;
  margin: auto;
}

.content {
  padding: 10px 0 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 94%;
}

.sticky + .content {
  padding-top: 102px;
}

.header-all {
  margin: 0 auto;
  text-align: center;
}

header nav ul {
  text-align: center;
}

header nav ul li {
  display: inline;
}

header nav a {
  color: white;
  text-decoration: none;
  font-size: 1.25rem;
  font-family: 'Cinzel', serif;
  margin: 0 2%;
  text-transform: uppercase;
}

header ul li a:hover {
  color: #0F4C81;
  font-weight: bold;
}

#active {
  color: #0F4C81;
}

.desktop-menu {
  display: none;
}
/******************END HEADER***********************/

/****************MAIN CONTAINER**********************/
.container {
  margin: 0 auto;
  max-width: 704px;
}

h1 {
  text-align: center;
  color: #E17E73;
  margin: 50px 2%;
  font-size: 3rem;
  line-height: 50px;
}
/************END MAIN CONTAINER**********************/

/*******************HAMBURGER MENU*******************/
.hamburger{
  background:none;
  line-height:24px;
  color:#fff;
  border:0;
  font-size:2em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  color:#fff;
  border:0;
  font-size:4em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1; text-align:center; font-size:12px; margin-top: -22px;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:10px 0 10px 0; border-bottom:#dddddd 1px solid;}
.menu li:hover{display: block; background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#0F4C81;}
.menu ul li a:hover {  color: #3399E5; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}
/***************END HAMBURGER MENU******************/

/***********************HOME************************/
.homephoto {
  text-align: center;
  padding: 10px 0;
}

#homekelly {
  width: 90%;
  max-width: 500px;
  box-shadow: 5px 5px 5px #0F4C81;
  /* border: 3px solid #0F4C81; */
  border-radius: 20px;
}

.homeintro {
  padding: 6px 4%;
}

.bold {
  font-weight: bold;
}

.home-icons {
  max-width: 100px;
  width: 95%;
}

.home-icons:hover {
  transform: rotateZ(-15deg);
}

.services {
  display: flex;
  flex-direction: column;
}

.service-box {
  border: #E17E73 2px solid;
  border-radius: 20px;
  margin: 10px auto;
  box-shadow: -5px 5px 5px #b7b6b6;
  max-width: 335px;
  width: 90%;
}

.service-box-div {
  padding: 20px 9%;
}

.design-box {
  background-color: #f1f1f1;
}

.service-box img {
  margin: 10px auto;
  display: block;
}

.services-h2 {
  margin: 10px 0 5px;
}
/*******************END HOME************************/

/*********************ABOUT*************************/
.container2 {
  max-width: 900px;
  width: 90%;
  margin: 0 auto 40px auto;
}

.categories {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.experience {
  padding: 0px 4% 15px 4%;
  margin: 10px 1.5%;
  max-width: 350px;
  border: #E17E73 2px solid;
  border-radius: 20px;
  box-shadow: -5px 5px 5px #b7b6b6;
}

.exp-proficient {
  background-color: #f1f1f1;
}

.prof-ul {
  display: flex;
}

.experience h2 {
  color: #0F4C81;
  text-align: center;
  padding-top: 15px;
}

.experience ul {
  list-style-type: none;
  margin: 10px 0 10px;
}

.experience ul li {
  font-family: 'Nunito', sans-serif;
  font-size: 1.1rem;
  padding-left: 25px;
  padding-bottom: 5px;
}

.cat-box {
  margin: 30px auto 0;
}

.aboutme-cover {
  background-color: #f1f1f1;
}

.aboutme-ps {
  background-color: #f1f1f1;
  padding: 25px 4% 25px 4%;
  margin: 0 auto 30px;
  max-width: 800px;
  width: 90%;
  font-size: 1rem;

}

#about-me {
  margin: 5px 0 20px;
}

.aboutme {
  padding-bottom: 10px;
}

.about-photos {
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width:100%;
}

.about-photo {
  width: 90%;
  max-width: 250px;
  margin: 4px auto 25px;
  display: block;
  box-shadow: 5px 5px 5px #02064A;
  border-radius: 20px;
}

/*******************END ABOUT***********************/

/*******************PORTFOLIO***********************/
.resume {
  padding: 2% 15px 2%;
  margin: 10px auto 30px;
  width: 700px;
  max-width: 81%;
  border: #E17E73 2px solid;
  border-radius: 20px;
  box-shadow: -5px 5px 5px #b7b6b6;
}

.resume ul {
  list-style-type: none;
  margin: 10px 0 10px;
}

.resume ul li {
  font-family: 'Nunito', sans-serif;
  font-size: 1.1rem;
  padding-left: 25px;
  padding-bottom: 5px;
}

.resume h2, .gallery h2 {
  color: #0F4C81;
  text-align: center;
  margin-bottom: 20px;
}

.gallery {
  text-align: center;
  z-index: 2;
}

.gallery-box {
  max-width: 1200px;
  width:100%;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  background-color: #f1f1f1;
  list-style: none;
}

.gallery-box li {
  flex-basis: 100%;
  -ms-flex: auto;
  width: 300px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  box-sizing: border-box;
}

.gallery-box li:nth-child(even) {
  background-color: #dcdcdc;
}

.gallery-box li h3 {
  color: #0F4C81;
}

.gallery-box h3 {
  margin-bottom: 10px;
}

.work-image {
  height: 300px;
  width: 300px;
  display: block;
  object-fit: cover;
  border: none;
  transition: transform .4s;
}

.gallery-box li:hover img{
  transform: scale(1.1);
  transform-origin: 50% 50%;
}

.work-link {
  display: inline-grid;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
}

.work-hover-text {
  opacity: 0;
  position: absolute;
  width: 300px;
  height: 300px;
  padding-top: 123px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  background: #2a3061;
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  text-align: center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

.work-link:hover .work-hover-text {
  opacity: 0.8;
}

.disclaimer {
  font-family: 'Nunito', sans-serif;
  margin: 30px auto 50px;
  line-height: 25px;
  padding: 0 9%;
}

/****************END PORTFOLIO**********************/

/*************PORTFOLIO PIECES**********************/
.port-piece-container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.header-info {
  display: inline-block;
  text-align: left;
}

.port-piece-container p {
  max-width: 700px;
  width: 90%;
  margin: 0 auto;
}

.piece-box {
  background-color: #f1f1f1;
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 40px;
  margin-bottom: 60px;
}

.tech {
  max-width: 550px;
  width: 90%;
  display: block;
  margin: 10px auto;
}

.piece-example {
  max-width: 480px;
  width: 90%;
  display: block;
  margin: 0 auto;
}

.social-media-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.social-media-section div {
  margin: 10px 3%;
}

.social-media-section h4 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.social-ad {
  box-shadow: 2px 2px 6px 2px #707070;
}

#travelvida-insta {
  max-width: 300px;
  width: 100%;
}

#travelvida-twitter {
  max-width: 400px;
  width: 100%;
}

#travelvida-facebook {
  max-width: 400px;
  width: 100%;
}

.travel-gif {
  margin: 40px auto 20px;
  max-width: 600px;
  width: 100%;
}

.travel-gif h4 {
  text-align: center;
  margin-bottom: 10px;
}

.travel-gif img {
  box-shadow: 2px 2px 6px 2px #707070;
}

.rif-box {
  padding-top: 0;
}

.booklet-mockup {
  margin: 10px auto;
  text-align: center;
}

#booklet {
  max-width: 1000px;
  width: 100%;
}

.rif-page {
  max-width: 400px;
  width: 100%;
  box-shadow: 2px 2px 6px 2px #707070;
}

.rif-spread {
  max-width: 800px;
  width: 100%;
  box-shadow: 2px 2px 6px 2px #707070;
}

.brunch-mockup {
  text-align: center;
}

#brunch-mockup {
  max-width: 750px;
  width: 100%;
}

.ck-style-box {
  padding-top: 40px;
}

.port-design-pieces-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.design-pieces-p {
  max-width: 700px;
  width: 100%;
  width: 90%;
  padding: 0 8%;
  margin: 0 auto;
}

.social-media-section p {
  text-align: center;
  padding-bottom: 10px;
}

.pieces-multiple {
  max-width: 1260px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin: 0 !important;
}

.pieces-multiple img {
  margin: 10px;
}

.final-piece {
  box-shadow: 2px 2px 6px 2px #707070;
}

.design-piece-section h4 {
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.colorized {
  display: block;
  text-align: center;
  margin-bottom: 15px;
}

.port-cards {
  max-width: 500px;
  width: 100%;
  box-shadow: 2px 2px 6px 2px #707070;
}

.portiko-style-guide {
  background-color: white;
  padding: 10px;
  display: block;
  max-width: 600px;
  width: 90%;
  margin: 0 auto 15px;
  box-shadow: 2px 2px 6px 2px #707070;
}

.portiko-box {
  background-color: #f1f1f1;
  margin-top: 20px;
  padding-top: 20px;
  margin-bottom: 60px;
}

.mockup-title {
  margin-top: 30px !important;
  margin-bottom: 20px !important;
}

.live-link {
  text-align: center;
  text-decoration: none;
  color: #0F4C81;
}

.live-link h2 {
  margin-top: 15px;
  margin-bottom: 10px;
}

.live-link:hover {
  color: #757677;
  font-weight: bold;
  box-shadow: 0 5px 0 0 #CAD6EF;
  -webkit-box-shadow: 0 5px 0 0 #CAD6EF;
  -moz-box-shadow: 0 5px 0 0 #CAD6EF;
}

.ccp-pages {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.ccp-pages p {
  text-align: left;
}

.ccp-page {
  margin: 10px;
}

.truck-spread {
  max-width: 700px;
  width: 100%;
  margin-bottom: 20px;
}

.skill-section {
  margin-top: 20px;
}

.skill {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
}

.skill h2 {
  margin-top: 15px;
  margin-bottom: 10px;
}

.skill img {
  margin: 0 auto;
}

.skill p {
  text-align: left;
}

.skill-link {
  text-align: center;
}

img.vera-d-page {
  max-width: 700px;
  width: 100%;
  box-shadow: 2px 2px 6px 2px #707070;
}

img.vera-m-page {
  max-width: 300px;
  width: 100%;
  box-shadow: 2px 2px 6px 2px #707070;
}

h5 {
  font-size: 15px;
}

.old-pages {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

.old-pages h2 {
  padding-top: 15px;
  margin-bottom: 10px;
}

.old-pages img {
  margin: 0 auto;
}

.old-p {
  text-align: left;
}
/*************END PORTFOLIO PIECES******************/

/*********************CONTACT***********************/
#letter {
  max-width: 175px;
  width: 100%;
  margin-right: 141px;
  display: none;
  float: right;
}

.contact-section {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.kelly-contact div {
  margin: 15px 6%;
  justify-content: left;
  display: flex;
}

.label_input_wrap {
  vertical-align: top;
  display: block;
}

.kelly-contact input{
  padding: 9px 1.1% 9px 9%;
  border-radius: 10px;
}

.kelly-contact input,
.kelly-contact textarea {
  border: 3px solid #0F4C81;
  font-size: .875rem;
}

.kelly-contact textarea {
  max-width: 600px;
  width: 90%;
  padding: 15px 4.1%;
  border-radius: 15px;
  font-family: 'Nunito', sans-serif;
}

.submit input {
  background: #0F4C81;
  color: white;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  letter-spacing: .15em;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 10px 20%;
  margin-bottom: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.submit input:hover {
  background-color: #CAD6EF;
  color: #02064A;
  border: 2px solid #0F4C81;
  font-weight: bold;
}
/********************END CONTACT********************/

/*********************FOOTER************************/

/*****STICKY FOOTER*****/
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}
/***END STICKY FOOTER***/

footer {
  background-color: #e17e723b;
  padding: 25px 0 10px 0;
  text-align: center;
}

.contact-footer {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 2rem;
  font-family: 'Grand Hotel', serif;
  text-decoration: none;
}

.contact-footer a{
  color: #0F4C81;
  text-decoration: none;
}

.contact-footer a:hover {
  color: #757677;
  font-weight: bold;
  box-shadow: 0 5px 0 0 #CAD6EF;
  -webkit-box-shadow: 0 5px 0 0 #CAD6EF;
  -moz-box-shadow: 0 5px 0 0 #CAD6EF;
}

footer img{
  height: 50px;
  width: auto;
  padding: 15px 1% 5px;
}
/*********************END FOOTER************************/

/*********BETWEEN 478 AND 717 MEDIA QUERY**************/
@media (min-width: 478px) and (max-width: 717px) {

  .about-photo {
    margin: 30px 110px 15px;
  }

}
/*******END BETWEEN 478 AND 717 MEDIA QUERY************/

/*************START 590 MEDIA QUERY *******************/
@media (min-width: 590px) {
  #letter {
    display: block;
  }

  .kelly-contact div {
    justify-content: center;
  }

  .name, .email, .subject {
    margin: 0px 0px 15px 0px !important;
  }
}
/***************END 590 MEDIA QUERY********************/

/*************START 650 MEDIA QUERY *******************/
@media(min-width: 650px) {
  .gallery-box li {
    flex-basis: 50%;
  }
}
/***************END 650 MEDIA QUERY********************/

/*********BETWEEN 478 AND 717 MEDIA QUERY**************/
@media (min-width: 650px) and (max-width: 949px) {
  .gallery-box li:nth-child(2), .gallery-box li:nth-child(3), .gallery-box li:nth-child(6), .gallery-box li:nth-child(7), .gallery-box li:nth-child(10), .gallery-box li:nth-child(11), .gallery-box li:nth-child(14), .gallery-box li:nth-child(15) {
    background-color: #dcdcdc !important;
  }
  .gallery-box li:nth-child(1), .gallery-box li:nth-child(4), .gallery-box li:nth-child(5), .gallery-box li:nth-child(8), .gallery-box li:nth-child(9), .gallery-box li:nth-child(12), .gallery-box li:nth-child(13) {
    background-color: #f1f1f1 !important;
  }
}
/*******END BETWEEN 478 AND 717 MEDIA QUERY************/

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

  .hamburger {
    display: none;
  }
  .cross {
    display: none;
  }
  .menu {
    display: none;
  }

  .desktop-menu {
    display: inline-block;
    width: 100%;
  }

  header ul li a:hover {
    box-shadow: 0 5px 0 0 #CAD6EF;
    -webkit-box-shadow: 0 5px 0 0 #CAD6EF;
    -moz-box-shadow: 0 5px 0 0 #CAD6EF;
  }

  .homephoto {
    float: left;
    padding: 0;
  }

  #homekelly {
    width: 400px;
    float: right;
    margin: 4px 31px 0px 10px;
  }

  .services {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0 80px;
  }

  .service-box {
    margin: 10px 1%;
  }

  .college-logo2 {
    order: -1;
  }

  .about-photo {
    margin: 4px auto 25px;
  }

  .aboutme-ps {
    column-count: 2;
    column-gap: 40px;
  }

}
/*************END 717 MEDIA QUERY *********************/

/*************START 913 MEDIA QUERY *******************/
@media(min-width: 913px) {
  .colorized {
    display: inline;
    margin: 0 5px;
  }
}
/*************END 913 MEDIA QUERY *********************/

/*************START 950 MEDIA QUERY *******************/
@media(min-width: 950px) {
  .gallery-box li {
    flex-basis: 33.33%;
  }
  .gallery-box li:nth-child(even) {
    background-color: #fff;
  }
}
/***************END 950 MEDIA QUERY********************/

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

  .design-box {
    background-color: #fff;
  }

  .coding-box, .ux-box {
    background-color: #f1f1f1;
  }

}