/* DATEI: css-archaja.css */



         body {
            font: normal 100.01% Helvetica, Arial, sans-serif;
            font-weight:bold;
            font-size:medium;
            background-image: url("picsaufbau/background.jpg");
            min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
            text-align: center;
            margin: 0;
            padding: 0;
            width:100%;
            height:100%;
         }



        /* i Anfang */

                  #center
                            {
                            width: 72%;
                            border: 1px solid white;
                            background-color:     grey;
                            margin: 0 auto;
                            font: normal 100.01% Helvetica, Arial, sans-serif;
                            font-weight: bold;
                            }



                  #center2
                            {
                            width: 72%;
                            border: 1px solid white;
                            background-color:     black;
                            margin: 0 auto;
                            font: normal 100.01% Helvetica, Arial, sans-serif;
                            font-weight: bold;
                            }

                  #cssmenu {
                           width: 100%;
                           margin: 0 auto;
                           z-index:2;
                  }

                  #cssmenu,
                  #cssmenu ul,
                  #cssmenu ul li,
                  #cssmenu ul li a {

                    margin: 0 auto;
                    padding: 0;
                    margin: 0;
                    line-height: 1;
                    font-weight:bold;
                    font-size: 18px;
                    color: #ffffff;
                    -webkit-transition: all ease .8s;
                    -o-transition: all ease .8s;
                    -moz-transition: all ease .8s;
                    -ms-transition: all ease .8s;
                    transition: all ease .8s;
                    z-index:1;
                  }

                  #cssmenu:before,
                  #cssmenu:after,
                  #cssmenu > ul:before,
                  #cssmenu > ul:after {
                    content: "";
                    display: table;
                    z-index:2;
                  }

                  #cssmenu:after,
                  #cssmenu > ul:after {
                    clear: both;
                    z-index:2;
                  }

                  #cssmenu a {
                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
                    z-index:2;
                  }

                  #cssmenu ul {

                    border-radius: 3px;
                    border: 1px solid #2b4479;
                    border: 1px solid #2d4373;
                    -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
                    -o-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
                    -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
                    -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
                    box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
                    z-index:2;
                  }
                  #cssmenu ul > li {
                    float: left;
                    list-style: none;
                  }
                  #cssmenu ul > li > a {
                    display: block;
                    text-decoration: none;
                    padding: 13px 11px;
                    position: relative;
                  }
                  #cssmenu ul > li > a:hover {

                    -webkit-box-shadow: inset 0 0 1px #1e2e4f;
                    -o-box-shadow: inset 0 0 1px #1e2e4f;
                    -moz-box-shadow: inset 0 0 1px #1e2e4f;
                    -ms-box-shadow: inset 0 0 1px #1e2e4f;
                    box-shadow: inset 0 0 1px #1e2e4f;
                    -webkit-transition: all ease .3s;
                    -o-transition: all ease .3s;
                    -moz-transition: all ease .3s;
                    -ms-transition: all ease .3s;
                    transition: all ease .3s;
                    z-index:2;
                  }
                  #cssmenu ul > li > a:hover:before {
                    content: "";
                    z-index: 2;
                    position: absolute;
                    border: 1px solid white;
                    border-top: 0;
                    border-bottom: 0;
                    border-right: 0;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: -1px;
                    opacity: .2;
                  }
                  #cssmenu ul > li > a:hover:after {

                    content: "";
                    z-index: 2;
                    position: absolute;
                    border: 1px solid white;
                    border-top: 0;
                    border-bottom: 0;
                    border-left: 0;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    right: -1px;
                    opacity: .2;
                    z-index:2;
                  }
                  #cssmenu > ul > li > ul {
                    opacity: 0;
                    visibility: hidden;
                    position: absolute;
                  }
                  #cssmenu > ul > li:hover > ul {

                    background-color: hsla(25, 89%, 55%, 0.6);
                    opacity: 1;
                    visibility: visible;
                    position: absolute;
                    border-radius: 0 0 3px 3px;
                    -webkit-box-shadow: none;
                    -o-box-shadow: none;
                    -moz-box-shadow: none;
                    -ms-box-shadow: none;
                    box-shadow: none;
                    z-index:2;
                  }
                  #cssmenu > ul > li > ul {

                    width: 15%;
                    position: absolute;
                    z-index:2;
                  }
                  #cssmenu > ul > li > ul > li {

                    float: none;
                    position: relative;
                    z-index:2;
                  }
                  #cssmenu > ul > li > ul > li > ul {
                    opacity: 0;
                    visibility: hidden;
                    position: absolute;
                    z-index:2;
                  }
                  #cssmenu > ul > li > ul > li:hover > ul {
                                  background: #F30B24;
                    opacity: 1;
                    visibility: visible;
                    position: absolute;
                    z-index:2;
                  }
                  #cssmenu > ul > li > ul > li > ul {
                                  background: #00FF00;

                    left: 200px;
                    top: 1px;
                    width: 200px;
                    z-index:2;
                  }
                  #cssmenu > ul > li > ul > li > ul > li {
                                   background: #F29B60;
                    float: none;
                    z-index:2;
                  }
           /* Navi Ende */



         /* Hauptinhalt */


        #mainbox {
                 margin: auto;
                 margin-top: 0px;
                 width: 70%;
                 background-color: hsla(360,0%,75%,0.8);
                 border: 1px silver solid;
                 padding: 10px;
                 overflow: auto;
                 z-index:1;
              }

          /* Hauptinhalt Ende*/


          /* zwei Spalten - geht nur als kindelement von obigen boxen*/

        #spaltelinks {
                margin-left: 1em;
                padding-right: 1em;
                width: 45%;
                border-right: 1px white solid;
                overflow: auto;
                float: left;
                }

         #spalterechts {
                margin-right: 1em;
                padding-left: 1em;
                width: 45%;
                border-left: 1px white solid;
                margin-left: auto;
                overflow: auto;
                }


         /* zwei Spalten Ende*/

          /* für allgemeine Links */


         a:link {
          color:#FFFFFF;
          text-decoration:none;
         }

        a:visited {
         color:#FFFFFF;
         text-decoration:none;
         }

        a:hover {
         text-decoration:none;
         color:black;
         background-color: #FF2D2D;
         }

        a:active {
         color:#FF2D2D;
         text-decoration:none;
         background-color: black;
         }

         /* Bildergalerie */

         div.galerie{
            margin: auto;
            width: 400px; /* Breite der Galerie */
            height: 440px; /* Hoehe der Galerie */
            overflow: hidden; /* kein Überschneiden von Bildern */
            background:#ddd;
            -moz-box-shadow:4px 4px 8px #444;
            box-shadow:4px 4px 8px #444;
        }




           /* Wir teilen die Breite des <div> galerie durch die Anzahl der Galeriebilder - 2xBildabstand: (Galeriebreite (px) / Anzahl der Bilder ) - 2x Bildabstand */

        div.galerie div.bild{
            width: 80px; /* Breite des Vorschaubildes */
            height: 80px; /* Hoehe des Vorschaubildes */
            padding: 10px; /* Abstand zw. Galerierand und Vorschaubild */
            float: left; /* Vorschaubilder nebeneinander platzieren */
            clear: right; /* " */
        }

        div.galerie img.vorschau{
            width: 80px; /* gleich wie div.bild->width */
        }

        div.galerie img.ansicht{
            display: none; /* Ansichtsbilder verdecken */
            position: absolute; /* absolute Positionierung */
            z-index: 100; /* in den Vordergrund setzen */
            width: 380px; /* Breite des Ansichtsbild */
        }

        div.galerie div.bild:hover img.ansicht{
            display: block;
        }

        /* einzelne Bilder positionieren: */
        #gall1{
            margin-top: 15px; /* Abstand von Ansichtsbild nach oben */
        }
        #gall2{
            margin-left: -100px; /* Abstand von Ansichtsbild nach links */
            margin-top: 45px; /* Abstand von Ansichtsbild nach oben */
        }
        #gall3{
            margin-left: -200px; /* Abstand von Ansichtsbild nach links */
            margin-top: 40px; /* Abstand von Ansichtsbild nach oben */
        }
        #gall4{
            margin-left: -300px; /* Abstand von Ansichtsbild nach links */
            margin-top: 30px; /* Abstand von Ansichtsbild nach oben */
        }
        /* Ende Bildergallerie */

 /* Photogallerie II */

 /* meine Bildergalerie hauptseite */

