body
{
            margin: 0;
            font-family:Verdana;
            
            box-sizing: border-box;          
}


/* ===================
     Typography
 ===================== */


h1 {
            font-family: Verdana;
            font-weight: 400;
            color:black;        
            font-size: 2.5rem; 
            margin: auto;
            margin-top: 1.5em;
            
}

@media (max-width: 480px) {
  h1 {font-size: 1.5rem;
      margin-top: 0em;}}

@media (max-width: 960px) {
   h1 {font-size: 1.5rem;
    margin-top: 0em;}}     
        
      

.subtitle {
            font-weight: 400;
            color: #00f9ff;
            font-size: 3.1rem;
            margin-bottom:0em;
            font-family: Gulim;
                  }
 @media (max-width: 480px) {
                    .subtitle {font-size: 1.5rem;}
                    }
  

.home {
  font-weight:400;
  font-family: Verdana;
  color:black;
  font-size:1.4rem; 
}
@media (max-width: 480px) {
        .home {font-size: 0.9rem;}
        }


h2 {
            font-family: Verdana;
            font-weight: 400;
            color:black;
            font-size: 1.2rem;
            margin-left: 2em;
            }
strong      { color:black; 
            font-size:0.75rem; 
            }            

.current-page {
            color:#FF10F0 ;
            }            
            

.exhib  ul    {
            list-style: none;
            margin: 0;
            display: flex;
            flex-direction: column;       
            }
.exhib-li
            {
            font-size: 0.8rem;
            margin-left: -3.2em;
            }
.black      { 
            color:#000000; 
            font-weight: 600;
            
            font-size: 0.75rem;
            }

            
.hide {
     display: none;
}      

.DE         {
    color: black;
    cursor: pointer;
    text-decoration: none;
  }
 .DE:focus,
 .DE:hover  {color: #FFC300;}
.EN         {
    color:#FA2FBD;
    cursor: pointer;
    text-decoration: none;
}
.EN:focus,
.EN:hover {color: #FFC300;}



ul {list-style: none;
    }

    @media (max-width:480px) {
      .info-ul {list-style: outside;
        
      }   }
      
    
    
 
/*@media (max-width: 675px) 
            {
             h1     {
                     font-size: 1.25rem;
                    }
            h2      {
                      font-size: 0.9rem;
                    } 
            .subtitle {
                      font-size: 0.6rem;
                    }
            }   */         

/*============
   Formate
==============*/





.portrait  { width:9.5em; margin-left:auto; margin-right: auto; margin-top:0.8em; margin-bottom: 0.8em;  display: block; }
.portrait-m {width: 10em; margin-left:auto;margin-right: auto; margin-top:0.8em; margin-bottom: 0.8em; display: block;}
.landscape { width:12em; margin-left: auto; margin-right:auto; margin-top:0.8em; margin-bottom: 0.8em;display: block;}

.pic {
  text-align: center;
  margin-top:2.5em ;
  }
 @media (max-width:480px) {
   .pic {margin-top: 3em;}
 } 


.accord-1      {
    list-style: none;
    
    margin-left: -3em;
    
    font-size: 0.8rem;      
    }
.accord-1-li
    {
    font-size: 0.8rem;
    
    
    }

.accord-2 {
  font-size: 0.8rem;
  margin-left: 0em;

}



.artworks {
  margin-top: 3.5em;
}
   
/*===================
    Layout
 ==================== */   
 
 .grid-container {
  display: grid;
  height: 100%;
  grid-gap: 0.2rem;
  grid-template-columns: repeat(12, 1fr );
  grid-template-rows: repeat(2 20em auto);
  grid-template-areas: 
  ". . . h h h h h h . l l"
  ". . . . . s s . . . . ."
  "i . . . . . . . . . . ."
  "m m m c c c c c c c . ."
  "m m m c c c c c c c . .";
  
}


@media (max-width: 480px) {
  .grid-container{ grid-template-areas:    
    "m i . h h h h h h . l l"
    ". . . s s s s s . . . ."
    "c c c c c c c c c c c c"
    "c c c c c c c c c c c c"
    "c c c c c c c c c c c c"
    "c c c c c c c c c c c c";}

}

@media (max-width: 960px) {
  .grid-container{ grid-template-areas:    
    "m i . h h h h h h . l l"
    ". . . s s s s s . . . ."
    "c c c c c c c c c c c c"
    "c c c c c c c c c c c c"
    "c c c c c c c c c c c c"
    "c c c c c c c c c c c c";}

}



.header {
grid-area: h;
margin: auto;

}

.subtitle {
grid-area: s;
text-align: center;
}

.home {
grid-area: d;
text-align: center;
}

.lang {
grid-area: l;
text-align: center;
}
@media (min-width:900px) {
  .lang {margin-top:5em ;}
}

.insta {
  grid-area: i;
  text-decoration: none;      
}


.main {
  color: #444;
  margin-top: 2.5em;
 
}

/*@media (min-width:961px) {
  .main {
       grid-column: 4 / 6;
       margin-left: auto ;
       margin-right: auto;
    }
  }


@media (max-width:480px) {
  .main {grid-column: 2 / 11;
   margin: auto;}
}
@media (max-width:960px) {
  .main {grid-column: 2 / 11;
   margin: auto;}
} */


.painting {
   max-width: 70%;
   margin-top: 0 auto;
   
}
.accord {
  margin-left: -0.5em;
}

.werden, werden:link, werden:visited {
  color: #39ff14;
  display: inline-block;
  text-decoration: none;
  text-align-last: center;
  margin-left: 1em;
  padding: auto;
  
}

.werden:focus,
 .werden:hover {
 color: #FF10F0 ;
 text-decoration: none;
 }


 @media (min-width:580px) {
  .werden {
    
    margin-left: 13em;
   f }
}



 @media (min-width:1400px) {
    .werden {
      margin-top: 1.5em;
      margin-left: 6.1em;
     font-size: 1.3rem; }
 }



/* ================
     Navigation
=================*/ 
.navigation {
grid-area: m;
}

@media (max-width:480px) {
  .navigation {display: none;}
}

@media (max-width:960px) {
  .navigation {display:none;}
  
}

.navigation ul {
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-evenly;
font-size: 0.92rem;
padding: 0.25em;
font-weight:700;
text-transform: uppercase;

}

.navigation li { 
background-color:#FFFFFF;
font-size:1.0 rem;
padding: 1em;
}
 
.navigation a      {
text-decoration:none; 
padding:  0;
}

.nav-li-art {
color:#000000;

font-size:1.0em;
}  



.nav-li-artist { color:black;

font-size:1.0em;
} 

.nav-li-new {color:#39ff14;

}
.navigation a:focus,
.navigation a:hover { 
color:#444;
background-color:#FFFFFF;
text-decoration:none; 
outline: none;
}



.burger-nav {
  cursor: pointer;
  background-color: white;
  border: none;
}

.burger-icon { width: 2.5em;
              display: none;
}
@media (max-width:480px) {
  .burger-icon{display: inline;}
}

@media (max-width:960px) {
  .burger-icon{display: inline;}
  
}

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 15%; /* 15% from the top */
  width: 100%; /* 100% width */
  text-align: left; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  margin-left: 1em;
}

.current-overlay-page {
  color:#FF10F0;
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 1.2rem;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}


/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 480px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}




