/* dies ist eine kommentarzeile */
/* Angabe von Fontsize in ABSOLUTwerten (pt) und Angabe der Navbar Dimensionen in RELATIVwerten (em, px)geht schief! */
/*                                                                                                                   */
/* Ahh, 08/2017 - endlich eine Løsung gefunden, dass die Bilder skaliert werden und Bilder und Text             */
/*      eben nicht von rechts ins FixedMenue reingeschoben werden!! Das war bei bei kleinen Bildschirmen        */
/*      ein Problem, nicht auf Computern. "div.USOrightPic" funktioniert nu wie beschrieben.                    */
/*                                                                                                              */
/*  Achtung: von innen nach aussen:                                                                             */
/*    ---> Innen ist der "Contents", der Inhalt                                                                 */
/*    ---> Drumherum ist "Padding"                                                                              */
/*    ---> Darum herum ist "Border"                                                                             */
/*    ---> Und ausserhalb der Border ist "Margin"                                                               */
/*                                                                                                              */
/* Einigen Kleinkram 08/17 so angepasst, wie ich es bei Marcello gemacht hab  (und inzwischen lieber so mag)    */
/* Neu 08/17: Endlich skalieren die Bilder richtig (bei kleinem Bildschirm) und laufen nicht mehr ins Menü rein */

/* Update 07/18, major
/* - Habe erwogen das alles mit CSS Grid zu machen, es aber nach ersten Versuchen gelassen,                      */
/*   im wesentlichen weil man das linke "fixe" Menu nicht in einem eigenen Panel                                 */
/*   haben kann wo es dann ebenfalls fest ist (unter CSS Grid)                                                   */
/* - Neuafbau der Seite u.a. Positionierung von Menu und Haupttext, besonderes Augenmerk auf nicht               */
/*   den Text überlappendes Menu beim Skalieren. Jetzt mit left Margin des Haupttextes, der der Breite           */
/*   des linken Menues entspricht.                                                                               */
/* - Der (aktualisierte) CSS File beinhaltet auch den "Hoverbox" Code!                                           */
/* - Alles auch unter "Printerfriendly" getestet - auch gibt es nun einen neuen                                  */
/*   "printerfriendly" CSS File.                                                                                 */

/*   @Media Query for responsiveness (neu 07/2018)                                                               */
/*   Bei "kleinem" Bildschirm werden die Ränder angepasst, über den @media Befehl                                */
/*   In erser Linie soll das hier auf einem PC und einem iPad gut aussehen, die Auflösungsgrenze wird also       */
/*   hier bei 1024 gesetzt, den das originale iPad und unseres älteres iPad2 haben diese Auflösung               */
/*                                                                                                               */
/*     1024 x 768 Resolution                                                                                     */
/*     The original iPad                                                                                         */
/*     The iPad 2                                                                                                */
/*   (ist dasselbe für das 2018 iPad)                                                                            */

/*   man setzt es etwas grosszügig auf 1200px, da es mit exakt 1025 nicht funktionierte mit dem iPad             */

/*   Bild Vergrössern beim Draufklicken (Main Page) via Modal Image (neu 07/2018)                                */

/* #282828 entspricht RGB(40, 40, 40)                                                                            */
/* #323232 entspricht RGB(50, 50, 50)                                                                            */
/* #3C3C3C entspricht RGB(60, 60, 60)                                                                            */


/* Update 07/20, major                                                                                           */
/*                                                                                                               */
/* - Collapsable Sidepanel                                                                                       */
/* - eigener js-File für die Skripte                                                                             */
/* - Neues "fixed" Picture                                                                                       */
/* - ..diverses                                                                                                  */


