/*!
    Title: Dev Portfolio Template
    Version: 1.2.0
    Last Change: 05/20/17
    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 -----
    ----------------------------
*/
a {
  text-decoration: none !important; }

body {
  font-family: 'Lato', sans-serif;
  font-size: 16px; }
  body.active {
    overflow: hidden;
    z-index: -1; }

.no-js #experience-timeline > div {
  background: #fff;
  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,li{
    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: #fff;
    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: #1B5330;
    padding: 10px; }
    header a:hover {
      color: #0e2d1a;
      text-decoration: none;
      background: #eee;
      border-radius: 4px; }
    header a:focus {
      color: #1B5330;
      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: #1B5330;
  font-size: 1.5em;
  z-index: 20;
  padding: 0 7px;
  border-radius: 4px;
  background: #fff; }

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

footer {
  padding: 50px 0; }

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

.top_btn {
  text-align: center; }
  .top_btn 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_btn 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: #374054; }

.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: #1B5330;
    background: #fff;
    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: #1B5330; }
    
    .eduhead:after {
      position: absolute;
      content: '';
      top: 100%;
      height: 1px;
      width: 50px;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: #1B5330;
    }
.background-alt {
  background: #f2f2f5; 
}

.background-alt-contact{
  background: #f2f2f5; 
}
/*
    --------------------------
    ----- 4. Lead Styles -----
    --------------------------
*/
#lead {
  position: relative;
  height: 100vh;
  min-height: 500px;
  max-height: 1080px;
  background: url(../static/images/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: #fff;
    font-weight: 900;
    font-size: 5em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 0.9em; }
  #lead-content h2 {
    color: #3ab368;
    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: rgba(14, 45, 26, 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 #3ab368;
    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;
  text-align: center; }
  #about h2 {
    color: #374054; }
  #about p {
    color: #74808a;
    margin: 0;
    text-align: left; }
  #about .image {
    height: 100px;
    width: 100px;
    border-radius: 80%; }
  #about ul.img-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; }
  #about ul.img-list li {
    display: inline-block;
    height: 120px;
    margin: 1em 5em 5em 0;
    position: relative;
    width: 120px; }
  #about span.text-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle; }
  #about span.text-content {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 120px;
    left: 0;
    position: absolute;
    top: 0;
    width: 120px;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    border-radius: 15px; }
  #about ul.img-list li:hover span.text-content {
    opacity: 1; }

/*
    --------------------------------
    ----- 6. Experience Styles -----
    --------------------------------
*/

#experience {
  padding: 50px 15px;
  text-align: center;
  border-bottom: 1px solid #dcd9d9; 
}
  #experience h2 {
    color: #374054; }


#experience-timeline .card{
  padding: 20px;
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.7);
  background:rgba(0, 0, 0, 0.07);
  
}

#experience-timeline .card .snakeborder {
  transition:0.5;
}

#experience-timeline .card .snakeborder:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:5px;
  background: linear-gradient(to right, transparent, #1779ff);
  animation: animate1 2s linear infinite;
}
@keyframes animate1 {
  0%{
    transform:translateX(-100%);
  }
  100%{
    transform:translateX(100%);
  }
}
#experience-timeline .card .snakeborder:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height:100%;
  background: linear-gradient(to bottom, transparent, #1779ff);
  animation: animate2 2s linear infinite;
  animation-delay: 1s;
}
@keyframes animate2 {
  0%{
    transform:translateY(-100%);
  }
  100%{
    transform:translateY(100%);
  }
}
#experience-timeline .card .snakeborder:nth-child(3) {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height:5px;
  background: linear-gradient(to left, transparent, #1779ff);
  animation: animate3 2s linear infinite;
}
@keyframes animate3  {
  0%{
    transform:translateX(100%);
  }
  100%{
    transform:translateX(-100%);
  }
}
#experience-timeline .card .snakeborder:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height:100%;
  background: linear-gradient(to top, transparent, #1779ff);
  animation: animate4 2s linear infinite;
  animation-delay: 1s;
}
@keyframes animate4 {
  0%{
    transform:translateY(100%);
  }
  100%{
    transform:translateY(-100%);
  }
}

