@charset "UTF-8";

/* 

BLACK MONKEY Werbedesign
Inhaber Alexander Kemetter
www.black-monkey.net
Werbung aus dem Dickicht.

*/

/* Infos: 

Grundfarbe:
Kontrastton:

/* @font-face */

@font-face {
  font-family: 'bahnhofapotheke';
  font-weight: 100;
  src: url('bahnhofapotheke.eot'); 
  src: url('bahnhofapotheke.eot?#iefix') format('embedded-opentype'), 
       url('bahnhofapotheke.woff2') format('woff2'),
       url('bahnhofapotheke.woff') format('woff'),
       url('bahnhofapotheke.ttf')  format('truetype'),
       url('bahnhofapotheke.svg#svgFontName') format('svg');
}

/* Allgemeine Bedingungen */

html {
	scroll-behavior: smooth;
}

body {
	height: 100%;
	margin: 0 auto;
    background-position: center;
	color: #000;
	font-family: bahnhofapotheke, Times New Roman;
	font-weight: 100;
    font-size: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: grayscale;
	hyphens: auto;
}

img {
	width: 100%;
	width: auto; /* IE8 */
}

a {
	text-decoration: none;
	color: #000;
	transition: all 250ms ease;
	cursor: pointer;
    opacity: 1;
    font-weight: bold;
}

a:focus, a:hover, a:active {
  	outline: none;
	color: #000;
	transition: all 250ms ease;
    opacity: 1;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: !!!;
	font-weight: 400;
	color: #000;
    margin-bottom: 20px;
}	

h1 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 120%;
}

h2 {
    font-size: 110%;
    font-weight: bold;
    text-decoration: underline;
}

p {
	font-size: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

p:last-of-type {
    margin-bottom: 0px;
}

.marg_top {
    margin-top: 25px;
}

li {
    list-style-type: none;
}

.clearer {
    clear: both;
}

button {
	font-family: bahnhofapotheke, Times New Roman;
	font-weight: 400;
	background: #000;
	color: #FFF;
	padding: 10px 35px;
    border: 0px;
	margin-top: 30px;
	margin-bottom: 10px;
	transition: background 250ms ease;
	cursor: pointer;
    border: 2px solid #000;
    text-transform: uppercase;
}

button:hover {
	background: #FFF;
	color: #000;
	transition: background 250ms ease;
    text-decoration: none;
}

.button_top {
    margin-top: 0px;
}

/* Spezifische Styles */

ul {
    margin: 0px;
    padding: 0px;
}

.logo_wrapper {
    width: 250px;
    max-width: 90%;
    height: auto;
    margin: 0 auto;
    padding-top: 20px;
}

.logo_wrapper img {
    width: 100%;
    height: auto;
}

.inhalt_ueberschrift {
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 30px;
}

.input {
    max-width: 480px;
}

.inhalt {
    max-width: 560px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
    margin-top: 15px;
    transform: translate(0);
    animation-name: inhalt;
    animation-duration: 1.8s;
}

@keyframes inhalt {
    0% {
        opacity: 0;
    transform: translate(0, -40px);
    }
    
    30% {
        opacity: 0;
        transform: translate(0, -30px);
    }
    
    100% {
        opacity: 1;
    transform: translate(0);
    }
}


.inhalt ul li span {
    width: 110px;
    display: inline-block;
}

.days {
    width: 120px;
    float: left;
}

.times {
    width: 155px;
    float: left;
}

.credit {
    margin-top: 60px;
    font-size: 70%;
    background: #FFF;
    text-align: center;
    padding-bottom: 40px;
    animation-name: credit;
    animation-duration: 4s;
}

@keyframes credit {
    0% {
        opacity: 0;
    }
    
    50% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

.inhalt p span {
    font-weight: bold;
}

@media (min-width: 450px) {
 
    .logo_wrapper {
        padding-top: 70px;
    }
    
    h1 {
        font-size: 150%;
    }
    
    h2 {
        font-size: 120%;
    }
    
}

@media (min-width: 850px) {
 
   
    
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 1.5),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
    
}