/* ........................................................ body Settings <start> .............................  */
/* ATTENTION: background-position x-value must be equal to the margin-left of the "fixed_menu"! */

  body {
    height:100%; /*needed for fixed menu: set the page body to use the full height of the window (only needed for IE)*/

    /* update 07/2018: necessary left margin (for fixed menu bar) is no accounted for in the
       "pageCon" object, no ,longer in the "body". Therefore the following two lines are commented out  */
    /* padding-left: 20em; */
    /* margin: 0; */ /*needed for fixed menu: set the page body margins to zero (only needed for IE)*/

    padding-right: 15em; /* new */
    padding-top: 2em;
    font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
    font-size: 12px;
    color: #F5F5F5; /* almost white */
    background-color: #282828; /* dark grey, almost black */

    /* fixed background picture, this feature does not work on iOS */
    /* new fixed background picture, was before: url(usopix/usoLogoFix.gif) */
    /* A picture in the *.svg may be used here but must already be scaled to the right size already, cannot be scaled here! */
    background-image: url(usopix/usoIndexGray2020.svg);
    background-attachment: fixed;
   /*  07/20: backgound position values adjusted for SVG pic, y position no longer in % but absolute in "em" */
    background-position: 16em 8em; /* x value (5 em) the same as margin left for the fixed menu */
    background-repeat: no-repeat;

    text-align: justify;  /* Blocksatz, nicht Flatter; new 09/2016! */
/*   ... Achtung! Absolutangaben (früher war hier: "width: 70%" müssen RAUS, sonst klappt das scaling der Bilder nicht! */
/*                Für +/- denselben Effekt wurde oben padding-right auf 5em erhöht (von 1em)                           */
       }


/* On screens that are 1025px wide or less, other margins are used */
/* Update 1200px wide or less...                                   */
/* ATTENTION: background-position x-value must be equal to the margin-left of the "fixed_menu"! */

@media screen and (max-width: 1200px) {
  body {
    height:100%; /*needed for fixed menu: set the page body to use the full height of the window (only needed for IE)*/
    padding-right: 1em; /* new 08/2017!, small screen*/
    padding-top: 2em;
    font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
    font-size: 12px;
    color: #F5F5F5; /* almost white */
    background-color: #282828; /* dark grey, almost black */
    background-image: url(usopix/usoIndexGray2020.svg);
    background-attachment: fixed;
    background-position: 2.7em 8em; /* small screen, adjusted for svg Pic */
    background-repeat: no-repeat;
    text-align: justify;  /* Blocksatz, nicht Flatter; new 09/2016! */
  }
}
/* ........................................................ body Settings <end> ...............................  */


/* Comment, 04/06:                                                            */
/* The code to generate a printer-friendly page, which was here in an         */
/* earlier version has been deleted since it (unintentionally) used code      */
/* ("@media..."), which gave a garbled page under mozilla and opera.          */
/* a "printer-friendly" functionality will be generated through a             */
/* separate style-sheet                                                       */


/* ........................................................ pageContents Settings <start> .....................  */
/* Page contents */

  .pageCon {
    margin-top: 1em;
    /* Add a left margin (31em) to avoid overlay with
       left side fixed menu (which is 15em wide + 5em left margin) */
      margin-left: 31em;
      margin-right: 5em;
  }

/* On screens that are 1025px or less, set the right margin to 1em    */
/* Update 1200px wide or less...                                   */
/*                                    ... and adjust the left margin  */
@media screen and (max-width: 1200px) {
  .pageCon {
    margin-top: 1em;
    /* Add a left margin (16em) to avoid overlay with  left side fixed menu
       (which is 15em wide + 1em left margin).
        In the cas of the collapsable sidepanel 13em is enough - in that case
        the menu folds over the text. */
      margin-left: 13em;
      margin-right: 1em;
  }
}

/* ........................................................ pageContents Settings <end> .......................  */


/* ........................................................ sidePanel Settings <start> ........................  */
/* .... new 07/2020 - Collapsable Sidepanel                                                                      */
/* .......... colours and fonts as in the (old) the fixed menu solution                                          */

