/* ***+********************************************************* < 1200 ************ */

@media (max-width: 1199px) {

	h1 {
		font-size: 8.3vw;
		line-height:10.9vw;
		margin:0;
		padding:0;
	}
	h2 {
		font-size: 6.7vw;
		line-height:9vw;
		margin:0;
		padding:0;
	}
	h3 {
		font-size: 40px;
		line-height:60px;
		margin:0;
		padding:0;
	}
	h4 {
		font-size: 26px;
		line-height:34px;
		margin:0;
		padding:0;
	}
	
	/* ---------------------------------------------------------- Header -------- */
	header {
		grid-template-rows:1fr 1fr 1fr; 
		grid-template-columns:0.8fr 2fr 1fr 2fr 0.8fr; 
		align-items: center;
	}
	
	header .col-4 .scroll {
		width:50%;
		height:auto;
	}
	
	/* ---------------------------------------------------------- Overview ------- */

	#overview {
		grid-template-columns:0.1fr 1fr 1.5fr 1.5fr 1fr 0.1fr; 
		grid-gap:1px;
		background-color: rgba(0, 0, 0, 0);
	
	}
	
	/* ---------------------------------------------------------- Food ------- */

	#food {
		grid-template-rows:auto; 
		grid-template-columns:0.1fr 1fr 1.5fr 1.5fr 1fr 0.1fr; 	
	}
	
	
	#food .col-5 { /* Illustration coffee */
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
		text-align:center;
		padding:0;
	}
	#food .col-5 .illustration {
		width:80%;
		height:auto;
	}
	
	#food .col-6 { /* Illustration croisannt */
		grid-column-start: 5;
		grid-column-end: 7;
		grid-row-start: 1;
		grid-row-end: 2;
		text-align:center;
		padding:0;
	}
	
	#food .col-6 .illustration {
		width:70%;
		height:auto;
	}
	
	#food .col-7 { /* Illustration muffin */
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 4;
		grid-row-end: 6;
		text-align:right;
		padding:8% 0 0 0;
		align-self: center;
	}
	#food .col-7 .illustration {
		width:70%;
		height:auto;
	}
	
	#food .col-8 { /* Illustration bread */
		grid-column-start: 5;
		grid-column-end: 6;
		grid-row-start: 4;
		grid-row-end: 6;
		text-align:center;
		padding:0;
		align-self: center;
	}
	#food .col-8 .illustration {
		width:100%;
		height:auto;
	}
	
	#food .col-10-1 { /* Softdrink 1*/

		grid-column-start: 3;
		grid-column-end: 5;
		grid-row-start: 4;
		grid-row-end: 5;
		padding-top: 0;
		padding-bottom: 0;

	}
	#food .col-10-2 { /* Softdrink 2*/

		grid-column-start: 3;
		grid-column-end: 5;
		grid-row-start: 5;
		grid-row-end: 6;
		padding-top: 0;
	}
	
	#food .col-4 { /* Breakfast */
		grid-column-start: 3;
		grid-column-end: 5;
		grid-row-start: 6;
		grid-row-end: 7;
		text-align:left;
		padding:30px 60px;
		color:white;
	}
	
	/* ---------------------------------------------------------- Culture ------- */

	#culture { 
		grid-template-rows:auto; 
		grid-template-columns:1fr 4fr 1fr; 
	
	}
	
	/* ---------------------------------------------------------- Fair-Trade ------- */

	#fairtrade {
		grid-template-rows:auto; 
		grid-template-columns:0.5fr 1.5fr 1.5fr 1fr 1fr 0.5fr; 
	
	}
	
	/* ---------------------------------------------------------- Infos ------- */

	#infos {
		grid-template-rows:auto; 
		grid-template-columns:0.5fr 1.5fr 1.5fr 1fr 1fr 0.5fr;  
	}
	
	/* ---------------------------------------------------------- Footer ------- */

	footer {
		grid-template-rows:auto; 
		grid-template-columns:0.5fr 0.7fr 1.2fr 0.9fr 1fr 0.5fr;
		padding:60px 0;
	}
	
}

/* ***+********************************************************* < 992 ************ */ 

