/**
 * Global 
 */
a {
   color:#258ce4;
}

::-webkit-scrollbar {
    width: 3px;
    height: 12px
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,.1)
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.1)
}


/**
 * Navbar
 */
.navbar-fixed-bottom, .navbar-fixed-top {
    height: 48px;
}
.navbar-nav>li>a {
    padding-top: 12px;
    padding-bottom: 13px;
}

.nav-project {
    display: inline;
    position: relative;
    margin-right: 15px;
    top: 3px;
    color: #ffffff;
    font-size: 20px;
}
.nav-project-tab {
    display: inline-block;
    left: 0px;
    max-width: 100%;
    font-weight: 600;
}

.navbar-inverse .navbar-nav>.active>a, 
.navbar-inverse .navbar-nav>.active>a:focus, 
.navbar-inverse .navbar-nav>.active>a:hover {
  min-height: 50px;
}

@media screen and (max-width: 767px) {
    .navbar-fixed-bottom, .navbar-fixed-top {
        height: auto;
    }
}

/**
 * Header 
 */ 
#header {
  margin-top:50px;
}
.header {
   text-align: left; 
}
.header .container a, 
.header .container a img {
   display: block;
   float:left;
   left:0px;
   top:0px;
}
.header .container .text-content {
    margin-top:180px;
}
.header-banner.jumbotron {
  margin-top: 0px;
  background-image: url("/images/header_background_space.jpg");
} 
.jumbotron .btn-primary .btn-facebook {
  background:#3B5998;
}
.jumbotron .btn-primary .btn-linkedin {
  background:#f0f0f0;
  color:#222222;
}
.jumbotron .btn-primary .btn-github {
  background:#fafafa;
  color:#222222;
}
.jumbotron {
  color: white;
  padding-bottom: 80px; 
}
.jumbotron .btn-primary {
  background: #845ac7;
  border-color: #845ac7; 
}
.jumbotron .btn-primary:hover {
  background: #7646c1; 
}
.jumbotron p {
  color: #d9ccee;
  max-width: 75%;
  margin: 1em auto 2em; 
}
.navbar + .jumbotron {
  margin-top: -20px; 
}
.jumbotron .lang-logo {
    display: block;
    background: #5565ac;
    border-radius: 10%;
    overflow: hidden;
    width: 140px;
    height: 140px;
    margin: auto;
    border: 2px solid white;
}
.jumbotron .lang-logo img {
  max-width: 100%; 
}
.btn-social-text{
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 5px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.fa-github-f:before, .fa-github:before {
  position: relative;
  top: 2px;
}
.fa-facebook-f:before, .fa-facebook:before {
  position: relative;
  right: 2px;
  top: 2px;
}
.fa-google-plus:before, .fa-google-plus:before {
  position: relative;
  right: 2px;
  top: 2px;
}
.header-icon{
  margin-right: 10px;
  margin-bottom: 10px;
}

/**
 * Professional Experience 
 */
.work-item{
  width:"40px";
  height:"40px";
}

/** 
 * Resume 
 */
.resume a {
    color:#0199DC;
}

/**
 * Skills 
 */
.skills b {
    color:#0199DC;
}

/** 
 * Contact  
 */
#contact{
  margin-top: 50px;
}

/**
 * Interests 
 */
#interests{
  margin-bottom: 50px;
}

/**
 * Home button 
 */
.home-button,
.home-button:hover {
  position:fixed;
  bottom:5px;
  right:15px;
  width:64px;
  height:64px;
  border-radius:64px;
  background-color:transparent;
  color:#fafafa;
  animation-name: transparent-background;
  animation-duration: 2s;
  opacity:1;
}
.home-button span,
.home-button:hover span {
  position: relative;
  left: 17px;
  top: 15px;
  font-size: 30px;
  opacity: 1;
}
.home-button span {
    color: #e0e0e0;
}
.home-button:hover span {
  color:#fafafa;
}
.home-button:hover {
  color: #fafafa;
  border: 1px solid #e6e6e6;
  color: #ffffff;
  opacity:1;
  animation-name: color-background;
  animation-duration: 2s;
  background-color:#111111;
}

/**
 * Color Animations 
 */
@keyframes color-background {
    from {background-color: transparent;}
    to {background-color: #111111;}
}
@keyframes transparent-background {
    from {background-color: #111111;}
    to {background-color: transparent;}
}

/**
 * Footer 
 */
.footer {
    position: relative;
    top: 100px;
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: #000000;
    color: #fafafa;
}
.footer-title{
    color: #999999;
    font-size: 15px;
}
.footer .nav>li>a{
    padding-left:0px;
    padding-top:10px;
    font-weight:600;
    color:#f0f0f0;
}
.footer .nav>li>a:hover {
    color:#77D154;
    background-color:#000000;
}
.footer-brand{
    margin-top:0px;
    margin-bottom:50px;
}
.footer-brand a {
    color: #ffffff;
    font-size: 22px;
}
.col-social .nav, .col-social .row{
    float:right;
    width:100%;
}
@media screen and (max-width: 767px) {
    .col-social .nav li, .col-social .row{
        float:left;
    }
}
.col-social{
    position:relative;
    top:12px;
    right:0px;
}
.social-icon{
    float:right;
    font-size:20px;
    width:50px;
    height:50px;
    margin-right:10px;
    margin-bottom:10px;
    padding-left:15px!important;
    
    color:#fafafa;
    background-color:#333333;
    border-radius:50px;
}
.fa.fa-facebook{
    margin-left:4px;
}
.fa.fa-instagram{
    margin-left:2px;
}
.copyright{
    float:right;
    margin-top:20px;
    margin-bottom:20px;
}
.country{
    float:left;
    width:70px;
    float:right;
}
.country p{
    float:left;
}
.country img{
    position:relative;
    float:left;
    left:10px;
    top:-7px;
    width:30px;
}
@media screen and (max-width: 767px) {
    .copyright{
        min-width:120px;
        float:left;
    }
    
    .country{
        float:left;
    }
}