@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
h1, h2, h3, h4, h5, h6 {
  font-family: "Lato","Segoe UI Light"; }

body {
  background-image: url(../images/blurred-blue.png);
  background-position: 100% 100%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-attachment: fixed;
  background-color: #2c3e50;
  color: #FFFFFF; }
  body h1 {
    font-weight: 300; }
  body a {
    color: #000;
    text-decoration: underline; }
  body a:hover, body a:active {
    color: #9b59b6;
    background: rgba(255, 255, 255, 0.7); }

header a {
  color: #fff;
  text-decoration: none; }
header a:hover, header a:active {
  color: #fff;
  background: none; }

@media screen and (max-width: 400px) {
  body {
    background-image: url(../images/blurred-blue_sm.png);
    background-position: 100% 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-attachment: fixed;
    background-color: #2c3e50;
    color: #FFFFFF; }
    body h1 {
      font-weight: 300; } }
li.divider {
  width: 100%;
  text-align: center; }

li.video {
  width: 100%; }

.grid .grid-item {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.2);
  padding: 1em;
  border-top: 0em solid #16a085;
  display: block; }
  .grid .grid-item .clean {
    padding: 0;
    border: none; }
  .grid .grid-item.vid {
    padding: 0;
    display: block; }

.grumble {
  background: url(../images/g2.png) -5% 105% no-repeat;
  opacity: 0.5;
  position: fixed;
  width: 100%;
  height: 100%; }

.vid-control {
  background: inherit; }
  .vid-control.play {
    background: #34495e; }

#gplus {
  border: none;
  background: #dd4b39;
  vertical-align: middle; }

#gplus:hover {
  background: white; }
  #gplus:hover a {
    color: #dd4b39; }

#twitter,
#xing,
#gplus,
#linkedin,
.vid-control {
  float: left;
  width: 33.33%;
  height: 100%;
  padding: 1em; }
  #twitter p,
  #xing p,
  #gplus p,
  #linkedin p,
  .vid-control p {
    font-size: 1em;
    font-family: "Lato","Segoe UI Light", inherit;
    margin: 0 auto;
    text-align: center; }
  #twitter a,
  #xing a,
  #gplus a,
  #linkedin a,
  .vid-control a {
    color: white; }

#xing {
  background: #006567; }
  #xing:hover {
    background: white; }
    #xing:hover a {
      color: #006567; }

#twitter {
  background: #55acee; }
  #twitter:hover {
    background: white; }
    #twitter:hover a {
      color: #55acee; }

#linkedin {
  background: #4875b4; }
  #linkedin:hover {
    background: white; }
    #linkedin:hover a {
      color: #4875b4; }

.circular {
  width: 12em;
  height: 12em;
  border-radius: 6em;
  -webkit-border-radius: 6em;
  -moz-border-radius: 6em;
  background: url(../images/phase_sm.jpg) 50% 30% no-repeat;
  background-size: cover;
  margin: 0 auto; }

#profile {
  text-align: center; }
  #profile a {
    text-decoration: underline;
    display: inline;
    color: "#fff"; }
  #profile h1 {
    margin-bottom: 0; }
  #profile p {
    margin-top: 0;
    margin-bottom: 0; }

.progressbar {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 0px;
  margin-bottom: 1em; }

.progressbar > div {
  background-color: rgba(255, 255, 255, 0.7);
  width: 100%;
  height: 10px; }