/*!
    Title: Dev Portfolio Template
    Version: 1.2.2
    Last Change: 03/25/2020
    Author: Ryan Fitzgerald
    Repo: https://github.com/RyanFitzgerald/devportfolio-template
    Issues: https://github.com/RyanFitzgerald/devportfolio-template/issues

    Description: This file contains all the styles associated with the page
    that don't come from third party libraries. This file gets compiled using
    Gulp and send to the /css folder which is then loaded on the page.
*/
/*
    File Contents:

        1. Variables
        2. Mixins
        3. Global Styles
        4. Lead Styles
        5. About Styles
        6. Experience Styles
        7. Education Styles
        8. Project Styles
        9. Skills Styles
        10. Contact Styles
        11. Optional Section Styles
        12. Media Queries
*/
/*
    ------------------------
    ----- 1. Variables -----
    ------------------------
*/
/*
    ---------------------
    ----- 2. Mixins -----
    ---------------------
*/
/*
    ----------------------------
    ----- 3. Global Styles -----
    ----------------------------
*/
body {
  font-family: "Lato", sans-serif;
  font-size: 16px;
}
body.active {
  overflow: hidden;
  z-index: -1;
}
body b {
  color: #217100;
}
body a {
  color: #217100;
  text-decoration: underline;
}

.no-js #experience-timeline > div {
  background: #ffe;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #dcd9d9;
}
.no-js #experience-timeline > div h3 {
  font-size: 1.5em;
  font-weight: 300;
  color: #374054;
  display: inline-block;
  margin: 0;
}
.no-js #experience-timeline > div h4 {
  font-size: 1.2em;
  font-weight: 300;
  color: #7e8890;
  margin: 0 0 15px 0;
}
.no-js #experience-timeline > div p {
  color: #74808a;
  font-size: 0.9em;
  margin: 0;
}
.no-js #experience-timeline:before, .no-js #experience-timeline:after {
  content: none;
}

@keyframes dropHeader {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-duration: 0.75s;
}
header ul {
  display: inline-block;
  background: #ffe;
  text-align: center;
  padding: 10px;
  margin: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
header li {
  display: inline-block;
}
header a {
  display: block;
  color: #217100;
  padding: 10px;
}
header a:hover {
  color: #123e00;
  text-decoration: none;
  background: #eee;
  border-radius: 4px;
}
header a:focus {
  color: #217100;
  text-decoration: none;
}
header.active {
  display: block;
}
header.sticky {
  position: fixed;
  z-index: 999;
}

#menu.active {
  display: block;
}
#menu a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}

#mobile-menu-open {
  display: none;
  cursor: pointer;
  position: fixed;
  right: 15px;
  top: 10px;
  color: #217100;
  font-size: 1.5em;
  z-index: 20;
  padding: 0 7px;
  border-radius: 4px;
  background: #ffe;
}

#mobile-menu-close {
  display: none;
  text-align: right;
  width: 100%;
  background: #ffe;
  font-size: 1.5em;
  padding-right: 15px;
  padding-top: 10px;
  cursor: pointer;
  color: #217100;
}
#mobile-menu-close span {
  font-size: 0.5em;
  text-transform: uppercase;
}
#mobile-menu-close i {
  vertical-align: middle;
}

footer {
  padding: 50px 0;
}

.copyright {
  padding-top: 20px;
}
.copyright p {
  margin: 0;
  color: #74808a;
}

.top {
  text-align: center;
}
.top span {
  cursor: pointer;
  display: block;
  margin: 15px auto 0 auto;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 3px solid #b9bfc4;
  text-align: center;
}
.top i {
  color: #74808a;
}

.social {
  text-align: right;
}
.social ul {
  margin: 5px 0 0 0;
  padding: 0;
}
.social li {
  display: inline-block;
  font-size: 1.25em;
  list-style: none;
}
.social a {
  display: block;
  color: #74808a;
  padding: 10px;
}
.social a:hover {
  color: #217100;
}

.btn-rounded-white {
  display: inline-block;
  color: #fff;
  padding: 15px 25px;
  border: 3px solid #fff;
  border-radius: 30px;
  transition: 0.5s ease all;
}
.btn-rounded-white:hover {
  color: #217100;
  background: #fff;
  text-decoration: none;
}

.download-button {
  text-decoration: none;
  font-weight: bold;
}

.shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.shadow-large {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.15);
}

.heading {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 300;
  margin: 0 0 30px 0;
}
.heading:after {
  position: absolute;
  content: "";
  top: 100%;
  height: 1px;
  width: 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #217100;
}

.background-alt {
  background: #f2f2f5;
}

