body {
    font-family: Arial, sans-serif;
    font-size: 18px; /* Beispiel: Setze die Schriftgröße auf 18px */
    margin: 0;
    padding: 0;
    display: flex;
    color: #2e3d30;
}



.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('Bilder/wald_00.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
    opacity: 1.0;
}

nav {
    background-color: #2e3d30;
    color: #fff;
    width: 200px;
    height: calc(100vh - 40px);
    padding-top: 20px;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    overflow-y: scroll; /* Scrollen ermöglichen */
    scrollbar-width: none; /* Firefox: Scroll-Leiste ausblenden */
    -ms-overflow-style: none; /* Internet Explorer und Edge: Scroll-Leiste ausblenden */
}

/* Für Webkit-basierte Browser (Chrome, Safari, Edge) */
nav::-webkit-scrollbar {
    display: none; /* Scroll-Leiste ausblenden */
}

#nav {
    width: 190px; /* Konsistente Breite */
}

html {
    overflow-y: scroll; /* Scrollbalken immer anzeigen */
}

.logo-container {
    text-align: center;
    padding: 10px 0;
    display: block; /* Standardmäßig anzeigen */
}

.logo-container img {
    max-width: 80%;
    height: auto;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    margin: 20px 0;
    position: relative;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 10px;
}

nav ul li a:hover {
    background-color: #435a50;
}

nav ul li .submenu {
    display: none;
    padding-left: 10px;
    background-color: #435a50;
}

nav ul li .submenu.open {
    display: block;
}

nav ul li .submenu li {
    margin: 0;
}

nav ul li .submenu li a {
    padding: 10px;
    font-size: 0.9em;
}


/* Top-Bar für kleine Bildschirme (Hamburger-Menü) */
header .top-bar {
    display: none; /* Standardmäßig ausblenden */
    justify-content: space-between;
    align-items: center;
    background-color: #2e3d30;
    color: #fff;
    padding: 10px 20px;
    font-size: 1.2em;
    position: fixed;
    width: 95%;
    top: 0;
    left: 0;
    z-index: 1001;
}




.hamburger-menu {
    cursor: pointer;
    font-size: 1.8em;
    width: 60px; /* Erhöht für bessere Sichtbarkeit */
    height: 35px; /* Erhöht für bessere Sichtbarkeit */
    display: auto;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1002; /* Über der Navigation */
    position: relative;
}

main {
    margin-left: 230px;
    padding: 20px;
    width: calc(100% - 240px);
    z-index: 1;
    background-color: rgba(232, 237, 234, 0.9); /* leicht transparenter Hintergrund */
}



/*------------------------------------------------------------------------------*/
/*Für Bilder auf Startseite*/
.image-container {
    display: grid; /* Verwende ein Grid für gleichmäßige Darstellung */
    grid-template-columns: repeat(3, 1fr); /* Drei gleich große Spalten */
    gap: 20px; /* Abstand zwischen den Boxen */
    padding: 20px;
    width: 100%;
    box-sizing: border-box; /* Bezieht Innenabstand in die Breite ein */
}

.image-container .box {
    display: flex;
    flex-direction: column; /* Bild und Text untereinander */
    align-items: center; /* Zentriere den Inhalt horizontal */
    justify-content: center; /* Zentriere den Inhalt vertikal */
    background-color: #fff;
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
    overflow: hidden; /* Schneidet überstehende Inhalte ab */
    height: auto; /* Automatische Höhe für die Box */
    padding: 10px;
    box-sizing: border-box;
}

.image-container .box img {
    width: auto; /* Breite wird automatisch basierend auf der Höhe angepasst */
    height: 400px; /* Einheitliche Höhe für alle Bilder */
    object-fit: cover; /* Bild wird proportional skaliert und füllt die Höhe */
    border-radius: 10px; /* Optional: Abgerundete Ecken */
    display: block; /* Verhindert zusätzliche Abstände durch Inline-Darstellung */
    margin: 0 auto; /* Zentriert das Bild horizontal */
}


.image-container .box p {
    margin-top: 10px; /* Abstand zwischen Bild und Text */
    font-size: 1.5em; /* Größere Schriftgröße */
    font-weight: bold; /* Fettschrift */
    text-align: center; /* Text zentrieren */
}

