@charset "utf-8";

/*
* CSS-Design
* Online-Schule für Gestaltung: Webdesign-Kurs
* RESPONSIVE WEBSEITE
*/


/* Reset * * * * * * * * */

/* Reset * * * * * * * * */
*{
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html{
	font-size: 100%; /* Browserstandard: 16px */


}


img{
	max-width: 100%;
	margin-bottom: 40px;

}



/* Layout * * * * * * * * */

body{
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.5;



}

.backb{
background: url(images/sway.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
height: 450px;
padding: 2%;
}

.wrapper{
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;

}

.wrapper2{

 margin: 0 auto;

 text-align: justify;

}

.wrapper3{
	width: 70%;
	margin: 0 auto;
 padding-bottom: 40px;
 margin-bottom: 100px;
}

.wrapper3 h6:hover {
		transform: scale(1.1);
	transition: transform .2s;
}

.wrapper4{
	float: right;
	min-width: 300px;
	margin-bottom: 3%;
	margin-right: 20px;
}
.wrapper6{
	float: right;
	width: 30px;
	margin-bottom: 3%;
	margin-right: 10%;
}

.wrapper7{
	float: right;
	min-width: 30px;
	margin-bottom: 3%;
	margin-right: 5%;
}

.wrapper5{

	margin: 0 auto;
	text-align: center;
 max-width: 150px;
padding: 10px;
}

.wrapper5 a{
color:#f0f8ff;
border: 2px solid #f0f8ff;
padding: 3%;
border-radius: 1em;
font-weight: bold;
 }

.mainline{
	width: 900px;
	height: 200px;

	margin-top: 275px;
text-align: left;
 padding: 1%;



}



header{
		margin-bottom: 5px;
	color: #333;
	text-align: center;
	padding: 5px;


}

.headerb{
	background: #f5deb3;

}



#main article{
	margin-bottom: 25px;
	background: #cccc33;
	padding: 25px;
	margin: 10px;

}

.sidebar{
  width: 300px;
	float: right;

	padding-top: 13px;
	margin: 5%;
	text-align: center;
box-shadow: 0px 5px 10px black;

}


.box{
  width: 280px;
	text-align: center;
	padding-left: 5px;
	margin-left: 15%;
	margin-bottom: 10%;
	float: left;
box-shadow: 0px 5px 10px black;

}

	 meine-email::after {
    content: attr(data-domain);
    }
    meine-email::before {
    content: attr(data-user);
    }



#gallery{
  display: grid;
	grid-template-columns: repeat(auto-fill, max(48%, 2%));
	gap: 4%;
	margin-left: 4%;
}

#gallery > figcaption{
  grid-column: 1 / -1;
}

#gallery figure {
  position: relative;
}

figure img{
  display: inline;
		box-shadow: 0px 5px 20px black;
}

#gallery > figure > figcaption{
  position: absolute;
  top: 10%;
  line-height: 2em;
  color: white;
	background: #f5deb3;
	border-radius: 1em;
}

#figcaption {
  grid-column: 1 / -1;
}

	figure {
  position: relative;
}

#figure > figcaption {
  position: absolute;
  top: 10%;
	padding: 1%;
  line-height: 2em;
  color: white;

}



.mainwrapper {
	background: #f5deb3;
 overflow: hidden;
}

footer{
	width: 100%;
	float: left;
	margin-top: 2%;
}

footer a{
	color: black;

}

footer a:hover{
	background:#f5deb3;
	padding: 3%;
	border-radius: 1em;
	color: white;
}

/* Navigation * * * * * * * * */

#mobile-menu-btn{
display: none;

}

#navigation{
	text-transform:  uppercase;
	padding: 15px;
	text-align: center;
	float: right;
	box-shadow: 0px 5px 10px black;
}

#navigation ul li{
	display: inline;
}

#navigation a{
	color: white;
	text-decoration: none;
	padding: 5px 5px;
	border: none;
}



#navigation a:hover{
	background: #f5deb3;
	border-radius: 1em;
}



/* Typografie * * * * * * * * */



h1{
	font-family: Georgia, Times, serif;
	font-size: 48px;
	font-size: 3rem;

		float: left;
		color: #231a24;
		 font-weight: normal;
}

h2{
	font-family: Georgia, Times, serif;
	font-size: 30px;
 font-size: 1.875rem;
 font-weight: normal;
 text-align: center;
	margin-top: 15px;
			margin-bottom: 15px;
	font-style: italic;
	color: #231a24;



}



h4{
	font-family: Georgia, Times, sans-serif;
	font-weight: normal;

	font-size: 25px;

	font-size: 1.7rem;
	color: white;
	text-align: left;


}

