/*!

 yellow
#2
*/


body{
    background-color:#2C3335;
    color:white!important;
    font-family:'Lato', sans-serif;
   font-size:16px
}
body.active{
   overflow:hidden;
   z-index:-1
}
.no-js #experience-timeline>div{
    background-color: #2C3335;

   padding:10px;
   margin-bottom:10px;
   border:1px solid #dcd9d9
}
.no-js #experience-timeline>div h3{
   font-size:1.5em;
   font-weight:300;
   
   display:inline-block;
   margin:0
}
.no-js #experience-timeline>div h4{
   font-size:1.2em;
   font-weight:300;
   
   margin:0 0 15px 0
}
.no-js #experience-timeline>div p{
   
   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:32%;
   
   text-align:center;
   z-index:10000000000000;
   animation-name:dropHeader;
   animation-iteration-count:1;
   animation-timing-function:ease;
   animation-duration:0.75s
}
header ul{
   display:inline-block;
   background-color: #2C3335;
   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
}
.dark-yellow{
    color: #0275d8;
    font-size: 30px; 
    text-transform: uppercase;
     font-weight: 700;
}
#menu.active{
   display:block
}
#mobile-menu-open{
   display:none;
   cursor:pointer;
   position:fixed;
   right:15px;
   top:10px;
   color:#3498db;
   font-size:1.5em;
   z-index:20;
   padding:0 7px;
   border-radius:4px;
   background:#fff
}
#mobile-menu-close{
   display:none;
   text-align:center;
   width:100%;
   background-color: #2C3335;
   font-size:1.5em;
   padding-right:15px;
   padding-top:10px;
   cursor:pointer;
   color:#3498db
}
#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:white
}
.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;
   
   padding:10px
}
.social a:hover{
   color:#3498db
}
.btn-rounded-white{
   display:inline-block;
   color:#fff;
   padding:15px 25px;
   border:3px solid #fff;
   border-radius:30px;
   transition:.5s ease all
}
.btn-rounded-white:hover{
   color:#3498db;
   background-color: #2C3335;
   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;
   margin:0 0 30px 0;
   text-shadow: 0 0 1px black, 0 0 1px black;
}
.heading:after{
   position:absolute;
   content:'';
   top:100%;
   height:1px;
   width:50px;
   left:0;
   right:0;
   margin:0 auto;
   background:#3498db
}
.background-alt{
   background:#585858
}
#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:#a0cfee;
   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(23, 25, 26, 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 #a0cfee;
   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)
   }
}
#about{
   padding:75px 15px;
   
}
#about h2{
   
}
#about p{
   
   margin:0
}
#experience{
   padding:50px 15px;
   text-align:center;
   
}
#experience h2{
   
}
#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:#0275d8;
   z-index:0
}
#experience-timeline:after{
   position:absolute;
   content:'';
   width:3px;
   height:40px;
   background:#0275d8;
   background:linear-gradient(to bottom, #0275d8, rgba(52,152,219,0));
   top:100%;
   left:303px
}
.vtimeline-content{
    background-color: #2C3335 ;
   margin-left:350px;
  
   padding:15px;
   border-radius:3px;
   text-align:left
}
.vtimeline-content h3{
   font-size:1.5em;
   font-weight:300;
   
   display:inline-block;
   margin:0
}
.vtimeline-content h4{
   font-size:1.2em;
   font-weight:300;
   
   margin:0 0 15px 0
}
.vtimeline-content p{
   
   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:#0275d8;
   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;
   
}
#education{
   padding:50px 15px 20px 15px;
   ;
   text-align:center
}
#education h2{
   
   margin-bottom:50px
}
.education-block{
   max-width:700px;
   margin:0 auto 30px auto;
   padding:15px;
   
   background:#585858;
   text-align:left
}
.education-block h3{
   font-weight:500;
   float:left;
   margin:0;
   
}
.education-block span{
   
   float:right
}
.education-block h4{
   
   clear:both;
   font-weight:500;
   margin:0 0 15px 0
}
.education-block p,.education-block ul{
   margin:0;
   
   font-size:0.9em
}
.education-block ul{
   padding:0 0 0 15px
}
#projects{
   padding:50px 15px;
   
   text-align:center
}
#projects h2{
   
   margin-bottom:50px
}
.project{
   position:relative;
   max-width:900px;
   margin:0 auto 30px auto;
   overflow:hidden;
   background:#2C3335;
   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;
   
   margin:0 0 15px 0
}
.project-info p{
   
   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
}
#skills{
   padding:50px 15px;
   text-align:center
}
#skills h2{
   
   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;
   
   background-color: #585858;;

   list-style:none;
   cursor:default;
   font-size:1.2em
}
.optional-section{
   padding:50px 15px;
   text-align:center;
   border-top:1px solid #dcd9d9
}
.optional-section h2{
   
}
.optional-section-block{
   max-width:700px;
   margin:0 auto 30px auto;
   padding:15px;
   border:1px solid #dcd9d9;
   background:#2C3335;
   text-align:left
}
.optional-section-block h3{
   font-weight:500;
   margin:0 0 15px 0;
   
}
.optional-section-block h4{
   
   clear:both;
   font-weight:500;
   margin:0 0 15px 0
}
.optional-section-block p,.optional-section-block ul{
   margin:0 0 15px 0;
   
   font-size:0.9em
}
.optional-section-block ul{
   padding:0 0 0 15px
}
@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
   }
}






header.active {
    width: 100%;
	}
@media only screen and (max-width: 768px)
header {
    width: 100%;
}
@media only screen and (max-width: 768px)
#mobile-menu-open, #mobile-menu-close {
    z-index: 99999;
}