/*------------------------------------------------------------------------------*/
/* Container für die Elterntiere */
.parent-info-container {
    display: grid; /* Wechselt zu Grid-Layout */
    grid-template-columns: repeat(3, 1fr); /* Drei gleich große Spalten */
    gap: 30px; /* Abstand zwischen den Boxen */
    margin: 20px;
    justify-items: center; /* Zentriert die Boxen horizontal */
    align-items: center; /* Zentriert die Boxen vertikal */
}

/* Boxen für die Elterntiere */
.parent-info, .parent-image {
    width: 100%; /* Boxen füllen die Spalten aus */
    aspect-ratio: 3 / 4; /* Verhältnis von Breite zu Höhe */
    text-align: center;
    border: 2px solid black; /* Rahmen um die Boxen */
    padding: 10px;
    border-radius: 8px; /* Abgerundete Ecken */
    background-color: #f9f9f9; /* Hintergrundfarbe */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
    display: flex;
    flex-direction: column; /* Bild, Überschrift und Text untereinander */
    justify-content: center; /* Zentriert den Inhalt vertikal */
    align-items: center; /* Zentriert den Inhalt horizontal */
}

/* Bilder in den Boxen */
.parent-info img, .parent-image img {
    width: 100%; /* Bild passt sich der Box an */
    height: auto; /* Proportionen bleiben erhalten */
    object-fit: contain; /* Bild vollständig anzeigen ohne Zuschneiden */
    border-radius: 8px; /* Optional: Abgerundete Ecken */
    margin-bottom: 10px;
}



