@charset "utf-8";
/* CSS Document */

body{ 
    margin: 0px;
    padding: 0px;
    font-family: 'montserrat', sans-serif;
    text-align:center; 
    font-size: 1.3em;
    color: #9B9999;
    }
header{
    background-image: url( "../images/image_msc/IMG_0312-x-9.jpg");
    background-size: cover;
    background-position:top;
    background-repeat: no-repeat;
    height: 80vh;
    margin-bottom: 20px;
    }
nav{
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 8vh;
	background-color: #ECEBEB;
	opacity: 0.6;
   	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
    }
ul li a:hover{
    color: #fff;  
}
a:link { 
    color: #8C8C8C;
    text-decoration: none;
}
a:hover { 
    color:#C7B2A7;
    text-decoration: none;
}
.nav-links{
    display: flex;
    justify-content: space-around;
    width: 30%; 
    }
.nav-links li{
    list-style: none;
    }
.nav-links a{
    color: #9B9999;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
    }

.logo h4 {
    color: #8C8C8C;    
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 23px;
    }
.burger{
    display: none; 
    cursor: pointer;   
/*damit wandelt sich der Cursor vom Pfeil zur Hand beim drüber fahren*/
}
.burger div { 
    width: 25px;
    height: 3px;
    background-color: #9B9999;
    margin: 5px;
    transition: all 0.3s ease;
}

.banner-text{
    position: absolute;
    top: 40%;
    left: 50%;
    margin: 0;
    transform: translate(-50%,-50%);
    width: 100%;
    }
.banner-text h2 {
    text-align:end;
    font-size: 45px;
    padding-right: 5px;
    color: #C7B2A7;
    text-transform: uppercase;
    }
.feature-images {
    padding: 20px;
}
.image-one{
	padding: 0 20px;
	background-size: cover;
	background-position: top;
    color: #9B9999;
        }
.art-one-home{
    background-color: white; 
    text-align: center;
    max-width: 650px;
    margin:  0 auto;
}
/*Circle holen sich alle runden Bilder*/
.circle{
    width: 300px; /*300 x 300px ist auch ok*/
    height: 300px;
    margin: auto;  /*durch Margin auto wird der abstand rechts und links gleich sein. 100% deckt ohne Rand bis zur GRenze des Divs*/
    background-size: cover;
    background-position: center;
    padding: 10px 10px 10px 10px;
    text-align: center;
    border-radius: 100%;  /*width: 50%; könnte man auch probieren*/
 }  
/*HOME ab hier dine die artikel anweisungen für Test und Bilder von der HOME seite*/
.art-one-home-img{ /*Bild 1 rechteck*/
    width: 100%;
    height: 650px;
    background-image: url("%22%22");
    background-size: cover;
    background-position: center;
    /*Wenn der Stile art-one-home-img angewendet wird, dann schafft er den Rahmen für ein Bild das 100% von links nach rechts füllt. Solange das Bild noch nicht verlinktist, oder kleiner ist, wird es eine Höhe haben von 650px. Anders als beim Section, ist das bild aus dem CSS zugewiesen und kann somit zentral geprgöet werden und an mehreren Stellem eingesetzt werden. */
}
.art-two-home{
    padding: 0 20px;
    }
.art-two-home-img{ /*Bild 2 rund, aber mann muss dann zei classen dem Div geben: 
class art-two-home-img (leerzeichen) circle (das ist unten definiert)*/
   
    height: 300px;
    margin: auto;   /*damit ist der abstand vom Bild zum nächsten Objekte links un drechts der selbe*/
    background-image: url("%22%22");
    background-size: cover;
    background-position: center;
    border-radius: 50%; /*wenn das rund werden soll, müsste die größe oben lang und breit ide selbe sein. z.B. 300px x 300px.*/
    }
.art-three-home-img{  /*Bild 3 rund, aber mann muss dann zwei classen dem Div geben: 
class art-three-home-img (leerzeichen) circle (das ist unten definiert)*/
    background-image: url("%22%22");
    }