.sidepanel  {
  width: 0;
  position: fixed;
  z-index: 1;
  height: 500px;  /* adjust according to numbers of entries in menu. Important: Check on Windows and iOS! */
  top: 0;
  left: 0;
  background-color: #323232;  /* a tad lighter than the other backgound, to emphasize the collapsable menu */
  overflow-x: hidden;
  overflow-y: hidden; /* Added, it is necessary!  Hide vertical scrollbar */
  transition: 0.5s;


/* .... copied (and improved) from "fixed menu" */

    text-align:left;
   /* font-family: Verdana, Helvetica, Geneva, Arial, sans-serif; */
   /* Font family should hav the same height in WIN and iOS or you risk that not the entire */
   /* menue fits in the sidepanel-height! So, let's keep that simple: */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px; /* new 08/2017!, was 12px */
    color: #FFFFFF;
    padding-top: 4px;
    margin-left: 15em; /* new 07/2018! */
    border-right: 0px; /* set to 1px (or whatever) if you want a border */
    border-left: 0px;
    border-top: 2px;
    border-bottom: 2px;
    border-style: solid;
    border-color: grey;
    list-style-type: none;
    top: 2em;
    left: 2em;
}

/* On screens that are 1025px or less, set the left margin to 1em */
/* Update 1200px wide or less...                                   */
@media screen and (max-width: 1200px) {
  .sidepanel  {
    width: 0;
    position: fixed;
    z-index: 1;
    height: 500px;  /* adjust according to numbers of entries in menu */
    top: 0;
    left: 0;
    background-color: #323232;  /* a tad lighter than the other backgound, to emphasize the collapsable menu */
    overflow-x: hidden;
    overflow-y: hidden; /* Added, it is necessary!  Hide vertical scrollbar */
    transition: 0.5s;
    text-align:left;
    font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
    font-size: 11px; /* new 08/2017!, was 12px */
    color: #FFFFFF;
    padding-top: 4px;
    margin-left: 1em; /* small screen */
    border-right: 0px; /* set to 1px (or whatever) if you want a border */
    border-left: 0px;
    border-top: 2px;
    border-bottom: 2px;
    border-style: solid;
    border-color: grey;
    list-style-type: none;
    top: 2em;
    left: 2em;
  }
   }


.sidepanel a {
  /* Padding has four values, in the order: top - right - bottom - left */
  /*     padding: 8px 8px 8px 32px;  */
  padding-left: 12px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
/* .... copied from "fixed menu" */
    text-align:left;
    font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
    font-size: 11px; /* new 08/2017!, was 12px */
    color: #FFFFFF;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closeBTN {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 11px; /* like menue font size */
}

/* ........................................................ sidePanel Settings <end> ..........................  */


/* ........................................................ Button Settings <start>............................  */

.openBTN {
  font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
  font-size: 16px;
  color: #FFFFFF;
  cursor: pointer;
  background-color: transparent; /* transparent instead of background color #282828, doesn't work on iOS :-(! */
  margin-left: 11em;
  border: none;

  /* Added the following to avoid having the button _above_ the page contents */
  /* Position fixed keeps the button in place under scolling, very handy and nice! */
  padding-top: 20px;
  position: fixed;
}

/* On screens that are 1025px or less, set the left margin to 1em */
/* Update 1200px wide or less...                                   */
@media screen and (max-width: 1200px) {
   .openBTN {
     font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
     font-size: 16px;
     color: #FFFFFF;
     cursor: pointer;
     background-color: #282828;
     margin-left: 2em;
     border: none;
     padding-top: 20px;
     position: fixed;
   }
 }


.openBTN:hover {
  /* Keep background color or padding will be visible on hover! */
    font-weight: bold;
    font-style: italic;
}

/* ........................................................ Button Settings <end> .............................  */


/* ........................................................ fixed_menu Settings <start> .......................  */
.fixed_menu { /* fixed menu settings */
    width: 200px;
    padding: 11px;
    text-align:left;
    font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
    font-size: 11px; /* new 08/2017!, was 12px */
    color: #FFFFFF;
    padding:4px;
    margin-left: 15em; /* new 07/2018! */
    border-right: 0px;
    border-left: 0px;
    border-top: 0px;
    border-bottom: 0px;
    border-style: solid;
    border-color: grey;
    border:0px;  /* set to 1px (or whatever) if you want a border */
    list-style-type: none;
    top: 2em;
    left: 2em;
    width:15em;
    position:fixed;  /* IMPORTANT! */
}

