/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
Base styles:  opinionated defaults
========================================================================== */
html,button,input,select,textarea {
  color: #222;
}

body {
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:  h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers:  h5bp.com/i/440
 */
img {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  -webkit-resize: vertical;
  -moz-resize: vertical;
  resize: vertical;
}

/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
Author's custom styles
========================================================================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; /* Firefox */
/* Safari */
}

html,body {
  position: relative;
  height: 100%;
}

.clear {
  clear: both;
}

body {
  text-align: center;
  background: #241f27;
  overflow: hidden;
}

.sky {
  display: none;
  position: relative;
  height: 85%;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 1rem;
}

header {
  position: relative;
  display: inline-block;
  float: left;
  padding: .5rem 1rem;
  background: #fff;
  font: 1.5rem/1 monospace;
  z-index: -1;
  border-radius: .25rem;

  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);
  box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

.ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5%;
  background: darkolivegreen;
  border-radius: 10% 10% 0 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  opacity: 0.3;
}

s.frisbee {
  display: inline-block;
  width: 5rem;
  position: absolute;
  top: 20px;
}

s.frisbee:nth-child(even) {
  right: -7.5rem;

  -webkit-animation: fly-left 8.5s ease-out infinite;
  -moz-animation: fly-left 8.5s ease-out infinite;
  -ms-animation: fly-left 8.5s ease-out infinite;
  -o-animation: fly-left 8.5s ease-out infinite;
  animation: fly-left 8.5s ease-out infinite;

  -webkit-transform: translateY(5rem) rotate(10deg) scale(1.5);
  -moz-transform: translateY(5rem) rotate(10deg) scale(1.5);
  -o-transform: translateY(5rem) rotate(10deg) scale(1.5);
  -ms-transform: translateY(5rem) rotate(10deg) scale(1.5);
  transform: translateY(5rem) rotate(10deg) scale(1.5);
}

s.frisbee:nth-child(odd) {
  left: -7.5rem;

  -webkit-animation: fly-right 8.5s ease-out infinite;
  -moz-animation: fly-right 8.5s ease-out infinite;
  -ms-animation: fly-right 8.5s ease-out infinite;
  -o-animation: fly-right 8.5s ease-out infinite;
  animation: fly-right 8.5s ease-out infinite;

  -webkit-transform: translateY(5rem) rotate(-10deg) scale(1.5);
  -moz-transform: translateY(5rem) rotate(-10deg) scale(1.5);
  -o-transform: translateY(5rem) rotate(-10deg) scale(1.5);
  -ms-transform: translateY(5rem) rotate(-10deg) scale(1.5);
  transform: translateY(5rem) rotate(-10deg) scale(1.5);
}

@keyframes "fly-left" {
 100% {
    right: 100%;
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: .5;
 }

}

@-moz-keyframes fly-left {
 100% {
   right: 100%;
   -moz-transform: scale(.5);
   transform: scale(.5);
   filter: alpha(opacity=50);
   opacity: .5;
 }

}

@-webkit-keyframes "fly-left" {
 100% {
   right: 100%;
   -webkit-transform: scale(.5);
   transform: scale(.5);
   filter: alpha(opacity=50);
   opacity: .5;
 }

}

@-ms-keyframes "fly-left" {
 100% {
   right: 100%;
   -ms-transform: scale(.5);
   transform: scale(.5);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
   opacity: .5;
 }

}

@-o-keyframes "fly-left" {
 100% {
   right: 100%;
   -o-transform: scale(.5);
   transform: scale(.5);
   filter: alpha(opacity=50);
   opacity: .5;
 }

}

@keyframes "fly-right" {
 100% {
    left: 100%;
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: .5;
 }

}

@-moz-keyframes fly-right {
 100% {
   left: 100%;
   -moz-transform: scale(.5);
   transform: scale(.5);
   filter: alpha(opacity=50);
   opacity: .5;
 }

}

@-webkit-keyframes "fly-right" {
 100% {
   left: 100%;
   -webkit-transform: scale(.5);
   transform: scale(.5);
   filter: alpha(opacity=50);
   opacity: .5;
 }

}

@-ms-keyframes "fly-right" {
 100% {
   left: 100%;
   -ms-transform: scale(.5);
   transform: scale(.5);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
   opacity: .5;
 }

}

@-o-keyframes "fly-right" {
 100% {
   left: 100%;
   -o-transform: scale(.5);
   transform: scale(.5);
   filter: alpha(opacity=50);
   opacity: .5;
 }

}

s.frisbee:nth-child(2) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}

s.frisbee:nth-child(3) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -ms-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

s.frisbee:nth-child(4) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}

s.frisbee:nth-child(5) {
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
  -ms-animation-delay: 7s;
  -o-animation-delay: 7s;
  animation-delay: 7s;
}

s.frisbee:nth-child(6) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -ms-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

s.frisbee:nth-child(7) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -ms-animation-delay: 9s;
  -o-animation-delay: 9s;
  animation-delay: 9s;
}