@media (max-width: 991px) {
	
	/* ---------------------------------------------------------- Header -------- */
	header {
		grid-template-rows:1fr 1fr 1fr; 
		grid-template-columns:0.5fr 2.5fr 1fr 2.5fr 0.5fr; 
		align-items: center;
		font-size:17px;
		line-height:22px;
	}
	
	header .col-4 .scroll {
		width:50%;
		height:auto;
	}
	
	/* ---------------------------------------------------------- Overview ------- */
	
	#overview .col-2 { /* Text */
		padding:25px;
	}
	
	/* ---------------------------------------------------------- Food ------- */
	
	#food .col-2 { /* Kaffee */
		grid-column-start: 1;
		grid-column-end: 4;
		padding:30px 20px;
	}
	
	#food .col-3 { /* Tee */
		grid-column-start: 4;
		grid-column-end: 7;
		padding:30px 20px;
	}
	
	#food .col-4 { /* Breakfast */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 6;
		grid-row-end: 7;
	}
	
	
	/* ---------------------------------------------------------- Culture ------- */

	#culture { 
		grid-template-rows:auto; 
		grid-template-columns:0.5fr 4fr 0.5fr;   
	
	}
	
	/* ---------------------------------------------------------- Fair-Trade ------- */

	#fairtrade {
		grid-template-rows:auto; 
		grid-template-columns:0.2fr 1.5fr 1.5fr 1fr 1fr 0.2fr; 
		padding:80px 0 60px 0;
	}
	
	/* ---------------------------------------------------------- Infos ------- */

	#infos {
		grid-template-rows:auto; 
		grid-template-columns:0.2fr 1.5fr 1.5fr 1fr 1fr 0.2fr;
		padding:60px 0;
	}
	
	/* ---------------------------------------------------------- Footer ------- */

	footer {
		grid-template-rows:auto; 
		grid-template-columns:0.2fr 0.65fr 1.3fr 0.9fr 1fr 0.2fr;
		padding:40px 0;
	}

}

