/*
	BBBB   BBBB    GGGG  V    V  L
	B   B  B   B  G      V    V  L
	BBBB   BBBB   G  GG  V    V  L
	B   B  B   B  G   G   V  V   L
	BBBB   BBBB    GGG     V     LLLLL

	 CCCC   SSSS   SSSS
	C      S      S
	C       SSS    SSS
	C          S      S
	 CCCC  SSSS   SSSS

	Version v3
	Date    19-6-2022
	This code is Copyright (C) by Julian
*/

div[class^="container"]{ padding: 80px 0; }
div[class^="col"] .card{ margin-left: auto; margin-right: auto; }

@media only screen and (max-width: 960px){
	#info, #newBeer, #map, #footer{ clip-path: polygon(0 40px, 100% 0%, 100% 100%, 0% 100%); }
}
@media only screen and (min-width: 960px){
	#info, #newBeer, #map, #footer{ clip-path: polygon(0 80px, 100% 0%, 100% 100%, 0% 100%); }
}

#info, #newBeer, #about, #map, #footer{ margin-top: -90px; }
#beer{ margin-top: -50px;}

/* Colors */
.white{ color: #fff; }
.black{ color: #000; }

/* */
html{ scroll-behavior: smooth; }
body{ margin: 0; }
h1, h2, h3, h4, h5{ margin: 0 0; }
p{ 
	margin-top:0;
	margin-bottom: 10px;
}

p,li,.card{ font-family: Arial, Helvetica, sans-serif; }

.text-left { text-align: left; }
.text-center{ text-align: center; }
.text-right { text-align: right; }

.text-xs{ font-size: 8px; }
.text-s{ font-size: 12px; }
.text-m{ font-size: 14px; }
.text-l{ font-size: 24px; }
.text-xl{ font-size: 36px; }
.text-xxl{ font-size: 48px; }

.shadow { text-shadow: 1px 1px 30px #000; }

a{
	display: inline;
	color: rgba(0,150,235);
	text-decoration: none;
}

.img {
	position: relative;
	width: 100%;
	opacity: 1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.gelicum-img{ background-image: url(../img/Gellicum1.jpg); }
.bierbubbles-img { background-image: url(../img/bierbubbles.jpg); }
.patron-img{ 
	position: relative;
	overflow: hidden;
}
.patron-img:before
{
	content: "";
	position: absolute;
	width: 5800px;
	height: 5800px;
	top: 50%;
	left: 50%;
	background: url(../img/patron.svg) 0 0 repeat;
	transform: translate(-50%, -50%) rotate(-45deg);
	z-index: -1;
}
.wolken-img{ background-image: url(../img/wolken.png); }

.map-img{ background-image: url(../img/map.png); }
.greenWind-img{ background-image: url(../img/greenWind.jpg); }

/* = = = = = navbar = = = = = */
nav{
	background-color: #333;
}
nav li a{ color: #fff; }

.nameLogo {
	background-image: url("../img/JulianLogo.svg");
	background-size: contain;
	aspect-ratio: 31 / 11;
	width: 60%;
}
.cradit{
	aspect-ratio: 3 / 1;
	border-radius: 10px; 
}
.cradit.patron-img:before{ background-size: 1%; }