/*
                          _________           _____                  _________     
_____________ ___   ____________  /______________(_)______ _______   ______  /____ 
__  ___/  __ `/_ | / /  _ \  __  /_  _ \_  ___/_  /__  __ `/_  __ \  _  __  /_  _ \
_  /   / /_/ /__ |/ //  __/ /_/ / /  __/(__  )_  / _  /_/ /_  / / /__/ /_/ / /  __/
/_/    \__,_/ _____/ \___/\__,_/  \___//____/ /_/  _\__, / /_/ /_/_(_)__,_/  \___/ 
                                                   /____/                          

 */

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); 

 
/* Links */
a,
a:focus,
a:hover {
  color: #e5007d;
      padding: 2px 10px;
}
a:hover {
	color: #e5007d;
	background: #e5007d;
	text-decoration:none;
	color: white;  
	transition: all ease 0.1s;
    border-radius: 5px;

}

::selection {
    background: #009ee3;
    color: #f0f0f0;
}


/*
 * Base structure
 */

html,
body {
	height: 100%;
	background-color: #f0f0f0;
	font-family: 'Roboto Mono', monospace;
}

body {
	display: -ms-flexbox;
	display: flex;

}

.cover-container {
	max-width: 42em;
}

h1, h2, h3 {
	color: #111111;
	margin-top: 1em;
    margin-bottom: 0.5em;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;	
	word-break: break-word;
}
section {
    padding: 64px 24px 96px 24px;
	
}
.weiss {
	color:white;
}

.intro {
	background: #009ee3;
	background: url(../billy-huynh-278252-unsplash.jpg);
}
 	.intro {
		 padding: 128px 12px;
	}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
 	.intro {
		 padding: 128px 12px;
	}	
	h1, h2, h3 {
		word-break: break-word;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
 	.intro {
		 padding: 150px 24px;
	}
	.kunden {
		padding: 80px 10px;
	}	
	h1, h2, h3 {
		word-break: break-word;
	}	
 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.intro {
		padding: 200px 10px;
	}
	.kunden {
		padding: 100px 10px;
	}	
 }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.intro {
		padding: 260px 10px;
	}
	.kunden {
		padding: 160px 10px;
	}
}





.markierung_yellow {
	border-radius:2px;
	padding: 2px 6px;
    background: linear-gradient(90deg, #e5007d, #ffed00);
    background-size: 600% 600%;
    -webkit-animation: kunden 30s ease infinite;
    -moz-animation: kunden 30s ease infinite;
    animation: kunden 30s ease infinite;	
}
.markierung_magenta {
	border-radius:2px;
	padding: 2px 6px;
    background: linear-gradient(90deg, #e5007d, #009ee3);
    background-size: 600% 600%;
    -webkit-animation: kunden 100s ease infinite;
    -moz-animation: kunden 100s ease infinite;
    animation: kunden 100s ease infinite;		
}
.markierung_cyan {
	border-radius:2px;
	padding: 2px 6px;
    background: linear-gradient(90deg, #009ee3, #ffed00);
    background-size: 600% 600%;
    -webkit-animation: kunden 70s ease infinite;
    -moz-animation: kunden 70s ease infinite;
    animation: kunden 70s ease infinite;		
}

.kunden {
	background: linear-gradient(129deg, #009ee3, #e5007d, #ffed00);
	background-size: 600% 600%;

	-webkit-animation: kunden 120s ease infinite;
	-moz-animation: kunden 120s ease infinite;
	animation: kunden 120s ease infinite;
	
}

@-webkit-keyframes kunden {
    0%{background-position:0% 7%}
    50%{background-position:100% 94%}
    100%{background-position:0% 7%}
}
@-moz-keyframes kunden {
    0%{background-position:0% 7%}
    50%{background-position:100% 94%}
    100%{background-position:0% 7%}
}
@keyframes kunden { 
    0%{background-position:0% 7%}
    50%{background-position:100% 94%}
    100%{background-position:0% 7%}
}



/*Animation Effect*/

.glitch {
	animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite

}

.intro:hover #logo_magenta {
	animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite
}
.intro:hover #logo_cyan {
	animation: glitch .6s cubic-bezier(.12, .36, .61, .88) both infinite
}

.intro #logo_magenta {
	animation: glitch2 1s cubic-bezier(.25, .46, .45, .94) both infinite
}
.intro #logo_cyan {
	animation: glitch2 .6s cubic-bezier(.12, .36, .61, .88) both infinite
}



/* Animationen */

@keyframes glitch {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    20% {
        -webkit-transform: translate(-4px, 4px);
        transform: translate(-4px, 4px)
    }
    40% {
        -webkit-transform: translate(-4px, -4px);
        transform: translate(-4px, -4px)
    }
    60% {
        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px)
    }
    80% {
        -webkit-transform: translate(4px, -4px);
        transform: translate(4px, -4px)
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes glitch2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    10% {
        -webkit-transform: translate(10px, -1px);
        transform: translate(10px, -1px)
    }
    15% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }	
    25% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    30% {
        -webkit-transform: translate(-10px, 2px);
        transform: translate(-10px, 2px)
    }
    50% {
        -webkit-transform: translate(10px, -1px);
        transform: translate(10px, -1px)
    }
    75% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    80% {
        -webkit-transform: translate(10px, -1px);
        transform: translate(10px, -1px)
    }
    85% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
    to {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}