.artist-name{
position:relative;
padding:1rem 0 3rem 0;
border-radius:.125rem;
border:1px solid #ddd;
margin: 3rem auto 4rem auto;
width: 85%;
}
.artist-name img{
box-shadow: 0px 0px 5px #eee , 2px 2px 5px #eee ;
}
.artist-shadow{
box-shadow: 0px 0px 3px #ddd, 2px 2px 4px #ddd;
}
.artist-name-block-mobile,
.artist-name-block{
text-align:center;
}
.artist-name-block{
display:none;
}
.artist-name-block-mobile h4,
.artist-name-block h4{
font-family:serif;
}
.artist-name-block h4{
letter-spacing:0.1rem;
}
.artist-gallery{
margin: auto 4rem;
}
.artist-gallery > div.row{
border-bottom: 1px solid #ddd;
justify-content:space-evenly;
}
.artist-gallery > div.row:last-child{
border-bottom: none;
}
.artist-img-wrap{
display:inline-block;
position:relative;
}
@media (min-width: 768px) {
.artist-gallery{
margin: auto 16%;
}
.artist-img-wrap{
display:inline-block;
position:relative;
}
}
@media (min-width: 992px) {
.artist-name-block{
text-align:left;
display:unset;
}
.artist-name-block-mobile{
display:none;
}
.artist-name-block > div{
margin-left:4rem;
}
}
.artist-modal{
display:flex;
justify-content:center;
align-items:center;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.5);
z-index:1000;
opacity:0;
transition: .4s ease;
}
.artist-modal-hidden{
display:none;
}
.artist-modal-show{
opacity:1;
}
.artist-modal-content{
position:relative;
border-radius:.125rem;
padding:.5rem;
background-color:white;
box-shadow: 0 0 5px #333;
display:flex;
justify-content:center;
flex-direction:column;
align-items:center;
align-content:center;
max-height:auto;
max-width:auto;
}
.artist-modal-content img{
max-height:80vh;
max-width:80vw;
}
.artist-modal-close{
position:absolute;
display:flex;
justify-content:center;
align-items:center;
top:-.8rem;
right:-.8rem;
color:white;
background: radial-gradient(farthest-side ellipse at top left, white, #000);
border:2px solid white;
border-radius:50%;
width:1.5rem;
height:1.5rem;
box-shadow: 0 0 3px black;
cursor:pointer;
}
.artist-modal-close div{
text-align:center;
}
div.spin{
display: -webkit-flex;
display: flex;
justify-content:center;
align-items:center;
position:absolute;
margin: 0;
top:0;
left: 0;
bottom:0;
right:0;
background-color:rgba(200,200,200,.5);
}
.artist-img:not(.no-image){
cursor:pointer;
}
.line{
border-top: 1px solid #ddd;
}
.artist-favorite-block{
position:absolute;
right:1rem;
font-size:0.8rem;
}
@media (min-width: 992px) {
.artist-favorite-block{
font-size:unset;
}
}
.artist-favorite{
position:relative;
text-align:right;
width:100%;
}
.artist-favorite i.fa-heart{
cursor:pointer;
color:#fff;
font-size:1.3em;
text-shadow:0 0 3px black;
transition: .15s ease;
}
.artist-favorite div{
opacity:0;
position:absolute;
font-size:.8em;
right:-2em;
bottom:-1.2em;
white-space:nowrap;
transition: opacity .15s linear;
}
.artist-favorite i.fa-heart:hover + div{
opacity:1;
}
.artist-favorite.active .fa-heart{
color:hsl(40, 100%, 80%);
text-shadow:0 0 2px hsl(0, 100%, 10%);
transform: scale(1.2);
}