.bilder_links {
         margin-left:100px;
         float: left ;
         }

.bilder_rechts {
         margin-right:100px;
         float: right ;
         }


.text p:target { background: red; }


.button {
  display: inline-block;
  text-decoration: none;
  color: white;
  background: limegreen;
  padding: .5em 1.25em;
}


.portfolio {
  display: grid;
  grid: auto / repeat(auto-fit, minmax(15em, 1fr));
  grid-gap: 1em;
  padding: 7em 4em;
}






}

.portfolio__item {
  position: relative;
  flex-basis: 10%;
  margin: 0;
  padding: 0;
  background: white;
}

.portfolio__desc {
  padding: 1.5em;
}

.portfolio__title {
  font-family: 'Roboto Condensed', sans-srif;
  font-size: 1.5em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0;
}

.portfolio__image,
.portfolio-lightbox__image{
  width: 100%;
  display: block;
}

.portfolio-lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0,1);
  transition: transform 150ms ease-in-out;

  padding: 2em;
  position: fixed;
  top: 0;
  left: 0;
  color: white;
  background: rgba(0, 0, 0, .8);
  // box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .50);
  width: 100vw;
  height: 100vh;
  z-index: 10;
}

.portfolio-lightbox:target {
  transform: scale(1,1);


}

.portfolio-lightbox__content {
  width: 50%;
  padding: 1em;
  background: white;
  position: relative;
}

