/* Temp */

div.pink {
	border: 1px solid pink;
}
div.aqua {
	border: 1px solid aqua;
}


/*********************************************
 * GLOBAL
 *********************************************/

.container.content.right {
	margin-right: 0.5em;
}

.row.bigger {
	width: 110%;
	margin-left: -1.35em;
}
.row.biggest {
	width: 120%;
  margin-left: -2.2em;
}

div.no-spacing,
blockquote.no-spacing {
	margin: 0;
	padding: 0;
	width: 100%;
}

div.left {
	text-align: left;
}
div.right {
	text-align: right;
}

div.lgt-ctn {
	background: rgba(254,254,254,1);
}
div.drk-ctn {
	background: rgba(51,51,51,1);
}

/*********************************************
 * OTHER PAGES
 *********************************************/

.full.clr {
	background: transparent;
}

/*********************************************
 * NAVIGATION
 *********************************************/

.navbar {
	font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-size: 90%;
}

.navbar-inverse {
	background-color: rgba(58, 61, 68, 0.99) !important;
	border-color: transparent !important;
}

.navbar-inverse .navbar-toggle {
	border-color: transparent !important;
}

.navbar-inverse .navbar-toggle .icon-bar {
	background-color: rgba(93, 226, 201, 0.85) !important;
}

.navbar-fixed-bottom .navbar-collapse,
.navbar-fixed-top .navbar-collapse {
	max-height: inherit;
}

button#trigger-overlay {
    background-color: transparent;
    border: transparent;
}

div.navigate-menu {
    border: none;
    background: transparent;
    padding: 0;
}

.navbar-brand img {
	width: 2.25em;
	height: 2.25em;
	opacity: 0.25;
	margin: -0.25em 0 0 1.25em;
}
.navbar-brand img:hover {
	opacity: 1;
}

.navbar-collapse.in {
	padding: 0;
	font-size: 150%;
	text-align: right;
}
.navbar-collapse.in .navbar-nav {
  margin: 0;
}
.navbar-collapse.in .nav>li>a {
	padding: 1em 0.75em;
}
.navbar-collapse.in .nav>li>a:hover {
	/*background: rgba(247,120,107,0.75);*/
	background: rgba(103, 243, 219, 0.93);
	color: rgba(85, 85, 85, 0.95);
 	padding: 1em 0.75em;
}

/* ICON */