.art-three-home{
    padding: 0 10px 20px;
}
/*ABOUT ab hier sind die Bilder von der ABOUT site, der text von der seite verwendet immer art-one-home*/
.art-one-about-img{ 
    width: 300px;
    height: 300px;
    background-image: url( "../images/msc_speach_quadrat.jpg");
    background-size: cover;
    background-position: center;
}
.art-two-about-img{ 
    width: 300px;
    height: 300px;
    background-image: url( "../images/Tür Vinothek_quadrat.jpg");
    background-size: cover;
    background-position: center;
}
.art-three-about-img{ 
    width: 300px;
    height: 300px;
    background-image: url("../images/2013-10-19 09.22.02.jpg");
    background-size: cover;
    background-position: center;
}
.art-text{
    color: #3C3C3C;
    max-width: 700px;
}
.container{
    width: 90%;
    max-width: 500px;
    margin:  0 auto;
    padding: 20px;
    box-shadow: 0px 0px 20px;
    background-color: white; 
    border-radius: 8px;
    margin-bottom: 20px;  
}
.form-group{
    
    width: 100%;
    margin-top: 20px;
    font-size: 20px;
}
.form-group input, .form-group textarea{
    width: 100%;
    padding: 5px;
    font-size: 18px;  
    border: 1px solid rgba(159,161,162,1.00);
    margin-top: 5px;
}

textarea{ 
    resize: vertical;
}
button[type="submit"]{
    width:100%;
    border: none;
    outline: none;
    padding: 20px;
    font-size: 24px;
    border-radius: 8px;
    color:rgba(160,141,117,1.00);
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    transition: .3s ease background-color;
}
button[type="submit"]:hover{
    background: rgba(100,92,92,1.00);
}
#status{
    width: 90%;
    max-width: 500px;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    border-radius: 8px;
/*die Farbe wird über class gesteueert, wird aber durch javascript dynamisch gesteuert*/
}
#status.success{
    background-color: chartreuse;
    animation: status 8s ease forwards;
}
#status.error{
    background-color:firebrick;
    color: white;
    animation: status 8s ease forwards;
}

.box{ 
    font-size: 35px;
    font-weight: bold;
    opacity: 0;
    position: absolute;
    width: 100%;
    text-align: end;
    color:#86807E;
    }
.text-wrapper {
    padding-right: 5px;
    }
.b1{
    animation: ani1 30s infinite;
}
.b2{
    animation: ani2 30s infinite;
    }
.b3{
    animation: ani3 30s infinite;
    }
.b4{
    animation: ani4 30s infinite;
}
.b5{
    animation: ani5 30s infinite;
}
.footer-home{ 
    height: 200px;
    background-color: #ECEBEB;
    color:#9B9999;
    margin-top: 30px;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
    padding-left: 30px;
}
.footer-nav-links { 
    list-style: none;
    text-decoration: none;          
}
.footer-nav-links a{ 
    text-decoration: none;
    color:#9B9999;
}
.standard-text{
    text-align: center;
    width: 600px;
    margin: auto;
   }
@keyframes ani1{ 
    0% {opacity: 0;}
    10% {opacity: 1;}
    20% {opacity: 0;}
    }
@keyframes ani2{ 
    20% {opacity: 0;}
    30% {opacity: 1;}
    40% {opacity: 0;}
    }
@keyframes ani3{ 
    40% {opacity: 0;}
    50% {opacity: 1;}
    60% {opacity: 0;}
    }
@keyframes ani4{ 
    60% {opacity: 0;}
    70% {opacity: 1;}
    80% {opacity: 0;}
    }
@keyframes ani5{ 
    80% {opacity: 0;}
    90% {opacity: 1;}
    100% {opacity: 0;}
    }
@media screen and (max-width: 1024px){ 
    .nav-links{ width: 60%;
    }
}
@media screen and (min-width:600px){
     .feature-images{
        display: flex;
    }
     .image-one{
        flex: 1;
    }
}

@media screen and (max-width:600px){
    body{
       overflow-x: hidden;
    }
    .nav-links{ 
            position:absolute;
            right: 0px;
            height: 92vh;
            top: 8vh;
            background-color: #ECEBEB;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            transform: translateX(100%);
            transition: transform 0.5s ease-in;
        }
    .nav-links li{
        opacity: 0;
    }
    .burger{
        display:block;        
    }

    .nav-active{ 
        transform: translateX(0%);
    }
    .image-one{
        padding-left: 10px;
        padding-right: 10px;
    }
    .banner-text{
        display: none;
        /*damit soll der text über dem Bild bei kleinen Dipslay verschwinden*/
    }
}

@keyframes navLinkFade{
    from{ 
        opacity: 0;
        transform: translateX(50px);
    }
    to{ 
        opacity: 1;
        transform: translateX(0px);
    }
}
.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    opacity: 0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}
@keyframes status{
    0%{
        opacity: 1;
        pointer-events: all;
    }
    90%{
        opacity: 1;
        pointer-events: all;        
    }
    100%{
        opacity: 0;
        pointer-events: none;
    }
}