#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: #1B5330;
    z-index: 0; }
  #experience-timeline:after {
    position: absolute;
    content: '';
    width: 3px;
    height: 40px;
    background: #1B5330;
    background: linear-gradient(to bottom, #1B5330, rgba(27, 83, 48, 0));
    top: 100%;
    left: 303px; }

.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: #1B5330;
  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 -----
    -------------------------------
*/

    .educard img{
      height: 200px;
      width: 100%;
    }
    
    /* Add some padding inside the card container */
    .educontainer {
      padding: 2px 16px;
    }
    
    .educationtim {
      font-family: "Open Sans", sans-serif;
      color: #525f7f;
    }
    
    /* .educationtim *{
      font-size: 14px;
    } */
    
    .edutimeline {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 75vw;
      margin: 5% auto;
    }
    
    .edutimeline__event {
      background: #fff;
      margin-bottom: 20px;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 20px 0;
      border-radius: 8px;
      -webkit-box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
              box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
    }
    
    .edutimeline__event:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8);
    }
    .edutimeline__event__title {
      font-size: 1.2rem;
      line-height: 1.4;
      text-transform: uppercase;
      font-weight: 600;
      color: #9251ac;
      letter-spacing: 1.5px;
    }
    
    .edutimeline__event__content {
      padding: 20px;
    }
    
    .edutimeline__event__date {
      color: #f6a4ec;
      font-size: 1.5rem;
      font-weight: 600;
      white-space: nowrap;
    }
    
    .edutimeline__event__icon {
      border-radius: 8px 0 0 8px;
      background: #9251ac;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -ms-flex-preferred-size: 40%;
          flex-basis: 40%;
      font-size: 2rem;
      color: #9251ac;
      padding: 20px;
    }
    
    .edutimeline__event__description {
      -ms-flex-preferred-size: 60%;
          flex-basis: 60%;
    }
    
    .edutimeline__event--type2 .edutimeline__event__date {
      color: #87bbfe;
    }
    
    .edutimeline__event--type2 .edutimeline__event__icon {
      background: #555ac0;
      color: #555ac0;
    }
    
    .edutimeline__event--type2 .edutimeline__event__title {
      color: #555ac0;
    }
    
    .edutimeline__event--type3 .edutimeline__event__date {
      color: #aff1b6;
    }
    
    .edutimeline__event--type3 .edutimeline__event__icon {
      background: #24b47e;
      color: #24b47e;
    }
    
    .edutimeline__event--type3 .edutimeline__event__title {
      color: #24b47e;
    }
    
    @media (max-width: 786px) {
      .edutimeline__event {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }
      .edutimeline__event__icon {
        border-radius: 4px 4px 0 0;
      }
    }
    
/*
    -------------------------------
    ----- 8. Project Styles -----
    -------------------------------
*/

#projects {
  padding: 50px 0px 85px 0px;
  border-bottom: 1px solid #dcd9d9;
  text-align: center; 
}

/*
    -------------------------------
    ----- 9. Skills Styles -----
    -------------------------------
*/
.skills {
  padding: 20px 10px;
  text-align: center; 
}
  .skills h2 {
    color: #374054;
    margin-bottom: 20px; }
  .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;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5); 
  }

/*
    -------------------------------
    ----- 10. Contact Styles -----
    -------------------------------
*/

.end{
  background: #009bff;
  background: -webkit-linear-gradient(left, #0072ff, #00c6ff);
  background: -o-linear-gradient(left, #0072ff, #00c6ff);
  background: -moz-linear-gradient(left, #0072ff, #00c6ff);
  background: linear-gradient(left, #0072ff, #00c6ff);

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/*
    -----------------------------
    ----- 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;
    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; }

  #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 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;
    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; } }
/*# sourceMappingURL=styles.css.map */