/*
    File Contents:

        1. Variables
        2. Global Styles
        3. Lead Styles
        4. About Styles
        5. Experience Styles
        6. Education Styles
        7. Project Styles
        8. Skills Styles
        9. Contact Styles
        10. Optional Section Styles
        11. Media Queries
*/
/*
    ------------------------
    ----- 1. Variables -----
    ------------------------
*/
.theme-light,
.theme-dark {
  --base-color: hsl(204.1, 69.9%, 53.1%);
  --base-color-hover: hsl(204.1, 69.9%, 43.1%);
  --base-color-rgb: 52, 152, 219;
  --base-color-hover-rgb: 33, 125, 187;
  --darken-base-color-15: hsl(204.1, 69.9%, 38.1%);
  --darken-base-color-25: hsl(204.1, 69.9%, 28.1%);
  --lighten-base-color-25: hsl(204.1, 69.9%, 78.1%);
  --lighten-text-25: hsl(var(--text-c1), calc(var(--text-c2) + 25%));
  --darken-background-alt-5: hsl(
    var(--background-alt-c1),
    calc(var(--background-alt-c2) - 5%)
  );
  --rgba-base-color-0: rgba(var(--base-color-rgb), 0);
  --rgba-base-color-hover-0-8: rgba(var(--base-color-hover-rgb), 0.8);
}
/*
    Light Theme
*/
.theme-light {
  --white: #fff;
  --background: var(--white);
  --background-alt: hsl(240, 13%, 95.5%);
  --background-alt-c1: 240, 13%;
  --background-alt-c2: 95.5%;
  --border: #dcd9d9;
  --heading: #374054;
  --text: hsl(207.3, 8.7%, 49.8%);
  --text-c1: 207.3, 8.7%;
  --text-c2: 49.8%;
  --a-hover-color: #eee;
  --vtimeline-date-color: #374054;
}
/*
    Dark Theme 
*/
.theme-dark {
  --white: #202020;
  --background: var(--white);
  --background-alt: hsl(0, 0%, 9.4%);
  --background-alt-c1: 0, 0%;
  --background-alt-c2: 9.4%;
  --border: #666666;
  --heading: #dbdbdb;
  --text: hsl(207.3, 8.7%, 49.8%);
  --text-c1: 207.3, 8.7%;
  --text-c2: 49.8%;
  --a-hover-color: #303030;
  --vtimeline-date-color: #a3a3a3;
}
/*
    ----------------------------
    ----- 3. Global Styles -----
    ----------------------------
*/
body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  background-color: var(--background);
}
body.active {
  overflow: hidden;
  z-index: -1;
}
.no-js #experience-timeline > div {
  background: var(--background);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
}
.no-js #experience-timeline > div h3 {
  font-size: 1.5em;
  font-weight: 300;
  color: var(--heading);
  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: var(--text);
  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: var(--background);
  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;
  transition: all 0.2s ease 0s;
  color: var(--base-color);
  padding: 10px;
}
header a:hover {
  color: var(--base-color-hover);
  text-decoration: none;
  transition: all 0.2s ease 0s;
  background: var(--a-hover-color);
  border-radius: 4px;
}
header a:focus {
  color: var(--base-color);
  text-decoration: none;
}
header.active {
  display: block;
}
header.sticky {
  position: fixed;
  z-index: 999;
}
#menu.active {
  display: block;
}
#mobile-menu-open {
  display: none;
  cursor: pointer;
  position: fixed;
  right: 15px;
  top: 10px;
  color: var(--base-color);
  font-size: 1.5em;
  z-index: 20;
  padding: 0 7px;
  border-radius: 4px;
  background: var(--background);
}
#mobile-menu-close {
  display: none;
  text-align: right;
  width: 100%;
  background: var(--background);
  font-size: 1.5em;
  padding-right: 15px;
  padding-top: 10px;
  cursor: pointer;
  color: var(--base-color);
}
#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: var(--text);
}
.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 var(--lighten-text-25);
  text-align: center;
}
.top i {
  color: var(--text);
}
.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: var(--text);
  padding: 10px;
  transition: all 0.5s ease 0s;
}
.social a:hover {
  color: var(--base-color);
}
.btn-rounded-white {
  display: inline-block;
  color: var(--white);
  padding: 15px 25px;
  border: 3px solid var(--white);
  border-radius: 30px;
  transition: 0.5s ease all;
}
.btn-rounded-white:hover {
  color: var(--base-color);
  background: var(--white);
  text-decoration: none;
}
.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: var(--base-color);
}
.background-alt {
  background: var(--background-alt);
}
/*
    --------------------------
    ----- 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-content {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#lead-content h1,
#lead-content h2 {
  margin: 0;
}
#lead-content h1 {
  color: var(--white);
  font-weight: 900;
  font-size: 5em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 0.9em;
}
#lead-content h2 {
  color: var(--lighten-base-color-25);
  font-weight: 500;
  font-size: 2.25em;
  margin-bottom: 15px;
}
#lead-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--rgba-base-color-hover-0-8);
  z-index: 1;
}
#lead-down {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
  bottom: 15px;
  color: var(--white);
}
#lead-down span {
  cursor: pointer;
  display: block;
  margin: 0 auto;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 3px solid var(--lighten-base-color-25);
  text-align: center;
}
#lead-down i {
  animation: pulsate 1.5s ease;
  animation-iteration-count: infinite;
  padding-top: 5px;
}
.top i:hover {
  animation: pulsate 1.5s ease;
  animation-iteration-count: infinite;
}
@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 var(--border);
}
#about h2 {
  color: var(--heading);
}
#about p {
  color: var(--text);
  margin: 0;
}
/*
    --------------------------------
    ----- 6. Experience Styles -----
    --------------------------------
*/
#experience {
  padding: 50px 15px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
