/*!
 * Font Styles
 **/
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/IY9HZVvI1cMoAHxvl0w9LVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


/*!
 * Reset Styles
 **/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*!
 * VERSION: 1.0
 * DATE: 2015-09-13
 * Main Styles
 * @author: Nils Vogt, hello.nils.vogt@gmail.com
 **/

/*
 * 1. Core Styles
 */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
html, body { height: 100%;  }
html {font-size: 13px;}
body { margin: 0; background: #f4f3f2; color: #53524b; font-family: 'Lato', sans-serif; }
strong { font-weight: bold }
strong.simple { font-weight: inherit; }
strong.tag { font-weight: inherit; display: inline-block; background: #333; color: #fff; line-height: 1; padding: 5px 6px; font-size: .7em; border-radius: 3px; }
em { font-style: italic; }
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; }
p { font-size: 1.4rem; line-height: 1.4em; }
p s_pan { font-weight: 300; font-size: 1.5em; display: inline-block; line-height: 1.4em; }
p, h1, h2, h3 { font-weight: 300; }
h1 { font-size: 3.5rem; line-height: 1.4em; margin: 0; }
h2 { font-size: 2.5rem; line-height: 1.4em; margin: 0 0 2.5rem 0; }
h3 { font-size: 2rem; line-height: 1.4em; margin: 0 0 2.5rem 0 }
hr { border: 0; border-top: 1px dashed #bbb; margin: 0.5rem 0 2rem; }
.clearfix:after { content: ""; display: block; clear: both; }

::selection { background: #000; color: #fff; }
::-moz-selection { background: #000; color: #fff; }

/*
 * 2. Core Layout
 */
.row { position: relative; }
.container { position: relative; width: 100%; max-width: 90rem; padding: 5rem 2rem ; margin: 0 auto;  }
.container-hero { padding: 40px 20px; }
.container-hero p { font-size: 2.0rem; }
.container-highlight { color: #000; }
.container-pull-up { top: -60px; background: inherit; }

.browserupgrade { position: absolute; top: 0; left: 0; width: 100%; background: #f2dede; color: #a94442; border-color: #ebccd1; border-width: 1px; padding: 2rem; text-align: center; }
.browserupgrade a { text-decoration: underline; }

.emphasize span { position: relative; font-size: 1em;}
.emphasize > span,
.emphasize > span > span { padding: 0.5em 0; background: #029ccf; color: #fff;  }
.emphasize > span > span { right: 1em; }
.emphasize > span > span span { left: 0.5em; z-index: 1; }

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bg-blueprint {
  background: url('../assets/images/blueprint.png'), -webkit-radial-gradient(center, ellipse cover,  rgba(,1) 0%,rgba(9,82,168,1) 100%) fixed;
  background: url('../assets/images/blueprint.png'), radial-gradient(ellipse at center,  rgba(0,180,240,1) 0%,rgba(9,82,168,1) 100%) fixed;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b4f0', endColorstr='#0952a8',GradientType=1 );
}

/*
 * Buttons
 */
.buttonbar { text-align: right; }
.btn { position: relative; display: inline-block; padding: 6px 12px; font-size: 13px; font-weight: bold; line-height: 20px; color: #333; white-space: nowrap; vertical-align: middle; cursor: pointer; background-color: #eee; background-image: -webkit-linear-gradient(#fcfcfc, #eee); background-image: linear-gradient(#fcfcfc, #eee); border: 1px solid #d5d5d5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; }
.btn:hover { text-decoration: none; }
.btn-primary { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.15); background-color: #60b044; background-image: -webkit-linear-gradient(#8add6d, #60b044); background-image: linear-gradient(#8add6d, #60b044); border-color: #5ca941; }
.btn-primary:hover { color: #fff; background-color: #569e3d; background-image: -webkit-linear-gradient(#79d858, #569e3d); background-image: linear-gradient(#79d858, #569e3d); border-color: #4a993e; }

/*
 * Scrollbar
 */
body::-webkit-scrollbar-corner { background-color: transparent; }
body::-webkit-scrollbar { width: 9px;}
body::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }

/*
 * 3. Page Specifics
 */
#page { position: relative; min-width: 320px; border-radius: 2px; min-height: 100%; }

article:nth-child(even) {background: #f0f0f0}
article:nth-child(odd) {background: #fff}
article img { max-width: 100%; border: 10px solid transparent; box-shadow: 0 0 10px #999; }
article p,
article ul { margin: 0 0 2rem; }
article ul li { margin: 0 0 0.5rem; }
article p a { color: #00b4f0; }
article h1,
article h2,
article h3,
article h4 { overflow: hidden; text-overflow: ellipsis; }

footer { background: #43494c; text-align: left; }
footer .container { padding: 2rem 2rem 5rem; }
footer a { color: #99d4ff; }
footer p { padding: 15px 0;  font-size: 11px; color: #ccc; font-family: Arial; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset; border-top: 1px solid rgba(0,0,0,.15); }

footer ul { margin: 0 0 20px; }
footer ul li a img { position: absolute; left: 50%; top: 0; margin: 0 0 0 -0.75rem; width: 1.5rem; height: 1.5rem; opacity: 0; transition: transform 0.4s, opacity 0.4s; }
@media(min-width: 501px){
  footer ul { display: inline-block; }
  footer > .container > a { float: right; display: inline-block; }
  footer ul li {  border-right: 1px solid #555; display: inline-block; }
  footer ul li a { position: relative; padding: 0 1rem; display: inline-block; }
  footer ul li:last-child { border: none; }
  footer ul li:first-child a { padding-left: 0; }
  footer ul li a:hover img { opacity: 1; transform: translate(0, -1.7rem); } 
}
@media(max-width: 500px){
  footer { text-align: center; }
  footer > .container > a { display: inline-block; margin: 0 0 1rem; }
  footer ul li { center; margin: 0 0 1rem; }
}

/* home specific styles */
#page.home header.row { padding: 200px 20px; color: #fff; }
#page.home .row-intro { overflow: hidden; }
#page.home .row-intro:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,.15),transparent 53%),linear-gradient(to top,rgba(0,0,0,.25),transparent 53%); }

#page.home .row-intro .container-hero svg { width: 80px; height: 80px; position: relative; display: inline-block; border-right: 2px solid #fff; margin: 0 11px 0 0; padding: 4px; }
#page.home .row-intro .headline-container { display: inline-block; position: relative; top: -0.6rem; }


#page.home .row-intro .headline-container h1 { transition: all 0.9s cubic-bezier(0.175, 0.885, 0.320, 1.475); font-weight: lighter; line-height: 1em; text-align: left; }
#page.home .row-intro .headline-container h2 { transition: all 1s cubic-bezier(0.175, 0.885, 0.320, 1.475); font-size: 1.6rem; margin: 0 0 2.5rem;}
#page.home .row-intro .headline-container h2:before, h2:after { color: #fff; text-shadow: none; }
#page.home .row-intro .headline-container h2:before { content: "<"; }
#page.home .row-intro .headline-container h2:after { content: " />"; }
@media(max-width: 430px){
  #page.home .row-intro .container-hero svg { display: none; }
  #page.home .row-intro .headline-container h1,
  #page.home .row-intro .headline-container h2 { text-align: center; }
}

#page.home .row-intro p { transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275); }
#page.home .row-intro-hide h1 { transform: translate(0, 30px); opacity: 0; }
#page.home .row-intro-hide h2 { transform: translate(0, 50px); opacity: 0; }
#page.home .row-intro-hide p { transform: translate(0, -30px); opacity: 0; }
#page.home .row-highlight { padding-bottom: 0;  background: #fff; }
#page.home .row-highlight h2 span { position: relative; display: inline-block; overflow: hidden; text-indent: 3rem; vertical-align: middle; width: 3rem; height: 3rem; }
#page.home .row-highlight h2 span:before{ content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgNTAiPjxwYXRoIGQ9Ik0yNSAzOS43bC0uNi0uNUMxMS41IDI4LjcgOCAyNSA4IDE5YzAtNSA0LTkgOS05IDQuMSAwIDYuNCAyLjMgOCA0LjEgMS42LTEuOCAzLjktNC4xIDgtNC4xIDUgMCA5IDQgOSA5IDAgNi0zLjUgOS43LTE2LjQgMjAuMmwtLjYuNXpNMTcgMTJjLTMuOSAwLTcgMy4xLTcgNyAwIDUuMSAzLjIgOC41IDE1IDE4LjEgMTEuOC05LjYgMTUtMTMgMTUtMTguMSAwLTMuOS0zLjEtNy03LTctMy41IDAtNS40IDIuMS02LjkgMy44TDI1IDE3LjFsLTEuMS0xLjNDMjIuNCAxNC4xIDIwLjUgMTIgMTcgMTJ6Ii8+PC9zdmc+"); 
  display: inline-block; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; vertical-align: middle; color: #000; 
}
#page.home .row-intro iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; }

#page.home .row-intro #billboard { background: #3286d7; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#page.home .row-intro #billboard canvas { width: 100%; height:100%; opacity: 0.2; }

#page.home .row-github { text-align: left; }
#page.home .row-github pre { text-align: left; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; padding: 1rem; background: #fff; overflow-x: auto; border-left: 4px solid #53524b; margin: 0 0 2rem;}
#page.home .row-github .github__example { position: relative; text-align: center; background: #ddd; padding: 2rem; border-bottom: 2px solid #00b4f0; backgrou_nd: url('https://media.giphy.com/media/iF3M9gPPCdulq/giphy.gif');}
#page.home .row-github .github__example:after { content: ""; display: block; position: absolute; border: 1.5rem solid transparent; border-top-color: #00b4f0; top: 100%; left: 50%; margin: 0 0 0 -1.5rem; }
#page.home .row-github .github__example:last-child:after { display: none; }

#page.home { text-align: center; }

#page.home .logo-nivo-bar1 { transition: transform 0.5s, opacity 0.5s; opacity: 0; transform: scaleY(0); transform-origin: 0 100%; }
#page.home .logo-nivo-bar2 { transition: transform 0.5s, opacity 0.5s; opacity: 0; transform: scaleY(0); transform-origin: 0 0%; transition-delay: 0.1s }
#page.home .logo-nivo-bar3 { transition: transform 0.5s, opacity 0.5s; opacity: 0; transform: scaleY(0); transform-origin: 0 100%; transition-delay: 0.2s }

#page.home .logo-nivo .logo-nivo-bar1,
#page.home .logo-nivo .logo-nivo-bar2,
#page.home .logo-nivo .logo-nivo-bar3 { transform: scaleY(1); opacity: 1; }
#page.home .row-intro-hide .logo-nivo .logo-nivo-bar1,
#page.home .row-intro-hide .logo-nivo .logo-nivo-bar2,
#page.home .row-intro-hide .logo-nivo .logo-nivo-bar3 { transform: scaleY(0); opacity: 0; }

#page.home nav .logo-nivo .logo-nivo-bar1,
#page.home nav .logo-nivo .logo-nivo-bar2,
#page.home nav .logo-nivo .logo-nivo-bar3 { transform: scaleY(0); opacity: 0; }
#page.home .row-intro-hide nav .logo-nivo .logo-nivo-bar1,
#page.home .row-intro-hide nav .logo-nivo .logo-nivo-bar2,
#page.home .row-intro-hide nav .logo-nivo .logo-nivo-bar3 { transform: scaleY(1); opacity: 1; }

#page.home nav { position: fixed; top: 0; left: 0; width: 100%; min-width: 320px; background: transparent; text-align: left; z-index: 4; transition: background-color 0.4s}
#page.home nav .container { top: 1px;  }
#page.home nav .container { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.7); transition: border-color 0.4s;}
#page.home nav .container > a { float: right; margin: 1.6rem; font-weight: 300; color: #fff; cursor: }
#page.home nav .social-list { margin: 10px; display: inline-block; }
#page.home nav .social-list li { display: inline-block; padding: 0 0.5rem; }
#page.home nav .social-list li:last-child { border: 0 ; }
#page.home nav .social-list li a { display: inline-block; position: relative; padding: 5px; }
#page.home nav .social-list li a:before { content: ""; display: block; position: absolute; top: 0; right: 0; border: 3px solid transparent; border-top-color: #fff; border-right-color: #fff; }
#page.home nav .social-list img { width: 1.5rem; height: 1.5rem; position: relative; }
#page.home nav.nav-fixated { background: #43494c; }
#page.home nav.nav-fixated .container { border-bottom-color: transparent; }
#page.home nav .social-list { transition: transform 0.7s; transform: translate(-40px, 0); }
#page.home .row-intro-hide nav .social-list { transform: translate(0,0); }
@media(max-width: 350px){
  #page.home nav > .container > a { display: none; }
}

#page.home .code-file { position: relative; background: #333; padding: 4rem 0 3rem; margin: 1rem 1rem 3rem; width: 8rem; display: inline-block; border-radius: 0.5rem; font-size: 2rem; font-weight: 400;}
#page.home .code-file em { font-size: 0.9rem;background: #53524b; color: #fff; margin: 1rem 0 0 0; padding: 2px; display: block; text-align: center; font-style: normal; white-space: nowrap;}
#page.home .code-file { transition: all 1s cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-delay: 0s, 0.5s, 1s, 1.5s;}
#page.home .code-file:before { color: #fff; }
#page.home .code-file:nth-child(1)  { transition-delay: 0.05s; }
#page.home .code-file:nth-child(2)  { transition-delay: 0.1s; }
#page.home .code-file:nth-child(3)  { transition-delay: 0.15s; }
#page.home .code-file:nth-child(4)  { transition-delay: 0.2s; }
#page.home .code-file:nth-child(5)  { transition-delay: 0.25s; }
#page.home .code-file:nth-child(6)  { transition-delay: 0.3s; }
#page.home .code-file:nth-child(7)  { transition-delay: 0.35s; }
#page.home .code-file:nth-child(8)  { transition-delay: 0.4s; }
#page.home .code-file:nth-child(9)  { transition-delay: 0.45s; }
#page.home .code-file:nth-child(10)  { transition-delay: 0.5s; }

#page.home ul.is-invisible .code-file { transform: scale(0.5); opacity: 0; }
#page.home .code-file:after { content: ""; display: block; position: absolute; top: 0; right: 0; width: 1rem; height: 1rem; background: #f4f3f2; }
#page.home .code-file:after { width: 0; height: 0; border: 1rem solid transparent; border-bottom-color: #888; border-left-color: #888;}

#page.home .code-file--html { background: #f06429 }
#page.home .code-file--html:before { content: "</>";display: inline-block; }
#page.home .code-file--html:after { border-bottom-color: #e34f27; border-left-color: #e34f27; }

#page.home .code-file--css { background: #2aabde }
#page.home .code-file--css:before { content: "{:;}"; }
#page.home .code-file--css:after { border-bottom-color: #026fb8; border-left-color: #026fb8; }

#page.home .code-file--js { background: #ffc636 }
#page.home .code-file--js:before { content: "{}();"; }
#page.home .code-file--js:after { border-bottom-color: #e6b002; border-left-color: #e6b002; }

#page.home .code-file--php { background: #8892BF }
#page.home .code-file--php:before { content: "<?"; }
#page.home .code-file--php:after { border-bottom-color: #4F5B93; border-left-color: #4F5B93; }

#page.home .code-file--sql { background: #df8d00 }
#page.home .code-file--sql:before { content: "('..')"; }
#page.home .code-file--sql:after { border-bottom-color: #c67d00; border-left-color: #c67d00; }

#page.home .code-file--objc { background: #0395fa }
#page.home .code-file--objc:before { content: "[:]"; }
#page.home .code-file--objc:after { border-bottom-color: #016eba; border-left-color: #016eba; }

#page.home .code-file--as3 { background: #f6213a }
#page.home .code-file--as3:before { content: "{}();"; }
#page.home .code-file--as3:after { border-bottom-color: #b01b2d; border-left-color: #b01b2d; }

#page.home .code-file--learning { background: #2aabde; opacity: 0.3; }
#page.home .code-file--learning:before { content: "..."; }
#page.home .code-file--learning:after { border-bottom-color: #026fb8; border-left-color: #026fb8; }

#page.home .stage { max-width: 600px; width: 100%; margin: 0 auto; opacity: 0; transition: opacity 0.8s; }
#page.home .stage > svg { max-width: 100%; cursor: pointer; margin: -4rem 0; }

#page.home .animation-tiles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

/* imprint specific styles */
#page.imprint h2,
#page.imprint h1 { color: #555; font-size: 24px; margin: 0 0 20px;}
#page.imprint h2 { font-size: 18px; }
#page.imprint p { margin: 0 0 20px; }
#page.imprint p a:hover { text-decoration: none; }

/* unspecific extras */
.animation--pulsate { animation: pulsate 0.8 s alternate infinite ease-in-out; }
@keyframes pulsate {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}