/*

webyy Webseite
https://webyy.de

*/

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 900

.google-sans-<uniquifier> {
  font-family: "Google Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "GRAD" 0;
}

body {

  font-family: "Google Sans", sans-serif;
  font-size:1.1rem;
  font-weight: 300;
  background:#fff;
  color:#000;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
hr {
  box-sizing:content-box;
  height:0;
  overflow:visible
}
.h1,h1 {
  margin:20px 0px;
  font-size:2rem;
  font-weight: 300;
  font-family: "Google Sans", sans-serif;
}

.h2,h2 {
  margin: 0px;
  font-size:2.5rem;
  font-weight: 300;
  color:#f6a116;
  font-family: "Google Sans", sans-serif;
  line-height: 1.2;
}
.h3,.h4,.h5,.h6,.h7,.h8,.h9,.h10,h3,h4,h5,h6,h7,h8,h9,h10 {
  margin:0px 0px 20px 0px;
  font-size:1.5rem;
  font-weight: 500;
  color:#000;
  font-family: "Google Sans", sans-serif;
  height: 80px;
  text-transform: uppercase;
}
h-text {
  margin-top:0;
  margin-bottom:.5rem;
  font-size:1.5rem;
  font-weight: 600;
  font-family: "Google Sans", sans-serif;
}
p {
  margin-top:0;
  line-height:1.8rem;
}
.p-info {
  padding:2%;
  border:1px solid #000;
  text-align:center;
  margin-top: 4%;
  line-height: 35px;
}
i {
  margin-right: 10px;
}
/* Erfolgsmeldung-Stil */
.success-message {
  margin-top: 15px;
}

webyyli {
  margin: 22px 0px 20px 22px;
  display: list-item;
  text-align: -webkit-match-parent;
  unicode-bidi: isolate;
}
b,strong {
  font-weight: 600;
}
small{
	font-size:12px;
}
a {
  color:#fff;
  text-decoration:none;
  background-color:transparent;
  -webkit-text-decoration-skip:objects;
  cursor:pointer;
}
a:hover {
  color:#fff;
  text-decoration:underline;
  background-color:transparent;
  -webkit-text-decoration-skip:objects
}
a-under {
  color:#fff;
  text-decoration:none;
  background-color:transparent;
  -webkit-text-decoration-skip:objects;
  cursor:pointer;
}
a-under:hover {
  color:#fff;
  text-decoration:underline;
  background-color:transparent;
  -webkit-text-decoration-skip:objects
}
.button-left {
	float:left;
}
.button-right {
	float:right;
}
.button-text {
    margin: 20px 0 0 0;
    color: #fff;
    text-decoration: none;
    background-color: transparent;
    border-radius: 30px;
    padding: 10px 10px;
    font-size: 1rem;
    text-align: center;
    width: fit-content;
    block-size: fit-content;
    cursor: pointer;
    border: none;
	font-family: "Google Sans", sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
}
.button-text a {
  color:#fff;
  text-decoration:underline;
}
.button-text:hover {
  color:#fff;
  text-decoration:underline;
  background-color:transparent;
  -webkit-text-decoration-skip:underline;
}
.button-text:hover a{
  color:#fff;
  text-decoration:underline;
}
.button-small {
  margin: 20px 0 0 0;
  color:#fff;
  text-decoration:none;
  background-color:#f6a116;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 1rem;
  text-align:center;
  width: fit-content;
  block-size: fit-content;
  cursor:pointer;
  border: none;
    font-family: "Google Sans", sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
}
.button-small a {
  color:#fff;
  text-decoration:none;
}
.button-small:hover {
  color:#fff;
  text-decoration:none;
  background-color:#000;
  -webkit-text-decoration-skip:none;
}
.button-small:hover a{
  color:#fff;
  text-decoration:none;
}
.button-small-rev {
  margin: 20px 0 0 0;
  color:#000;
  text-decoration:none;
  background-color:#fff;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 1rem;
  text-align:center;
  width: fit-content;
  block-size: fit-content;
  cursor:pointer;
  border: none;
    font-family: "Google Sans", sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
}
.button-small-rev a {
  color:#fff;
  text-decoration:none;
}
.button-small-rev:hover {
  color:#fff;
  text-decoration:none;
  background-color:#649E23;
  -webkit-text-decoration-skip:none;
}
.button-small-rev:hover a{
  color:#fff;
  text-decoration:none;
}
.button-medium {
  color:#fff;
  text-decoration:none;
  background-color:#649E23;
	border-radius: 30px;
	padding: 10px 20px;
	font-size: 1rem;
	text-align:center;
}
.button-medium a {
  color:#000;
  text-decoration:none;
}
.button-medium:hover {
  color:#000;
  text-decoration:none;
  background-color:#fff;
  -webkit-text-decoration-skip:none;
}
.button-medium:hover a{
  color:#000;
  text-decoration:none;
}

.button-big {
  color:#000;
  text-decoration:none;
  background-color:transparent;
  -webkit-text-decoration-skip:objects
}
.button-big:hover {
  color:#000;
  text-decoration:none;
  background-color:transparent;
  -webkit-text-decoration-skip:objects
}
section {
  scroll-margin-top: 90px;
}
.content-img {
  width:100%;
  height:auto;
}
.info-img {
  width:100%;
  height:auto;
  margin-bottom:20px;
}
.webyy-website {
  display: flex;
  justify-content: center;
}
.webyy-container {
  width:100%;
  margin:1% 4% 4% 4%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.webyy-container-color {
  background:#333;
  color:#fff;
  width:100%;
  margin:0;
}
.webyy-column-out {
  width:100%;
  margin:0;
  display: flex;
  margin-bottom: 8%;
}
.webyy-info-column-out {
  width:100%;
  margin:0;
  display: flex;
}
.webyy-info-column-50-left {
  width:44%;
  padding:2%;
  border: 1px solid #454545;
  margin: 2%;
      display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.webyy-info-column-50-right {
  width:44%;
  padding:2%;
  border: 1px solid #454545;
  margin: 2%;
      display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.webyy-info-column-50-left-after {
  width:44%;
  padding:0% 4% 4% 4%;
}
.webyy-info-column-50-right-after {
  width:44%;
  padding:0% 4% 4% 4%;
}
.webyy-column-50-left {
  width:44%;
  margin:1% 4%;
}
.webyy-column-50-right {
  width:44%;
  margin:1% 4%;
}
.webyy-column-50-left-after {
  width:44%;
  margin:1% 4%;
}
.webyy-column-50-right-after {
  width:44%;
  margin:1% 4%;
}
.webyy-column-out-100 {
  width:100%;
  padding: 4%;
  text-align:center;
  margin: auto;
}
.webyy-column-out-100-left {
  width:100%;
  padding: 4%;
  text-align:left;
  margin: auto;
}
.webyy-column-100-left {
  width:100%;
  padding:2% 8%;
  display: flex;
  flex-direction: column;
  background-image: url("../img/cactus-background.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-items: center;
}
.webyy-column-100-left2 {
  width:100%;
  padding:2% 8%;
  display: flex;
  flex-direction: column;
  background-image: url("../img/banner-6.jpg");
  background-size: auto;
  background-position: top;
  background-repeat: no-repeat;
  margin-bottom: 5%;
}
.webyy-column-100-left3 {
  width:100%;
  padding:2% 8%;
  display: flex;
  flex-direction: column;
  background: #649E23;
  margin-bottom: 5%;
}
.webyy-column-100 {
  width:100%;
  padding:2% 4%;
  display: flex;
  flex-direction: column;
}
.webyy-column-100-inner {
  width:100%;
  padding:4%;
  display: flex;
  flex-direction: column;
}
.webyy-column-100-h1 {
  width:100%;
  padding:4% 4% 0 4%;
  display: flex;
  flex-direction: column;
}
.webyy-column-gallery-before {
  width:100%;
  padding:4% 4% 0 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:transparent;
  text-align:center;
}
.webyy-column-gallery-after {
  width:100%;
  padding:4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:transparent;
  text-align:center;
}
.webyy-img-column-100 {
  width:100%;
  background-image: url("../img/cactus-background.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 
  min-height:30vh;
}
        .webyy-footer {
            background-color: #f6a116;
            color: #000;
            padding: 4%;
            text-align: left;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
			font-size:1rem;
        }
        .webyy-footer-section {
            flex: 1;
            padding: 0% 4% 0% 0%;
            min-width: 150px;
        }
        .webyy-footer-section h3 {
            border-bottom: 1px solid #fff;
            padding: 20px 0;
        }
        .webyy-footer-section ul {
            list-style: none;
            padding: 0;
        }
        .webyy-footer-section ul li {
            margin: 8px 0;
        }
        .webyy-footer-section a {
            color: #000;
            text-decoration: none;
        }
        .webyy-footer-section a:hover {
            text-decoration: underline;
        }
        .webyy-footer-section ul li a {
            color: #fff;
            text-decoration: none;
        }
        .webyy-footer-section ul li a:hover {
            text-decoration: underline;
        }
        .webyy-footer-section-last {
            flex: 1;
            padding: 0%;
            min-width: 150px;
			line-height: 1.8rem;
        }
        .webyy-footer-section-last h3 {
            border-bottom: 1px solid #fff;
            padding: 20px 0;
        }
        .webyy-footer-section-last ul {
            list-style: none;
            padding: 0;
        }
        .webyy-footer-section-last ul li {
            margin: 8px 0;
        }
        .webyy-footer-section-last a {
            color: #000;
            text-decoration: none;
        }
        .webyy-footer-section-last a:hover {
            text-decoration: underline;
        }
        .webyy-footer-section-last ul li a {
            color: #fff;
            text-decoration: none;
        }
        .webyy-footer-section-last ul li a:hover {
            text-decoration: underline;
        }
        webyy-footer-copyright {
            background-color: #000;
            color: #fff;
            padding: 2% 4%;
            text-align: left;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size:0.8rem;
		}
        webyy-footer-copyright a {
            color: #fff;
		}
        webyy-footer-copyright a:hover {
            color: #fff;
            text-decoration: underline;
		}
		.webyy-footer-copyright-inner-left {
            color: #fff;
			text-align:left;
			width:25%;
		}
		.webyy-footer-copyright-inner {
            color: #fff;
			text-align:center;
			width:50%;
		}
		.webyy-footer-copyright-inner-right {
            color: #fff;
			text-align:right;
			width:25%;
		}
		
        .social-icons {
            display: flex;
            justify-content: center;
            margin-top: 10px;
			flex-direction: column;
        }
        .social-icons a {
            color: #000;
            margin: 0;
            font-size: 1rem;
            text-decoration: none;
        }
        /* Responsive Anpassungen */
        @media (max-width: 985px) {
            .webyy-footer {
                flex-direction: column;
                text-align: center;
            }
		    .webyy-footer-section {
                padding: 0%;
				margin-top: 2%;
        }
		    .webyy-footer-section-last {
                padding: 0%;
				margin-top: 2%;
        }
        .webyy-footer-section h3 {
            padding: 15px 0px 5px 0px;
			margin: 0px 0px 5px 0px;
			height: auto;
        }
         .webyy-footer-section-last h3 {
            padding: 15px 0px 5px 0px;
			margin: 0px 0px 5px 0px;
			height: auto;
        }
        webyy-footer-copyright {
			display: flex;
			flex-direction: column;
			align-items: center;
            padding: 4% 4%;
		}
		.webyy-footer-copyright-inner-left {
            color: #fff;
			text-align:center;
			width:100%;
		}
		.webyy-footer-copyright-inner {
            color: #fff;
			text-align:center;
			width:100%;
		}
		.webyy-footer-copyright-inner-right {
            color: #fff;
			text-align:center;
			width:100%;
		}
		
        }
        @media (max-width: 576px) {
            .webyy-footer {
                flex-direction: column;
                text-align: center;
            }
        }
/* Navbar-Stile */
.navbar {
    position: fixed;
    width: 100%;
    height: 80px;
    background-color: #f6a116;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4%;
    z-index: 10;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.logo img {
    height: 40px;
}

.nav-links {
    display: flex;
    list-style: none;
    flex-direction: row; /* Horizontal für Desktop */
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    color: #000;
    text-decoration: none;
    font-size: 18px;
}

.nav-links a:hover {
    color: #e2e2e2;
    text-decoration: underline;
}

.burger {
    display: none; /* Standardmäßig ausblenden */
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
}

.burger span {
    background-color: #fff;
    height: 2px;
    width: 100%;
    transition: all 0.3s;
}

.burger.toggle span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger.toggle span:nth-child(2) {
    opacity: 0;
}

.burger.toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(9px, -9px);
}

/* Mobile-Stile */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Standardmäßig ausblenden */
        flex-direction: column; /* Vertikal für mobile Ansicht */
        position: absolute; /* Positionieren über dem Inhalt */
        background-color: #000; /* Hintergrundfarbe für das Menü */
        top: 80px; /* Position unter der Navbar */
        left: 0;
        width: 100%; /* Volle Breite */
    }

    .nav-active {
        display: flex; /* Sichtbar machen, wenn aktiv */
    }

    .burger {
        display: flex; /* Hamburger-Menü anzeigen */
    }
}

/* Start slider */

.slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

/* Fester Text, der über allen Slides bleibt */
.fixed-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 2;
    width: inherit;          /* Wenn du die Breite des Containers nicht festlegen möchtest */
    padding: 8%;
    max-width: 1400px;      /* Maximale Breite */
    display: flex;
    flex-direction: column;
    align-items: center;     /* Zentriert die Inhalte */
}

/* Titel mit zwei Teilen */
.title {
    display: flex;
    flex-direction: column; /* Vertikale Anordnung */
    align-items: center;    /* Zentriert die Inhalte */
}

/* Teile der Überschrift */
.part1, .part2 {
    display: inline-block;       /* Halte die Breite an den Inhalt angepasst */
    max-width: 100%;            /* Verhindert, dass das Element breiter als der Container wird */
    overflow-wrap: break-word;  /* Bricht lange Wörter, um den Container nicht zu sprengen */
    word-wrap: break-word;      /* Für alte Browserkompatibilität */
    white-space: normal;        /* Ermöglicht den Zeilenumbruch */
}

.part1 {
  background-color: #fff; /* halbtransparenter Hintergrund */
  padding: 15px 25px;
  margin: 10px;
  font-size: 4.5rem;
  line-height: 3.2rem;
}

.part2 {
  background-color: #000; /* halbtransparenter Hintergrund */
  padding: 15px 25px;
  margin: 10px;
  font-size: 2.5rem;
  width: fit-content;
  line-height: 2.2rem;
}

/* Beschreibungstext */
.description {
  font-size: 1em; /* Größe für den Beschreibungstext */
  margin-top: 10px; /* Abstand zum Titel */
  padding: 0 20px; /* Padding für bessere Lesbarkeit auf kleinen Bildschirmen */
  width:65%;
}

/* Allgemeine Stile für alle Slides */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: slideAnimation 32s infinite;
}

/* Individuelle Slides mit Bildern */
.slide1 {
  background-image: url('../img/banner-1.jpg');
  animation-delay: 0s;
}

.slide2 {
  background-image: url('../img/banner-2.jpg');
  animation-delay: 8s;
}

.slide3 {
  background-image: url('../img/banner-3.jpg');
  animation-delay: 16s;
}
.slide4 {
  background-image: url('../img/banner-4.jpg');
  animation-delay: 24s;
}

/* Keyframes für Crossfade und Zoom */
@keyframes slideAnimation {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  10%, 30% {
    opacity: 1;
    transform: scale(1.1);
  }
  40%, 90% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .title {
    font-size: 3em; /* Kleinere Schriftgröße für Mobilgeräte */
  }
  .description {
    font-size: 1em; /* Kleinere Beschreibung */
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 2.5em; /* Noch kleinere Schriftgröße für sehr kleine Bildschirme */
  }
  .description {
    font-size: 1em; /* Kleinere Beschreibung */
  }
}

/* Ende slider */

/* Start Gallery */

.gallery {
    display: flex;
    gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.gallery img {
    width: 18vw;
    cursor: pointer;
    position: relative;
}
.gallery-img {
    overflow: hidden;
    width: 18vw;
    height: 12vw;
	display: flex;
    justify-content: center;
    align-items: center;
}

  /* Lightbox-Overlay */
  .lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#000000, #0000007d);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
	z-index: 14;
	flex-wrap: wrap;
	padding: 4% 12%;
	flex-direction: column;
  }
  lightbox {
    max-width: 90%;
    max-height: 84%;
	top: -2%;
    bottom: 2%;
    position: relative;
  }

  .lightbox:target {
    opacity: 1;
    visibility: visible;
  }

  .lightbox img {
    max-width: 90%;
    max-height: 80%;
	top: -2%;
    bottom: 2%;
    position: relative;
  }
.caption {
    color: white;
    font-size: 1.2em;
    margin-bottom: 20px;
}
.close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
	width: 40px;
    height: 40px;
    z-index: 20;
}
.close:hover {
    opacity:0.7;
}
.close-icon {
    color: #fff;
    text-decoration: none;
	width: 40px;
    height: 40px;
    z-index: 20;
}
.left-icon {
    color: #fff;
    text-decoration: none;
	width: 40px;
    height: 40px;
    z-index: 20;
}
.right-icon {
    color: #fff;
    text-decoration: none;
	width: 40px;
    height: 40px;
    z-index: 20;
}
.close img {
    height: 30px;
}
  .nav-button-left {
    position: absolute;
    bottom: 4%;
    display: flex;
    justify-content: space-between;
	left: 20px;
	color: #fff;
    align-items: center;
  }
  .nav-button-left a {
    color: white;
    font-size: 2em;
    text-decoration: none;
    padding: 0 20px;
  }
  .nav-button-right {
    position: absolute;
    bottom: 4%;
    display: flex;
    justify-content: space-between;
	right: 20px;
	color: #fff;
    align-items: center;
  }
  .nav-button-right a {
    color: white;
    font-size: 2em;
    text-decoration: none;
    padding: 0 20px;
  }
  .nav-button-left:hover {
    position: absolute;
    bottom: 4%;
    display: flex;
    justify-content: space-between;
	left: 20px;
	color: #fff;
    align-items: center;
	opacity:0.7;
  }
  .nav-button-left:hover a {
    color: white;
    font-size: 2em;
    text-decoration: none;
    padding: 0 20px;
	opacity:0.7;
  }
  .nav-button-right:hover {
    position: absolute;
    bottom: 4%;
    display: flex;
    justify-content: space-between;
	right: 20px;
	color: #fff;
    align-items: center;
	opacity:0.7;
  }
  .nav-button-right:hover a {
    color: white;
    font-size: 2em;
    text-decoration: none;
    padding: 0 20px;
	opacity:0.7;
  }
/* Ende Gallery */

/* Start Accordion */

details {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: -1px;
    padding: 0;
    background: transparent;
    scroll-margin-top: 89px;
}

summary {
    font-size: 1.4rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    padding: 1% 2%;
    background: transparent;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
	color: #000;
}

details summary::-webkit-details-marker {
  display:none;
}
summary::before {
    content: "+";
    display: inline-block;
    font-size: 2em;
    margin-right: 8px;
    transition: transform 0.3s;
    font-weight: 300;
}

details[open] summary::before {
    content: "+";
    transform: rotate(45deg);
}

/* Panel styling */
.content {
    padding: 2% 4%;
    color: #000;
    border-top: 1px solid #ddd;
}

/* Ende Accordion */

/* Start Cookie Consent */

  .cookie-content {
    padding: 2% 4%;
    color: #fff;
	border-top: 1px solid #ddd;
	font-size:0.8rem;
  }
  .cookie-settings {
    display: none; 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	background: linear-gradient(#000000, #0000007d);; z-index: 1001; 
	color: #000;
	padding: 2%;
  }
  .cookie-settings-inner {
    background: #000; 
	padding: 20px; 
	margin: auto;
	width:50%;
	padding: 4%;
  }
  .cookie-consent-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    padding: 4%;
    box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
	font-size:14px;
	text-align: center;
	border-top: 1px solid #000;
  }
  .cookie-buttons {
    display: flex; 
	gap: 10px;
	justify-content: center;
  }
  .cookie-buttons-text {
    display: flex; 
	gap: 10px;
	justify-content: center;
  }
  #cookie-form {
    font-size:medium;
  }


