@import url('https://fonts.googleapis.com/css2?family=Allison&display=swap');

body{
    font-family: 'Roboto Condensed', sans;
}
.lila{
    color:#992676;
}
.grau{
    color: #707070
}
a{
    transition:500ms;
    color:#992676;
}

/* Header */
.header-container {
    background-color: #FFFFFF;
}
header a{
    font-family: 'Oswald', sans;
    color:#707070;
}
header p{
    text-align: center;
}
.form-check{
  display:none;
}
header button{
    color:#992676;
}

.nav-item a{
    color:#707070;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-family:'Oswald', sans;    
    transition:500ms;
}

.nav-item .active{
    color:#992676;
}

.nav-item a:hover{
    color: #992676
}

/* Überschriften */
h1{
    color:#992676;
    text-transform: uppercase;
    font-family:'Oswald', sans;    
    text-align:right;
    margin-bottom:2rem;
}

h2{
    color:#992676;
    text-transform: uppercase;
    font-family:'Oswald', sans;    
    text-align:left;
    margin-bottom:1rem;
    font-size:1.5rem;
}

h3{
    color:#992676;
    text-transform: uppercase;
    font-family:'Oswald', sans;   
}

h5{
    color:#992676;
    text-transform: uppercase;
    font-family:'Oswald', sans;   
}


.rechteSpalte{
    text-align:right;
}
.rechteSpalte img{
    width : 90%;
}

/* Portfolio */
.portfolio{
    position:relative;
    width:17rem;
    height:17rem;
    margin:1rem;    
    justify-content: center;
    background-color: #992676;    
    color: #FFF;    
    padding:1rem;
    background-size: contain;
    background-position: center center;
    transition: 400ms all;
    align-items: center;
}
.portfolioText{
    font-size:1.2em;
}
.portfolio h3{
    position:absolute;
    display:block;
    bottom:0;
    right:0;
    color:#FFF;
    text-transform:uppercase;
    padding:0.5rem;
    background-color:#992676;
    transform: translateX(50%) translateY(0%) scale(0,0);
    transition: 300ms all;
}
.r1c1{
    background-image: url('Bilder/portfolio1.jpg');
}
.r1c2{
    background-image: url('Bilder/portfolio2.jpg');
}
.r1c3{
    background-image: url('Bilder/portfolio3.jpg');
}
.r1c4{
    background-image: url('Bilder/portfolio4.jpg');
}
.r1c5{
    background-image: url('Bilder/portfolio5.jpg');
}
.r1c6{
    background-image: url('Bilder/portfolio6.jpg');
}

.portfolioImage:hover{
    box-shadow: 20px, 20px, 10px, 10px,#333 ;
    
    z-index:100;    
}
.portfolioImage:hover h3{
    transform: translateX(0%) translateY(-4%) scale(1,1);
}

/* Formular */
button{
    color:#FFFFFF;
    background-color:#992676;
    border:0px;
    padding:0.4rem;
    padding-left:1rem;
    padding-right:1rem;
}
.termin{
    padding-bottom:1rem;
    border-bottom:2px solid #992676;
    margin-bottom:1rem;
}
input{
    border:1px solid #992676;
    width:100%;
    margin-bottom:10px;
    padding:5px;
}
textarea{
    border:1px solid #992676;
    width:100%;
    min-height:20rem;
    margin-bottom:10px;
    padding:5px;
}

main > .container {
    padding-top: 1rem;
    padding-bottom:3rem;
  }

  main{
      z-index:1;
  }


  /* Workshops */
.workshop{
    transition: transform 300ms;
}
.workshop:hover{    
    border: 2px solid #992676;
  }


/* Footer */
footer{
    font-size:1.5rem;
    color:#707070;
    text-align:center;
    background-color: #FFFFFF;    
}
footer a{
    color:#777777;
    vertical-align: middle;
}

.socialLink{
    transition: 600ms all;
  }

footer a div{
    display:inline-block;
    font-size: initial;
    font-weight: lighter;
    transform: translateX(0%) translateY(0%) scale(0,0);
    height: 100%;
}

.socialLink:hover {
    background-color: #666666;
    border-radius: 15px;
    color: #FFFFFF;
    padding:5px;
    margin:0px;
}
.socialLink:hover i{
    padding-left:0.2rem;
    padding-right:0.4rem;
}
.socialLink:hover div{
    transform: translateX(0%) translateY(-5px) scale(1,1);
    padding-left:1rem;
    padding-right:1rem;
}

.headline{
    color:#992676;
    font-size:1.2em;
}
.zitat{
    font-family: 'Allison', cursive;
    font-size:4em;
    color:#666666;
}
.startbild{
    text-align:center;
}

@media only screen and (max-width: 600px) {
    .startbild img{
      width:380px;
    }
    .zitat{
        font-size:2.2em;
    }

    .headline{
        font-size:1em;
    }
  }
  .mk-nav{
      z-index:1000;
  }