.reveal .control-menu,
aside.control-menu {
    display: none;
    position: fixed;
    width: 40px;
    height: 40px;
    /*z-index: 30;*/
		z-index: 50;
    right: .75em;
    top: 0.75em;
    -webkit-user-select: none;
    opacity: 0.25;
    transition: transform 350ms cubic-bezier(0.4, 0, 1, 1);
    /* transform: rotate( -45deg ); */
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-animation-duration: 1.15s;
    animation-duration: 1.15;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.reveal .control-menu:hover,
aside.control-menu:hover {
    opacity: 0.5;
    transition: transform 250ms cubic-bezier(0.4, 0, 1, 1);
    -webkit-animation-name: wobble;
    animation-name: wobble;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.reveal .controls{
	    display: none;
    position: fixed;
    -webkit-user-select: none;
}
.reveal .controls .enabled {
	opacity: 0.2 !important;
}

.reveal .controls .navigate-right, 
.reveal .controls .navigate-right.enabled,
.reveal .controls .navigate-left, 
.reveal .controls .navigate-left.enabled,
.reveal .controls .navigate-up, 
.reveal .controls .navigate-up.enabled,
.reveal .controls .navigate-down, 
.reveal .controls .navigate-down.enabled {
	border-right-width: 0;
	border-left-width: 0;
	border-top-width: 0;
	border-bottom-width: 0;
	border-right-color: transparent !important;
	border-left-color: transparent !important;
	border-top-color: transparent !important;
	border-bottom-color: transparent !important;
	font-size: 2.5em;
	margin: 0.25em;
}

/*********************************************
 * BUTTONS
 *********************************************/

.row.links div.R {
	margin-left: -1.5%;
}

button {
	background-color: transparent;
	border: transparent;
}
a.btn {
	padding: 0.3em 1.7em 0.3em 2.2em;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	margin-bottom: 0.25em;
	font-family: "Tw Cen MT", "Futura", "Montserrat", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-weight: lighter;
}
a.btn:hover {
	padding: 0.3em 1.7em 0.3em 2.2em;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	font-family: "Tw Cen MT", "Futura", "Montserrat", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
a.btn.drk {
	color: rgba(254,254,254,0.5);
	background-color: rgba(51,51,51,1);
	border: 0.15em solid transparent;
	padding: 0.3em 1.7em 0.3em 2.2em;
}
a.btn.drk:hover {
	color: rgba(51,51,51,1);
	background-color: rgba(254,254,254,0.05);
	border: 0.15em solid rgba(51,51,51,0.85);
	font-family: "Tw Cen MT", "Futura", "Montserrat", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	letter-spacing: 0.5em;
	padding: 0.3em 1.7em 0.3em 2.2em;
}
a.btn.lgt {
	color: rgba(51,51,51,0.5);
	background-color: rgba(254,254,254,0.75);
	padding: 0.3em 1.7em 0.3em 2.2em;
}
a.btn.lgt:hover {
	color: rgba(51,51,51,0.75);
	background-color: rgba(254,254,254,0.25);
	border: 0.15em solid rgba(51,51,51,0.75);
	font-family: "Tw Cen MT", "Futura", "Montserrat", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	letter-spacing: 0.5em;
	padding: 0.3em 1.7em 0.3em 2.2em;
}
a.btn.wht {
	color: rgba(254,254,254,1);
}
a.btn.symb {
	margin: 0;
	padding: 0 10%;
	opacity: 0.5;
}
a.btn.symb:hover {
	margin: 0;
	padding: 0 10%;
	opacity: 1;
}

/*********************************************
 * HEADER TYPOGRAPHY H1 - H6 + DIVIDERS
 *********************************************/

.row,drk,
h3.drk,
h4.drk {
	color: rgba(51,51,51,1);
}
.row.lgt,
h3.lgt,
h4.lgt {
	color: rgba(254,254,254,1);
}

.bold {
	font-weight: bolder;
}
.row.lightly {
	opacity: 0.75;
}
.row.lighter {
	opacity: 0.5;
}
.row.lightest {
	opacity: 0.25;
}

h1.header-title {
	color: rgba(240, 248, 255, 1);
	font-family: "Futura", "Tw Cen MT", "Montserrat", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size:750%;
	text-transform: capitalize;
	letter-spacing: 0.007em;
	margin-top:0.15em;
}

.row.drk-border-top {
	border-top:1px solid rgba(45,45,46,0.25);
	margin-top: 0.5em;
}
.row.drk-border-bottom {
	border-bottom:1px solid rgba(45,45,46,0.25);
	margin-bottom: 0.5em;
}
.col-xs-12.lgt-brd-bottom {
	border-bottom:1px solid rgba(245,245,246,0.75);
	margin-bottom: 0.5em;
}
.row.title.border {
	border-bottom:1px solid rgba(254,245,245,0.5);
	margin-bottom: 0.5em;
}
.row.cate.border {
	border-top: 1.5px solid rgba(247, 113, 98, 0.95);
	padding: 1.75% 0 0 0;
	margin-top: -4.75px;
}
.row.describe.more.border {
	border-bottom:1px solid rgba(45,45,46,0.25);
	margin-bottom: 0.5em;
}
.row.notes.border {
	border-bottom:1px solid rgba(45,45,46,0.25);
	margin-bottom: 0.5em;
}

blockquote.normal {
	font-style: normal;
}

/*********************************************
 * HEADER
 *********************************************/

.row.ribbon {
	width: 40%;
	font-size: 0.75em;
}
hr.ribbon {
	width: 2.5em;
	/*padding-top: 5.5%;*/
	margin-top: 70%;
	border-top: 0.37em solid rgba(153, 153, 153, 0.75);
}
hr.ribbon.prj {
	width: 2em;
	/*padding-top: 5.5%;*/
	margin-top: 55%;
	border-top: 0.37em solid rgba(81, 78, 81,1);
}
hr.ribbon.R {
	float: right;
}
hr.ribbon.L {
	float: left;
}
.row.ribbon div.M {
	background-color:rgba(153, 153, 153, 0.25);
	padding:4.5% 0 0.5% 0;
}
.row.ribbon.prj div.M {
	background-color: rgba(81, 78, 81,1);
  padding: 4.5% 0 0.5% 0;
}
h3.ribbon.M {
	letter-spacing:0.5em;
	text-transform:uppercase;
	font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
	font-weight: 800;
	padding:2%;
	margin: -4% 0 1% 5%;
	color:rgba(51,51,51,0.8);
}
h3.ribbon.prj.M {
	letter-spacing:0.75em;
	text-transform:uppercase;
	font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
	font-weight: normal;
	font-size: 120%;
	padding:2%;
	margin: -4% 0 1% 5%;
	color:rgba(254,254,254,0.8);
}
.row.ribbon div.M:hover {
	background: rgba(41, 41, 41, 0.5);
}
.row.ribbon.prj div.M:hover {
	background: rgba(81, 78, 81,1);
}
a.ribbon.prj {
	color:rgba(254,254,254,0.5);
}
a.ribbon.prj:hover {
	color:rgba(254,254,254,0.85);
}
a.ribbon:hover {
	letter-spacing:0.5em !important;
	color: rgba(254, 254, 254, 1);
}

.row.ribbon2 div.R,
.row.ribbon2 div.M,
.row.ribbon2 div.L {
	border: 0px solid pink;
}

.row.cate {
	width: 29%;
	font-size:35%;
}
h3.cate {
	/*font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;*/
	font-family: "Tw Cen MT", "Futura", "Montserrat", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-weight: normal;
	font-size: 200%;
	text-transform:uppercase;
	letter-spacing:0.5em;
	margin: 0 0 2em 0.5em;
	padding-top: 2%;
	opacity: 1;
}

h4.describe {
	font-size: 45%;
	letter-spacing: 0.5em;
	opacity: 0.75;
}
h4.describe.space {
  padding-top: 3em;
}

h2.header-title {
	padding-left:2.5%;
	text-transform:uppercase;
	letter-spacing:0.15em;
	text-align:center;
	font-size:3em;
	margin-bottom:0.2em;
	line-height: 1em;
}
h2#side-title {
	font-size: 260%;
}
h2#tara-title {
	font-size: 500%;
}
#ux-title {
	margin-bottom: 0;
}
sup#h2-serif {
	text-transform: lowercase;
	font-family: 'Hoefleur Text', 'Didot LT STD', Didot, 'Garamond', 'Times New Roman', serif;
	font-style: oblique;
	letter-spacing:0;
	font-size:75%;
	padding:0 0.15em;
	opacity:0.95;
	top:0.35em;
}
span#h2-serif {
	text-transform: capitalize;
	font-family: 'Hoefleur Text', 'Didot LT STD', 'Didot', 'Garamond', 'Times New Roman', serif;
	font-style: oblique;
	font-size:1em;
	padding:2em 0.1em;
}