/*==============
===============*/

.cover{
  overflow: hidden;
}

@media (max-height:480px) {
  .cover {height:200px}
}

.bild {
margin-top:0em;
}

@media (max-hight:480px) {
  .bild {width:40%;}
}

   
.container {  grid-area: c;
        margin:0em ;
        
}



.artworks { display: flex;
  flex-direction:column;

}

@media (max-width:480px) {
  .artworks {margin:1em ;}
}

.no-prop  { color:black; 
  text-decoration: underline;

}

.no-prop:focus,
.no-prop:hover { 
color:gray;

text-decoration:none; 
outline: none;
}


.standard {white-space: pre-line;
                      }
@media (max-width:480px){
  .standard {display: none;}
}

.mobile {display: none;}
@media (max-width:480px) {
  .mobile {display: inline;
          white-space: pre-line;
           }
}

.zentrum {
  margin-top: 2em;
  margin-left: 15.5em;
}

@media (max-width:480px) {
  .zentrum {margin: 1.5em;
   text-align: inherit;}
}

/*.adjust {
  margin-left: -7em;
}*/
@media (max-width:480px) {
  .adjust {margin-left: 0em;}
}

@media (min-width:960px) {
  .adjust {margin-left: -7em;}
}

@media (min-width:1400px) {
  .adjust {margin-left: -5em;}
}

@media (max-width:480px) {
  .adjust-artist {margin-left: 0em;}
}

@media (min-width:700px) {
  .adjust-artist {margin-left: -8em;}
}

@media (min-width:960px) {
  .adjust-artist {margin-left: -12em;}
}

@media (min-width:1100px) {
  .adjust-artist {margin-left: -14em;}
}

@media (min-width:1400px) {
  .adjust-artist {margin-left: -5em;}
}

.ajdust-press{
  margin-top: 4em;
}

  


