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 {
     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: #666;
     padding: 10px;
 }
 
 header a:hover {
     color: #4d4d4d;
     text-decoration: none;
     background: #eee;
     border-radius: 4px;
 }
 
 header a:focus {
     color: #666;
     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: #666;
     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: #666;
 }
 
 #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: #666;
 }
 
 .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: #666;
     background: #fff;
     text-decoration: none;
 }

 .btn-rounded-black {
    display: inline-block;
    color: rgb(66, 66, 66);
    padding: 15px 25px;
    border: 3px solid rgb(66, 66, 66);
    border-radius: 30px;
    transition: 0.5s ease all;
}

 .btn-rounded-black:hover {
    color: rgb(233, 233, 233);
    background: rgb(66, 66, 66);
    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: #666;
 }
 
 .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-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: #a6a6a6;
     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(77, 77, 77, 0.8);
     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 #a6a6a6;
     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;
 }
 /*
   --------------------------------
   ----- 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: #666;
     z-index: 0;
 }
 
 #experience-timeline:after {
     position: absolute;
     content: '';
     width: 3px;
     height: 40px;
     background: #666;
     background: linear-gradient(to bottom, #666, rgba(102, 102, 102, 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: #666;
     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;
 }
 
 .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: #374054;
     margin: 0 0 15px 0;
 }
 
 .project-info p {
     color: #74808a;
     margin: 0 0 15px 0;
     font-size: 0.9em;
 }
 
 .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;
 }
 /*
   -------------------------------
   ----- 10. Contact Styles -----
   -------------------------------
   */
 
 #contact {
     padding: 50px 15px;
     background: #666;
     text-align: center;
 }
 
 #contact h2 {
     margin: 0 0 15px 0;
     color: #fff;
     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: #404040;
     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: #262626;
 }
 
 #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: #666;
     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 #dcd9d9;
 }
 
 .optional-section h2 {
     color: #374054;
 }
 
 .optional-section-block {
     max-width: 700px;
     margin: 0 auto 30px auto;
     padding: 15px;
     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;
 }
 /*
   -----------------------------
   ----- 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;
         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;
     }
 }