/* ***+********************************************************* < 768 ************ */
@media (max-width: 767px) { 

	/* ---------------------------------------------------------- Header -------- */
	header {
		grid-template-rows:1fr 1fr 1fr; 
		grid-template-columns:0.5fr 2fr 1fr 2fr 0.5fr; 
		align-items: center;
	}
	
	@media (orientation:portrait) {
		header .col-1 {
			height:80%;
		}
		header .col-2 {
			padding:0;
		}
	}
	header .col-3 {
		padding:5px 0 0 0;
		background-color: rgba(240, 50, 245,0);
		text-align:left;
		color:black;
		grid-column-start: 2;
		grid-column-end: 5;
		grid-row-start: 1;
		grid-row-end: 1;
		align-self: start;
	}
	
	header .col-4 .scroll {
		width:50%;
		height:auto;
	}
	
	@media (orientation:landscape) {
		header .col-4 {
			grid-column-start: 2;
			grid-column-end: 3;
			grid-row-start: 3;
			grid-row-end: 3;
			align-self: end;
		}
		
		header .col-4 .scroll {
			padding-bottom:15px;
			width:25%;
			height:auto;
		}
	}
	
	header .col-5 { /* Address */
		padding-bottom:20px;
		text-align:right;
		grid-column-start: 2;
		grid-column-end: 5;
		grid-row-start: 3;
		grid-row-end: 3;
		align-self: end;
	}
	
	@media (orientation:portrait) {
		header .col-5 { /* Address */
			padding-bottom:40px;
		}
	}
	
	/* ---------------------------------------------------------- Overview ------- */

	#overview {
		grid-template-columns:20px 1fr 1fr 1fr 1fr 20px; 
		grid-gap:1px;
		background-color: rgba(0, 0, 0, 0);
	
	}
	
	#overview .col-2 { /* Text */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 2;
		grid-row-end: 3;
		padding:40px 20px;
	}
	
	#overview .col-3 { /* Kultur-Cafe */
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 4;
		grid-row-end: 5;
		text-align:right;
		padding: 0 8% 0 0;
		align-self: end;
	}
	
	#overview .col-4 { /* Fair-Trade */
		grid-column-start: 4;
		grid-column-end: 6;
		grid-row-start: 4;
		grid-row-end: 5;
		text-align:left;
		padding: 8% 0 0 8%;
		align-self: end;
	}
	#overview .col-5 { /* Ausstellung */
		grid-column-start: 2;
		grid-column-end: 4;
		grid-row-start: 3;
		grid-row-end: 4;
		text-align: center;
		padding: 0;
		align-self: start;
	}
	#overview .col-6 { /* Literatur */
		grid-column-start: 4;
		grid-column-end: 6;
		grid-row-start: 3;
		grid-row-end: 4;
		text-align: center;
		padding: 0;
		align-self: start;
	}
	
	/* ---------------------------------------------------------- Food ------- */
	
	#food {
		grid-template-rows:auto; 
		grid-template-columns:20px 1fr 1.5fr 1.5fr 1fr 20px; 	
	}
	
	#food .col-2 { /* Kaffee */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 2;
		grid-row-end: 3;
		text-align:left;
		padding:30px 60px;
		color:white;
	}
	#food .col-3 { /* Tee */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 3;
		grid-row-end: 4;
		text-align:left;
		padding:30px 60px;
		color:white;
	}
	
	#food .col-7 { /* Illustration muffin */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 2;
		grid-row-end: 3;
		text-align:center;
		padding:0 0 2.7% 10%;
		align-self: end;
		display:block;
	}
	#food .col-7 .illustration {
		width:20%;
		height:auto;
	}
	
	#food .col-8 { /* Illustration bread */
		grid-column-start: 3;
		grid-column-end: 6;
		grid-row-start: 3;
		grid-row-end: 4;
		text-align:center;
		padding:0 0 6% 0;
		align-self: end;
	}
	#food .col-9 { /* Softdrink Headline */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 5;
		grid-row-end: 6;
		padding:30px 60px;
	}
	#food .col-10-1 { /* Softdrink 1*/

		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 6;
		grid-row-end: 7;
		padding-top: 0;
		padding-bottom: 0;

	}
	#food .col-10-2 { /* Softdrink 2*/

		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 8;
		grid-row-end: 9;
		padding-top: 0;
	}
	
	#food .col-4 { /* Breakfast */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 10;
		grid-row-end: 11;
		text-align:left;
		padding:30px 60px;
		color:white;
	}
	
	#food .col-8 .illustration {
		width:30%;
		height:auto;
	}
	
	/* ---------------------------------------------------------- Culture ------- */

	#culture { 
		grid-template-rows:auto; 
		grid-template-columns:20px 1fr 20px; 
	
	}
	#culture .col-text { /* Text */
		text-align:left;
		padding:0 0 50px 20px;
	}
	
	/* ---------------------------------------------------------- Fair-Trade ------- */

	#fairtrade {
		grid-template-rows:auto; 
		grid-template-columns:20px 1.5fr 1.5fr 1fr 1fr 20px; 
		padding:80px 0 0 0;
	}
	#fairtrade .col-2-2 { /* Text */
		padding:0 0 50px 20px;
	}
	
	#fairtrade .col-2-2 .elrojito {
		width:120px;
		height:auto;
	}
	#fairtrade .col-2-2 .fairtrade-logo {
		width:100px;
		height:auto;
	}
	
	/* ---------------------------------------------------------- Infos ------- */

	#infos {
		grid-template-rows:auto; 
		grid-template-columns:20px 1.5fr 1.5fr 1fr 1fr 20px;
		padding:60px 0;
	}
	
	#infos .col-2-2 { /* Text */
		padding:0 0 50px 20px;
	}
	
	/* ---------------------------------------------------------- Footer ------- */

	footer {
		grid-template-rows:auto; 
		grid-template-columns:20px 1fr 1fr 1fr 1fr 20px;
		padding:40px 0;
	}
	
	footer .col-1 { 
		grid-column-start: 2;
		grid-column-end: 4;
		grid-row-start: 1;
		grid-row-end: 2;
		text-align:left;
		padding:0 0 0 40px;
	}
	footer .col-2 { 
		grid-column-start: 4;
		grid-column-end: 6;
		grid-row-start: 1;
		grid-row-end: 2;
		text-align:left;
		padding:0;
	}
	footer .col-3 { 
		grid-column-start: 2;
		grid-column-end: 4;
		grid-row-start: 3;
		grid-row-end: 4;
		text-align:left;
		padding:20px 0 0 40px;
	}
	footer .col-4 { 
		grid-column-start: 4;
		grid-column-end: 6;
		grid-row-start: 3;
		grid-row-end: 4;
		text-align:left;
		padding:20px 0 0 0;
	}

}

/* ***+********************************************************* < 568 ************ */
@media (max-width: 567px) {
	
	

	/* ---------------------------------------------------------- Overview ------- */
	
	#overview .col-1 { /* Willkommen */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 1;
		grid-row-end: 2;
		text-align:center;
		padding: 0;
	}
	#overview .col-2 { /* Text */
		padding:40px 0;
	}
	#overview .col-3 { /* Kultur-Cafe */
		grid-column-start: 2;
		grid-column-end: 4;
		grid-row-start: 4;
		grid-row-end: 5;
		text-align:center;
		padding: 0 8% 0 0;
		align-self: end;
	}
	
	/* ---------------------------------------------------------- Food ------- */
	
	#food .col-9 { /* Softdrink Headline */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 5;
		grid-row-end: 6;
		padding:30px 0;
	}
	#food .col-10-1 { /* Softdrink 1*/

		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 6;
		grid-row-end: 7;
		padding: 0;

	}
	#food .col-10-2 { /* Softdrink 2*/

		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 8;
		grid-row-end: 9;
		padding: 0;
	}
	

	#food .col-4 {
		padding-left:0;
		padding-right:0;
	}
	#food .col-4 h3 {
		margin-bottom:30px;
	}
	
	#food .col-8 { /* Illustration bread */
		grid-column-start: 2;
		grid-column-end: 4;
		grid-row-start: 10;
		grid-row-end: 11;
		text-align:left;
		padding:30px 0 0 0;
		align-self: start;
	}

	
	
	/* ---------------------------------------------------------- Fair-Trade ------- */
}