/*------------------------------------------------------------------------------*/
/* Regeln für Tablets und Handys */
@media screen and (max-width: 768px) {
    body {
        font-size: 16px; /* Kleinere Schriftgröße für mobile Geräte */
    }

    main {
        margin: 0; /* Keine seitlichen Abstände */
        margin-top: 60px; /* Platz für Top-Bar */
        padding: 10px;
        width: 100%; /* Volle Breite */
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
    }

    .logo-container {
        display: none; /* In der mobilen Ansicht ausblenden */
    }
    
    /* PC-Navigation ausblenden */
    nav {
        display: none;
    }

    /* Header (Top-Bar) anzeigen */
    header .top-bar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 30px; /* Höhe der Top-Bar */
        z-index: 1001;
    }

    /* Mobile Navigation */
    nav.show {
        display: block;
        position: fixed; /* Fixiert, damit sie korrekt dargestellt wird */
        top: 45px; /* Platz unterhalb der Top-Bar */
        left: 0;
        width: 100%; /* Volle Breite */
        height: calc(100vh - 60px); /* Begrenzung auf die Höhe des Viewports */
        background-color: #2e3d30;
        z-index: 1000;
        overflow-y: auto; /* Aktiviert das vertikale Scrollen */
    }

    nav ul {
        display: flex;
        flex-direction: column;
    }

    nav ul li a {
        text-align: center;
        border-bottom: 1px solid #444;
    }

    .hamburger-menu {
        z-index: 1002;
        position: relative;
    }

    nav.show + .hamburger-menu {
        display: none; /* Blendet das Symbol aus */
    }

    .image-container {
        display: flex; /* Flexbox für Layout */
        flex-direction: row; /* Bilder nebeneinander anordnen */
        justify-content: space-between; /* Platz zwischen den Bildern */
        gap: 10px; /* Abstand zwischen den Bildern */
        padding: 10px; /* Innenabstand für den Container */
        flex-wrap: wrap; /* Umbrüche bei zu wenig Platz */
    }

    .image-container .box {
        width: 30%; /* Jedes Bild nimmt ca. ein Drittel der Breite ein */
        box-sizing: border-box; /* Padding und Border werden berücksichtigt */
    }

    .image-container .box img {
        width: 100%; /* Bild füllt die Breite der Box */
        height: auto; /* Höhe bleibt proportional */
        object-fit: cover; /* Bild passt sich an, ohne verzerrt zu werden */
    }

    .image-container .box p {
        font-size: 1em; /* Textgröße leicht anpassen */
        text-align: center; /* Text zentrieren */
    }

    /* Entferne das mittlere Bild */
    .parent-image {
        display: none;
    }

    /* Passe die Breite der Boxen an */
    .parent-info img {
        width: 100%; /* Bilder füllen die Box */
        height: auto; /* Proportionen bleiben erhalten */
    }
    
    /* Elterntiere nebeneinander */
    .parent-info-container {
        flex-direction: row; /* Nebeneinander darstellen */
        justify-content: space-around; /* Platz zwischen den Boxen */
        align-items: flex-start; /* Oben ausrichten */
    }

    .parent-info {
        width: 90%; /* Boxen nehmen jeweils 45% der Breite ein */
        padding: 10px; /* Etwas Innenabstand für den Inhalt */
        height: auto; /* Rahmen passt sich der Höhe des Inhalts an */
    }

    .parent-info img {
        width: 100%; /* Bild passt sich an die Box an */
        height: auto; /* Proportionen bleiben erhalten */
        object-fit: contain; /* Verhindert Zuschneiden */
    }

    .parent-info-container {
        flex-direction: row; /* Nebeneinander */
        justify-content: space-around; /* Platz zwischen den Boxen */
        align-items: flex-start; /* Elemente oben ausrichten */
        gap: 5px; /* Abstand zwischen den Boxen */
    }

    .parent-info {
        display: flex;
        flex-direction: column; /* Stapelt Überschrift, Bild und Infos */
        justify-content: flex-start; /* Elemente oben ausrichten */
        align-items: center; /* Zentriere Inhalte horizontal */
        width: 90%; /* Gleiche Breite für beide Boxen */
        padding: 10px; /* Innenabstand */
        border: 2px solid black; /* Rahmen */
        border-radius: 8px; /* Abgerundete Ecken */
        background-color: #f9f9f9; /* Hintergrundfarbe */
        height: auto; /* Rahmen passt sich an Inhalt an */
        box-sizing: border-box; /* Padding berücksichtigen */
    }

    .parent-info h2 {
        margin-bottom: 10px; /* Abstand zwischen Überschrift und Bild */
    }

    .parent-info img {
        width: 100%; /* Bild füllt die Breite */
        height: auto; /* Proportionen bleiben erhalten */
        object-fit: contain; /* Verhindert Zuschneiden */
        margin-bottom: 10px; /* Abstand zwischen Bild und Text */
    }

    .parent-info p {
        margin: 5px 0; /* Abstände zwischen den Textzeilen */
        text-align: left; /* Zentrierter Text */
    }

    #welpen-tabelle {
        display: block;
        width: 100%; /* Erzwingt die volle Breite */
        overflow-x: auto; /* Ermöglicht horizontales Scrollen, falls nötig */
        border-collapse: collapse; /* Reduziert Platzbedarf */
    }

    #welpen-tabelle th,
    #welpen-tabelle td {
        padding: 8px; /* Reduziert Innenabstände */
        text-align: left; /* Links ausgerichtet für bessere Lesbarkeit */
        font-size: 14px; /* Kleinere Schriftgröße */
    }

    #welpen-tabelle thead {
        background-color: #2e3d30; /* Dunkle Kopfzeile */
        color: #fff;
    }

    #welpen-tabelle tbody tr:nth-child(even) {
        background-color: #f2f2f2; /* Abwechselnde Zeilenfarbe */
    }

}
/*------------------------------------------------------------------------------*/
/* Zusätzliche Regeln für sehr kleine Bildschirme */
@media screen and (max-width: 480px) {
    .homepage-gallery .gallery-item img {
        max-width: 100px; /* Kleinere Bilder für schmalere Geräte */
    }

    main {
        font-size: 14px; /* Textgröße anpassen */
        line-height: 1.4;
    }
    
    .logo-container {
        display: none; /* In der mobilen Ansicht ausblenden */
    }
    
   .image-container {
        grid-template-columns: 1fr; /* Eine Spalte */
    }
 
    #dackel-bild img {
        width: 100%; /* Maximale Breite des Bildschirms */
        height: auto; /* Proportionen beibehalten */
    }

    main {
        padding: 10px; /* Weniger Innenabstand für mobile Geräte */
    }
 
    .dog-intro {
        display: flex;
        flex-direction: column; /* Stellt Bild und Text untereinander */
        align-items: center; /* Zentriert beide Elemente */
        gap: 20px; /* Abstand zwischen Bild und Text */
    }

    .dog-photo img {
        width: 100%; /* Bild füllt die Breite */
        height: auto; /* Proportionen beibehalten */
        border-radius: 10px; /* Optional: Abgerundete Ecken */
    }

    .dog-details {
        text-align: left; /* Zentriere den Text */
        width: 100%; /* Textblock passt sich der Breite an */
    }

    table {
        width: 100%; /* Tabelle nimmt die gesamte Breite ein */
        margin-top: 20px; /* Abstand über der Tabelle */
    }

    th, td {
        text-align: center; /* Zentriere Text in Zellen */
        padding: 10px; /* Abstand innerhalb der Zellen */
    } 

    .about-intro {
        display: flex;
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: center; /* Elemente horizontal zentrieren */
        gap: 20px; /* Abstand zwischen Bild und Text */
    }

    .about-photo img {
        width: 100%; /* Bild passt sich der Breite des Displays an */
        height: auto; /* Proportionen des Bildes beibehalten */
        border-radius: 10px; /* Optional: Abgerundete Ecken */
    }

    .about-text {
        text-align: left; /* Text zentriert ausrichten */
        width: 100%; /* Textblock nimmt gesamte Breite ein */
    }
 
    .image-container {
        grid-template-columns: repeat(1, 1fr); /* Eine Spalte pro Bild */
    }

    .image-container .box {
        height: 200px; /* Reduziere die Höhe für kleinere Bildschirme */
    }

    .image-container .box img {
        height: 100%; /* Passt das Bild an die Box-Höhe an */
        object-fit: cover; /* Bild skaliert proportional und füllt die Box */
    } 
  
    
    /* Entferne das mittlere Bild */
    .parent-image {
        display: none;
    }

    .parent-info-container {
        display: flex;
        flex-direction: row; /* Elemente nebeneinander */
        justify-content: space-between; /* Platz zwischen den Boxen */
        align-items: stretch; /* Boxen gleich hoch ausrichten */
        gap: 10px; /* Abstand zwischen den Boxen */
    }

    .parent-info {
        display: flex;
        flex-direction: column; /* Inhalt in Spalten anordnen */
        justify-content: space-between; /* Überschrift, Bild und Text gleichmäßig verteilen */
        align-items: center; /* Inhalt horizontal zentrieren */
        width: 48%; /* Beide Boxen teilen sich die Breite */
        padding: 10px; /* Abstand zum Rahmen */
        border: 2px solid black; /* Rahmen um die Box */
        border-radius: 8px; /* Runde Ecken */
        background-color: #f9f9f9; /* Hintergrundfarbe */
        height: auto; /* Höhe automatisch anpassen */
        box-sizing: border-box; /* Padding einbeziehen */
    }

    .parent-info h2 {
        margin: 10px 0; /* Abstand oben und unten */
        text-align: center; /* Zentrierte Überschrift */
    }

    .parent-info img {
        width: 100%; /* Bild füllt die Box */
        height: auto; /* Proportionen bleiben erhalten */
        object-fit: contain; /* Bild wird vollständig angezeigt */
        margin-bottom: 10px; /* Abstand zum Text */
    }

    .parent-info p {
        margin: 5px 0; /* Abstände zwischen den Textzeilen */
        text-align: center; /* Zentrierter Text */
    }
  
    
}
/*------------------------------------------------------------------------------*/