h5{
	font-family: Georgia, Times, sans-serif;
	font-weight: normal;
	font-size: 1.3rem;
	color: white;
	text-align: left;


}

h3{
	font-family: poppins, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-size: 1.25rem;
	 border-radius: 1em;
 border: 4px solid #f5deb3;
	background: #f5deb3;
	padding: 10px;
	color: #231a24;
	max-width: 65%;
	 	box-shadow: 0px 5px 20px black;
		text-align: center;
   margin: 0 auto;

}

h6{
	font-family: poppins, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-size: 1.25rem;
	background: #f5deb3;
	max-width: 370px;
	padding: 10px;
	color: #231a24;
	margin: 0 auto;
	border-radius: 1em;
	font-weight: normal;

}



p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-size: 1rem;
	color: #333333;
	margin-bottom: 10px;
	line-height: 2rem;
}

 a{
	color: white;
	text-decoration: none;

}



.mainline h3:hover {
		transform: scale(1.1);
	transition: transform .2s;
}



li{
	display: block;
	margin: 10px;

}



.wrapper2  li::before {content: "•"; color: #f5deb3;
  display: inline-block; width: 1em;
  margin-left: 30px}




#section2 li{
display: block;


}

#section2 ul{

 list-style-type: disc;


}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
	margin-top: 20px;

}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #f5deb3; ;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;

}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #f5deb3;
}

/* Caption text */
.text {
  color: #231a24;
  font-size: 25px;

     width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f5deb3;
  font-size: 20px;
  position: absolute;
	margin: 20px;
	padding: 30px;
  top: 0;
	font-weight: bold;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
	height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
	margin-bottom: 10px;
}

.active, .dot:hover {
  background-color: #f5deb3;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.3s;
  animation-name: fade;
  animation-duration: 1.3s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

  .marquee {
      margin: 0 auto;
      width: 800px;
      height: 50px;
      white-space: nowrap;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
			margin-bottom: 10px;

			color: red;

      }
      .marquee:before, .marquee:after {
      position: absolute;
      top: 0;
      width: 50px;
      height: 50px;
      content: "";
      z-index: 1;
      }

      .marquee__content {
      width: 1000%;
      display: flex;
      line-height: 10px;
      animation: marquee 80s linear infinite forwards;
      }
      .marquee__content:hover {
      animation-play-state: paused;
      }
      .list-inline {
      display: flex;
      justify-content: space-around;
      width: 33.33%;


      /* reset list */
      list-style: none;
      padding: 0;
      margin: 0;
      }
      @keyframes marquee {
      0% {
      transform: translateX(0);
      }
      100% {
      transform: translateX(-66.6%);
      }
      }

/* Media Queries * * * * * * * * */

@media only screen and (min-width: 980px) and (max-width: 1279px) {




.mainline{
	min-witdh: 60%;

}

.sidebar{
	 width: 35%;
	 margin-top: 8%;

 }




}

@media only screen and (min-width: 760px) and (max-width: 979px) {





.wrapper{
	width: 100%;

}

.mainwrapper{
	width: 100%;

}



.wrapper2{
	min-width: 500px;
	margin: 2% 2% !important;
	padding: 2%;
}

.mainline{
	min-width: 60%;

}

.sidebar{
	 width: 35%;
	 margin-top: 8%;

 }


}

@media only screen and (max-width: 759px) {



.wrapper{
	width: 100%;

}

.mainwrapper{
	width: 100%;

}

h3{
font-size: 120%;
}

h4{
font-size: 140%;
}



.wrapper2{


	padding: 3%;
	float: left;
}

.mainline{
	width: 100%;
}

.sidebar{
 max-width: 60%;
 margin-right: 20%;
 margin-top: 10%;
}

#gallery{
  display: grid;
	grid-template-columns: repeat(auto-fill, max(100%));
	margin-left: 10%;
	gap: 10px;

}


	a#mobile-menu-btn{
	display: block;
	background: #f5deb3;
  font-color: black;
	font-weight: bold;
	margin: 0 auto;
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px 0;
	box-shadow: 0px 5px 10px black;

}


#navigation{
	display: none;
	margin: 0px 0 0;
	float: right;
}

#navigation ul li {
	display: block;
	float: none;


}

#navigation ul li a{
	display: block;
	background: #f5deb3;
	color: black;
	font-weight: bold;
	border: 0;
}

#navigation a{
	color: black;
	text-decoration: none;
	padding: 7px 20px;
	margin: 0 10px;

}


#navigation a:hover{
	color: white;
	background: #f5deb3;
	}


.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}