#experience h2 {
  color: var(--heading);
}
#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: var(--base-color);
  z-index: 0;
}
#experience-timeline:after {
  position: absolute;
  content: '';
  width: 3px;
  height: 40px;
  background: var(--base-color);
  background: linear-gradient(to bottom, var(--base-color), var(--rgba-base-color-0));
  top: 100%;
  left: 303px;
}
.vtimeline-content {
  margin-left: 350px;
  background: var(--white);
  border: 1px solid #e6e6e6;
  padding: 15px;
  border-radius: 3px;
  text-align: left;
}
.vtimeline-content h3 {
  font-size: 1.5em;
  font-weight: 300;
  color: var(--heading);
  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: var(--text);
  font-size: 0.9em;
  margin: 0;
}
.vtimeline-point {
  position: relative;
  display: block;
  margin-bottom: 30px;
}
.vtimeline-icon {
  position: relative;
  color: var(--white);
  width: 50px;
  height: 50px;
  background: var(--base-color);
  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: var(--vtimeline-date-color);
}
/*
    -------------------------------
    ----- 7. Education Styles -----
    -------------------------------
*/
#education {
  padding: 50px 15px 20px 15px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
#education h2 {
  color: var(--heading);
  margin-bottom: 50px;
}
.education-block {
  max-width: 700px;
  margin: 0 auto 30px auto;
  padding: 15px;
  border: 1px solid var(--border);
  text-align: left;
}
.education-block h3 {
  font-weight: 500;
  float: left;
  margin: 0;
  color: var(--heading);
}
.education-block span {
  color: var(--text);
  float: right;
}
.education-block h4 {
  color: var(--text);
  clear: both;
  font-weight: 500;
  margin: 0 0 15px 0;
}
.education-block p,
.education-block ul {
  margin: 0;
  color: var(--text);
  font-size: 0.9em;
}
.education-block ul {
  padding: 0 0 0 15px;
}
/*
    -------------------------------
    ----- 8. Project Styles -----
    -------------------------------
*/
#projects {
  padding: 50px 15px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
