html {
	height: 100vh;
	color: white;
}

body {
	text-align: center;
	font-size: 20px;
	font-family: 'Montserrat', sans-serif;
	line-height: 150%;
	box-sizing: border-box;
}


a {
	text-decoration: none;
	color: #ffffff;
}

img {
	max-width: 100%;
}




#header {
	display: block!important;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	width: 100vw;
	float: left;
	/* bottom: 0; */
	z-index: 2;
	background-color: #0D0700;
	filter: grayscale(100%);
}

@media only screen and (max-width: 700px) {
	
#header {
	display: block!important;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	width: 100vw;
	float: left;
	/* bottom: 0; */
	z-index: 2;
	background-color: #ffffff;
}
}

#header:hover {
	filter: grayscale(0);
}

.wrapper {
	box-sizing: border-box;
	width: 100%;
	/*background-image: url("/img/heroGretsch1500red.png");*/
	min-height: 55vh;
	position: relative;
	margin-top: 150px;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.heroGretsch {
	box-sizing: border-box;
	width: 100%;
	background-image: url("/img/heroGretsch1500red.png");
	min-height: 80vh;
	position: relative;
	margin-top: 150px;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Language Button */

.langButtons {
	width: 100%;
	max-width: 160px;
    float: right;
    padding-top: 10px;
}

.switch {
	background-color: #000000;
    border-radius: 100px;
	filter: grayscale(100%);
	cursor: pointer;
}

.switch:hover {
	filter: grayscale(0%);
}

.switchLabel {
	color: #ffffff;
}

/* Boxen */

#boxes {
	width: 100%;
	float: left;
}

#box1, #box2, #box3, #box4, #box5, #box6 {
	border: 10px solid white;
}

/*
#box5 {
	max-height: 290px;
}

*/

/* Box CSS Grid */

.boxGridTest {
		display: grid;
		grid-template-areas: 
		"box1"
		"box2"
		"box3"
		"box4"
		"box6"
		"twitter";
		padding: 15px;
		grid-gap: 10px;
}	


@media (min-width: 500px) {
  .boxGridTest {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "box1  box2"
      "box3     box4"
      "twitter twitter";
  }
}



@media (min-width: 700px) {
	.boxGridTest {
			display: grid;
			grid-template-columns: repeat(20, 1fr);
			grid-template-rows: repeat(4, 1fr);
			grid-column-gap: 20px;
			grid-row-gap: 20px;
			padding: 25px;
		}

	.box1 { grid-area: 1 / 3 / 3 / 7; height: 260px; min-width: 200px; max-width: 400px; height: auto;}
	.box2 { grid-area: 1 / 9 / 3 / 13; height: 260px; min-width: 200px; max-width: 400px; height: auto;}
	.twitter { grid-area: 1 / 15 / 3 / 19; height: 260px; min-width: 200px; max-width: 400px; height: auto;}
	.box3 { grid-area: 3 / 6 / 5 / 10; height: 260px; min-width: 200px; max-width: 400px; height: auto;}
	.box4	 { grid-area: 3 / 12 / 5 / 16; height: 260px; min-width: 200px; max-width: 400px; height: auto;}
	
}


.grid-container {
    display: grid;
}


.grid-container--fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-element {
  background-color: #ffffff;
  color: #000000;
  box-shadow: 6px 3px 20px 0px rgba(0,0,0,0.75);
  height: auto;
  min-height: 150px;
  margin: 15px;
}

#overview .grid-element {
  background-color: #ffffff;
  color: #000000;
  box-shadow: none;
  height: auto;
  min-height: 150px;
  margin: 15px;
}



#overview img {
	filter: drop-shadow(2px 4px 6px black);
	max-height: 335px;
}

#boxes img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

#boxes img:hover {
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

.img-caption {
  position: relative;
  font-family: Arial;
  cursor: pointer;
}
	
.img-text {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
  width: 100%;
}


/* Content */

#content {
	box-sizing: border-box;
    position: relative;
    float: left;
    text-align: left;
	color: darkgray;
    background-color: #000000;
	margin-top:	150px;
	padding: 30px;
	width: 100%;

	/*display: none;*/
	
}

