/*Lobotoradio.com
	CSS for Artist and Band Pages*/

/*Title*/
.headline {display: flex; align-items: center; flex-direction: row; margin: 0 0 16px 0; flex-wrap: wrap; gap: 10px;}
.artist-name {text-align: left; line-height: 50px; margin: 0;}
.artist-name-container {display: flex; align-items: center; flex-direction: row; margin: 0 0 16px 0; flex-wrap: wrap; gap: 10px;}
.artist-logo {max-height: 41px; max-width: 100%; width: auto; height: 39px;}
.artist-logo-container {display: flex; align-items: center; flex-direction: row; margin: 0 0 16px 0; flex-wrap: wrap; gap: 10px;}

/*Infobox*/
#infobox {margin: 0 0 16px 0; text-transform: uppercase; font: normal normal 13px Arial Narrow, Helvetica, sans-serif;}
.info-item {margin: 0 8px 0 0; display: inline-block;}
.info-item a {border-bottom: none;}

/*Social*/
#socials {text-align: left; margin: 0 0 16px 0; overflow: hidden; padding: 0;}
.socials {color: var(--white)!important; line-height:1; display: inline-block; padding: 8px; margin: 0; border: none;}
.face {background: var(--face);}
.pint {background: var(--pint);}
.redd {background: var(--redd);}
.tele {background: var(--tele);}
.twit {background: var(--twit);}
.what {background: var(--what);}
.word {background: var(--word);}
.socials:hover {opacity: 50%; border-bottom: none; color: white!important;}

/*Image*/
#image-container {margin: 0 0 16px 0;}
.image-caption {text-align:center; font-size: 95%; background: var(--celeste); padding: 10px 24px;}
#artistaimg {padding: 10px; background-image: linear-gradient(to right, #c4e17f, #f7fdca, #fad071, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4);}
.fotos {position: relative; margin-bottom: 0; max-width: 100%; width: 100%; height: auto; mix-blend-mode: multiply;}
.fotos img {mix-blend-mode: multiply; background-image: linear-gradient(to right, #c4e17f, #f7fdca, #fad071, #f0766b, #db9dbe, #c49cdf, #6599e2, #61c2e4);}

/*Content*/
#content {margin: 0 0 16px 0;}
#intro {padding: 16px; background: var(--gray-light);}
#intro a.more {border-bottom: none;}
#intro p, #text p {margin-bottom: 10px;}
#intro p:last-of-type {margin-bottom: 0; display: inline;}
#more {margin: 0; display: inline;}
#text p:last-child {margin-bottom: 0;}
#text {padding: 16px; background: var(--gray-light); border-top: 1px solid var(--gray);}
#text.nada {display: none;}
#oculto {width: 100%; margin: 0 0 24px 0!important; padding-bottom: 0; table-layout: unset; border: 1px solid var(--gray);}
.empty-msg {padding: 8px 0 8px 16px; border-top: 1px dotted var(--gray-darker); border-bottom: 1px dotted var(--gray-darker);}

/*Ads*/
#adsense-main {margin: 0 0 16px 0;}

/*Layout*/
.header {width: 100%; background: var(--celeste); margin: 0 0 16px 0; padding: 8px 0 8px 16px;}
.header-meta {padding: 8px 16px; background: var(--celeste); margin: 0; width: 100%;}
.headline {display: flex; align-items: center; flex-direction: row; margin: 0 0 16px 0; flex-wrap: wrap; gap: 10px;}

/*Comments*/
#comments {width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0 0 16px 0;}
.com-avatar {vertical-align: top; float: left; border-radius: 50%; margin: 0 16px 16px 0;}
.com-box {width: 100%; background: #eee; padding: 16px; margin: 0 0 12px 0; border: 1px dotted var(--gray-darker);}
.com-date {color: #888888; font-size:85%;}
.com-info {display: flex; flex-direction: column; margin-left: 10px;}
.com-item {background: #f5f5f5; margin: 0 0 16px 0; border: 1px solid #eaeaea; padding: 0.8em;}
.com-msg {display: flex; align-items: center; background: var(--celeste); padding: 16px; margin: 16px 0;}
.com-msg span {width: auto; display: flex; align-items: center; justify-content: center; padding-right: 1em;}
.com-warning {font-size: smaller; font-weight: 700;}