/* On screens that are 1025px or less, set the left margin to 1em */
/* Update 1200px wide or less...                                   */
@media screen and (max-width: 1200px) {
   .fixed_menu { /* fixed menu settings */
      width: 200px;
      padding: 11px;
      text-align:left;
      font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
      font-size: 11px; /* new 08/2017!, was 12px */
      color: #FFFFFF;
      padding:4px;
      margin-left: 1em; /* new 07/2018!, small screen */
      border-right: 0px;
      border-left: 0px;
      border-top: 0px;
      border-bottom: 0px;
      border-style: solid;
      border-color: grey;
      border:0px;  /* set to 1px (or whatever) if you want a border */
      list-style-type: none;
      top: 2em;
      left: 2em;
      width:15em;
      position:fixed;  /* IMPORTANT! */
   }
}
/* ........................................................ fixed_menu Settings <end> .........................  */


.fixed_menu a {
     display: block; /*This puts each link in the menu on a new line, remove if you want a horizontal menu*/
}


* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/


 hr.hs {
   padding-right:10px;
  }


/* Update 06/2018                                                                              */
/* The general IMG stuff is commented out since it crashes with the HOVERBOX settings. No      */
/* idea why that code is / was here :-)                                                        */
/*img {                                                                                        */
/*     /* Fist two lines are for IMG scaling!                                             */   */
/*     /* Must stand here, in the IMG tag _PLUS_ in the respective DIV (don't know why)   */   */
/* max-width: 100%;                                                                            */
/* height: auto;                                                                               */
/* border:none;                                                                                */
/* vertical-align:middle                                                                       */
/*}
/*  Responisveness / scalability for the right Pics is under .USOrightPic img" tag             */



  ul.navbar {
    font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    list-style-type: none;
    padding:4px;
    margin: 4px;
    position: absolute;
    border-right: 0px;
    border-left: 0px;
    border-top: 0px;
    border-bottom: 0px;
    border-style: solid;
    border-color: grey;
    top: 2em;
    left: 1em;
    width: 20em
  }

  ul.newP1 {
    font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
    font-size: 12px;
    color: #F5F5F5; /* almost white */
    background-color:  #282828; /* dark grey, almost black */
    list-style-type: none;}

  ul.newP2 {
    font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
    font-size: 12px;
    color: #F5F5F5; /* almost white */
    background-color:  #282828; /* dark grey, almost black */
    list-style-type: circle;}

  h1 {
    font-family: Verdana, Georgia, "Times New Roman",
          Times, serif;
    font-size: 15px;}