main h2 {
    color: #2e3d30;
}

#about img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
}

.scroll-table {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background-color: #2e3d30;
    color: #fff;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Kontaktformular */
#contact-form {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

#contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    resize: none; /* Verhindert Größenänderung */
}

#contact-form textarea {
    height: 200px; /* Genug Platz für die Nachricht */
}

#contact-form button[type="submit"] {
    padding: 10px 20px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

#contact-form button[type="submit"]:hover {
    background-color: #4cae4c;
}


/* Bereich für andere Medien */
#social-media {
    margin: 20px 0;
}

#social-media h3 {
    margin-bottom: 10px;
    font-size: 1.5em;
}

#social-media ul {
    list-style-type: none; /* Entfernt die Aufzählungszeichen */
    padding: 0; /* Entfernt den Standard-Einzug */
    margin: 0;
}

#social-media li {
    margin-bottom: 5px; /* Abstand zwischen den Einträgen */
}

#social-media a {
    color: #0073b1; /* LinkedIn Blau als Standardfarbe */
    text-decoration: none;
    font-size: 1.2em;
}

#social-media a:hover {
    text-decoration: underline;
}

.faq h3 {
    color: #2e3d30;
    margin-top: 20px;
    font-size: 1.2em;
}

.faq p {
    margin-bottom: 20px;
    line-height: 1.6;
}