h4.describe.more {
	margin: 0.5% 0 2% 0;
	padding-bottom: 2em;
}
#ux-describle {
	padding: 1% 0 0.5% 0;
}
h3.notes {
	font-size:49%;
	text-transform:uppercase;
	letter-spacing:0.25em;
}
#tara-notes.row.notes {
	margin-top: -5%;
}
h3.notes span.symb {
	font-size:110%;
	color:#333;
}
span.symb.smaller {
	font-size: 15%;
	opacity: 0.5;
}

div#iphone-width {
	margin-left: -1.5em;
}
iframe#iphone-demo {
	margin-left: -4.1em;
	margin-top: 1.88em;
	width: 8.15em;
	height: 13.98em;
}
div#iphone-holder {
	background-position: center center;
	background-size: 8.9em;
	background-repeat: no-repeat;
	height: 18em;
	position: relative;
}

div#quote {
	font-size: 80%;
	letter-spacing: 0.05em;
	word-spacing: 0.15em;
  opacity: 0.9;
	margin: 0.75em 0 0.5em 0;
}
blockquote#style {
	background: transparent !important;
	box-shadow: none !important;
}
div#quote small {
	color: inherit;
	padding: 2% 3.5%;
	text-transform: uppercase;
  letter-spacing: 0.25em;
}
small.brick {
	background: rgba(51,51,51,0.5);
}
small.right {
	float: right;
}
small.left {
	float: left;
}


div#press-content {
	padding: 0 0.25em 0 0;
}
p.demo-text {
	font-family:'Source Code Pro', monospace;
	word-spacing:0.1em;
	letter-spacing: 0.15em;
	font-weight:lighter;
	font-size:50%;
	margin:0.75em 0 1.25em 0;
}
div#tag {
	line-height: 0.25em;
	text-align: center;
	padding: 0.5em 0;
}
.tag.btn-link {
	color: rgba(254,254,254,0.45);
	text-transform: uppercase;
	letter-spacing: 0.2em;
}
.tag.btn-link:hover {
	color: rgba(254, 254, 254, 1) !important;
	text-decoration: none !important;
}
h3.title.press {
	padding:0 3%;
	text-transform:uppercase;
	letter-spacing:0.25em;
	text-align:left;
	font-size:95%;
	color:rgba(245,245,245,0.5);
	font-family:'Futura', sans-serif;
}
div#icons {
	margin-right: -1em;
}


/* links */
h2.wrk-title {
	padding-top: 3%;
	text-transform:uppercase;
	letter-spacing:0.02em;
	text-align:center;
	margin-bottom: 0;
	
}


/*********************************************
 * SECTION > .HOWTO
 *********************************************/
section.howto {
	margin-top: 3.5em;
}

.row.howto.notes {
	width: 64.85%;
	letter-spacing: 0.2em;
	font-size: 60%;
	font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
}
.row.howto div.R {
	text-align: right;
}
.row.howto div.L {
	text-align: left;
}
.row.howto.notes2 {
	width: 75%;
	letter-spacing: 0.2em;
	font-size: 60%;
	font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
	padding-top: 1.25em;
}


/*********************************************
 * BASEMENTS 
 *********************************************/

.container.fadein {
	animation: fadein 1s;transition: opacity 1s ease-in;
}

