.container {
  margin-top: 1em;
}

.logo-link:hover, .logo-link:focus {
  outline: 2px solid #fc6;
}

.kuvagalleria-intro {
  margin-bottom: 1em;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
}
/*
.modal-content {
    
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
    max-width: 95vw;
    max-height: 85vh;
    width: auto;
    animation-name: zoom;
    animation-duration: 0.3s;
}*/

.modal img {
    /*max-height: 90vh;*/
    max-height: calc(100vh - 240px);
    /*max-height: 100%;*/
    border: 1px solid;
    border-color: grey;
}

.modal-header, .modal-footer {
  border: none;
}


.modal-footer {
  padding-top: 0;
}

.modal-dialog {
    max-width: 95vw;
}

button.kuvagalleria-vote:disabled {
  opacity: 1;
  color: black;
}

.image-link {
  border: 2px solid;
  border-radius: 10px;
  border-color: #888;
  padding: 1em;
  color: black;
  width: 100%;
}

.image-link:hover, .image-link:focus {
  background-color: #CCC;
  color: black;
  border-color: #fc6;
  
}

.image-link:focus {
  /*outline: 3px solid;
  outline-color: #fc6;
  outline-offset: 5px;*/
  outline: none;
}

.image-link figcaption .kuvagalleria-image-name {
  font-weight: bold;
}

.kuvagalleria-image-thumb {
  object-fit: cover;
  object-position: center; /* Center the image within the element */
  width: 100%;
  /*height: 300px;*/
  margin-bottom: 1rem;
  border: 1px solid;
  border-color: grey;
}

.kuvagalleria-btn-close {
  float: right;
  margin: 0.2rem 0.2rem -1rem auto;
  padding: 0.3rem;
  color: grey;
}

.kuvagalleria-btn {
  border: 2px solid;
  border-color: #888;
  border-radius: 6px;
  background-color: white;
  padding: .375rem .75rem;
  cursor: pointer;
}

.kuvagalleria-btn:hover, .kuvagalleria-btn:focus {
  border: 2px solid #fc6;
  box-shadow: none;
  outline: none;
}

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

.modal-backdrop.show {
   opacity: 0.9;
}


/*
.modal img {
    max-width: 100%;
    max-height: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    position: relative;
}*/