s.frisbee:nth-child(8) {
  -webkit-animation-delay: 11s;
  -moz-animation-delay: 11s;
  -ms-animation-delay: 11s;
  -o-animation-delay: 11s;
  animation-delay: 11s;
}

s.frisbee:nth-child(9) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

s.frisbee:nth-child(10) {
  -webkit-animation-delay: 13s;
  -moz-animation-delay: 13s;
  -ms-animation-delay: 13s;
  -o-animation-delay: 13s;
  animation-delay: 13s;
}

s.frisbee:nth-child(11) {
  -webkit-animation-delay: 14s;
  -moz-animation-delay: 14s;
  -ms-animation-delay: 14s;
  -o-animation-delay: 14s;
  animation-delay: 14s;
}

s.frisbee:nth-child(12) {
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -ms-animation-delay: 15s;
  -o-animation-delay: 15s;
  animation-delay: 15s;
}

s.frisbee:nth-child(13) {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -ms-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}

s.frisbee:nth-child(14) {
  -webkit-animation-delay: 17s;
  -moz-animation-delay: 17s;
  -ms-animation-delay: 17s;
  -o-animation-delay: 17s;
  animation-delay: 17s;
}

s.frisbee:nth-child(15) {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -ms-animation-delay: 18s;
  -o-animation-delay: 18s;
  animation-delay: 18s;
}

s.frisbee:nth-of-type(3n) label {
  background: #aaa;
}

s.frisbee:nth-of-type(3n+1) label {
  background: #89988E;
}

s.frisbee:nth-of-type(3n+2) label {
  background: #aaa;
}

.frisbee label {
  display: inline-block;
  background: crimson;
  width: 4rem;
  height: 0.8rem;
  border-radius: 100% 100% .5rem .5rem;

  -webkit-transition: .2s;
  -moz-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;

  -webkit-box-shadow: inset 0 -.25rem rgba(0,0,0,.2);
  box-shadow: inset 0 -.25rem rgba(0,0,0,.2);
}

.frisbee label:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.card {
  display: -webkit-inline-flex;
  display: inline-flex;
  padding-left: 215px;
  -webkit-transition: opacity .25s, -webkit-filter .25s, filter .25s;
  -moz-transition: opacity .25s, -o-transition:  opacity .25s, -o-filter .25s, filter .25s;
  -ms-transition: opacity .25s, -ms-filter .25s, filter .25s;
  transition: opacity .25s, filter .25s, filter .25s;
}

.prof {
  float: left;
  position: relative;
  z-index: 1;
  width: 165px;
  height: 330px;
  background: url(../images/train.jpg) #f9f9f9;

  -webkit-background-size: 200% 100%;
  -moz-background-size: 200% 100%;
  background-size: 200% 100%;

  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  border-radius: 0.3em 0 0 0.3em;
}

.twitter-icon {
  width: 16px;
  height: 16p;
}

.prof:nth-child(2) {
  background-position: 165px 0;

  -webkit-box-shadow: inset 165px 0 rgba(0,0,0,0);
  box-shadow: inset 165px 0 rgba(0,0,0,0);

  -webkit-transition: box-shadow .4s, transform .4s;
  -moz-transition: box-shadow .4s, transform .4s;
  -o-transition: box-shadow .4s, transform .4s;
  -ms-transition: box-shadow .4s, transform .4s;
  transition: box-shadow .4s, transform .4s;

  -webkit-transform: perspective(500);
  -moz-transform: perspective(500);
  -o-transform: perspective(500);
  -ms-transform: perspective(500);
  transform: perspective(500);
  border-radius: 0 0.3em 0.3em 0;
}

section:hover .prof:nth-child(2) {
  -webkit-transform: perspective(500) rotateY(-45deg);
  -moz-transform: perspective(500) rotateY(-45deg);
  -o-transform: perspective(500) rotateY(-45deg);
  -ms-transform: perspective(500) rotateY(-45deg);
  transform: perspective(500) rotateY(-45deg);

  -webkit-box-shadow: inset 165px 0 rgba(0,0,0,.2);
  box-shadow: inset 165px 0 rgba(0,0,0,.2);
}

.sidebar {
  display: none;
  text-decoration: none;
  z-index: 0;
  width: 220px;
  text-align: right;
  -webkit-align-self: center;
  -moz-align-self: center;
  -o-align-self: center;
  -ms-align-self: center;
  align-self: center;

  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}

.under {
  background: rgba(245,245,245,1);

  -webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255,0.7);
  box-shadow: inset 0px 1px 1px rgba(255,255,255,0.7);
  margin-left: -1px;
  border-bottom-right-radius: 5px;
  font-family: "Open Sans", sans-serif;
  height: 250px;
  position: relative;
  left: -210px;
  border: 1px solid rgba(0,0,0,.4);
  color: #888;
  line-height: 16px;

  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  -ms-transition: .5s;
  transition: .5s;
  border-radius: 5px;
  margin: 5px 0;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}