/* ***+********************************************************* < 510 ************ */
@media (max-width: 509px) {
	
	h1 {
		font-size: 10vw;
		line-height:12.5vw;
		margin:0;
		padding:0;
	}
	h2 {
		font-size: 8vw;
		line-height:10vw;
		margin:0;
		padding:0;
	}
	h3 {
		font-size: 8vw;
		line-height:10vw;
		margin:0;
		padding:0;
	}
	h4 {
		font-size: 26px;
		line-height:34px;
		margin:0;
		padding:0;
	}
	
	/* ---------------------------------------------------------- Overview ------- */
	
	#overview .col-4 { /* Fair-Trade */
		text-align:right;
	}
	
	/* ---------------------------------------------------------- Food ------- */
	
	#food .col-5 { /* Illustration coffee */
		grid-row-start: 3;
		grid-row-end: 5;
		align-self: start;
	}
	
	#food .col-6 { /* Illustration croisannt */
		grid-row-start: 5;
		grid-row-end: 6;
		align-self: start;
	}
	#food .col-2 { /* Kaffee */
		padding:30px 0;
	}
	#food .col-3 { /* Tee */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 3;
		grid-row-end: 4;
		text-align:left;
		padding:30px 0;
	}
	#food .col-4 { /* Breakfast */
		padding:30px 0;
	}
	
	/* ---------------------------------------------------------- Culture ------- */

	.culture-images {
		width: 100%;
		text-align: center;
		margin: 0 auto;
		float: none;
	}
	.culture-text {
		margin-left:0;
		margin-top:30px;
	}
	.culture-line {
		margin-left:0;
	}
	
	/* ---------------------------------------------------------- Fair-Trade ------- */

	
	
	#fairtrade .col .fairtrade-image {
		width:100%;
		height:auto;
		margin-top:-45vw;
	}

	
	

	#fairtrade .col-2-1 { /* Image */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 2;
		grid-row-end: 3;
		text-align:center;
		padding:0;
		margin-bottom:20px;
		height:50vw;
		overflow:hidden;
	}
	#fairtrade .col-2-2 { /* Text */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 4;
		grid-row-end: 5;
		text-align:left;
		padding:0 0 50px 0;
	}
	#fairtrade .col-2-2 .fairtrade-logos {
		text-align:center
	}
	
	/* ---------------------------------------------------------- Infos ------- */

	
	#infos .col .infos-image {
		width:40%;
		height:auto;
	}

	#infos .col-2-1 { /* Image */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 2;
		grid-row-end: 3;
		text-align:center;
		padding:0 0 20px 0;
	}
	#infos .col-2-2 { /* Text */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 4;
		grid-row-end: 4;
		text-align:left;
		padding:0 0 50px 0;
	}
}

/* ***+********************************************************* < 460 ************ */
@media (max-width: 459px) {
	
	/* ---------------------------------------------------------- Food ------- */
	
	#food .col-8 .illustration {
		width: 50%;
		height: auto;
	}
	
	#food .col-7 { /* Illustration muffin */
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 2;
		grid-row-end: 3;
		text-align:center;
		padding:20% 0 0 10%;
		align-self: center;
		display:block;
	}
	
	/* ---------------------------------------------------------- Footer ------- */
	
	
	footer .col-1 { 
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 1;
		grid-row-end: 2;
		text-align:left;
		padding:0 0 0 40px;
	}
	footer .col-2 { 
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 3;
		grid-row-end: 4;
		text-align:left;
		padding:20px 0 0 40px;
	}
	footer .col-3 { 
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 5;
		grid-row-end: 6;
		text-align:left;
		padding:20px 0 0 40px;
	}
	footer .col-4 { 
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 7;
		grid-row-end: 8;
		text-align:left;
		padding:20px 0 0 40px;
	}


}

/* ***+********************************************************* < 400 ************ */
@media (max-width: 399px) {
	
	h1 {
		font-size: 11vw;
		line-height:14vw;
		margin:0;
		padding:0;
	}
	h2 {
		font-size: 9vw;
		line-height:11.5vw;
		margin:0;
		padding:0;
	}
	h3 {
		font-size: 9vw;
		line-height:11.5vw;
		margin:0;
		padding:0;
	}
	
}