/*
    --------------------------
    ----- 4. Lead Styles -----
    --------------------------
*/
#lead {
  position: relative;
  height: 100vh;
  min-height: 500px;
  max-height: 1080px;
  background: url(../images/lead-bg.jpg);
  background-size: cover;
  padding: 15px;
  overflow: hidden;
}

#lead-image-wrapper {
  padding-right: 30px;
}

#lead-image {
  background-image: url("../images/lead-image.jpg");
  width: 200px;
  height: 200px;
  background-size: cover;
  border-radius: 250px;
  border: 5px solid #fff;
}

#lead-content {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
}
#lead-content h1, #lead-content h2 {
  margin: 0;
}
#lead-content h1 {
  color: #fff;
  font-weight: 900;
  font-size: 5em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 0.9em;
}
#lead-content h2 {
  color: #46f100;
  font-weight: 500;
  font-size: 2.25em;
  margin-bottom: 15px;
}

#lead-content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#lead-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(18, 62, 0, 0.6);
  z-index: 1;
}

#lead-down {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
  bottom: 15px;
  color: #fff;
}
#lead-down span {
  cursor: pointer;
  display: block;
  margin: 0 auto;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 3px solid #46f100;
  text-align: center;
}
#lead-down i {
  animation: pulsate 1.5s ease;
  animation-iteration-count: infinite;
  padding-top: 5px;
}

@keyframes pulsate {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
/*
    ---------------------------
    ----- 5. About Styles -----
    ---------------------------
*/
#about {
  padding: 75px 15px;
  border-bottom: 1px solid #dcd9d9;
}
#about h2 {
  color: #374054;
}
#about p {
  color: #74808a;
  margin: 0 0 30px 0;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 37px;
}

/*
    --------------------------------
    ----- 6. Experience Styles -----
    --------------------------------
*/
#experience {
  padding: 50px 15px;
  text-align: center;
  border-bottom: 1px solid #dcd9d9;
}
#experience h2 {
  color: #374054;
}

#experience-timeline {
  margin: 30px auto 0 auto;
  position: relative;
  max-width: 1000px;
}
#experience-timeline:before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 303px;
  right: auto;
  height: 100%;
  width: 3px;
  background: #217100;
  z-index: 0;
}
#experience-timeline:after {
  position: absolute;
  content: "";
  width: 3px;
  height: 40px;
  background: #217100;
  background: linear-gradient(to bottom, #217100, rgba(33, 113, 0, 0));
  top: 100%;
  left: 303px;
}

ul.highlights li {
  list-style: circle;
  color: #74808a;
}

ul.tech-stack {
  display: flex;
  flex-wrap: wrap;
}
ul.tech-stack li {
  background-color: #217100;
  color: #fff;
  padding: 5px 10px;
  border-radius: 100px;
  list-style: none;
  margin: 0 5px 10px 0;
  cursor: default;
  line-break: strict;
}

.vtimeline-content {
  margin-left: 350px;
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 15px;
  border-radius: 3px;
  text-align: left;
}
.vtimeline-content h3 {
  font-size: 1.5em;
  font-weight: 300;
  color: #374054;
  display: inline-block;
  margin: 0;
}
.vtimeline-content h4 {
  font-size: 1.2em;
  font-weight: 300;
  color: #7e8890;
  margin: 0 0 15px 0;
}
.vtimeline-content p {
  color: #74808a;
  font-size: 0.9em;
  margin: 0;
}

.vtimeline-point {
  position: relative;
  display: block;
  vertical-align: top;
  margin-bottom: 30px;
}

.vtimeline-icon {
  position: relative;
  color: #fff;
  width: 50px;
  height: 50px;
  background: #217100;
  border-radius: 50%;
  float: left;
  z-index: 99;
  margin-left: 280px;
}
.vtimeline-icon i {
  display: block;
  font-size: 2em;
  margin-top: 10px;
}

.vtimeline-date {
  width: 260px;
  text-align: right;
  position: absolute;
  left: 0;
  top: 10px;
  font-weight: 300;
  color: #374054;
}

/*
    -------------------------------
    ----- 7. Education Styles -----
    -------------------------------
*/
#education {
  padding: 50px 15px 20px 15px;
  border-bottom: 1px solid #dcd9d9;
  text-align: center;
}
#education h2 {
  color: #374054;
  margin-bottom: 50px;
}

.education-block {
  max-width: 700px;
  margin: 0 auto 30px auto;
  padding: 15px;
  border: 1px solid #dcd9d9;
  text-align: left;
}
.education-block h3 {
  font-weight: 500;
  float: left;
  margin: 0;
  color: #374054;
}
.education-block span {
  color: #74808a;
  float: right;
}
.education-block h4 {
  color: #74808a;
  clear: both;
  font-weight: 500;
  margin: 0 0 15px 0;
}
.education-block p, .education-block ul {
  margin: 0;
  color: #74808a;
  font-size: 0.9em;
}
.education-block ul {
  padding: 0 0 0 15px;
}