.row.crumbs {
	position: relative;
	margin: 0.5em 0 1em 0;
	font-size: 40%;
  /*margin: .5em 0 1em 0;*/
}
ol#crumbs {
	position: sticky;
	list-style: none;
	display: inline-flex;
	/*width: 110%;
	margin-left: -3%;*/
	margin: 0;
	padding-left: 0.35em;
	font-size: 1.5em;
}
ol#crumbs.lgt {
	color: rgba(254,254,254,0.75);
}

h3.title.tools {
	text-transform:uppercase;
	padding-left:2.5%;
	letter-spacing:0.11em;
	font-size:135%;
}
span#symb.lg {
	font-family: 'Hoefleur Text', 'Didot LT STD', Didot, 'Garamond', 'Times New Roman', serif;
	font-style: oblique;
	font-size:100%;
}

.pie-container {
	height:8em;
	position:relative;
}
.chart-A {
	border:1px solid rgba(202, 229, 224, 0);
	background-color:rgba(202, 229, 224, 0);
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	right: 0;
}
.chart-B {
	border:1px solid rgba(202, 229, 224, 0);
	background-color:rgba(202, 229, 224, 0);
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	right: 0;
}
iframe#chart-frame-2 {
	left: 0;
	right:0;
	bottom: 25%;
}
#A-col div.title {
	background:rgba(245, 245, 245, 0.0);
	padding:0.5em;
	margin-top: -1em;
}
#A-col p.title {
	  font-size: 50%;
    margin: 0;
    text-transform: uppercase;
    font-family: "Futura", "Tw Cen MT", "Montserrat", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    letter-spacing: 0.2em;
    font-weight: lighter;
}
#A-col .content {
	padding-top: 0.5em;
}
#A1 {
	border-top:7px solid rgba(191, 146, 162, 1);
	background: rgba(191, 146, 162, 0.05);
}
#A2 {
	border-top:7px solid rgba(202, 229, 224, 1);
	background: rgba(202, 229, 224, 0.05);
}
#A-col ul {
	width: 85%;
	font-size: 42.5%;
	font-weight: lighter;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	word-spacing: 0.15em;
	/*font-family: 'Source Code Pro', monospace;*/
	text-align: left;
	opacity: 0.75;
}
#A-col ul > li {
	padding-bottom:0.75em;
}

blockquote.concept {
	font-family:'Futura', sans-serif;
	font-size:160%;
	letter-spacing: 0;
	line-height: 1.25em;
	margin:0;
	padding:0 0.25em;
	color: rgba(240, 248, 255, 1);
	width:100%;
	background:transparent;
	border:transparent;
	box-shadow:none;
}
span.animate.ein {
	animation: fadein 1s;
	transition: opacity 1s ease-in;
}
span.animate.zwei {
	animation: fadein 2s;
	transition: opacity 2s ease-in;
}
span.animate.drei {
	animation: fadein 3s;
	transition: opacity 3s ease-in;
}
span.animate.vier {
	animation: fadein 4s;
	transition: opacity 4s ease-in;
}
span.animate.funf {
	animation: fadein 5s;
	transition: opacity 5s ease-in;
}
span.animate.sechs {
	animation: fadein 6s;
	transition: opacity 6s ease-in;
}
span.animate.sieben {
	animation: fadein 7s;
	transition: opacity 7s ease-in;
}
span.animate.acht {
	animation: fadein 8s;
	transition: opacity 8s ease-in;
}
span.animate.neun {
	animation: fadein 9s;
	transition: opacity 9s ease-in;
}
span.animate.zehn {
	animation: fadein 10s;
	transition: opacity 10s ease-in;
}
span.animate.elf {
	animation: fadein 11s;
	transition: opacity 11s ease-in;
}
span.animate.zwolf {
	animation: fadein 12s;
	transition: opacity 12s ease-in;
}
span.animate.dreizehn {
	animation: fadein 13s;
	transition: opacity 13s ease-in;
}
span.animate.vierzehn {
	animation: fadein 14s;
	transition: opacity 14s ease-in;
}
span.animate.funfzehn {
	animation: fadein 15s;
	transition: opacity 15s ease-in;
}
span.animate.sechszehn {
	animation: fadein 16s;
	transition: opacity 16s ease-in;
}
span.animate.siebzehn {
	animation: fadein 17s;
	transition: opacity 17s ease-in;
}
span.animate.achtzehn {
	animation: fadein 18s;
	transition: opacity 18s ease-in;
}
span.animate.neunzehn {
	animation: fadein 19s;
	transition: opacity 19s ease-in;
}
span.animate.zwanzig {
	animation: fadein 20s;
	transition: opacity 20s ease-in;
}

