@charset "UTF-8";


/* ----------------------------------------------------------------------------- *
 *          Basisschriftgröße auf 10px setzen --> 62,5% von 16px                 *
 *    erleichtert uns die Umrechnung der weiteren Schriftgrößen in rem / em      *
 *        Beispiel: 1.0rem entspricht 10px und 1.6rem entspricht 16px            *
 * ----------------------------------------------------------------------------- */

/*Bootstrap-Button mit folegende Programm erstellen: http://blog.koalite.com/bbg/   */

html {
   font-size: 105.0%;
}

/* Style the header */
header {
    background-color: cornflowerblue;
    padding: 10px;
    text-align: center;
    color: white;
    font-weight: bold;
}

/* hr Solid border und farbe */
hr.solid {
    border-top: 13px solid cornflowerblue;
}


div.first {
    background-color: teal;
    text-align: center;
    color: white;
    padding: 5px;
}


/* Diese Style muss erhalten bleiben, ergibt die Farbe von der Homemenu mit transparenz! Ansonste wir der HomeMenu in eine schwarze Feld ausgeführt!
           Bei der Version von Bootstap 3.0 war es möglich in der css-Datei die Farbe zu ändern.
        */

.navbar {
    margin-bottom: 0;
    background-color: gold; /*Farbe der Hauptmenu, war lightblue */
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
}

    .navbar li a, .navbar .navbar-brand {
        color: #000000 !important;
    }

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #f4511e !important;
    background-color: lightcyan !important; /*Farbe der Mouse Over */
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}


.card-body {
    background-color: beige;
}

.card-header {
    background-color: cornflowerblue;
    padding: 10px;
    text-align: center;
    color: white;
    font-weight: bold;
}

/*Farben der 3 div mit Bilder */
.impression-mitte {
    background-color: white;
}

.impression-aussen {
    background-color: white;
}

/* bestimmt die Farben der Überschtften auf der rechte Seite
        */

.aseiterecht-ueberschrit1 {
    text-align: center;
    background-color: gold; /* war lightblue */
    color: black;
    font-weight: lighter;
    border: 1px solid #ddd;
    margin: 15px 0;
    padding: 5px 20px 10px;
    font-size: 1.2rem;
}

.aseiterecht-ueberschrit2 {
    text-align: center;
    background-color: #95B9C7; /* war lightblue */
    color: white;
    font-weight: bold;
    border: 1px solid #ddd;
    margin: 15px 0;
    padding: 5px 20px 10px;
    font-size: 1.2rem;
}
.aseiterecht-ueberschrit3 {
    text-align: center;
    background-color: #95B9C7; /* war lightblue */
    color: white;
    font-weight: bold;
    border: 1px solid #ddd;
    margin: 15px 0;
    padding: 5px 20px 10px;
    font-size: 1.2rem;
}
.aseiterecht-ueberschrit4 {
    text-align: center;
    background-color: #95B9C7; /* war lightblue */
    color: white;
    font-weight: bold;
    border: 1px solid #ddd;
    margin: 15px 0;
    padding: 5px 20px 10px;
    font-size: 1.2rem;
}
.aseiterecht-ueberschrit5 {
    text-align: center;
    background-color: #95B9C7; /* war lightblue */
    color: white;
    font-weight: bold;
    border: 1px solid #ddd;
    margin: 15px 0;
    padding: 5px 20px 10px;
    font-size: 1.2rem;
}

/* Falls man die Farbe der Tabs nicht gefallen kann man hier ändern  */

.nav-tabs {
    background-color: beige;
}

.nav-tabs > li > a {
    border: medium none;
}

    .nav-tabs > li > a:hover {
        background-color: #303136 !important;
        border: medium none;
        border-radius: 0;
        color: #fff;
    }



video {
    width: 100%;
    max-width: 500px;
    height: auto;
}

/* 2 Column mit unterschiedlichen Breiten - Cards */
* {
    box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other, Wird gebraucht trennt die column mit Schlagwörter von den Hauptinhalt*/
.column {
    float: left;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

.left {
    width: 25%;
}

.right {
    width: 75%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* ENDE. 2 Column mit unterschiedlichen Breiten - Cards */

/* Start - marquee sorgt für laufende schrift auf der Homepage */

div.marquee {
    background-color: #1c87c9;
    color: #fff;
    margin-bottom: 1px;
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
}

p.marquee {
    -moz-animation: marquee 100s linear infinite;
    -webkit-animation: marquee 100s linear infinite;
    animation: marquee 100s linear infinite;
}

@-moz-keyframes marquee {
    0% {
        transform: translateX(50%);
    }

    50% {
        transform: translateX(-50%);
    }
}

@-webkit-keyframes marquee {
    0% {
        transform: translateX(50%);
    }

    50% {
        transform: translateX(-50%);
    }
}

@keyframes marquee {
    0% {
        -moz-transform: translateX(50%);
        -webkit-transform: translateX(50%);
        transform: translateX(50%)
    }

    50% {
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

/* Ende - marquee sorgt für laufende schrift auf der Homepage */



/* Der Bereich KeyWord wird bei kleineren Bildschirme ausgeblendet s. unten */

.KeyWordBereich {
    font-size: 0.8rem;
    background-color: ghostwhite;
    margin-top: 0.8rem;
}


/* Start - Ausbelnden bei Smartphone von .KeyWordBereich, marquee und id="Bildgallerie" */

@media screen and (max-width: 768px) {
    div .KeyWordBereich {
        display: none;
    }
    #Bildgallerie {
        display: none;
    }
    div.marquee {
        display: none;
    }
}

/* ENDE. Der Bereich KeyWord wird bei kleineren Bildschirme ausgeblendet */


/* START. 2 Column mit unterschiedlichen Breiten - Cards Die 1 Column wird nich nach Oben bzw. nach Unten verschoben, es bleiben immer zusammen auch bei kleinere Display */
.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}

/* ENDE. 2 Column mit unterschiedlichen Breiten - Cards Die 1 Column wird nich nach Oben bzw. nach Unten verschoben, es bleiben immer zusammen auch bei kleinere Display */



/* Modaldialog wird somit unten den Menuelemente gesetzt */ 
.modal-dialog {
    top: 10%;
}

.responsive {
    width: 100%;
    max-width: 400px;
    height: auto;
}



/* Powered by im logo von Eurogeopark.com im Fußzeile */
.euroGeoParklogo {
    position: relative;
}

.topright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 12px;
    color: teal;
    font-weight: bold;
}

/* ENDE. Powered by im logo von Eurogeopark.com im Fußzeile */