/* NB (zu h1):
Spezielle Wünsche (z.B. align) werden im  HTML gemacht nicht hier,
da es mir nicht gelingt align-Setzungen hier im CSS hinterher im
HTML zu übersteuern / verändern
*/

  h2 {
    font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
    font-size: 12px}

  h3 {
    font-family: "Courier New",
          Courier, monospace;
    font-size: 10px}

  ul.navbar li {
    background:  #282828; /* dark grey, almost black */
    margin: 0.5em 0;
    padding: 0.3em 0;
    list-style: none;
    border-right: 0}

  ul.navbar a {
    text-decoration: none }

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

  a:active {
    text-decoration: none;
    color: #FF0000}

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

/* The hover style is not supported by Netscape browsers prior to version 6 */
/* but since it does no harm, you can still use it */
  a:hover {
    font-weight: bold;
    font-style: italic;
    color: #FFFFFF}

  address {
    margin-top: 1em;
    padding-top: 1em;
    font-size: small;
    border-top: thin solid grey}

/*                  ... settings for user defined "disclaimer"-class*/
  p.disclaimer {
    color: #C0C0C0;
    font-family: "Courier New",
                  Courier, monospace;
    font-size:  11px}

  p.ownP1 {
    color: white;
    font-family: "Courier New",
                  Courier, monospace;
    font-size: 13px}

.USOrightPic img
{
   margin-left:25px;
   border-width: 2px;
   border-style: solid;
   border-color: grey;
    /* The following two lines make the img scale! Don't use "width", use "max-with"     */
    /* Leave the height as auto and aspect ratio is kept relative to the max-width       */
   max-width: 100%;
   height: auto;
   float: right  /* to replace your align="right" */
}


  div.rightPic {
   border-width: 2px;
   border-style: solid;
   border-color: grey;
   float: right; /* to replace your align="right" */ }

  div.leftPic {
   border-width: 2px;
   border-style: solid;
   border-color: grey;
   float: left; /* to replace your align="left" */ }

  div.arrowRPic { /* rightadjust back arrow */
   border-width: 0px;
   border-style: solid;
   border-color: grey;
   float: right;}

/*                      .......Probenplan-Table Properties */
  table.pPlan
   {text-align: center;
   font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
   font-weight: normal;
   font-size:  12px;
   color: #fff;
   width: 475px;
   background-color: #666;
   border: 1px #282828 solid;
   border-collapse: collapse;
   border-spacing: 0px;}

  table.pPlan th
   {background-color: #CCC;
   font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
   font-size: 11px;
   text-align: left;
   color: #000;
   border: 1px #282828 solid;}

  table.pPlan td
   {background-color: #CCC;
   font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
   color: #000;
   padding: 4px;
   text-align: left;
   font-size: 11px;
   border: 1px #282828 solid;}

  table.pPlan td.hed
   {background-color: #CCC;
   font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
   color:  #282828; /* dark grey, almost black */
   padding: 4px;
   text-align: center;
   border-bottom: 2px #282828 solid;
   font-size: 12px;
   font-weight: bold;}

  table.pPlan caption
   {background-color:  #282828; /* dark grey, almost black */
   text-align: center;
   font-family: Verdana, Helvetica, Geneva, Arial,
          sans-serif;
   font-size: 13px;
   color: #F5F5F5; /* almost white */
   padding: 6px;
   border-bottom: 0px #fff solid;
   font-weight: bold;}



/* ........................................................ Hoverbox Settings <start> .........................  */


/* =Hoverbox Code .... for Pictures
----------------------------------------------------------------------*/


/* "Normale" Hoverbox (z.B. für Kinsarvik Bilder):
Verschiedene generelle Setzung (sozusagen "hoverbox body") Setzungen für
grossen Bildschirm (da alles etwas nach rechts geschoben via linken Rand
und nutzbaren Platz schmaler gemacht, 80%) und kleinen Bildschirm (da
alles wie bisher). Das via @media Query gemacht.
*/

.hoverbox
{
        cursor: default;
        list-style: none;
        align: center;
        width: 80%;
        margin-left:10em;
}
/* On screens that are 1025px or less, reset left margin and with */
/* Update 1200px wide or less...                                   */
@media screen and (max-width: 1200px) {
  .hoverbox
   {
           cursor: default;
           list-style: none;
           align: center;
           width: 100%;
           margin-left:0em;
   }
}



.hoverbox p
{
        clear: both;
        font: 10px Verdana, sans-serif;
        padding: 10px 0;
        text-align: center;
}


.hoverbox h2
{
        clear: both;
        font: 12px Verdana, sans-serif;
        padding: 10px 0;
        text-align: left;
}


.hoverbox a
{
        cursor: default;
}

.hoverbox a .preview
{
        display: none;
}

.hoverbox a:hover .preview
{
        display: block;
        position: absolute;
        top: -33px;
        left: -45px;
        z-index: 1;
}

.hoverbox img
{
        background: #fff;
        border-color: #aaa #ccc #ddd #bbb;
        border-style: solid;
        border-width: 1px;
        color: inherit;
        padding: 2px;
        vertical-align: top;
        width:  200px;
        height: 150px;
}


.hoverbox li
{
        background: #eee;
        border-color: #ddd #bbb #aaa #ccc;
        border-style: solid;
        border-width: 1px;
        color: inherit;
        display: inline;
        float: left;
        margin: 3px;
        padding: 3px;
        position: relative;
}


.hoverbox .preview
{
        border-color: 000;
        width: auto;
        height: 300px;
}


/* =Hoverbox Code .... for standard 25x70 posters
----------------------------------------------------------------------*/

.hoverboxStdPo
{
        cursor: default;
        list-style: none;
}

.hoverboxStdPo a
{
        cursor: default;
}

.hoverboxStdPo a .preview
{
        display: none;
}

.hoverboxStdPo a:hover .preview
{
        display: block;
        position: absolute;
        top: -33px;
        left: -45px;
        z-index: 1;
}

.hoverboxStdPo img
{
        background: #fff;
        border-color: #aaa #ccc #ddd #bbb;
        border-style: solid;
        border-width: 1px;
        color: inherit;
        padding: 2px;
        vertical-align: top;
        width: 142px;
        height:400px;
}

.hoverboxStdPo li
{
        background: #eee;
        border-color: #ddd #bbb #aaa #ccc;
        border-style: solid;
        border-width: 1px;
        color: inherit;
        display: inline;
        float: left;
        margin: 3px;
        padding: 5px;
        position: relative;
}

.hoverboxStdPo .preview
{
        border-color: #000;
        width: 214px;
        height: 600px;
}


/* =Hoverbox Code .... for A3 posters
----------------------------------------------------------------------*/

.hoverboxA3Po
{
        cursor: default;
        list-style: none;
}

.hoverboxA3Po a
{
        cursor: default;
}

.hoverboxA3Po a .preview
{
        display: none;
}

.hoverboxA3Po a:hover .preview
{
        display: block;
        position: absolute;
        top: -33px;
        left: -45px;
        z-index: 1;
}

.hoverboxA3Po img
{
        background: #fff;
        border-color: #aaa #ccc #ddd #bbb;
        border-style: solid;
        border-width: 1px;
        color: inherit;
        padding: 2px;
        vertical-align: top;
        width: 300px;
        height:212px;
}

.hoverboxA3Po li
{
        background: #eee;
        border-color: #ddd #bbb #aaa #ccc;
        border-style: solid;
        border-width: 1px;
        color: inherit;
        display: inline;
        float: left;
        margin: 3px;
        padding: 5px;
        position: relative;
}

.hoverboxA3Po .preview
{
        border-color: #000;
        width: 500px;
        height: 353px;
}


/* =Hoverbox Code .... for current concert Picture on main Page
----------------------------------------------------------------------*/

.hoverboxCurCon
{
        cursor: default;
        list-style: none;
}

.hoverboxCurCon a
{
        cursor: default;
}

.hoverboxCurCon a .preview
{
        display: none;
}

.hoverboxCurCon a:hover .preview
{
        display: block;
        position: absolute;
        top: 20px;
        left: -520px;
        z-index: 1;
}

.hoverboxCurCon img
{
   margin-left: 5px;
   border-width: 1px;
   border-style: solid;
   border-color: grey;
   width: 450px;
}

.hoverboxCurCon li
{
        border-width: 5px;
        color: inherit;
        display: inline;
        float: right;
        margin: 1px;
        padding: 1px;
        position: relative;
}

.hoverboxCurCon .preview
{
        border-color: #000;
        width: 950px;
}

/* ........................................................ Hoverbox Settings <end> ...........................  */


/* ........................................................ alternative Hover <start> .......................... */
/* ... simpler & shorter code than the hoverbox! Nice :-)                                                        */
.CurConEnlarge:hover {
        transform:scale(2,2);
        transform-origin: 100% 0;
        cursor: default;
}

.CurConEnlarge {
        margin-left: 5px;
}

.CurConWrap {
	padding: 5px
}

/* ........................................................ alternative Hover <end> ..........................  */



/* ........................................................ modal Image <start> ..............................  */
/* ...... culled from the internet; adjusted / adapted to USO use by sto                                        */

#myImg:hover {opacity: 0.7;
              cursor: pointer;  /* added by sto */
}

#myImg {
        margin-left: 5px; /* added by sto */
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 750px; /* controls the width of he picture when clicked on! */
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 25px;
    right: 75px;
    color: #f1f1f1;
    font-size: 30px;
    font-weight: bold;
    transition: 0.3s;
}	

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
/* Update 1200px wide or less...                                   */
@media only screen and (max-width: 1200px){  /* small screen: same value as with the rest of this css */
    .modal-content {
        width: 100%;
    }
}


.w3-container,.w3-panel
{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}

/* ........................................................ modal Image <end> ................................  */


/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: 50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 65%;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}



img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}