.row.iframed {
	height:15.5em;
	margin-right:-2em;
	margin-left:-2.5em;
	margin-top:0.2em;
	margin-bottom:0;
}
iframe#process {
	margin: 0.5em 0 0 -50%;
	height: 13em;
}
iframe#skills-wearable {
	width: 100%;
	overflow: hidden;
	height:64%;
	left:0.54em;
}

/*********************************************
 * SOCIAL MEDIA
 *********************************************/

div.footer.social {
    display: block;
    position: absolute;
    bottom: 16px;
    left: 40%;
    /* margin-left: -139px; */
    z-index: 20;
    border: 1px dotted pink;
    /* line-height: 0px; */
    right: 40%;
    height: 10%;
    /* vertical-align: middle; */
}

a.icon.nav.social {
    height: 0;
    line-height: 0;
    padding: 0 3%;
    opacity: 0.25;
}

a.icon.nav.social:hover {
    opacity: 0.65;
}

a.icon.nav.social:after {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*********************************************
 * OTHER ICONS
 *********************************************/

/* index.html#/5/1 */
.sandbox.icon.ixd-test div {
    z-index: 500;
}

p.icon.ps3 {
    width: 11em; 
    margin: 0 auto; 
    display: block;
}
img.animated.swing {
    opacity: 0.5; 
    width: 92px; 
    height: 92px; 
    float: left; 
    padding-top: 4em; 
    margin-right: -15em;
}



/*********************************************
 * BACKGROUND GRADIENTS
 *********************************************/

/*html.bg-gradient-01, .bg-gradient-01, */section.bg-gradient-01 {
    background: 
    linear-gradient(-180deg, rgba(30, 112, 207, .45), transparent 300%), 
    linear-gradient(240deg, rgba(9, 155, 221, .25), transparent 50%), 
    linear-gradient(100deg, rgba(101, 6, 4, .95), transparent 100%), 
    linear-gradient(-100deg, rgba(158, 40, 234, .95), transparent 100%)/*, url(https://cloud.githubusercontent.com/assets/4642277/13794568/ed1620dc-ead2-11e5-9560-dafe85506391.jpg)*/
}

/* Animated Pantone 2016 Hues */
html.bg-gradient-02, .pTone {
    background: 
        linear-gradient(75deg, #f7cac9, #f7786b, #91a8d0, #034f84, #f7786b, #91a8d0, #f7786b, #034f84, #f7cac9, #342760, #9896a4, #ef8905, #0df4c9) rotate(-360deg);
    background-size: 2600% 2600%;

    -webkit-animation: pTone 59s ease infinite;
    -moz-animation: pTone 59s ease infinite;
    animation: pTone 59s ease infinite;
}
@-webkit-keyframes pTone {
    0%{background-position:48% 0%}
    50%{background-position:53% 100%}
    100%{background-position:48% 0%}
}

@-moz-keyframes pTone {
    0%{background-position:48% 0%}
    50%{background-position:53% 100%}
    100%{background-position:48% 0%}
}
@keyframes pTone { 
    0%{background-position:48% 0%}
    50%{background-position:53% 100%}
    100%{background-position:48% 0%}
}


/*MINT LIME SEAFOAM - mintyFoam */
html.bg-gradient-03, .mintyFoam {
    background: linear-gradient(268deg, #09efb3, #c6fa39, #3dfcd8, #3dfcd8);
    background-size: 800% 800%;

    -webkit-animation: mintyFoam 516s ease infinite;
    -moz-animation: mintyFoam 516s ease infinite;
    animation: mintyFoam 516s ease infinite;
}
@-webkit-keyframes mintyFoam {
    0%{background-position:0% 30%}
    50%{background-position:100% 71%}
    100%{background-position:0% 30%}
}
@-moz-keyframes mintyFoam {
    0%{background-position:0% 30%}
    50%{background-position:100% 71%}
    100%{background-position:0% 30%}
}
@keyframes mintyFoam { 
    0%{background-position:0% 30%}
    50%{background-position:100% 71%}
    100%{background-position:0% 30%}
}


/* DEEP SEA EMERALD, PURPLE, SEAFOAM, LIME - nikeForce  */
html.bg-gradient-04, .nikeForce {
    /*background: linear-gradient(216deg, #00ffd0, #153c35, #281635, #c6fa39) 0.5;*/
    background: linear-gradient(-216deg, #00ffd0, rgba(66, 101, 95, 1), #281635, #c6fa39) rgba(247,120,107,0.9) 300%;
    background-size: 1000% 1000%;
    
    /*animation: CustomAnimation 9s ease infinite; */    

    -webkit-animation: nikeForce 50s ease infinite;
    -moz-animation: nikeForce 50s ease infinite;
    animation: nikeForce 50s ease infinite;
}

@-webkit-keyframes nikeForce {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes nikeForce {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes nikeForce { 
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}

.nikeACG {
    background: linear-gradient(-116deg, rgba(75,0,130,0.9), rgba(205,92,92,0.9), rgba(247,120,107,0.9), rgba(102,51,153,0.9), rgba(61,252,216,0.9), rgba(198,250,57,0.9)) 300%;
    background-size: 1000% 1000%;
    
    /*animation: CustomAnimation 9s ease infinite; */    

    -webkit-animation: nikeACG 30s ease infinite;
    -moz-animation: nikeACG 30s ease infinite;
    animation: nikeACG 30s ease infinite;
}

@-webkit-keyframes nikeACG {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes nikeACG {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes nikeACG { 
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}

/* Cool Grays */
.kuhlenGraus {
    background: linear-gradient(-116deg, #3e4a47, #5b5162, #5f7071, #645258, #6d5e5c) transparent 30%;
    background-size: 1000% 1000%;

    -webkit-animation: kuhlenGraus 19s ease infinite;
    -moz-animation: kuhlenGraus 19s ease infinite;
    animation: kuhlenGraus 19s ease infinite;
}

@-webkit-keyframes kuhlenGraus {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes kuhlenGraus {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes kuhlenGraus { 
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}


/* LIGHTER VERSION OF KUHLEN GRAUS / COOL GRAYS */
.pastelle {
    background: linear-gradient(216deg, #cae5e0, #e0d3e9, #cce4e5, #e5ccd4, #e5d2cf);
    background-size: 1000% 1000%;

    -webkit-animation: pastelle 9s ease infinite;
    -moz-animation: pastelle 9s ease infinite;
    animation: pastelle 9s ease infinite;
}

@-webkit-keyframes pastelle {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes pastelle {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes pastelle { 
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}

.olAbgrund {
    /*background: linear-gradient(116deg, #072620, #160720, #200501);
    background: linear-gradient(-316deg, #011914, #160720);*/
    background: linear-gradient(216deg, #072620, #160720, #011914, #330010, #200501);
background-size: 1000% 1000%;
-webkit-animation: olAbgrund 30s ease infinite;
-moz-animation: olAbgrund 30s ease infinite;
-o-animation: olAbgrund 30s ease infinite;
animation: olAbgrund 30s ease infinite;
}
@-webkit-keyframes olAbgrund {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes olAbgrund {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-o-keyframes olAbgrund {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes olAbgrund {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}

.weinendeHase {
	background: linear-gradient(137deg, #ad9f9a, #a28491, #9c909e, #b2afba, #8d9ca0, #9c9196, #c0aea7, #9bc5bd, #c0aea7);
	background-size: 1800% 1800%;
	-webkit-animation: weinendeHase 145s ease infinite;
	-moz-animation: weinendeHase 145s ease infinite;
	-o-animation: weinendeHase 145s ease infinite;
	animation: weinendeHase 145s ease infinite;
}
@-webkit-keyframes weinendeHase {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-moz-keyframes weinendeHase {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-o-keyframes weinendeHase {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@keyframes weinendeHase {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}

/* pale whitesmoke-ish */
badeZeit {
	background: linear-gradient(25deg, #bad6d2, #b0cdc8, #c9baba, #b1bfcd, #c1cacd, #d6dcde, #dcc7bf, #c9cfd1, #edd1c7, #becdd1, #c3b2b2, #aec2c7, #b6cdc9, #96d2c9, #b6cdc9, #c1cacd, #bca7a7, #b3bbbe);
	background-size: 3600% 3600%;

	-webkit-animation: badeZeit 39s ease infinite;
	-moz-animation: badeZeit 39s ease infinite;
	-o-animation: badeZeit 39s ease infinite;
	animation: badeZeit 39s ease infinite;
}
@-webkit-keyframes badeZeit {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-moz-keyframes badeZeit {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-o-keyframes badeZeit {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@keyframes badeZeit { 
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}

.dieOstsee {
	background: linear-gradient(25deg, #bad6d2, #b0cdc8, #c1cacd, #c9d1d2, #c9cfd1, #becdd1, #c9d1d2, #b6cdc9, #b6cdc9, #c1cacd);
background-size: 2000% 2000%;

-webkit-animation: dieOstsee 459s ease infinite;
-moz-animation: dieOstsee 459s ease infinite;
-o-animation: dieOstsee 459s ease infinite;
animation: dieOstsee 459s ease infinite;
}
@-webkit-keyframes dieOstsee {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-moz-keyframes dieOstsee {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-o-keyframes dieOstsee {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@keyframes dieOstsee { 
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
	
.icelandicHause	{
	background: linear-gradient(25deg, #9ea2a4, #a2acaf, #a2acaf, #93b3ad, #9ab3ae, #9faeb3, #a698a7, #918393, #a89ca9);
	background-size: 1800% 1800%;

	-webkit-animation: icelandicHause 59s ease infinite;
	-moz-animation: icelandicHause 59s ease infinite;
	-o-animation: icelandicHause 59s ease infinite;
	animation: icelandicHause 59s ease infinite;
}
@-webkit-keyframes icelandicHause {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-moz-keyframes icelandicHause {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-o-keyframes icelandicHause {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@keyframes icelandicHause { 
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
	
.nachtLaufen {
	background: linear-gradient(25deg, #445552, #3a4644, #3d484b, #535057, #4e474f, #4a444b, #4c5157, #495359, #4a5860);
	background-size: 1800% 1800%;
	-webkit-animation: nachtLaufen 222s ease infinite;
	-moz-animation: nachtLaufen 222s ease infinite;
	-o-animation: nachtLaufen 222s ease infinite;
	animation: nachtLaufen 222s ease infinite;
}
@-webkit-keyframes nachtLaufen {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-moz-keyframes nachtLaufen {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-o-keyframes nachtLaufen {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@keyframes nachtLaufen { 
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}

.mitterLauf {
	background: linear-gradient(25deg, #323e3c, #2c3332, #222f33, #32434b, #393e44, #3c4144, #2b3940, #313f46);
	background-size: 1600% 1600%;
	-webkit-animation: mitterLauf 459s ease infinite;
	-moz-animation: mitterLauf 459s ease infinite;
	-o-animation: mitterLauf 459s ease infinite;
	animation: mitterLauf 459s ease infinite;
}
@-webkit-keyframes mitterLauf {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-moz-keyframes mitterLauf {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@-o-keyframes mitterLauf {
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
@keyframes mitterLauf { 
    0%{background-position:0% 77%}
    50%{background-position:100% 24%}
    100%{background-position:0% 77%}
}
	
	
	
	
	




/*********************************************
 * General
 *********************************************/
	
	.reveal .slides > section.present, .reveal .slides > section > section.present {
    left: 0;
		}
		
	
		/* Notification tooltip Notes */
		
		.btn {
			border-radius: 0 !important;
		}
		
		h4.inverted-btn {
			padding: 8% 15% 0 15%;
			color: rgba(255, 255, 255, 1);
			text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
			font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
			font-size: 0.5em;
			letter-spacing: 0.15em;
		}
		
		hr.notes {
			border-top: transparent;
		}
		
		.notification-box {
			right: 25%;
			left: 25%;
		}
		
		img.notification-box {
			margin: 0;
			width: 10%;
		}
		
		h4.notification-box {
			position: initial;
		}
		
		ul.notification-box {
			list-style-type: none;
			letter-spacing: 0.45em;
			color: rgba(255, 255, 255, 0.5);
			background-color: rgba(51, 51, 51, 0.25);
			font-size: 0.5em;
			font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
			text-transform: uppercase;
			text-align: center;
			line-height: 1.75em;
			width: 60%;
			padding: 2%;
			/*padding: 5% 10% 5% 10%;*/
			margin-left: 0;
		}
		
		ul.notification-box-hide {
			list-style-type: none;
			letter-spacing: 0.45em;
			color: rgba(255, 255, 255, 0.5);
			/* background-color: rgba(51, 51, 51, 0.25); */
			/* font-size: 0.5em; */
			font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
			/* text-transform: uppercase; */
			text-align: center;
			line-height: 1.75em;
			/* width: 60%; */
			padding-top: 2%;
			/* padding: 5% 10% 5% 10%; */
			margin-left: 0;
		}
		
		.btn-default.active.focus,
		.btn-default.active:focus,
		.btn-default.active:hover,
		.btn-default:active.focus,
		.btn-default:active:focus,
		.btn-default:active:hover,
		.open>.dropdown-toggle.btn-default.focus,
		.open>.dropdown-toggle.btn-default:focus,
		.open>.dropdown-toggle.btn-default:hover,
		.btn-default.active,
		.btn-default:active,
		.open>.dropdown-toggle.btn-default,
		.btn-default:hover,
		.btn-default.focus,
		.btn-default:focus,
		.btn.active,
		.btn:active {
			color: transparent !important;
			background-color: transparent !important;
			border-color: transparent !important;
			outline: transparent;
			outline: none;
			outline-offset: inherit;
		}
		
		.headers.logo.svg {
			padding-right: 10%;
		}
		
		button#hide {
			font-size: 30%;
		}
		
		button#show,
		button#hide {
			background: transparent;
			border: transparent;
			box-shadow: none;
			margin: 0 auto;
			display: block;
			margin-top: 0%;
			/* padding: 6.5%; */
			margin-bottom: -29%;
		}
		
		button#show-notes {
			background: transparent;
			border: none;
			margin: 0 auto;
			display: block;
			/* letter-spacing: 0.25em; */
			text-transform: uppercase;
			/* font-weight: normal; */
			background-color: rgba(48, 16, 78, 0.55);
			/* padding-left: 0.47em; */
			width: 50px;
			height: 50px;
			border-radius: 100%;
			/* color: rgba(138,43,226,0.5); */
			color: rgba(104, 232, 208, 0.99);
		}
		
		button#hide-notes {
			list-style-type: none;
			letter-spacing: 0.45em;
			color: rgba(255, 255, 255, 0.5);
			background-color: rgba(51, 51, 51, 0.25);
			border: none;
			font-size: 0.5em;
			font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
			text-transform: uppercase;
			text-align: center;
			line-height: 1.75em;
			width: 60%;
			padding: 2%;
			/*padding: 5% 10% 5% 10%;*/
			margin-left: 0;
		}
		
		.categories.fontsize h2.headers {
			font-size: 0.75em;
			border-top: 0.5px solid rgba(0, 0, 0, 0.05);
		}
		
		h3.sub-header-title.category {
			background-color: rgba(153, 153, 153, 0.5);
			font-size: 0.3em;
			letter-spacing: 0.25em;
			padding: 1%;
			text-align: center;
			margin: 0 auto;
			border: 1px solid rgba(153, 153, 153, 0.85);
			border-style: groove;
			display: block;
			margin-bottom: 1%;
			margin-top: -4%;
		}
		
		hr.sub-header-title.category.webapp {
			width: 18%;
			border-top: 1px solid rgba(153, 153, 153, 0.85);
			border-style: groove;
		}
		
		h3.sub-header-title.category.webapp {
			width: 12%;
			font-weight: bolder;
		}
		/* container category */
		
		.container.sub-header-title.category,
		.row.sub-header-title.category {
			width: 100%;
			margin: 0 auto;
			display: block;
			text-align: center;
			margin-top: -5%;
			margin-bottom: -0.25em;
			opacity: 0.6;
			font-size: 85%;
		}
		
		.col-xs-1.col-sm-1.sub-header-title.category.webapp.links hr {
			width: 30%;
			float: right;
			margin-top: 90%;
			border-top: 5px solid rgba(21, 88, 76, 0.5);
		}
		
		.col-md-1.col-lg-1.sub-header-title.category.webapp.links hr {
			width: 30%;
			float: right;
			margin-top: 100%;
			border-top: 5px solid rgba(21, 88, 76, 0.5);
		}
		
		.col-xs-1.col-sm-1.sub-header-title.category.webapp.rechts hr {
			width: 30%;
			float: right;
			margin-top: 90%;
			border-top: 5px solid rgba(21, 88, 76, 0.5);
		}
		
		.col-md-1.col-lg-1.sub-header-title.category.webapp.rechts hr {
			width: 30%;
			float: left;
			margin-top: 100%;
			border-top: 5px solid rgba(21, 88, 76, 0.5);
		}
		
		.col-xs-6.sub-header-title.category.webapp.mitte,
		.col-sm-6.sub-header-title.category.webapp.mitte,
		.col-md-4.sub-header-title.category.webapp.mitte,
		.col-lg-4.sub-header-title.category.webapp.mitte {
			background-color: rgba(21, 88, 76, 0.5);
			padding: 2% 0 0.25% 0;
			font-size: 50%;
			vertical-align: middle;
			margin: 4em 0 -0.5em 0;
		}
		
		h3.category.webapp {
			letter-spacing: 0.5em;
		}
		
		/* header description */
		.container.description.inverted.sub-header-title {
			width: 100%;
			font-size: 80%;
			font-size: 70%;
			font-family: 'Quicksand', 'Century Gothic', 'Brandon Grotesque', 'Gill Sans', sans-serif;
			color: rgba(240, 248, 255, 0.99);
			letter-spacing: 0.2em;
			text-transform: uppercase;
			font-weight: initial;
			padding: 0 10%;
		}
		
		.col-xs-12.description.inverted.sub-header-title p,
		.col-xs-12.col-sm-12.col-md-12.col-lg-12.description.inverted.sub-header-title p {
			line-height: 1.85em;
			word-wrap: break-word;
			word-break: break-word;
		}
		
		/* text blockquote p css fade-in animation */
		@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
		}

		/* Firefox < 16 */
		@-moz-keyframes fadein {
				from { opacity: 0; }
				to   { opacity: 1; }
		}

		/* Safari, Chrome and Opera > 12.1 */
		@-webkit-keyframes fadein {
				from { opacity: 0; }
				to   { opacity: 1; }
		}

		/* Internet Explorer */
		@-ms-keyframes fadein {
				from { opacity: 0; }
				to   { opacity: 1; }
		}

		/* Opera < 12.1 */
		@-o-keyframes fadein {
				from { opacity: 0; }
				to   { opacity: 1; }
		}
		
		.blur-mid {
			-webkit-filter:blur(1px);
			-moz-filter: blur(1px);
			-o-filter: blur(1px);
			-ms-filter: blur(1px);
		}
		
		.blur-bg {
			-webkit-filter:blur(3px);
			-moz-filter: blur(3px);
			-o-filter: blur(3px);
			-ms-filter: blur(3px);
		}