/*
    -------------------------------
    ----- 8. Project Styles -----
    -------------------------------
*/
#projects {
  padding: 50px 15px;
  border-bottom: 1px solid #dcd9d9;
  text-align: center;
}
#projects h2 {
  color: #374054;
  margin-bottom: 50px;
}

.project {
  position: relative;
  max-width: 900px;
  margin: 0 auto 30px auto;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  text-align: left;
}

.project-image {
  float: left;
}
.project-image img {
  max-width: 300px;
}

.project-info {
  position: absolute;
  top: 0;
  margin-left: 300px;
  padding: 15px;
}
.project-info h3 {
  font-size: 1.5em;
  font-weight: 300;
  color: #374054;
  margin: 0 0 15px 0;
}
.project-info h4 {
  color: #217100;
  font-weight: bold;
  text-transform: uppercase;
}
.project-info h3 + h4 {
  margin-top: -10px;
}
.project-info p {
  color: #74808a;
  margin: 0 0 15px 0;
  font-size: 0.9em;
}
.project-info .key-features {
  display: flex;
  flex-wrap: wrap;
}
.project-info .key-features li {
  background-color: #217100;
  color: #fff;
  padding: 5px 10px;
  border-radius: 100px;
  list-style: none;
  margin: 0 5px 10px 0;
  cursor: default;
  line-break: strict;
}

.no-image .project-info {
  position: relative;
  margin: 0;
  padding: 30px 15px;
  transform: none;
}

#more-projects {
  display: none;
}

/*
    -------------------------------
    ----- 9. Skills Styles -----
    -------------------------------
*/
#skills {
  padding: 50px 15px;
  text-align: center;
}
#skills h2 {
  color: #374054;
  margin-bottom: 50px;
}
#skills ul {
  display: block;
  margin: 0 auto;
  padding: 0;
  max-width: 800px;
}
#skills li {
  display: inline-block;
  margin: 7px;
  padding: 5px 10px;
  color: #374054;
  background: #e4e4ea;
  list-style: none;
  cursor: default;
  font-size: 1.2em;
}
#skills li.good, #skills li.okay {
  border: 3px solid;
}
#skills li.good {
  border-color: #217100;
}
#skills li.okay {
  border-color: #b9a700;
}

/*
    -------------------------------
    ----- 10. Contact Styles -----
    -------------------------------
*/
#contact {
  padding: 50px 15px;
  background: #217100;
  text-align: center;
}
#contact h2 {
  margin: 0 0 15px 0;
  color: #fff;
  font-weight: 500;
}
#contact ul {
  display: flex;
  align-content: center;
  justify-content: center;
  color: #fff;
  margin-right: 30px;
}
#contact ul li {
  list-style: none;
  margin: 10px;
}

#contact-form {
  max-width: 500px;
  margin: 0 auto;
}
#contact-form input, #contact-form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: none;
  margin-bottom: 10px;
  background: #0b2500;
  color: #fff;
  transition: 0.5s ease all;
}
#contact-form input::-webkit-input-placeholder, #contact-form textarea::-webkit-input-placeholder {
  color: #fff;
}
#contact-form input:-moz-placeholder, #contact-form textarea:-moz-placeholder {
  color: #fff;
  opacity: 1;
}
#contact-form input::-moz-placeholder, #contact-form textarea::-moz-placeholder {
  color: #fff;
  opacity: 1;
}
#contact-form input:-ms-input-placeholder, #contact-form textarea:-ms-input-placeholder {
  color: #fff;
}
#contact-form input:focus, #contact-form textarea:focus {
  outline: none;
  background: black;
}
#contact-form textarea {
  height: 150px;
  resize: none;
}
#contact-form button {
  display: block;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 5px 10px;
  border: none;
  color: #217100;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: 0.5s ease all;
}
#contact-form button:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/*
    ---------------------------------------
    ----- 11. Principle Section Styles -----
    ---------------------------------------
*/
#principles .principle-description {
  max-width: 840px;
  margin: 60px auto;
  font-size: 17px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgb(220, 217, 217);
  text-align: left;
}

body.principle-page-body {
  padding-top: 80px;
}

header.principles-header-bar {
  background: #217100;
  height: 80px;
}

.principle-item h3.principle-title, .principle-item h4.principle-title {
  text-transform: uppercase;
  font-weight: bold;
  color: #217100;
}
.principle-item h3.principle-title.in-progress, .principle-item h4.principle-title.in-progress {
  color: #b9a700;
}
.principle-item p.principle-content {
  font-size: 18px;
}
.principle-item ul.principle-content {
  font-size: 18px;
  color: #74808a;
}
.principle-item ol.principle-content-ab {
  font-size: 18px;
  color: #74808a;
  list-style: lower-alpha;
}
.principle-item ul li {
  font-size: 16px;
}

