/*!
    Last Change: 05/31/17
    Author: Kyle WItt
    Email: me@kylewitt.com
    Based on work by Ryan Fitzgerald
    https://github.com/RyanFitzgerald/devportfolio-template
*/

body {
    font-family:'Open Sans', 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:#333333;font-size:0.9em;margin:0}
.no-js #experience-timeline:before,.no-js #experience-timeline:after{content:none}

.hidden {visibility: hidden}
/*@-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}
*/

.nav>li>a, .nav>li>a:visited, .nav>li>a:focus {
    display:block;
    color:#3498db;
    background-color:#fff;
    margin: 5px;
    padding:5px
}
.nav>li>a:hover {
    color:#fff;
    text-decoration: none;
    background: #3498db;
    border-radius: 4px
}
.nav>li.active>a, .nav>li.active>a:focus, .nav>li.active>a:hover {
    color:#fff;
    text-decoration: none;
    background: #3498db;
    border-radius: 4px
}
.navbar-nav {
    display: inline-block;
    float: none;
    background-color: #fff;
    text-align: center;
    padding: 10px;
    margin: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
}
.affix {
    position: inherit;
    padding:0px 10px;
    -webkit-transition:padding 0.5s linear;
    -moz-transition:padding 0.5s linear;  
    -o-transition:padding 0.5s linear;         
    transition:padding 0.5s linear;  
}
.affix-top {
    -webkit-transition:padding 0.5s linear;
    -moz-transition:padding 0.5s linear;  
    -o-transition:padding 0.5s linear;         
    transition:padding 0.5s linear;  
}
.navbar-collapse {
    text-align: center;
}
.navbar-collapse.in {
    background-color: #fff;
    border-bottom: 1px solid #3498db;
    border-top: 1px solid #3498db
}
.navbar-white .navbar-toggle .icon-bar {
    background-color: #3498db;
}
.navbar-toggle {
    border: 2px solid #3490db
}
.navbar-white .navbar-toggle, .navbar-white .navbar-toggle:focus, .navbar-white .navbar-toggle:hover {
    background-color: #fff;
}
.navbar-header {
    color: #fff;
}

.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:#333333}

.btn-rounded-white{width: 175px;display:inline-block;color:#fff;padding:15px 25px;border:2px solid #fff;border-radius:30px;-webkit-transition:.5s ease all;transition:.5s ease all}
.btn-rounded-white:visited {color:#fff}
.btn-rounded-white:hover{color:#3498db;background:#fff;text-decoration:none}
.btn-rounded-blue{width:150px;display:inline-block;color:#3498db;padding:15px 25px;border:2px solid #3498db;border-radius:30px;-webkit-transition:.5s ease all;transition:.5s ease all}
.btn-rounded-blue:visited {color:#3498db}
.btn-rounded-blue:hover{color:#fff;background:#3498db;text-decoration:none}

.intro-links li {margin-bottom: 25px;display: inline-block; margin-right: 50px;}
.intro-links{-webkit-padding-start: 0px;}
.intro-links li:last-child { padding-right: 0px; margin-right: 0px}

.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:#3498db}
.background-alt{background:#f2f2f5}

#lead{position:relative;height:100vh;min-height:500px;max-height:1080px;background:url(background.jpg);background-size:cover;padding:15px;overflow:hidden}
#lead-content{width:100%;position:absolute;z-index:10;top:50%;left:50%;-webkit-transform:translate(-50%, -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:6em;text-transform:uppercase;letter-spacing:0.05em;line-height:0.9em}
#lead-content h2{color:#a0cfee;font-weight:500;font-size:2.25em;margin-bottom:30px}
#lead-overlay{position:absolute;height:100%;width:100%;top:0;right:0;bottom:0;left:0;background:rgba(33,125,187,0.85);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 #a0cfee;text-align:center}
#lead-down i{-webkit-animation:pulsate 1.5s ease;animation:pulsate 1.5s ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;padding-top:5px}
.lead-links {padding:0px;margin:0px}
.lead-links li{display: inline-block; margin-right: 50px;}
.lead-links li:last-child { padding-right: 0px; margin-right: 0px}

@-webkit-keyframes pulsate{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}50%{-webkit-transform:scale(1.2, 1.2);transform:scale(1.2, 1.2)}100%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}}
@keyframes pulsate{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}50%{-webkit-transform:scale(1.2, 1.2);transform:scale(1.2, 1.2)}100%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}}

#about{padding:75px 15px;border-bottom:1px solid #dcd9d9}
#about h2{color:#374054}
#about p{color:#333333;margin:0}

#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-linear-gradient(top, #3498db, 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{color:#333333;font-size:0.9em;margin:0}
.vtimeline-point{position:relative;display:block;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}

#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; font-size: 1.5em}
.education-block span{color:#333333;float:right}
.education-block h4{color:#666;clear:both;font-weight:500;margin:0 0 15px 0}
.education-block p,.education-block ul{margin:0;color:#333333;font-size:0.9em}
.education-block ul{padding:0 0 0 15px}

#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{width:300px;}
.project-links {-webkit-padding-start: 0px;}
.project-links li{display: inline-block; margin-right: 50px;}
.project-links li:last-child { padding-right: 0px; margin-right: 0px}
.project-info{display: table;padding:20px 30px 0px 30px}
.project-info h3{text-align: left;font-size:1.5em;font-weight:400;color:#374054;margin:0 0 15px 0}
.project-info p{color:#333333;font-size:0.9em;text-align: left}
#more-projects, #more-about{display:none}

#view-more-projects, #view-more-about{width:100%;text-align:center;z-index:10;bottom:15px;}
#view-more-projects span, #view-more-about span{cursor:pointer;display:block;margin:0 auto;width:35px;height:35px;border-radius:50%;border:3px solid #a0cfee;text-align:center}
#view-more-projects i, #view-more-about i{-webkit-animation:pulsate 1.5s ease;animation:pulsate 1.5s ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;padding-top:5px}
#view-more-projects h2, #view-more-about h2{margin: 0px auto 15px auto}
/*
#view-more-projects{cursor:pointer;display:block;margin:0 auto;width:35px;height:35px;border-radius:50%;border:3px solid #a0cfee;text-align:center}
#view-more-projects i{-webkit-animation:pulsate 1.5s ease;animation:pulsate 1.5s ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;padding-top:5px}
*/
#skills{padding:50px 15px;text-align:center; border-bottom:1px solid #dcd9d9}
#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}

#contact{padding:50px 15px;background:#3498db;text-align:center}
#contact h2{position:relative;font-size: 2em;margin:0 0 50px 0; color:#fff;font-weight:500}
#contact h2:after{position:absolute;content:'';top:100%;height:1px;width:50px;left:0;right:0;margin:0 auto;background:#fff}
.profile-pic-container {margin: 0px}
.profile-pic {position: relative}
.profile-pic img{margin-bottom: 50px;width: 200px;border:3px solid #fff;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}

/*
#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:#1d6fa5;color:#fff;-webkit-transition:.5s ease all;transition:.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:#16527a}
#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:#3498db;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);-webkit-transition:.5s ease all;transition:.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)}
*/

/*
.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:#333333;clear:both;font-weight:500;margin:0 0 15px 0}
.optional-section-block p,.optional-section-block ul{margin:0 0 15px 0;color:#333333;font-size:0.9em}
.optional-section-block ul{padding:0 0 0 15px}
*/

footer{padding:50px 0}
.copyright {padding-top:25px}
.copyright p{margin:0;color:#333333}
.social{text-align:right}
.social ul{margin: 0;padding:0}
.social li{display:inline-block;font-size:1.75em;list-style:none}
.social a{display:block;color:#333333;padding:10px}
.social a:hover{color:#3498db}


/* Lazy Overides */
h1, h2, h3, h4{ font-family: 'Roboto', sans-serif;font-weight: 400 !important}
h4{color: #374054 !important}
p{color: #666 !important}

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

@media only screen and (max-width: 996px){
    #lead{height:auto;min-height:auto;max-height:auto;padding:100px 15px}
    #lead-content{position:relative;-webkit-transform:none;transform:none;left:auto;top:auto}
    #lead-content h1{font-size:4.6em}
    #lead-content h2{font-size:1.75em}
    #about{text-align:center}
    #about p{text-align:left}
    .project-links{margin: 0px 0px 0px 0px;}
    .project-links li, .lead-links li{margin-right: 30px;}
    .project-info p{margin: 0px}
}
@media only screen and (max-width: 960px){.project-info p{margin: 0px}}

@media only screen and (max-width: 768px){
    header{position:fixed;display:none;z-index:999;-webkit-animation:none;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;}
    #menu li{display:block;margin-bottom:10px}
    .btn-rounded-white{width: 150px;}
    #contact .btn-rounded-white {width: 175px;}
    #lead-content h1{font-size:3.5em}
    #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-bottom:10px;top:auto;-webkit-transform:none;transform:none}
    .project-links li, .lead-links li {margin: 10px 10px}
    .project-links li:last-child, .lead-links li:last-child { margin: 10px 10px 0px 10px}    
    footer{text-align:center}
    .social{text-align:center}
}

@media only screen and (max-width: 760px){.project-links{margin-bottom: 20px;}}

@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: 610px){}.project-links li{margin-right: 0px;}}*/

@media only screen and (max-width: 480px){
    #lead-content h1{font-size:2.8em}
    #lead-content h2{font-size:1.05em}
    #lead-content a{font-size:0.9em;}
    .project-links a {padding: 10px 20px}
    .project-links li, .lead-links li {margin: 10px 50px}
    .project-links li:last-child, .lead-links li:last-child { margin: 10px 20px 0px 20px}

    #lead-content h2 {margin-bottom: 25px;}
    #lead {padding: 100px 15px 60px 15px}
    
}