/* Styling für die Galerie */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Passt die Anzahl der Spalten an die Bildschirmgröße an */
    gap: 20px; /* Abstand zwischen den Bildern */
    padding: 20px;
}



.gallery-item {
    width: 100%;
    aspect-ratio: 1; /* Quadratischer Rahmen */
    background-color: #f0f0f0; /* Hintergrundfarbe für den Rahmen */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatten für den Rahmen */
    overflow: hidden;
}

.gallery-item img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 10px;
}

.gallery-item img:hover {
    transform: scale(1.05); /* Vergrößert das Bild leicht bei Hover */
}

.homepage-gallery .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Dynamische Spaltenbreite */
    gap: 10px; /* Reduzierter Abstand zwischen den Elementen */
    padding: 10px; /* Weniger Rand für kleinere Geräte */
}

.homepage-gallery .gallery-item {
    display: flex;
    flex-direction: column; /* Bild und Name untereinander */
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;           /* Containerbreite füllen */
    height: 100%;          /* Containerhöhe füllen */
    padding: 20px;         /* Abstand vom Rand */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.homepage-gallery .gallery-item img {
    width: 90%;            /* Bildbreite füllen, mit etwas Abstand */
    height: auto;          /* Höhe automatisch anpassen */
    max-height: 400px;     /* Maximale Höhe definieren */
    object-fit: contain;   /* Bilder skalieren ohne Beschneiden */
    border-radius: 10px;
    
}

.homepage-gallery .gallery-item img:hover {
    transform: none; /* Entfernt die Vergrößerung */
    box-shadow: none; /* Entfernt den Schatteneffekt */
}


.homepage-gallery .gallery-item p {
    margin-top: 10px;      /* Abstand zwischen Bild und Text */
    font-size: 1.2em;
    font-weight: bold;
}




/* Layout für Bild und Text nebeneinander */
.dog-intro {
    display: flex;
    align-items: flex-start; /* Bild und Text oben ausrichten */
    gap: 20px; /* Abstand zwischen Bild und Text */
    margin: 20px 0;
}

.dog-photo img {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionaler Schatten für das Bild */
}

.dog-details {
    flex: 1; /* Text nimmt den restlichen verfügbaren Platz ein */
}

/* Fließtext im Blocksatz */
.dog-info p {
    text-align: justify;
    margin-bottom: 20px;
    line-height: 1.6;
}


/* Layout für das Foto und den Text nebeneinander */
.about-intro {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Abstand zwischen Bild und Text */
    margin: 20px 0;
}

.about-photo img {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionaler Schatten für das Bild */
}

.about-text {
    flex: 1;
}

/* Fließtext */
.about-body p {
    text-align: justify;
    margin: 20px 0;
    line-height: 1.6;
}

/* Bild des Grundstücks */
.about-property img {
    margin-top: 40px;
    border-radius: 10px;
    
    /* Galerie-Vorschau */
.gallery-preview {
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.gallery-item img {
    width: 200px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Begrüßungsüberschrift */
header h1 {
    text-align: center;
    font-size: 2.5em;
    color: #2e3d30;
    margin: 20px 0;
}

/* Begrüßungstext */
.intro {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 30px;
    font-size: 1.2em;
}

/* Wurfankündigung */
.puppy-announcement {
    padding: 20px;
    background-color: #f9f9f9;
    text-align: center;
    margin-top: 20px;
}

.announcement-box {
    background-color: #ffffff; /* Weiße Hintergrundfarbe */
    padding: 20px;
    border-radius: 8px;
    display: inline-block;
    margin: 0 auto;
    text-align: left;
    font-size: 1.2em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten für einen 3D-Effekt */
}



box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionaler Schatten */
}

.center-text {
            text-align: center; /* Zentriert den Text horizontal */
            margin: 0; /* Entfernt den Standardaußenabstand */
        }

/* Stil für Besucherzähler in der Navigationsleiste */
.visitor-counter {
    display: flex;           /* Setzt Besucherzahl und Zähler in eine Zeile */
    justify-content: space-between; /* Teilt Platz gleichmäßig */
    align-items: center;     /* Zentriert vertikal */
    color: #fff;             /* Schriftfarbe wie bei den Links */
    padding: 10px;           /* Gleiche Polsterung wie die Links */
}

.visitor-counter span {
    display: inline-block;   /* Elemente nebeneinander */
    margin: 0;               /* Verhindert unnötige Abstände */
}
/*------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------*/