/*
    ---------------------------------------
    ----- 12. Optional Section Styles -----
    ---------------------------------------
*/
.optional-section {
  padding: 50px 15px;
  text-align: center;
  border-top: 1px solid #dcd9d9;
}
.optional-section h2 {
  color: #374054;
}

.optional-section-block {
  max-width: 700px;
  margin: 0 auto 30px auto;
  padding: 30px;
  border: 1px solid #dcd9d9;
  background: #fff;
  text-align: left;
}
.optional-section-block h3 {
  font-weight: 500;
  margin: 0 0 15px 0;
  color: #374054;
}
.optional-section-block h4 {
  color: #74808a;
  clear: both;
  font-weight: 500;
  margin: 0 0 15px 0;
}
.optional-section-block p, .optional-section-block ul {
  margin: 0 0 15px 0;
  color: #74808a;
  font-size: 0.9em;
}
.optional-section-block ul {
  padding: 0 0 0 15px;
}

#greenhaus {
  padding: 50px 15px;
  border-bottom: 1px solid #dcd9d9;
  text-align: center;
}
#greenhaus h2 {
  color: #374054;
  margin-bottom: 50px;
}
#greenhaus .description {
  max-width: 600px;
  margin: 0 auto;
}
#external-links {
  padding: 50px 15px;
  border-bottom: 1px solid #dcd9d9;
  text-align: center;
}
#external-links .item-wrapper {
  display: flex;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}
#external-links .item {
  margin: 30px 15px;
}
#external-links .item img {
  height: 30px;
}

/*
    -----------------------------
    ----- Media Queries -----
    -----------------------------
*/
@media only screen and (max-width: 750px) {
  #experience-timeline:before, #experience-timeline:after {
    left: 23px;
  }
  .vtimeline-date {
    width: auto;
    text-align: left;
    position: relative;
    margin-bottom: 15px;
    display: block;
    margin-left: 70px;
  }
  .vtimeline-icon {
    margin-left: 0;
  }
  .vtimeline-content {
    margin-left: 70px;
  }
}
@media only screen and (max-width: 1025px) {
  #lead {
    height: auto;
    min-height: auto;
    max-height: auto;
    padding: 100px 15px;
  }
  #lead-content {
    position: relative;
    transform: none;
    left: auto;
    top: auto;
  }
  #lead-content h1 {
    font-size: 3em;
  }
  #lead-content h2 {
    font-size: 1.75em;
  }
  #lead-content #lead-image-wrapper {
    width: 100%;
    text-align: center;
  }
  #lead-content #lead-image-wrapper #lead-image {
    display: inline-block;
    margin-bottom: 30px;
  }
  #lead-content #lead-content-wrapper {
    width: 100%;
  }
  #about {
    text-align: center;
  }
  #about p {
    text-align: left;
  }
}
@media only screen and (max-width: 768px) {
  header {
    position: fixed;
    display: none;
    z-index: 999;
    animation: none;
    bottom: 0;
    height: 100%;
  }
  #mobile-menu-open, #mobile-menu-close {
    display: block;
  }
  #menu {
    height: 100%;
    overflow-y: auto;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
  }
  #menu li {
    display: block;
    margin-bottom: 10px;
  }
  #lead-content {
    flex-wrap: wrap;
  }
  #lead-content h1 {
    font-size: 2em;
  }
  #lead-content h2 {
    font-size: 1.3em;
  }
  #lead-content a {
    padding: 10px 20px;
  }
  #lead-content #lead-image-wrapper {
    width: 100%;
    text-align: center;
  }
  #lead-content #lead-image-wrapper #lead-image {
    display: inline-block;
    margin-bottom: 30px;
  }
  #lead-content #lead-content-wrapper {
    width: 100%;
  }
  #lead-down {
    display: none;
  }
  .education-block h3, .education-block span {
    float: none;
  }
  .project-image {
    display: none;
  }
  .project-info {
    position: relative;
    margin: 0;
    padding: 30px 15px;
    top: auto;
    transform: none;
  }
  footer {
    text-align: center;
  }
  .social {
    text-align: center;
  }
}
@media only screen and (max-width: 480px) {
  #lead-content #lead-image-wrapper {
    display: none;
  }
  #lead-content h1 {
    font-size: 1.5em;
  }
  #lead-content h2 {
    font-size: 1em;
  }
  #lead-content a {
    font-size: 0.9em;
    padding: 5px 10px;
  }
}

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