.portfolio__lightbox__image { margin-bottom: 1em; }

.close {
  position: absolute;
  right: -1em;
  top: -1em;
  border: white 2px solid;
  display: flex;
  width: 2em;
  height: 2em;
  background: red;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.close::after {
  content: 'x';
  color: white;
}

   /* Ende Photogallerie II */



        /* Tabellenzentrierung */

        div.aussentable
            { width:100%; height:100%; margin:0; padding:0; display:table; }
        div.aussentd
            { width:100%; height:100%; margin:0; padding:0;
            display:table-cell; vertical-align:middle; }
        div.innen
            { width:30em; margin-left:auto; margin-right:auto; text-align:left; }

        /* sonstiges */

        .textframe {
            border-style: solid;
            border-width: thin;
            border-color: silver;
            display:inline-block; padding:5px 10px; }

        #ul{
            list-style-type: none;
            margin: 0 auto;
        }


        .textbunt{
            color: #FFFF7F;
            font-weight: bold;
        }

        fieldset {
            border: 2px solid;
            border-color: silver;
        }

        legend {
            color: #FFFF7F;
        }

        .schatten {

            -webkit-box-shadow: 5px 5px 8px rgba(2, 2, 2, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
            -o-box-shadow: 5px 5px 8px rgba(2, 2, 2, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
            -moz-box-shadow: 5px 5px 8px rgba(2, 2, 2, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
            -ms-box-shadow: 5px 5px 8px rgba(2, 2, 2, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
            box-shadow: 5px 5px 8px rgba(2, 2, 2, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
        }

        /* für Bilder, die immer passend sein sollen je nach Betrachtungsbildschirm */

        .bild {
                  max-width: 100%;
                  height: auto;
         }

        /* für Bilder, die immer zentriert sein sollen von allen Seiten */

         .flex {
                             display: flex;
                             justify-content: center;
                             align-items: center;
         }
        /* Kleinzeug */

        .farbelaufband {
            color: #00DB00;
            font-weight: bold;
            font-size: large;
        }

        .center {
            text-align: left;
            margin: 0 auto;
            min-width: 20em;
            }