/*content Gitarren Overview*/

#overview  {
	box-sizing: border-box;
    position: relative;
    float: left;
    text-align: left;
	color: #000000;
    background-color: #ffffff;
	margin-top:	150px;
	padding: 30px;
	width: 100%;
	/*display: none;*/
}

@media only screen and (max-width: 655px) {
	#header {
		height: 0px !important;
		/*margin-top: 50px !important;*/
	}
	#boxes {
		width: 100%;
		padding: 0px;
		margin-left: 0;	
	}	
	#content {
		position: unset;
		width: auto;
	}
	#wrapper {
		width: 95%;
	}
}



/* Box Content */

.twitterClick {
	padding-top: 30%;
	color: #1DA1F2;
	cursor: pointer;
}

/* Footer */

#footer {
	box-sizing: border-box;
    
	/* Footer nicht am unteren Rand, aber ohne SB */
	position: relative; 
	
	/* Footer am unteren Rand, aber mit SB :( 
	
	position: absolute;*/
    float: left;
    text-align: center;
	color: #ffffff;
    background-color: #000000;
	margin-top:	50px;
	padding: 10px;
	width: 100%;
	bottom: 0;
}

.footerC {
	width: 25%;
	
}

.footerS {
	width: 10%
}


.footerPotis {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transform: rotate(-120deg);
  transition: 1s;
  
}

.footerPotis:hover { 
	transform: rotate(120deg);
	transition: 1s; 
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}

/*scroll html*/

#bgImg {
	background-image: url(https://quitars.de/img/IMG_20200429_163148528.jpg);	
	position: fixed;
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
}

#divRZK {
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 1;
	background-image: url(https://quitars.de/img/RZK_HB.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

#divIcon {
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 1;
	background-image: url(https://quitars.de/icon/home.png);
	background-size: cover;
	background-repeat: no-repeat;
}



/* parallax Projekte */

.projekte {
	margin-top: 100px;
	padding-top: 20px;
}


.bgimg {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 70vh;
}
.bgimg-1 {
  background-image: url("/img/projekte/rzk_HB/demontiert.png");
  min-height: 70vh;
}

.bgimg-2 {
  background-image: url("/img/projekte/rzk_HB/geschliffengezeichnet.png");
  min-height: 70vh;
}

.bgimg-3 {
  background-image: url("/img/projekte/rzk_HB/kneteanbringen.png");
  min-height: 70vh;
}

.bgimg-4 {
  background-image: url("/img/projekte/rzk_HB/knetefertig.png");
  min-height: 70vh;
}

.bgimg-5 {
  background-image: url("/img/projekte/rzk_HB/knetedranlackiert.jpg");
  min-height: 70vh;
}

.bgimg-6 {
  background-image: url("/img/projekte/rzk_HB/kneteab.jpg");
  min-height: 70vh;
}

.bgimg-7 {
  background-image: url("/img/projekte/rzk_HB/gebranntlackiert.png");
  min-height: 70vh;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-image: linear-gradient(to right, rgba(0,0,0,0.2),rgba(0,0,0,0.5), rgba(0,0,0,0));
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #111;
}


.infoText {
	color: #777;
	background-color:white;
	text-align:center;
	padding:50px 80px;
	text-align: justify;
}

/* No parallax on mobile */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}

/* UpButton */

#upButton {
	background-image: url("/icon/upArrow.png");
	position: fixed;
	display: none;
	bottom: 20px;
	right: -220px;
	z-index: 99;
	cursor: pointer;
	width:	400px;	
	height:	126px;
	transition: 1s;
}

#upButton:hover {
	right: 0px;
	transition: 1s;
}

/*accordion*/

.accLabel {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.openPanel, .accLabel:hover {
  background-color: #ccc;
}

.accPanel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accPanel .grid-element {
	box-shadow: none;
}

.accPanel img {
	filter: drop-shadow(2px 4px 6px black);
}

/* hero media queries */

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

.heroGretsch {
	background: none !important;
}

}

/* writtenLabels */

.writtenLabels {
	height: 40px;
}