* {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
	text-align: justify
}

.Stickman{
    font-size: 0.7rem;
    background-color: black;
    /* margin: auto; */
    width: 100%;

}
a.Stickman
{
height: 21px;
justify-content: flex-start;
	}

ul.impressum
{
list-style: none;
    /* font-family: verdana, geneva; */
    background-color: black;
    color: white;
    padding: 0% 3% 0% 3%;
    font-size: 0.7rem;
    margin: 0px;
    width: 100%;
    padding: 0px;
}

article.musik, article.sport, article.Beratung1, article.Beratung, article.Social_Media, article.logo, article.fotomontage, article.musik_video, article.Medien_Digital
{
    background-size: cover;
	background-position: center;
}		

article.designer {
    background-image: url(/image/Digital_Medien_Werbung_Bonn_Bad_Neuenahr.jpg);
}


article.Medien_Digital {
    background-image: url(/image/Digital_Medien_Werbung_Bonn_Bad_Neuenahr.jpg);
}

article.musik_video {
    background-image: url(/image/Musik_Video_Gestaltung_Bad_Neuenahr_Bonn_Design.jpg);
}

article.fotomontage {
    background-image: url(/image/Foto_Retusche_Restaurierung_Gestaltung.jpg);
}	

article.logo {
    background-image: url(/image/Logo_Design_Bad_Neuenahr_Bonn.jpg);
}	


article.Social_Media {
    background-image: url(/image/Social_Media_Design_beratung_Bonn_Koln.jpg);
}		



article.Beratung {
    background-image: url(/image/Beratung_Marketing_Werbung_Design_Bonn_Bad_Neuenahr.jpg);
}		

article.Beratung1 {
    background-image: url(/image/Beratung_Marketing_Werbung_Design.jpg);
}		

article.musik {
    background-image: url(/image/Band_Muskk_Design_Marketing.jpg);
}		


article.sport  {

    background-image: url(/image/Sport_Verein_werbun_Design.jpg);

}		

p.kontakte 

 {

   
    text-align: center;


}		
a.kontakte  {
background-color: #c3c3c3;
}	
html, body {
    font: 20;
    color: rgb(50, 50, 50);
    background-color: rgb(240, 240, 240);
    font-family: sans-serif;
    scroll-behavior: smooth;
	max-width: 1280px;
    margin: auto;
}

header {
    grid-row: 1fr 1fr;
}

/* navigation */

header>img {
    object-fit: cover;
}

img {
 /*    height: 400px; */
		object-fit: cover; 
	width: 100%; 
	height: 100%;
}

figure {
    display: flex;
    position: relative;
    align-items: center;
}

figcaption {
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    color: rgb(0, 0, 0);
}

nav {
    /* position: absolute;*/
    width: 100%;
    top: 340px;
}

ul {
	display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    background-color: rgb(50, 50, 50)
}

li {
    height: 60px;
    width: 12em;
    margin: auto
    list-style: none;
    font-size: 1.3em;
    list-style-type: none;

}

a {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 60px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 1.2em;
    transition: background-color 0.5s;
}

a:hover {
    color: rgb(237, 237, 237);
    background-color: rgba(167, 167, 167, 0.6);
}

.actionButton {
    animation: pulse 0.8s;
    animation-direction: alternate;
    animation-iteration-count:infinite;
    background-color: rgba(0, 100, 100, 0.6);
}

.jump:hover {
    animation: jump 0.3s ease-in;
    animation-direction: alternate;
    animation-iteration-count:infinite;
}

#actionButton:hover {
    
}

body>a {
	z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    height: 60px;
    top: 92%;
    left: 94%;
    width: 60px;
    background-color: rgba(220, 8, 8, 0.57);
    color: rgb(237, 237, 237);
    border-radius: 3px;
}

body>a:hover {
    background-color: rgb(0, 100, 100);
    border-radius: 3px;
}
/*
figcaption>a {
    background-color: hsla(0, 0%, 0%, 0.3);
    border-radius: 3px;
    width: 50px;
    height: auto;
    padding: 10px;
    font-size: 1.5em;
}

figcaption>a:hover {
    background-color: rgba(255, 3, 3, 0.56);
}
*/
footer>a {
    margin: auto;
    background-color: rgba(0, 100, 100, 0.6);
}

footer>a:hover {
    margin: auto;
    background-color: rgb(0, 100, 100);
}

/* content */

h1, h2, h3, h4 {
    text-align: center;
}

figcaption h1 {
text-decoration: overline;
    color: rgb(255, 255, 255);
    font-size: 43pt;
    padding-top: 15%;
    flex: auto;
}

figcaption h2{
 
color: rgb(255, 255, 255);
    font-size: 14pt;
    padding-top: 0.1%;
    /* padding-bottom: 3%; */
    flex: auto;
    flex-flow: column;
	}
	
h2 {
    font-size: 3em;
    padding: 5%;
}

h3 {
    font-size: 1.8em;
    padding: 5% 0;
}

h4 {
    font-size: 1.2em;
    padding: 1%;
}

section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#image {
    display: block;
    border-top: solid 1px;
    border-bottom: solid 1px;
    border-color: rgb(100, 100, 100);
}


#main {
width: 100%;
    padding: 0px 5%;
    margin: auto;
}

header, footer {
    grid-column: 1/4;
}

article {
    padding: 0 10%;
}

footer {
    padding: 5%;
}

body>footer {
    padding: 0;
    color: rgb(200, 200, 200);
    background-color: rgb(50, 50, 50);
}

section:first-of-type {
    position: sticky;
	/*display: block; */
}

/* media query */

@media screen and (max-width: 590px) {
    
    html, body, nav, sectiom, header, footer, p, div, #main, ul, li {
        position: static;
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    article {
        padding: 10px 10px;
    }

article.musik, article.sport, article.Beratung1, article.Beratung, article.Social_Media, article.logo, article.fotomontage, article.musik_video, article.Medien_Digital
{
min-height: 277px;
}	
    
    p {
        font-size: 1.2em;
    }
    
    h4 {
        font-size: 1.2em;
    }
    
    nav {
        background-color: rgb(0, 0, 0);
        position: relative;
        top: 0;
    }
    
  /*   img {
        width: auto;
    }*/
    
    #form, #input {
        display: block;
    }
    
    #form>article, #input>article {
        width: 100%;
        height: 100%;
    }
    
    form {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
    }
    
    body>a {
        left: 88%;
    }
    
    input[type="button"] {
        height: 50px;
        font-size: 1.2em;
    }
    
    input[type="submit"] {
        height: 60px;
    }
    
    textarea {
        height: 15em;
    }
    
    label {
        font-size: 1.4em;
    }
    
    #ende {
        padding-bottom: 10px;
    }
    
}

/* animation */

@keyframes pulse {
    from {
        opacity: .7;}
    to {
        opacity: 1;
    }
}

@keyframes jump {
    from {
        margin-bottom: 3px;
    }
    to {
        margin-bottom: -3px;
    }
}


/* Kontakt */




/* Datenschutz */
.container {
  padding: 2rem 0rem;
}

.modal-dialog {
  margin-top: 0rem;
  max-width: 100%;
  
  .modal-content {
    border-radius: 0rem;
  }
  
  .buttons {
    .btn {
      margin: 0.2rem;
    }
  }
}