/*  Resposive Einstellungen  */

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

.webyy-info-column-out {
  width:100%;
  margin:0;
  display: flex;
  flex-wrap: wrap;
}
.webyy-info-column-50-left {
  width:44%;
  margin:3%;
  padding:4%;
}
.webyy-info-column-50-left-after {
  width:44%;
  margin:0% 4% 4% 4%;
}
.webyy-info-column-50-right-after {
  width:44%;
  margin:0% 4% 8% 4%;
}
.webyy-info-column-50-right {
  width:44%;
  margin:3%;
  padding:4%;
}
}

@media only screen and (max-width: 1200px) {
  .cookie-settings-inner {
    background: #000; 
	padding: 20px; 
	margin: auto;
	width:92%;
	padding: 10% 4%;
  }

}

@media only screen and (max-width: 985px) {
.description {
    font-size: 1em; /* Kleinere Beschreibung */
	width:100%;
  }
.gallery img {
    width: 26vw;
    height: auto;
    cursor: pointer;
}
.gallery-img {
    overflow: hidden;
    width: 26vw;
    height: 16vw;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 145px;
}

}


@media only screen and (max-width: 768px) {
.gallery img {
    width: 38vw;
    height: auto;
    cursor: pointer;
}
.gallery-img {
    overflow: hidden;
    width: 38vw;
    height: 26vw;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 145px;
}
.webyy-container-color {
  background:#333;
  color:#fff;
  width:100%;
  margin:8% 0;
}
.webyy-column-out {
  width:100%;
  margin:0;
  display: flex;
  flex-direction: column;
}
.webyy-column-50-left {
  width:92%;
  margin:8% 4% 4% 4%;
}
.webyy-column-50-left-after {
  width:92%;
  margin:0% 4% 4% 4%;
}
.webyy-column-50-right-after {
  width:92%;
  margin:0% 4% 8% 4%;
}
.webyy-column-50-right {
  width:92%;
  margin:4%;
}
.webyy-info-column-50-left {
  width:92%;
  margin:4%;
  padding:8%;
}
.webyy-info-column-50-left-after {
  width:92%;
  margin:0% 4% 4% 4%;
}
.webyy-info-column-50-right-after {
  width:92%;
  margin:0% 4% 8% 4%;
}
.webyy-info-column-50-right {
  width:92%;
  margin:4%;
  padding:8%;
}

    .nav-links {
        position: fixed;
        top: 80px;
        right: 0;
        height: calc(100vh - 80px);
        background-color: #000;
        flex-direction: column;
        width: 100%;
        align-items: center;
        justify-content: start;
        display: none;
    }
    .nav-links.nav-active {
        display: flex;
    }
    .nav-links li {
        width: 100vw;
        text-align: center;
        border-bottom: 1px solid #555;
		padding: 4%;
		font-size: 1.7rem;
    }
.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1.7rem;
}
.nav-links a:hover {
    color: #fff;
	background:#649E23;
	text-decoration: none;
}
    .burger {
        display: flex;
    }
}
.webyy-column-gallery-after {
    padding: 4% 4% 8% 4%;
}

@media only screen and (max-width: 576px) {
.gallery img {
    width: 45vw;
    height: auto;
    cursor: pointer;
}
.gallery-img {
    overflow: hidden;
    width: 38vw;
    height: 28vw;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 115px;
}
}


@media only screen and (max-width: 480px) {
.gallery-img {
    overflow: hidden;
    width: 38vw;
    height: 28vw;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 115px;
}
}