.sidenav {
   grid-area: sidenav;
   border: 1px solid #003865;
   border-radius: 5px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   margin: 10px;
   padding: 4px;
/*   max-height: 370px; */
}

.sidenav img {
/*   min-width: 180px !important; 
   max-width: 210px !important;
   min-height: 240px !important;   */
   width: 100% !important; 
   height: auto !important;   
 }

.sideinfodark {
    grid-area: sideinfo;
/* tumma theme    
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5));*/
/* vaalea theme
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5));
*/
}

.sideinfo {
    grid-area: sideinfo;
/* tumma theme    
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); */
/* vaalea theme
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5));
*/
}

.sidebar {
  background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5));
  grid-area: sidebar;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 150px; /* 210px;*/
  grid-template-rows: auto 1fr;
  grid-template-areas: 
    "sidenav"
    "sideinfo";
}

.info {
   border: 1px solid #003865;
   border-radius: 5px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   margin: 10px;
   padding: 5px;
/* tumma theme    */
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); 
/* vaalea theme
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5));
*/
}

.info a {
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: inline-block;
}

.fb-sivu {
    width: 210px;
    padding-top: 40px;
    padding-left: 5px;
    padding-right: 5px;
}

.imagesize {
    min-height: 120px;
    max-height: 120px;
}

@media (max-width:640px) {
/*    .sidebar {
        grid-template-columns: auto auto;
        grid-template-areas: 
            "sideinfo sidenav";
            "sidenav sideinfo";
    }*/
    
    .hide-small {
        display: none !important
    }
}

@media (min-width: 1181px) {
    .sidebar {
        grid-template-columns: 220px;        
    }  
    
    .imagesize {
        min-height: 190px;
        max-height: 190px;
    }

}







#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* 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.95); /* Black w/ opacity */
}

.modalWhite {
  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(255,255,255,0.95); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 90%;
  max-width: 900px;
}

/* 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.1)} 
  to {transform: scale(1)}
}

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

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

.closeWhite {
  position: absolute;
  top: 15px;
  right: 35px;
  /* color: #f1f1f1; */
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

/* Fading animation */
.fadeimage {
  -webkit-animation-name: fadeimage;
  -webkit-animation-duration: 1.5s;
  animation-name: fadeimage;
  animation-duration: 1.5s;
}

@-webkit-keyframes fadeimage {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fadeimage {
  from {opacity: .4} 
  to {opacity: 1}
}