.neon-green-link {
 color:#444;
 text-decoration: underline;
}

.neon-green-link:focus,
.neon-green-link:hover {
color:#39ff14 ;
text-decoration: underline;
}

.neon-green {
  color: #39ff14;
}

#pink {
    color:#FF10F0;
    text-align: center;
}

.insta-g {
  color:#000;
  text-decoration: none;
  margin-left: 1.2em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.92rem;
 }
 
 .insta-g:focus,
 .insta-g:hover {
 color: gray ;
 text-decoration: none;

 }

 .insta-logo {
             width: 2em;
             display: none;
 }
 .insta-logo:focus,
 .insta-logo:hover {
   opacity: 0.7;
 }

 @media (max-width:480px) {
   .insta-logo{display:inline;}
   .insta-g{display:none;}
 }
 @media (max-width:960px) {
   .insta-g{display:none;}
 }

 .down {
     margin-top: 2em;
 }

 .main-title { margin-left: -1.5em;

 }

 .tit {
   text-align: center; 
   font-weight: 600; 
 }
 @media (max-width:480px) {
   .tit {display: inline;
   white-space: pre-line;}
 }

 @media (min-width:960px) {
   .text {margin-top: 6.5em;}
 }

.catt {
    margin-left: 2em;
    margin-right: 2em;
}

@media (min-width:960px) {
  .catt {
    margin-left: 6em;
    margin-right: 6em;
  }
}



/*===================
  Accordion
 ==================== */   

/* Style the buttons that are used to open and close the accordion panel */
.accordion  {
  background-color: #ffffff;
  color: #444;
  font-size: 1.0rem;
  cursor: pointer;
  padding: 1em;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 1rem;
  outline: none;
  transition: 0.4s;
  }

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover   
  {
  background-color: white; 
  color:#39ff14;       
  }

/* Style the accordion panel. Note: hidden by default */
.panel      {
  padding: 0 1em;
  background-color: white;
  display: none;
  overflow: hidden;
  
  
}
.accordion:after 
  {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 0.5rem;
  color:black;
  float: right;
  margin-left: 0.5em;
  }

.active:after             
  {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
  }
  
.neon-green {
  color: #39ff14;
}

.neon-yellow {
    color: #FFF01F;
  /* color: #faed27;*/
}

.neon-orange {
  color: #ffa500 ;
}

.instruction  {
text-align: center;
} 
 
.filler {border-color: 1px solid red;
    

}



/*
header    {

            
            background-color: #ffffff;
            padding: 2em 0;
            }


            

.container {
            width: 90%;
            max-width: 900px;
            border: solid 1px #CC1491;
            margin: 0 auto;
            flex-direction: column;
            }
            
.container-nav {
            margin: 0 auto;
            display: flex;
            width: 20%;
            max-width: 900px;
            border: solid 1px pink;
            
           }



@media (max-width: 675px)
        {
        .container-nav  {
                            flex-direction: column;
                        }
        header          {
                            text-align: center;  
                              
                        } 
        }

/*===================
   Switch
  ===================*


                

.switch    {
            position: relative;
            width: 4em;
            margin-right: 0;
            }
.switch:before {
            content: '';
            position:absoulte;
            width: 60px;
            height:25px;
            background: #000000; 
            border-radius: 25px;
            }


.DE         {
              color: #1792d2;
            }
.EN         {
              color:#CC1491 ;
            }
/*===================
    Navagiation
 ==================== *

nav ul {
            list-style: none;
            
            justify-content: space-between;
            padding: 0.25em;
            text-transform: uppercase;
            
            
        }
        
nav li { color:#000000;
          background-color:#FFFFFF;
          font-size:1.0rem;
        }
        



                  
nav a      {
            color:#000000;
            text-decoration:none; 
            padding:  0;
           }
          
.nav-li-art {
            color:#000000;
            background-color:#FFFFFF;
            font-size:1.0rem;
            }          
          
.nav-li-artist { color:#1792d2;
            background-color:#FFFFFF;
            font-size:1.0rem;
           } 
nav a:focus,
nav a:hover { 
            color:#CC1491;
            background-color:#FFFFFF;
            text-decoration:none; 
            outline: none;
            }




@media (max-width: 675px)
        {
            nav ul  {
                        flex-direction: column;  
                        margin: 0.5em 0;                      
                    }
            nav a   {
                        padding: 0;
                    }
           .nav-li  {
                        font-size: 0.9rem;
                    }
        }





color:#1792d2;

color:#2080AB; 
 #CBCBC0;
   color: #444;
color:#CC1491;

 #f5f5f5f5;
}

    */