section:hover .sidebar .under {
  left: -22px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

.under:nth-child(2) {
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  -o-transition-delay: .1s;
  -ms-transition-delay: .1s;
  transition-delay: .1s;
}

.under:nth-child(3) {
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -o-transition-delay: .2s;
  -ms-transition-delay: .2s;
  transition-delay: .2s;
}

strong {
  display: block;
  color: #000;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
}

label {
  font-size: 10px;
  text-transform: uppercase;
}

.under:hover,.under:hover strong,a:hover {
  color: #0084B4;
}

.under h2.name {
  font-size: 30px;
  font-weight: 300;
  color: rgba(30,30,30,1);
  padding: 0;
  margin: 20px 10px 0px 30px;
}

.under h3.location {
  font-size: 30px;
  font-weight: 300;
  color: rgba(170,170,170,1);
  padding-top: 40px;
  margin: -5px 10px 10px 30px;
}

.under ul.contact_information {
  padding-left: 22px;
  margin-top: 20px;
  list-style-type: none;
}

.under ul.contact_information li {
  height: 33px;
  width: 185px;
  line-height: 25px;
  font-weight: 300;
  font-size: 13px;
  color: rgba(140,140,140,1);
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  padding: 5px 0px;
  background-repeat: no-repeat;

  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  background-size: 18px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.1);

  -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  cursor: default;
}

.under ul.contact_information li.mail {
  font-size: 11px;
}

.under ul.contact_information li:before {
  content: "";
  width: 25px;
  height: 25px;
  display: block;
  float: left;
  background-position: center;

  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  margin-right: 5px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=40);
  opacity: 0.4;
}

.under ul.contact_information li:hover:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=70);
  opacity: 0.7;
}

.under ul.contact_information li .love2 {
  display: none;
}

.under ul.contact_information li.work:before {
  background-image: url('./../images/icons/wireless.png');
}

.under ul.contact_information li.website:before {
  background-image: url('http://schulzmarcel.de/x/icons/globe_24.png');
}

.under ul.contact_information li.heart .dynamo {
  height: 25px !important;
  text-align: right !important;
}

.under ul.contact_information li.heart:before {
  background-image: url('./../images/icons/heart.png');
}

.under ul.contact_information li.heart:hover:before {
  background-image: url('./../images/icons/heart-in-love.png');
}

.under ul.contact_information li.github:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity: 0.7;
  background-image: url('./../images/icons/github.png');
}

.under ul.contact_information li.github:hover:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

.under ul.contact_information li.where:before {
  background-image: url('./../images/icons/maps.png');
}

.under ul.contact_information li.resume:before {
  background-image: url('./../images/icons/downloads.png');
}

a.nostyle {
  color: inherit;
  text-decoration: none;
  padding: 0;
  margin: 0;
}

.containerc-content {
  margin-top: 170px;
  font-family: "Open Sans Light", "Open Sans", "Segoe UI", Helvetica, Arial;
  color: #888;
  font-weight: lighter;
}

.containerc-content .messages {
  padding-top: 10px;
  font: .8rem/1 sans-serif;
  color: #ddd;
}

@media screen and (max-width:780px) {
  .card {
    padding-left: 170px !important;
  }
}

@media screen and (max-width:680px) {
  .card {
    padding-left: 150px !important;
  }
}

@media screen and (max-width:580px) {
  .card {
    padding-left: 120px !important;
  }
}

@media screen and (max-width:480px) {
  .card {
    padding-left: 23px !important;
  }
}

/* ==========================================================================
Helper classes
========================================================================== */
/*
 * Image replacement
 */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden; /* IE 6/7 fallback */
*text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

/*
 * Hide from both screenreaders and browsers:  h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders:  h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard:  h5bp.com/p
 */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix:  contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `: before` to contain the top-margins of child elements.
 */
.clearfix:before,.clearfix:after {
  content: " "; /* 1 */
display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1;
}

/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
Theses examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,(-o-min-device-pixel-ratio: 5/4),(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection:  h5bp.com/r
========================================================================== */
@media print {
  * {
  background: transparent !important;
  color: #000 !important; /* Black prints faster:  h5bp.com/s */

-webkit-box-shadow: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

a,a:visited {
  text-decoration: underline;
}

a[href]:after {
  content: " (" attr(href) ")";
}

abbr[title]:after {
  content: " (" attr(title) ")";
}

/*
   * Don't show links for images, or javascript/internal links
   */
.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {
  content: "";
}

pre,blockquote {
  border: 1px solid #999;
  page-break-inside: avoid;
}

thead {
  display: table-header-group; /* h5bp.com/t */
}

tr,img {
  page-break-inside: avoid;
}

img {
  max-width: 100% !important;
}

@page {
  margin: 0.5cm;
}

p,h2,h3 {
  orphans: 3;
  widows: 3;
}

h2,h3 {
  page-break-after: avoid;
}

}