body{margin:0;    font-family: Montserrat;}

.museum-header {padding: 5px;width: fit-content;
    justify-self: center; display: block; gap: 2.5rem; align-items: flex-start; margin-bottom: 10px;background: #fff;border-radius: 5px;
  
  border: 2px solid #f1f1f1;
   

  }
  
.museum-header-info{max-width: 800px;display:flex;width:100%}
.museum-website{    justify-items: left;margin-bottom: 10px;min-width:50%}
.museum-map{height:300px;background: #F3F4F6FF;width: fit-content;padding: 10px;margin-bottom: 10px;min-width:50%}
.no-map{height:auto;width:200px;background: #F3F4F6FF;padding: 10px;margin-bottom: 10px;}
.museum-address{border-radius:5px;background: #F3F4F6FF;width: fit-content;padding: 10px;margin-bottom: 10px;min-width:50%}
.museum-image { border-radius:5px;width: 500px; height: 300px; background: #eaeaea;  object-fit: cover; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.museum-image-container{position:relative;margin-bottom:10px}
.museum-website-link-container{display: flex; gap: 10px;}
.museum-info { flex: 1;     margin-left: 15px;max-width:300px;height:200px}
.museum-website-link {color:black; font-size:12px}
.museum-image-info{position: absolute;
    bottom: 0;
    width: 100%;
    color: white;
    background: rgb(0, 0, 0, 0.7);
   
    overflow: hidden;
 }



.museum-image-info.full{position:absolute;
  bottom:0;width:100%;color: white;height:100%;
    background: rgb(0, 0, 0, 0.9);}



.museum-title h1 {     
  font-family: 'Montserrat';
  font-weight: 700;
  font-size: 24px;
  text-align: left;
  justify-self: left;
  padding-left: 5px;
  margin:0;
  margin-top:2px;
     
}
    .museum-location{    width: fit-content;
    
    margin-bottom: 10px;
    min-width: 50%;
    text-align: -webkit-left;
  text-transform: uppercase;
padding-left:5px;
    }

.museum-map{    height: 150px;
    position: relative;
    width: -webkit-fill-available;}
.museum-title::first-letter {text-transform: uppercase;}
.museum-desc { font-size: 1.1rem; color: #444; margin-bottom: 1.5rem; line-height: 1.6; max-width: 700px; }

.museum-tabs { display: flex; gap: 1.5rem; margin-bottom: 10px; border-bottom: 1px solid #ececec;justify-content: space-between; }

.filterArtworkInput{display: inline-block;min-width: 36px;padding: 0.5em 0.9em;margin: 0 0.1em;border-radius: 7px;text-align: center;text-decoration: none;background: #f7f9fb;color: #222;border: 1px solid #dbe2ef;transition: background 0.18s, color 0.18s;cursor: pointer;margin-top: 10px;margin-bottom: 10px;margin-left: 5px;}
.filterArtworkInput:hover{background: #4a69bb;color: #fff;border-color: #4a69bb;}
.filter-bar-museum{ align-items: center;display: none;justify-items: center;justify-self: center;}
.filter-bar-museum.active{display:flex;}
.filter-input {width:250px;margin:10px}
.search-artwork-name {width:250px;margin:10px}
.search-artist-name {width:250px;margin:10px}
.top-bar{display: flex;justify-content:center;    align-items: center;}

.switchFilter{cursor: pointer;color:#5c5c5c;justify-self: right; margin-right:10px;}

h2{ background: none;border: none;font-size: 20px;font-weight: 700;padding: 0.7rem 1.5rem 0.6rem;border-bottom: 2.5px solid transparent;transition: color 0.18s, border 0.18s;display: inline;padding: 0;}
.header-subtitle {margin:0; font-size:14px;font-weight: 700;color: #676b72;}
.museum-header-subtitle-container{margin-bottom:5px;text-align:left}
.museum-socials-img{height:20px; width:20px}
.museum-socials-link-container{display:flex;gap:10px}
@media (max-width: 700px) {
  .main-layout{margin: 10px;}
  .museum-header-info {display: block; width: 100%;}
  .museum-image {height:300px; width: 100%;  }
  .museum-info {width:100%; text-align: center; margin-left:0px;height: auto; }
  .museum-title { font-size: 24px }
  .museum-desc { max-width: 100%; }
  .museum-website, .museum-location, .museum-address { width: auto; margin-bottom: 10px; }
  .filter-bar-museum{ display: none;justify-items: center;}
  .filter-bar-museum.active{display:block}
  .top-bar{display: block};
 
  
}

.museum-presentation{
 padding:5px; text-align:left; padding-left:5px; overflow:hidden;max-height: 240px;z-index:5;text-align: justify; max-width:800px}

    .museum-presentation.full{
  text-align:left; padding-left:5px;height:auto;max-height:240px;width:auto;z-index:5;
    }

    .popin-media-share {
text-align: left;
    width: 120px;
    border: solid 1px #ddd;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    justify-self: left;
    margin-top: 5px;
    z-index:1005;
  }

  .popin-media-share-line{
    margin:5px;
    gap:5px;
    display:flex;
    font-size: 12px;
    align-items: center;
    cursor:pointer;
  }




  
.share-button {text-align: center;
    text-decoration: none;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    background-color: #000;
    border: none;
    color: #fff;
  height: 25px;}

.share-button i {margin-right: 8px;}

.share-button-container {display:flex;justify-content: flex-end;margin-bottom:0px;margin-top: 0px;}
.social-share{
  margin-bottom: 10px;
  margin-top: 10px;
  justify-self: right;
  
  margin-right:10px;
}