body {
    font-family: 'Open Sans', sans-serif;
    text-rendering: optimizeLegibility;
}

.navbar-inverse {
    background-color: rgba(0, 0, 0, 0.80);
/*    color: rgba(25, 25, 25, 0.901961);*/
    box-shadow: 0 0 50px rgba(0,0,0,0.8);  
}

.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav > .active > a:hover, 
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: rgba(0, 0, 0, 0.05);
}

#about, #cards { 
    //background: url(../img/background/intro.png) 50% 0 fixed; 
    box-shadow: 5px 10px 40px rgba(0,0,0,0.8);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.zoomit { -webkit-transition: all .2s ease-in-out; }
.zoomit:hover { -webkit-transform: scale(1.5); }

.avatar-inner {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    border: 3px solid #333;
    background: rgba(0, 0, 0, 0) no-repeat center center;
    background-size: cover;
    box-shadow: 0 0 10px rgba(0,0,0,0.9);
    background-image: url(../img/about/bwEricChair.jpg);
}

img.social {
    -webkit-transition: all .2s ease-in-out;
    padding: 5px;
}
img.social:hover {    
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}
a, a:visited, a:hover {
    color: #333;
}
/* -----> fade ins <----- */
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity: 0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode: forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
 
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}
.fade-in.half {
	-webkit-animation-delay: .5s;
	-moz-animation-delay: .5s;
	animation-delay: .5s;
}
.fade-in.one {
	-webkit-animation-delay: 1s;
	-moz-animation-delay:1s;
	animation-delay: 1s;
}
.fade-in.one-two{
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay:1.2s;
	animation-delay: 1.2s;
}
.fade-in.one-four{
	-webkit-animation-delay: 1.4s;
	-moz-animation-delay:1.4s;
	animation-delay: 1.4s;
}
.fade-in.one-six{
	-webkit-animation-delay: 1.6s;
	-moz-animation-delay:1.6s;
	animation-delay: 1.6s;
}