/*!
    Title: Dev Portfolio Template
    Version: 1.0.0
    Last Change: 08/31/2017
    Author: Luca Guarro
    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;
}

@-webkit-keyframes dropHeader {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes dropHeader {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  -webkit-animation-name: dropHeader;
          animation-name: dropHeader;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-duration: 0.75s;
          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: #3498db;
  padding: 10px;
}

header a:hover {
  color: #217dbb;
  text-decoration: none;
  background: #eee;
  border-radius: 4px;
}

header a:focus {
  color: #3498db;
  text-decoration: none;
}

header.active {
  display: block;
}

header.sticky {
  position: fixed;
  z-index: 999;
}

#menu.active {
  display: block;
}

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

.shadow-large {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.15);
          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;
  color: green;
}

.heading:after {
  position: absolute;
  content: '';
  top: 100%;
  height: 1px;
  width: 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #3498db;
}

.background-alt {
  background: #f2f2f5;
}

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

/*
    --------------------------
    ----- 4. Lead Styles -----
    --------------------------
*/
#lead {
  background: url(../../images/lead-page.jpg);
  position: relative;
  height: 100vh;
  background-size: cover;
  overflow: hidden;
}

#lead-content {
  position: absolute;
  z-index: 10;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

#lead-content h1 {
  color: #f1f5fd;
  font-weight: 600;
  font-size: 5vw;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1em;
}

#lead-content h2 {
  color: #9ebcff;
  font-weight: 500;
  font-size: 2.25vw;
  margin-bottom: 0.7em;
  line-height: 1em;
}

#lead-content a {
  margin-bottom: 1em;
}

.lead-down {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.lead-down a {
  color: #9ebcff;
}

.lead-down a:hover {
  color: #f1f5fd;
}

.chevron-center {
  margin: 0 auto;
}

.chevron-center a {
  color: #f1f5fd;
}

.chevron-center a:hover {
  color: #9ebcff;
}

#bottom-navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: absolute;
  z-index: 10;
  bottom: 2%;
  width: 100%;
}

#lead-overlay {
  background: rgba(36, 104, 167, 0.8);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

#side-nav-closed {
  position: relative;
  padding-left: 1%;
  z-index: 10;
  width: 20%;
  display: none;
}

#side-nav-closed #sidenavOButton {
  position: relative;
  font-size: 40px;
  cursor: pointer;
  font-style: bold;
  color: #2D383A;
}

#side-nav-open {
  position: relative;
  padding-left: 1%;
  padding-top: 1%;
  z-index: 10;
  width: 20%;
  height: 100%;
  color: #731023;
  background-color: rgba(16, 115, 96, 0.8);
}

#side-nav-open #closebtncontainer {
  width: 100%;
}

#side-nav-open #closebtncontainer #sidenavXButton {
  position: relative;
  left: 80%;
  font-size: 40px;
  cursor: pointer;
  font-style: bold;
  color: #2D383A;
}

#menu-list {
  padding-top: 70px;
}

#menu-list li {
  list-style: none;
  padding-top: 1vw;
  padding-bottom: 1vw;
  font-size: 2.6vw;
  cursor: pointer;
}

#menu-list li:hover {
  background: rgba(36, 104, 167, 0.8);
}

#menu-list li:nth-child(2n+1) {
  color: #ccc;
}

/*
    ----------------------------
    ----- 3. Global Styles -----
    ----------------------------
*/
/*
    ---------------------------
    ----- 5. About Styles -----
    ---------------------------
*/
#about {
  padding: 75px 15px;
  border-bottom: 1px solid #dcd9d9;
}

#about h2 {
  color: #374054;
}

#about p {
  color: #74808a;
  margin: 0;
}

/*
    --------------------------------
    ----- 6. Experience Styles -----
    --------------------------------
*/
/*
// No JS styles
.no-js {
    #experience-timeline {
        > div {
            background: $background;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid $border;

            h3 {
                font-size: 1.5em;
                font-weight: 300;
                color: $heading;
                display: inline-block;
                margin: 0;
            }

            h4 {
                font-size: 1.2em;
                font-weight: 300;
                color: #7e8890;
                margin: 0 0 15px 0;
            }

            p {
                color: $text;
                font-size: 0.9em;
                margin: 0;
            }
        }

        &:before, &:after {
            content: none;
        }
    }
}
*/
#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: #3498db;
  z-index: 0;
}

#experience-timeline:after {
  position: absolute;
  content: '';
  width: 3px;
  height: 40px;
  background: #3498db;
  background: -webkit-gradient(linear, left top, left bottom, from(#3498db), to(rgba(52, 152, 219, 0)));
  background: linear-gradient(to bottom, #3498db, rgba(52, 152, 219, 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, .vtimeline-content ul {
  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: #3498db;
  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;
}

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

.project-image {
  float: left;
}

.project-image img {
  max-width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.project-image:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.project-info {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-left: 300px;
  padding: 15px;
}

.project-info h3 {
  font-size: 1.5em;
  font-weight: 300;
  color: #374054;
  margin: 0 0 15px 0;
}

.project-info p {
  color: #74808a;
  margin: 0 0 15px 0;
  font-size: 0.9em;
}

#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;
}

/*
    -------------------------------
    ----- 10. Contact Styles -----
    -------------------------------
*/
#contact {
  text-align: center;
}

#contact h2 {
  color: #374054;
  margin-bottom: 50px;
}

.contact .fa:before {
  display: inline-block;
  opacity: 0.7;
}

.contact li {
  display: inline-block;
  list-style-type: none;
  margin: 0 1em;
  text-align: center;
}

.contact p {
  text-align: center;
}

.contact {
  display: inline-block;
  margin: 0 auto;
  padding-left: 0;
}

.cont {
  text-align: center;
}
/*# sourceMappingURL=index.css.map */