/************************************************************************/
/*  Tooltip Styles - Note: Browser defaults still appear after a delay  */
/************************************************************************/

body {
  padding-top: 70px;
}

@media (min-width : 20px) { em.spelled:before{content:"Hans Pokorny"}}
@media (min-width : 768px) { em.spelled:before{content:"HP"}}
@media (min-width : 992px) { em.spelled:before{content:"Hans Pokorny"}}
@media (min-width : 1200px) { em.spelled:before{content:"Hans Pokorny"}}


[title]{
	position:relative;
}
[title]:after{
	content:attr(title);
	color:#454242;
	background:#edf866;
	padding:5px;
	position:absolute;
	left:-9999px;
	opacity:0;
	bottom:100%;
	white-space:nowrap;
	-webkit-transition:0.25s linear opacity;
}
[title]:hover:after{
	left:5px;
	opacity:1;
}


h1 {
    /* font-family: 'Yanone Kaffeesatz', sans-serif; */
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

h2, h3, p, .navbar-nav {
    font-family: 'Lato', sans-serif;
} 

h1 {
    font-size: 62px;
    color: #333333;
}

h2 {
    font-size: 42px;
    font-weight: 300;
    color: #545454;
}

h3 {
    font-size: 30px;
    font-weight: 300;
    color: #333333;
}

p, li {
    color: #333333;
    font-size: 1.17em;
}

main {
    padding-bottom: 4em;
}

.jumbotron p {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 200;
    color: gray;
}

.lead {
    font-weight:bold;
    font-style: italic;
    font-size: 1.25em;
}

.footer-img {
    width: 90%;
    margin-right: -42px;
}

.footer-btn {
    margin-right: 5px;
}

.navbar {
    margin-bottom: 0;
}
        
#navbar-header-gradient {
    height: 2.4em;
    background: #FFFFFF; /* Fallback for outdated Browsers */
    background: -webkit-linear-gradient(top, white, white 0%, rgba(255, 255, 255 , 0.0)); /* older Safari and Chrome */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.0)); /* older Firefox */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.0)); /*  up-to-date browsers */
}
        
#navbar-footer-gradient {
    height: 2em;
    background: #FFFFFF; /* Fallback for outdated Browsers */
    background: -webkit-linear-gradient(bottom, white, white 0%, rgba(255, 255, 255 , 0.0)); /* older Safari and Chrome */
    background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.0)); /* older Firefox */
    background: linear-gradient(to top, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.0)); /*  up-to-date browsers */
}



.skill-list-3 {
  position: relative;
  margin: 2rem 0;
  width: 100%;
  height: 20rem;
}

.skill-list-3__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 1em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.65);
  font-size: 1.0em;
  line-height: 1em;
  font-weight: 700;
  text-align: center;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  -webkit-transition: box-shadow 0.1s ease;
  -moz-transition: box-shadow 0.1s ease;
  -o-transition: box-shadow 0.1s ease;
  transition: box-shadow 0.1s ease;
}
.skill-list-3__circle:hover {
  -webkit-box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.35);
  -webkit-transition: box-shadow 0.2s ease;
  -moz-transition: box-shadow 0.2s ease;
  -o-transition: box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease;
  cursor: pointer;
}
.skill-list-3__circle:first-child {
  z-index: 10;
}
.skill-list-3__circle:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}