#projects h2 {
  color: var(--heading);
  margin-bottom: 50px;
}
.project {
  position: relative;
  max-width: 900px;
  margin: 0 auto 30px auto;
  overflow: hidden;
  background: var(--white);
  border-radius: 4px;
}
.project-image {
  float: left;
}
.project-info {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 300px;
  padding: 15px;
}
.project-info h3 {
  font-size: 1.5em;
  font-weight: 300;
  color: var(--heading);
  margin: 0 0 15px 0;
}
.project-info p {
  color: var(--text);
  margin: 0 0 15px 0;
  font-size: 0.9em;
}
.project-info a {
  color: var(--base-color-hover);
}
.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: var(--heading);
  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: var(--heading);
  background: var(--darken-background-alt-5);
  list-style: none;
  cursor: default;
  font-size: 1.2em;
}
/*
    -------------------------------
    ----- 10. Contact Styles -----
    -------------------------------
*/
#contact {
  padding: 50px 15px;
  background: var(--base-color);
  text-align: center;
}
#contact h2 {
  margin: 0 0 15px 0;
  color: var(--white);
  font-weight: 500;
}
#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: var(--darken-base-color-15);
  color: var(--white);
  transition: 0.5s ease all;
}
#contact-form input::-webkit-input-placeholder,
#contact-form textarea::-webkit-input-placeholder {
  color: var(--white);
}
#contact-form input:-moz-placeholder,
#contact-form textarea:-moz-placeholder {
  color: var(--white);
  opacity: 1;
}
#contact-form input::-moz-placeholder,
#contact-form textarea::-moz-placeholder {
  color: var(--white);
  opacity: 1;
}
#contact-form input:-ms-input-placeholder,
#contact-form textarea:-ms-input-placeholder {
  color: var(--white);
}
#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  background: var(--darken-base-color-25);
}
#contact-form textarea {
  height: 150px;
  resize: none;
}
#contact-form button {
  display: block;
  width: 100%;
  background: var(--white);
  border-radius: 4px;
  padding: 5px 10px;
  border: none;
  color: var(--base-color);
  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. Optional Section Styles -----
    ---------------------------------------
*/
.optional-section {
  padding: 50px 15px;
  text-align: center;
  border-top: 1px solid var(--border);
}
.optional-section h2 {
  color: var(--heading);
}
.optional-section-block {
  max-width: 700px;
  margin: 0 auto 30px auto;
  padding: 15px;
  border: 1px solid var(--border);
  background: var(--white);
  text-align: left;
}
.optional-section-block h3 {
  font-weight: 500;
  margin: 0 0 15px 0;
  color: var(--heading);
}
.optional-section-block h4 {
  color: var(--text);
  clear: both;
  font-weight: 500;
  margin: 0 0 15px 0;
}
.optional-section-block p,
.optional-section-block ul {
  margin: 0 0 15px 0;
  color: var(--text);
  font-size: 0.9em;
}
.optional-section-block ul {
  padding: 0 0 0 15px;
}
/*
    -----------------------------
    ----- 12. 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: 992px) {
  #lead {
    height: auto;
    min-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;
  }
  #about {
    text-align: center;
  }
  #about p {
    text-align: left;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media only screen and (max-width: 768px) {
  header {
    position: fixed;
    display: none;
    z-index: 999;
    bottom: 0;
    height: 100%;
  }
  header.active {
    animation: fadeIn ease 0.4s;
  }
  #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 h1 {
    font-size: 2em;
  }
  #lead-content h2 {
    font-size: 1.3em;
  }
  #lead-content a {
    padding: 10px 20px;
  }
  #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 h1 {
    font-size: 1.5em;
  }
  #lead-content h2 {
    font-size: 1em;
  }
  #lead-content a {
    font-size: 0.9em;
    padding: 5px 10px;
  }
}