/* minified: 0 */
/* INCLUDE global.css */
html {margin: 0; padding: 0; min-height: 100%; }
body {font-family: manroperegular, "Century Gothic", CenturyGothic, helvetica, sans-serif; margin: 0; padding: 0; letter-spacing: 0; font-size: 19px; min-height: 100%; }
body {min-height: 0; min-width: 0; color: #F0F0F7; background-colour: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(41,47,149,1) 0%, rgba(52,61,240,1) 100%);}
#bg-gradient { background-image: radial-gradient(circle farthest-side at -50% -30%, #66f 1%, #1d212c); position: fixed; z-index:1; width: 100%; height: 100%;} /* background-image: radial-gradient(circle farthest-side at -50% -30%, #66f 1%, #1d212c); */
#main {z-index: 2; position: relative;}
#bg-gradient.playmedia {background-image: radial-gradient(circle farthest-side at -50% -30%, #66f 1%, #1d212c);}
body.algorhythm {background-color:hsla(267.89473684210526, 67.06%, 33.33%, 1.00)}
body.chill-af {background-color:hsla(333.6842105263158, 51.82%, 56.86%, 1.00)}
body.deep-house-district {background-color:hsla(66.99386503067485, 75.12%, 57.45%, 1.00)}
body.deep-tech-minimal{background-color:hsla(240, 100.00%, 70.00%, 1.00)}
body.house-floor {background-color:hsla(19.999999999999996, 100.00%, 70.00%, 1.00);}
body.edm-mainstage {background-color:hsla(160.85889570552146, 75.12%, 57.45%, 1.00);}
body.techno-warehouse {background-color:hsla(240, 100.00%, 60.00%, 1.00);}
body.channel { background-image: linear-gradient(180deg, rgba(29, 33, 44, 0.4), rgba(29, 33, 44, 0.75));}
body.channel #bg-gradient {display: none;}
#roulette-section .browse {background: #000; height: 36vh; flex-direction: column;}
#roulette-section .roulette {display: none;}
#roulette-section .roulette-inner img {width: 100%; cursor: pointer;}
#roulette-section .stop, #roulette-section .again, #roulette-section .resultlabel {display: none;}
#roulette-section .resultlabel, #roulette-section .roulette-button {font-size: 14px; line-height: 1.5; letter-spacing: 1.0px; font-family: manropemedium; font-weight: 100;}
#roulette-section .roulette-button {font-size: 70%; opacity: 0.8; color: #FFF; background-color: rgb(81, 28, 142); border: 0; border-radius: 5px;
padding: 5px 8px; line-height: calc(1em + 10px);}
@media (max-width: 990px) {
#roulette-section .browse{height: auto;}
}
/*
#discover-holder .algorhythm, #discover-holder .minimal-tech, .slider .minimal-tech, .videotype.minimal-tech {background-color:hsla(267.89473684210526, 67.06%, 33.33%, 1.00)}
#discover-holder .chill-af, #discover-holder .chill, .slider .chill, .videotype.chill {background-color:hsla(333.6842105263158, 51.82%, 56.86%, 1.00)}
#discover-holder .deep-house-district, #discover-holder .deep-house, .slider .deep-house, .videotype.deep-house {background-color:hsla(66.99386503067485, 75.12%, 57.45%, 1.00)}
#discover-holder .deep-tech-minimal, #discover-holder .deep-tech-minimal .slider .deep-tech-minimal, .videotype.deep-tech-minimal {background-color:hsla(240, 100.00%, 70.00%, 1.00)}
#discover-holder .house-floor, #discover-holder .house, .slider .house, .videotype.house {background-color:hsla(19.999999999999996, 100.00%, 70.00%, 1.00)}
#discover-holder .edm-mainstage, #discover-holder .edm, .slider .edm, .videotype.edm {background-color:hsla(160.85889570552146, 75.12%, 57.45%, 1.00)}
#discover-holder .techno-warehouse, #discover-holder .techno, .slider .techno, .videotype.techno {background-color:hsla(240, 100.00%, 60.00%, 1.00)}
*/
.slide .videotype.advertisement, #discover-holder .advertisement, #discover-holder .advertisement, .slider .advertisement, .videotype.advertisement {background-color: rgba(0, 0, 0, 1.00); color: #FFF;}
#top-message-bar {line-height: 0.9em; height: 45px; padding-top: calc(13px); text-align: center; width: calc(100% - 120px); display: inline-block; font-size: 13px;}
#top-message-bar i {font-size: 18px; }
#discover-holder .channel-el {background-color: transparent !important}
.label-algorhythm {color:hsla(267.89473684210526, 67.06%, 33.33%, 1.00)}
.label-chill-af {color:hsla(333.6842105263158, 51.82%, 56.86%, 1.00)}
.label-deep-house-district {color:hsla(66.99386503067485, 75.12%, 57.45%, 1.00)}
.label-deep-tech-minimal{color:hsla(240, 100.00%, 70.00%, 1.00)}
.label-house-floor {color:hsla(19.999999999999996, 100.00%, 70.00%, 1.00)}
.label-edm-mainstage {color:hsla(160.85889570552146, 75.12%, 57.45%, 1.00)}
.label-techno-warehouse {color:hsla(240, 100.00%, 60.00%, 1.00)}
.bottomline-algorhythm {border-bottom: 2px solid hsla(267.89473684210526, 67.06%, 33.33%, 1.00)}
.bottomline-chill-af {border-bottom: 2px solid hsla(333.6842105263158, 51.82%, 56.86%, 1.00)}
.bottomline-deep-house-district {border-bottom: 2px solid hsla(66.99386503067485, 75.12%, 57.45%, 1.00)}
.bottomline-deep-tech-minimal{border-bottom: 2px solid hsla(240, 100.00%, 70.00%, 1.00)}
.bottomline-house-floor {border-bottom: 2px solid hsla(19.999999999999996, 100.00%, 70.00%, 1.00)}
.bottomline-edm-mainstage {border-bottom: 2px solid hsla(160.85889570552146, 75.12%, 57.45%, 1.00)}
.bottomline-techno-warehouse {border-bottom: 2px solid hsla(240, 100.00%, 60.00%, 1.00)}
h1 {font-size: 30px; line-height: 1.0; letter-spacing: 0.8px; font-family: manropeextrabold;}
h2 {font-size: 23px; line-height: 1.5; letter-spacing: 0.8px; font-family: manropesemibold;}
h3 {font-size: 18px; line-height: 1.5; letter-spacing: 1.0px; font-family: manropesemibold;}
h4 {font-size: 14px; line-height: 1.5; letter-spacing: 1.0px; font-family: manropemedium;}
h5 {font-size: 14px; line-height: 1.5; letter-spacing: 1.0px; font-family: manropemedium; font-weight: 100;}
p {font-size: 14px; line-height: 1.8; letter-spacing: 0.5px}
p.intro {font-size: 18px; line-height: 1.5; letter-spacing: 0.5px}
h1.ref-only {display: none;}
h2.subheader {font-size: 40px !important; padding-top: 1em;}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.navbar-dark .navbar-toggler {border-radius: 50%; border: 0; padding: 0.1em 0.35em;}
.navbar-dark .navbar-toggler:hover {background-color: #3b3b3b;}
.navbar-dark .navbar-toggler-icon {background-image: url("../img/menu.svg"); width: 1em; height: 1.5em;}
header #toggle-menu-label {opacity: 0.7; margin-right: 40px; cursor: pointer; font-size: 13px;}
header #toggle-menu-label:hover {opacity: 0.9;}
header .dt-dropdown-menu {clear: both; margin: 0 0 30px 0; text-align: left !important }
header .dt-dropdown-menu ul {list-style: none; padding: 0; }
header .dt-dropdown-menu a {color: rgba(255,255,255,.5)}
header .dt-dropdown-menu a:hover {color: rgba(255,255,255,.8)}
header #userstatus {background: #8f919a; border-radius: 50%; border: 0; position: absolute; top: 12px; right: 10px; font-size: 20px; width: 35px; height: 35px;}
header #userstatus:hover {background:#3b3b3b;}
header #userstatus:hover i { color: #F0F0F7;}
#user-options { margin-top: -40px; margin-bottom: 40px; margin-right: -5p; }
#user-options .badge {font-size: 0.75rem; position: absolute; right: 0; margin-top: -10px; background-color: rgb(81, 28, 142); color: #FFF;}
header #toggle-info-menu {cursor: pointer;}
header #toggle-info-label {font-size: 13px; float: left; margin-top: 23px; margin-left: 20px; opacity: 0.7; cursor: pointer;}
header #toggle-info-label:hover {opacity: 1;}
header #arrow-back {font-size: 32px; float: left; margin-top: 7px; opacity: 0.54;}
header #arrow-back:hover {opacity: 1;}
a, a:hover {color: #F0F0F7;}
/* menu */
#content, .top-nav-bar-container {margin-left:210px;}
.main-nav-container {
position: fixed;
left: 0%;
top: 0%;
right: auto;
bottom: 0%;
z-index: 2;
padding: 8px 24px 16px 18px;
border-right: 0.5px solid rgba(240, 240, 247, 0.5);
background-color: #1d212c;
}
.main-nav {font-size: 15px; font-weight: 400; text-align: left; letter-spacing: 1px; padding: 20px 0;}
.main-nav a i {margin: 0 8px; line-height: inherit; }
.main-nav-container .links-holder a {display: flex; line-height: 2.5em; color: #f0f0f7; opacity: 0.74; font-size: 14px;}
.main-nav-container .links-holder .dt-dropdown-menu a {line-height: 1.2; margin-left: 12px;}
.main-nav-container .links-holder a i {font-size: 24px; margin-left: 3px; width: 24px; margin-right: 15px;}
.main-nav-container .links-holder a:first-of-type i { margin-left: 0; margin-right: 18px;}
.main-nav-container .links-holder a:last-of-type i { margin-left: 10px; margin-right: 8px; }
.main-nav-container a.active {opacity: 1;}
.main-nav-container a:hover {text-decoration: none;}
.main-nav-container .channels-holder a {opacity: 1; margin-top: 0.7em;}
.main-nav-container .channels-holder a span {opacity: 0.54; padding-left: 6px;}
.main-nav-container .channels-holder a.active span {opacity: 1;}
strong.live {font-size: 16px; font-weight: 500; letter-spacing: 1px;}
#main, #content { min-height:100%; padding-top: 20px; padding-bottom: 60px}
.channels-holder a {display: flex; align-items: center; vertical-align: top;}
.channel-thumb {width: 26px; height: 26px; margin-right: 10px;
border: 1px solid #000; border-radius: 52px;
background-image: url("../img/example-bg.png");
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
display: inline-block
}
.channel-icon {width: 80px; height: 80px; margin-right: 24px;
border: 5px solid #000; border-radius: 160px;
background-image: url("../img/example-bg.png");
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
}
.slider-holder .channel-thumb {width: 32px; height: 32px; margin-right: 14px; }
.algorhythm-thumb {border-color:hsla(267.89473684210526, 67.06%, 33.33%, 1.00)}
.chill-af-thumb {border-color:hsla(333.6842105263158, 51.82%, 56.86%, 1.00)}
.deep-house-district-thumb {border-color:hsla(66.99386503067485, 75.12%, 57.45%, 1.00)}
.deep-tech-minimal-thumb{border-color:hsla(240, 100.00%, 70.00%, 1.00)}
.house-floor-thumb {border-color:hsla(19.999999999999996, 100.00%, 70.00%, 1.00)}
.edm-mainstage-thumb {border-color:hsla(160.85889570552146, 75.12%, 57.45%, 1.00)}
.techno-warehouse-thumb {border-color:hsla(240, 100.00%, 60.00%, 1.00)}
.stayhomefestival-thumb {background-image:url('../img/icons/channels/stayhomefestival.jpg'); border-color:rgba(255, 255, 255, 1)}
.algorhythm-thumb {background-image:url('../img/icons/channels/algorhythm.png')}
.chill-af-thumb {background-image:url('../img/icons/channels/chill-af.png')}
.deep-house-district-thumb {background-image:url('../img/icons/channels/deep-house-district.png')}
.deep-tech-minimal-thumb {background-image:url('../img/icons/channels/deep-tech-minimal.png')}
.house-floor-thumb {background-image:url('../img/icons/channels/house-floor.png')}
.edm-mainstage-thumb {background-image:url('../img/icons/channels/edm-mainstage.png')}
.techno-warehouse-thumb {background-image:url('../img/icons/channels/techno-warehouse.png')}
#ibiza-donate {width: 100%; text-align: center; margin: 20px 0; border-radius: 5px; border: 0; padding: 5px; font-size: 14px;}
#ibiza-donate i {color: red;}
/* Live top section */
#live-channel-holder {
display: none;
margin-top: 10px;
/* DEV change */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
/* DEV change #live-channel-holder div.channel-el {width: calc(100% / 8 - 20px); margin: 0 10px; text-align: center; display: inline-block;} */
#live-channel-holder div.channel-el { width: calc(100% / 8 - 20px); margin: 0 10px; text-align: center; display: inline-block;}
#live-channel-holder div.channel-el h4, #live-channel-holder div.channel-el h5 {font-size: 13px; margin-top: 1em; height: 4em;}
#live-channel-holder div.channel-el h5 {display: none;}
@media (max-width: 1110px) {
/* DEV change #live-channel-holder div.channel-el {width: calc(100% / 3 - 20px); margin: 0 10px 40px 10px;} */
#live-channel-holder div.channel-el {width: calc(100% / 4 - 20px); margin: 0 10px 40px 10px;}
}
/* DEV obsolete?
@media (max-width: 768px) {
#live-channel-holder div.channel-el {width: calc(100% / 3 - 60px); margin: 0 10px 40px 10px;}
}
@media (max-width: 480px) {
}
*/
/*
#live-channel-holder div.channel-el .img-holder {border-radius: 50%; }
#live-channel-holder div.channel-el .img-holder img {height: 100%; border-radius: 50%; position: absolute; top: 0;}
*/
#live-channel-holder div.channel-el .img-holder {
width: inherit;
position: relative;
overflow: hidden;
border-radius: 50%;
padding-top: calc(100% - 10px);
background-position:50% 50%;
background-size: cover;
background-repeat:no-repeat;
border: 5px solid transparent;
}
/*
#live-channel-holder div.channel-el .img-holder {
background-color: #cc568a;
transition: opacity 120ms ease-in-out;
background-blend-mode: normal;
background-blend-mode: multiply;
}
#live-channel-holder div.channel-el .img-holder:hover {
background-blend-mode: normal;
}
*/
#live-channel-holder .channel-el.stayhomefestival .img-holder {border-color:rgba(255, 255, 255, 1.00)}
#live-channel-holder .channel-el.stayhomefestival .img-holder {background-image:url('../img/icons/channels/stayhomefestival.jpg')}
#live-channel-holder .channel-el.algorhythm .img-holder {border-color:hsla(267.89473684210526, 67.06%, 33.33%, 1.00)}
#live-channel-holder .channel-el.chill-af .img-holder {border-color:hsla(333.6842105263158, 51.82%, 56.86%, 1.00)}
#live-channel-holder .channel-el.deep-house-district .img-holder {border-color:hsla(66.99386503067485, 75.12%, 57.45%, 1.00)}
#live-channel-holder .channel-el.deep-tech-minimal .img-holder {border-color:hsla(240, 100.00%, 70.00%, 1.00)}
#live-channel-holder .channel-el.house-floor .img-holder {border-color:hsla(19.999999999999996, 100.00%, 70.00%, 1.00)}
#live-channel-holder .channel-el.edm-mainstage .img-holder {border-color:hsla(160.85889570552146, 75.12%, 57.45%, 1.00)}
#live-channel-holder .channel-el.techno-warehouse .img-holder {border-color:hsla(240, 100.00%, 60.00%, 1.00)}
/*
#live-channel-holder .channel-el.algorhythm .img-holder {background-color:hsla(267.89473684210526, 67.06%, 33.33%, 1.00)}
#live-channel-holder .channel-el.chill-af .img-holder {background-color:hsla(333.6842105263158, 51.82%, 56.86%, 1.00)}
#live-channel-holder .channel-el.deep-house-district .img-holder {background-color:hsla(66.99386503067485, 75.12%, 57.45%, 1.00)}
#live-channel-holder .channel-el.deep-tech-minimal .img-holder {background-color:hsla(240, 100.00%, 70.00%, 1.00)}
#live-channel-holder .channel-el.house-floor .img-holder {background-color:hsla(19.999999999999996, 100.00%, 70.00%, 1.00)}
#live-channel-holder .channel-el.edm-mainstage .img-holder {background-color:hsla(160.85889570552146, 75.12%, 57.45%, 1.00)}
#live-channel-holder .channel-el.techno-warehouse .img-holder {background-color:hsla(240, 100.00%, 60.00%, 1.00)}
*/
#live-channel-holder .channel-el.algorhythm .img-holder {background-image:url('../img/icons/channels/algorhythm.png')}
#live-channel-holder .channel-el.chill-af .img-holder {background-image:url('../img/icons/channels/chill-af.png')}
#live-channel-holder .channel-el.deep-house-district .img-holder {background-image:url('../img/icons/channels/deep-house-district.png')}
#live-channel-holder .channel-el.deep-tech-minimal .img-holder {background-image:url('../img/icons/channels/deep-tech-minimal.png')}
#live-channel-holder .channel-el.house-floor .img-holder {background-image:url('../img/icons/channels/house-floor.png')}
#live-channel-holder .channel-el.edm-mainstage .img-holder {background-image:url('../img/icons/channels/edm-mainstage.png')}
#live-channel-holder .channel-el.techno-warehouse .img-holder {background-image:url('../img/icons/channels/techno-warehouse.png')}
/*
#live-channel-holder .channel-el.algorhythm h4 {color:hsla(267.89473684210526, 67.06%, 33.33%, 1.00)}
#live-channel-holder .channel-el.chill-af h4 {color:hsla(333.6842105263158, 51.82%, 56.86%, 1.00)}
#live-channel-holder .channel-el.deep-house-district h4 {color:hsla(66.99386503067485, 75.12%, 57.45%, 1.00)}
#live-channel-holder .channel-el.deep-tech-minimal h4 {color:hsla(240, 100.00%, 70.00%, 1.00)}
#live-channel-holder .channel-el.house-floor h4 {color:hsla(19.999999999999996, 100.00%, 70.00%, 1.00)}
#live-channel-holder .channel-el.edm-mainstage h4 {color:hsla(160.85889570552146, 75.12%, 57.45%, 1.00)}
#live-channel-holder .channel-el.techno-warehouse h4 {color:hsla(240, 100.00%, 60.00%, 1.00)}
*/
/* # stayhoefestival */
#timetable-embed {width: 100%; height: 80vh;}
#stayhomefestival-info i {float: right; font-size: 120%; cursor: pointer; margin: 10px 0 0 0;}
#stayhomefestival-info {background-color: rgba(255, 255, 255, 0.2); padding: 20px; margin: 0 0 40px 0; }
.snippet-holder {margin: 20px 0;}
.snippet-holder a {text-decoration: underline;}
.read-more-toggle {font-size: 90%; opacity: 0.8; color: #FFF; background-color: rgb(81, 28, 142); border: 0; border-radius: 5px; padding: 5px 8px; line-height: calc(1em + 10px); margin: 0em; width: 8em; text-align: center;}
#tune-in {font-size: 90%; opacity: 0.8; color: #FFF; background-color: rgb(81, 28, 142); border: 0; border-radius: 5px;
padding: 5px 8px; line-height: calc(1em + 10px); margin-left: 0em;}
/* Miscellaneous */
#player-holder {position: relative;}
.video-ad-overlay {
position: absolute;
top: 0;
left: 0;
font-size: 15px;
cursor: pointer;
width: 100%;
text-align: center;
padding: 15px 10em 15px 10px;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
}
.video-ad-overlay span {font-size: 80%; float: left; padding-top: 0.2em;}
.player-container {
position: relative;
display: inline-block;
video {
height: 100%!important;
margin: 0 auto;
}
}
.top-divider {margin-top: 60px; padding-top: 40px; border-top: 2px solid rgb(255, 255, 255, 0.5);}
#tune-in-large {font-size: 100%; opacity: 0.8; color: #FFF; background-color: rgb(81, 28, 142); border: 0; border-radius: 5px;
padding: 5px 8px; line-height: calc(1em + 10px); width: 50%; text-align: center; margin: 20px auto; display: inline-block}
.tune-in-medium {font-size: 80%; opacity: 0.8; color: #FFF; background-color: rgb(81, 28, 142); border: 0; border-radius: 5px;
padding: 5px 8px; line-height: calc(1em + 10px); width: calc(20% - 15px); text-align: center; margin: 5px; display: inline-block}
.tune-in-medium.active {background-color: #000;}
#tune-in-large a {color: #FFF; text-decoration: none}
.tune-in-medium a {color: #FFF; text-decoration: none}
#load-more {text-align: center; margin: 60px auto; clear: both; display: block; width: 20vw;}
.browsewrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin-right: -24px;
}
.browse {
font-size: 24px;
line-height: 1em;
width: auto;
min-width: 22%;
height: calc(24px + 80px);
margin: 12px 24px 12px 0px;
padding: 40px 12px;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 3;
-webkit-flex: 3 100px;
-ms-flex: 3 100px;
flex: 3 100px;
border-radius: 8px;
background-color: #33f;
text-decoration: none;
text-align: center;
}
@media (max-width: 768px) {
.browse {
height: calc(22px + 80px);
font-size: 22px;
min-width: 30%;
}
}
@media (max-width: 420px) {
.browse {
height: calc(22px + 80px);
font-size: 19px;
min-width: 51%;
}
.
}
.channel-thumbs .browse {flex-direction: column; padding: 20px 12px; text-align: center; }
.channel-thumbs .browse * {align-self: center}
.browse .genre-label {font-size: 70%; display: block; }
.browse:hover {text-decoration: none;}
#channels-holder .browse {background-color: #1d212c; color: #f0f0f7; text-align: center !important; font-size: 3.5vh; height: 10vh; line-height: 10vh; font-weight: 900; text-transform: uppercase; padding: 0 2vw;}
#channels-holder .browseX {background-color: #1d212c; color: #f0f0f7;}
/* Discover */
#discover-holder .section {padding-bottom: 50px; }
#ajax-search-el input[type=search] {width: 100%; border-radius: 4px; background-color: #1d212c; color: #f0f0f7; border: 0; padding: 5px 10px;}
#ajax-search-el input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; height: 20px; width: 20px; background: red; border-radius: 10px}
#ajax-search-el button[type=submit] {width: 60px; background: #33f; color: #F0F0F7; border: 0; }
#discover-holder h2 span {text-transform: capitalize}
/* More */
#more-holder .section {padding-bottom: 50px; }
#more-holder .browse { background-color: #1d212c; color: #f0f0f7; text-align: center !important; font-size: 3vw; height: 40vh; line-height: 25vh; text-transform: uppercase; font-weight: 800; width: 48%; flex: 1 0 48%;
padding-left: 8vw}
#more-holder h2 {font-size: 40px;}
#more-holder h3 {font-size: 32px;}
#more-holder h3.subheader {margin-top: 50px;}
/* More Blog */
.featured-section img {width: 100%; margin-bottom: 40px; border-radius: 8px;}
.articles-section img {width: 100%; margin-bottom: 20px; border-radius: 4px;}
.articles-section {display: flex; flex-flow: row wrap; justify-content: space-between; }
.articles-section .blog-item {border-top: 1px solid rgba(240, 240, 247, 0.5); cursor: pointer;}
.articles-section .blog-item h4 {font-size: 80%;}
#more-holder .by {font-size: 13px; margin-top: 10px; margin-bottom: 30px;}
#more-holder .by a {float: right;}
.masonry {display: flex; flex-flow: column wrap; width: 100%; margin: 0 -20px;}
.masonry-brick {width: calc(25% - 40px); margin: 10px; padding: 20px; position: relative; margin-bottom: 40px; display: inline-block; visibility: hidden;}
.masonry-brick.brick--loaded {
visibility: visible;
}
.masonry-brick img {
width: 100%;
height: auto;
}
#more-holder .posted-by {font-size: 13px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(240, 240, 247, 0.5);}
#more-holder .posted-by a {float: right;}
.read-more-box {max-height: 20vh; position: relative; overflow: hidden; }
.read-more-box:after {
content:"";
position:absolute;
top:60%;
left:0;
height:40%;
width:100%;
background: linear-gradient(rgba(33, 34, 71,0), rgb(33, 34, 71));
}
.read-more-button {color: rgba(240, 240, 247, 0.5); font-size: 15px; font-weight: 700; line-height: 2em;}
.read-more-button:hover {color: rgba(240, 240, 247, 1); text-decoration: none;}
/* Channels */
#channels-holder #channel-top .channel-icon {float: right; margin: 0 0 24px 24px}
#now-playing {padding: 50px 0;}
#now-playing .now-visual {display: inline-block; width: 60%; float: left;}
#now-playing .now-visual img {width: 100%; border-radius: 8px;}
#now-playing .now-visual button {background-color: #1d212c; border-radius: 3px; border: 0; width: 100%; text-align: center; margin-top: 24px; font-size: 14px; letter-spacing: 1px; padding: 5px;}
#now-playing .now-visual button span {color: #F0F0F7 !important;}
#now-playing .now-details {display: inline-block; width: calc(40% - 40px); margin-left: 40px;}
#now-playing .now-details h5 {margin-top: 0px; margin-bottom: 40px; font-size: 15px; font-weight: 300; letter-spacing: 1px;}
#now-playing .now-details h2 {margin-bottom: 4px; font-size: 30px; line-height: 1; letter-spacing: 0.8px;}
#now-playing .now-details h4 {margin: 0x; font-size: 18;line-height: 1.5; font-weight: 500; letter-spacing: 1px;}
#now-playing .now-details .label {margin-top: 20px; margin-bottom: 8px; color: rgba(240, 240, 247, 0.5); font-size: 13px;}
#now-playing .now-details .labels {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 8px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; opacity: 0.54;}
#now-playing .now-details .date {font-size: 13px; line-height: 1; letter-spacing: 0.8px; color: rgba(240, 240, 247,1);}
.videotypeXX {margin: 0 16px; padding: 5px 10px; background-color: #511c8e; font-size: 11px; letter-spacing: 0.8px; color: rgba(240, 240, 247, 1); white-space: pre;}
.videotype{margin: 0 16px; padding: 5px 10px; background-color: #3b3b3b; font-size: 11px; letter-spacing: 0.8px; color: rgba(240, 240, 247, 1); white-space: pre; }
/* border: 1px solid rgba(240, 240, 247, 1); border-radius: 3px; */
#now-playing .now-details .description {margin-bottom: 40px; font-size: 13px; line-height: 1.8; font-weight: 400;letter-spacing: 0.6px;}
body.algorhythm .videotype {background-color:hsla(267.89473684210526, 67.06%, 33.33%, 0.80)}
body.chill-af {background-color:hsla(333.6842105263158, 51.82%, 56.86%, 0.80)}
body.deep-house-district .videotype {background-color:hsla(66.99386503067485, 75.12%, 57.45%, 0.80)}
body.deep-tech-minimal .videotype {background-color:hsla(240, 100.00%, 70.00%, 0.80)}
body.house-floor .videotype {background-color:hsla(19.999999999999996, 100.00%, 70.00%, 0.80)}
body.edm-mainstage .videotype {background-color:hsla(160.85889570552146, 75.12%, 57.45%, 0.80)}
body.techno-warehouse .videotype {background-color:hsla(240, 100.00%, 60.00%, 0.80)}
#channels-holder.live-player #now-playing .now-visual {display: block; width: 100%; float: none;}
#channels-holder.live-player #now-playing .now-details {block; width: 100%; float: none; margin-left: 0; margin-top: 40px;}
#float-holder {width: 20vw; position: fixed; top: 60px; right: 40px; z-index: 99999999;}
@media (max-width: 990px) {
#now-playing .now-visual {display: block; width: 100%; float: none;}
#now-playing .now-details {block; width: 100%; float: none; margin-left: 0; margin-top: 40px;}
}
/* info pages */
#info .info-section {margin-top: 60px;font-size: 15px;}
@media (min-width: 9px) {
#info .info-section row {margin-left: 0; margin-right: 0; }
}
.info-section h2 {color: #c4c5ff;}
.info-section h3 {margin-top: 20px; color: #c4c5ff;}
.info-section .info-card h3 {color: #5d0090;}
.info-section .info-card a
.info-section .info-card a, .info-section .info-card button a:hover, .info-section .info-card button a:hover {color: #FFF; text-decoration: none;}
.info-block {margin-top: 60px;}
.full-visual {width: 100%; margin-bottom: 20px}
.watch-button {width: 100%; display: inline-block; margin: 0 auto 10px auto; text-transform: uppercase; background: #3b3b3b; color: #FFF; border: 1px solid #FFF; padding: 5px; border-radius: 3px; text-align: center;}
.watch-button:hover {background: #5d0090; border: 1px solid #5d0090; text-decoration: none;}
.info-card { background: #FFF; opacity: 0.9; text-align: center; color: #3b3b3b;
box-model: border-box;
border: 10px solid transparent;
background-clip:padding-box;
border-radius: 5px;
display: flex; flex-flow: column; justify-content: space-between;
}
.info-card p.l {text-align: left}
.info-card img {width: 50%; margin: 20px auto 10px auto;}
.info-card .get-button {width: 80%; display: inline-block; margin: 0 auto 10px auto; text-transform: uppercase; background: #3b3b3b; color: #FFF; border: 0; padding: 5px; border-radius: 3px;}
.info-card .get-button:hover {background: #5d0090; text-decoration: none;}
.info-card img.twitch, .info-card img.youtube {width: 30%; margin-top: 40px}
.info-card img.facebook {width: 26%; margin-top: 40px}
/* TMP fixes, new design */
body.ajaxload #main {padding-right: calc(20vw + 30px);}
#home #section-links {padding: 0.5em 0}
#home #section-links a {opacity: .4; font-size: 18px; line-height: 1.5; padding: 8px 0; border-bottom: 2px solid transparent;}
#home #section-links a:hover { border-bottom: 2px solid #41e4b0; text-decoration: none;}
#home #section-links a.active {opacity: 1; border-bottom: 2px solid #41e4b0;}
#section-links a.active:hover {text-decoration: none; cursor: inherit;}
#home #section-links a:nth-child(2) {float: right;}
#home h2.homesection {display: flex; margin-top: 60px;}
#home .whatsup-links h3 {margin-bottom: 1em;}
#home h2 { opacity: 0.7; }
#home h2:hover {opacity: 1}
#home h2 a {text-decoration: none;}
#home h2:hover a {text-decoration: underline;}
#videoPoster {width: 100%; background-size: cover; margin-bottom: 40px; background-position: center center; background-repeat: no-repeat; }
#videoPoster img {width: 100%; opacity: 0.5;}
#videoPoster img:hover {opacity:1;}
#tune-in {font-size: 90%; opacity: 0.8; color: #FFF; background-color: rgb(81, 28, 142); border: 0; border-radius: 5px;
padding: 5px 8px; line-height: calc(1em + 10px); margin-left: 0em;}
#channel-links { padding-bottom: 40px;}
#toggle-channel-menu {display: none;}
@media (max-width: 520px) {
#channel-links {display: none}
#toggle-channel-menu {display: block;}
}
#home #channel-links .slider {padding: 20px 0;}
#home #channel-links .slider div a {width: 19vw; height: 19vw; border: 5px solid #F0F0F7; border-radius: 50%; overflow: hidden; margin: 0 2vw; display: block; background-repeat: no-repeat; background-size: cover; background-position: center center; text-decoration: none;}
#home #channel-links .slider div a img {width: inherit; height: inherit; border-radius: 50%;}
.slick-track{display: flex;}
.slick-slide{
display: flex;
height: auto;
}
.slider-holder, .fader-holder {margin-top: 80px;}
.slider div.slide, .no-slider div.slide {font-size: 13px; position: relative}
.slider div .inner, .fader div .inner, .no-slider div .inner {margin: 10px !important; padding: 0 !important; cursor: pointer;}
.slider div .inner a, .no-slider div .inner a {text-decoration: none;}
.slider div img, .fader div img, .no-slider div img {width: 100%; }
.slider div .meta, .fader div .meta, .no-slider div .meta { margin: 1em 0;}
.slide .actions {display: none; background: rgba(29,33,44, 0.90); position: absolute; top: 0; left: 0; width: 100%; padding: 20px; z-index: 2; line-height: 2.2;}
.slide .actions i {width: 1.1em; margin-right: 0.3em}
.slide .actions i.active {color: red;}
.slide .actions a {text-decoration: none;}
.slide .actions div {cursor: pointer;}
.slide .videotype {margin: 0 8px 8px 0; display: inline-block; opacity: 0.8}
#discoverbutton {width: 100%; text-align: center; padding: 8px 12px; background-color: #511c8e; color: #FFF; border-radius: 5px; border: 0;}
.no-slider {display: flex; flex-direction: row; flex-wrap: wrap;}
header {
text-align: left;
position: fixed; z-index: 999;
width: 100%;
top: 0;
min-height: 60px;
background-image: none !important;
background: #1d212c;
}
footer {
display: none;
border-top: 1px solid #000;
text-align: center;
position: fixed; z-index: 999;
width: 100%;
bottom: 0;
min-height: 40px;
background-image: none !important;
background: #1d212c;
}
header .navbar-brand {margin: 8px 18px ; width: 32px; height: 32px; float: left;}
header .main-nav-container .navbar-brand {margin: 0; width: 48px; height: 48px; float: none;}
header #main-logo {width: inherit;}
header .main-link {font-weight: 700; color: #F0F0F7;}
navbar-dark .navbar-toggler {margin: 10px 7px 10px 0;}
.navbar-nav .dropdown-menu {left: -17px;}
.navbar-nav .dropdown-menu a {text-transform: uppercase; font-size: 14px; line-height: 28px;}
.navbar-nav .dropdown-menu a i {margin-right: 0.5em;}
@media (max-width: 520px) {
.main-nav-container {display: none;}
}
header .inner, #content .inner, footer .inner {padding: 0 40px; margin: 0 auto;}
#content .inner {max-width: 1440px; }
header #user-status {display: block; font-size: 14px; line-height: 14px; padding-left: 15px; padding-right: 4px}
header #user-status span {font-weight: bold; padding: 0 12px;}
header #user-status i {font-size: 16px;}
header #user-status #user-dropdown {float: right;}
header .navbar {font-size: 16px;}
header a.nav-link, header .channel-thumb-wrapper a span {font-size: 14px; line-height: 18px;}
header #user-options ul.navbar-nav {margin-top: 45px; text-align: right; }
header a.nav-link i {font-size: 18px;}
header a.nav-link.active {outline: none;}
header .active a.nav-link {padding-bottom: 4px;border-bottom: 4px solid #455888; }
#content {
position: relative;
/* top: 60px; min-height: calc(100vh - 60px); */
padding-top: 80px;
}
#content .container {
z-index: 2;
position: relative;
}
#breadcrumbs {font-size: 60%; padding: 0 0 20px 0; text-transform: capitalize;}
#breadcrumbs i {margin: 0 1em;}
#breadcrumbs i:first-of-type {margin-left: 0;}
#watchDetailPage #breadcrumbs a {color: #FFF !important;}
@media (max-width: 440px) {
#breadcrumbs span.last-el {display: none;}
}
/* Watch */
#videoHolder {margin-bottom: 30px; border-radius: 8px;}
#videoDetails div.info-sectionX {padding: 20px 0;}
div.info-section .additional-info {opacity: 0.8; clear: both;}
div.info-section .additional-info span {display: inline-block; width: 9em;}
div.slider {padding: 0; }
.videoDetails .date { margin-bottom: -24px; margin-right: 120px;}
.videoDetails .actions {display: block; text-align: right; font-size: 24px; margin-bottom: 0.5em;}
.videoDetails .actions div {display: inline; padding-right: 0.5em;}
.videoDetails .actions div i {opacity: 0.5; cursor: pointer;}
.videoDetails .actions div i.active {opacity: 1; color: rgb(81, 28, 142);}
.videoDetails .actions div i:hover {opacity: 0.8}
.slider .slide {padding: 0; margin: 0;}
.slider div .inner, .fader div .inner, .no-slider div .inner {margin: 10px; padding: 0; cursor: pointer; font-size: 13px;}
.slider div .inner img, .fader div .inner img, .no-slider div .inner img {width: 100%; border-radius: 8px;}
#videoDetails .video-round-thumb {width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin: 10px 20px 20px 0; display: block; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; text-decoration: none; float: left; display: flex; overflow: hidden; position: relative; align-items: center; justify-content: center;}
#videoDetails .video-round-thumb img {height: 100%; display: none;}
.video-js .vjs-big-play-button {font-size: 6em;}
#altchannel-holder {display: none;}
#altchannel-holder #channel-links {display: flex; flex-flow: row wrap; justify-content: space-between;}
#altchannel-holder .channel-thumb-wrapper {width: 80px; display: inline-block;}
#altchannel-holder .channels-holder a {display: inline-block !important; text-align: center; padding: 12px 0;}
#altchannel-holder .channel-thumb-wrapper span {display: inline-block; font-size: 11px; width: 80%;;}
.infoHeader {border-bottom: 0.5px solid rgba(240, 240, 247, 0.5); margin-bottom: 32px;}
.infoHeader .date {font-size: 13px; line-height: 1; letter-spacing: 0.8px; color: rgb(240, 240, 247); opacity: 0.5}
.infoHeader .videotype {margin: 0 8px 8px 0; display: inline-block; float: right;}
.episode-tracklist {font-size: 90%; padding: 10px 20px 5px 20px; background: #66f; border-radius: 5px; margin-bottom: 40px; display: none;}
#tracktable {font-size: 90%;}
.episode-tracklist h2 { cursor: pointer;}
.episode-tracklist h2 i {float: right; margin-top: 10px;}
.additional-info {border-top: 0.5px solid rgba(240, 240, 247, 0.5); margin-top: 32px; padding-top: 1em;}
/* Tracklisting */
#tracktable {width: 100%; }
#tracktable td {vertical-align: top; padding: 0.3em;}
#tracktable tr { border-top: 1px solid #eee;}
#tracktable tr.active { background: rgba(0,0,0,0.2);}
#tracktableXX tr:hover { background: rgba(0,0,0,0.05);}
#tracktable .trackpost {color: #3b3b3b; cursor: pointer;}
.episode-tracklist .now-playing, .episode-tracklist .fa-chevron-down {display: none;}
.episode-tracklist.condensed .fa-chevron-down {display: inline;}
.episode-tracklist.condensed .fa-chevron-up {display: none;}
.episode-tracklist.condensed.running .tracklist {display: none;}
.episode-tracklist.condensed.running .now-playing {display: inline;}
.fav-track-active, .episode-tracklist i.active {color: #000;}
.episode-tracklist.condensed #tracktable tr.active {display: table-row; border-top: 0; margin-bottom: 10px; border-radius: 5px;}
.episode-tracklist.condensed #tracktable tr { display: none;}
#tracktable .jumpTo { cursor: pointer;}
#tracktable a:hover { text-decoration: none; color: #000;}
#tracktable .multi-trackicons {float: right;}
#tracktable .multi-trackicons i:hover {color: #000; cursor: pointer;}
/* Creators */
.detailedinfo .profile-cover { width: 100%; height: 200px; margin-bottom: 0px; background-color: #511c8e; text-align: center; display: flex; justify-content: center; }
.detailedinfo .profile-cover * { align-self: center;}
.detailedinfo div.infoHeader {background: #1d212c; padding: 30px; display: flex; justify-content: center; font-size: 11px; letter-spacing: 0.8px; color: rgba(240, 240, 247, 0.5)}
.detailedinfo div.infoHeader .video-round-thumb {width: 20vw; height: 20vw; border-radius: 50%; overflow: hidden; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; margin-right: 40px; overflow: hidden; position: relative; align-items: center; align-self: center;}
.detailedinfo div.infoHeader div.info { align-self: center; }
div.infoHeader h1 { margin: 0px; font-size: 30px; line-height: 1.1; font-weight: 500; letter-spacing: 1px; padding-bottom: 14px; color: rgba(240, 240, 247, 1)}
div.infoHeader h1 span { font-size: 20px; font-weight: 100;}
div.infoHeader h2 {margin-top: 0px;
margin-bottom: 0px;
font-size: 18px;
line-height: 1.5;
font-weight: 500;
letter-spacing: 1px;}
.detailedinfo div.infoHeader .creatortype {margin: 0px 20px 0px 0px; padding: 2px 10px; background-color: #511c8e; display: inline-block; color: rgba(240, 240, 247, 1)}
.detailedinfo div.infoHeader .video-round-thumb img {height: 100%; display: none;}
.detailedinfo div.infoDetails {color: #f0f0f7; -webkit-box-flex: 0; -webkit-flex: 0 auto; -ms-flex: 0 auto; flex: 0 auto; font-size: 13px; line-height: 1.8; font-weight: 300; letter-spacing: 1px; }
.detailedinfo ul.socials {list-style: none; padding: 20px 0; border-top: 1px solid #f0f0f7; border-bottom: 1px solid #f0f0f7; display: flex; justify-content: center; }
.detailedinfo ul.socials li {margin: 0 10px; display:block; height: 2em; width: 2em; border-radius: 50%; background-color: #511c8e; text-align: center; line-height: 2em; font-size: 14px;}
.detailedinfo ul.socials li a {color: rgba(240, 240, 247, 0.5)}
.detailedinfo ul.socials li a:hover {color: rgba(240, 240, 247, 1)}
.detailedinfo h2 { margin: 25px 0px; font-size: 30px; line-height: 1; font-weight: 800; }
.slider .slide, .no-slider .slide {background: #1d212c; border-radius: 8px; padding: 5px; margin: 0 10px 10px 0; width: calc(25% - 10px);}
footer #main-links .links-holder {display: flex; justify-content: space-between;}
footer #main-links .links-holder a {width: 33%; text-align: center; display: inline-block; opacity: 0.5; text-decoration: none;}
footer #main-links .links-holder a.active, footer #main-links .links-holder a:hover {opacity:1; text-decoration: none;}
footer #main-links .links-holder a i {display: block; font-size: 24px; margin-bottom: 0; line-height: 32px;}
footer #main-links .links-holder a span {display: block; font-size: 9px;}
footer #main-links .main-nav {padding: 10px 0;}
body.bottommenu .main-nav-container {display: none;}
body.bottommenu footer {display : block}
body.bottommenu #content, body.bottommenu .top-nav-bar-container {margin-left: 0;}
@media (max-width: 1150px) {
.masonry-brick {width: calc(33% - 40px);}
.no-slider div.slide {width: calc(33% - 10px)}
.slider div.slide {width: 33%;}
}
@media (max-width: 880px) {
.masonry-brick {width: calc(50% - 40px);}
.no-slider div.slide {width: calc(50% - 10px);}
.slider div.slide {width: 50%;}
}
@media (max-width: 768px) {
#content {padding-top: 50px;}
header #userstatus {font-size: 12px; width: 24px; height: 24px; top: 18px;}
.main-nav-container {padding-right: 10px;}
.main-nav-container a span, strong.live {display: none;}
.main-nav a i {font-size: 18px; margin: 0 3px;}
header .main-nav-container .navbar-brand {width: 32px; height: 32px;}
#content, .top-nav-bar-container {margin-left: 50px;}
header .dt-dropdown-menu ul {margin-left: -5px; margin-bottom: 10px;}
}
@media (max-width: 520px) {
.masonry-brick {width: 100%;}
.slider div.slide, .no-slider div.slide {width: 100%;}
#altchannel-holder.home-el {display: block;}
header #arrow-back {margin-top: 7px;}
#content, .top-nav-bar-container {margin-left: 0;}
h1 {font-size: 30px;}
h2 {font-size: 20px;}
h3 {font-size: 18px;}
h4 {font-size: 13px;}
h5 {font-size: 11px;}
h6 {font-size: 11px;}
p {font-size: 11px; }
p.intro {font-size: 14px;}
header .inner, #content .inner, footer .inner {padding: 0 20px 0 20px;}
.slider div .inner, .no-slider div .inner {padding: 0 10px !important; margin: 20px 0 !important;}
}
.ias-nav {display: none;}
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
/* login & edit */
#loginDiv, #editDiv {background:rgba(0,0,0,0.5);}
.modal-backdrop {display: none;}
.modal-backdrop {display: none;}
.modal-header .close, .modal-header .close:hover {color: #FFF; opacity: 0.7}
.modal-header .close:hover {opacity: 1}
.modal-content {background-image: radial-gradient(circle farthest-side at -50% -50%, #403083 75%, #1d212c); color: #FFF; font-size: 15px;}
.modal-content input[type=text], .modal-content input[type=password], .modal-content textarea {background: transparent; border: 0; border-bottom: 1px solid #FFF; color: #FFF; border-radius: 0; outline: none;}
.modal-content textarea {width: 100%; height: 4em;}
.modal-content input[type=checkbox] {margin-right: 14px;}
.check-label {text-transform: uppercase; font-size: 13px; opacity: 0.7; cursor: pointer}
#show-resetbox {padding-top: 1em;}
label.error {text-transform: uppercase; font-size: 13px; opacity: 0.7; color: #FFF; line-height: 1.5;}
.login-button {background: #000; color: #FFF; border: 0; border-radius: 5px; display: block; text-align: center; text-transform: uppercase; font-size: 15px; width: 100%; text-decoration: none; opacity: 0.7}
.login-button:hover {color: #FFF; opacity: 1}
#errorbox {text-align: center; font-weight: bold; padding-top: 0.5em; display none;}
.facebook-login span.fb, a#create-account {text-decoration: underline;}
.login-trigger {font-size: 13px;}
#resetdiv, #resultbox {display: none;}
#resetbox.standalone {display: block}
#editDiv .error {color: red; display: none;}
@media (max-width: 340px) {
#loginDiv .ml-5, #loginDiv .mx-5 {margin-left: 0.5rem!important; margin-right: 0.5rem!important;}
}
.isEditable, .isEditableImage, .isEditableDescription {position: relative}
.isEditable .editbutton, .isEditableImage .editbutton, .isEditableDescription .editbutton {display: none; }
.isEditable:hover .editbutton,
.isEditableImage:hover .editbutton,
.isEditableDescription:hover .editbutton {
display: inline; position: absolute; white-space: nowrap; background :#FFF; border: 2px solid #511c8e; color: #511c8e;
left: 50%; transform: translateX(-50%); top: 50%; transform: translateY(-50%);
font-size: 14px; font-weight: 100; padding: 5px 10px; line-height: 1em; cursor: pointer;}
#editDiv {background:rgba(0,0,0,0.5);}
.btn {background: #000; color: #FFF;}
.btn {background: #AAA; color: #000; opacity: 0.7}
.btn:hover {background: #AAA; color: #000; opacity: 1}
.btn-active {color: #000; background: #FFF; opacity: 0.9}
.btn-active:hover {background: #FFF; color: ##000; opacity: 1}
.editsocials label {width: 20%; font-size: 15px;}
.editsocials input {width: 73%; margin-left: 5%;}
#imageContainer img {max-width: 20%; margin: 0 auto;}
#editDiv #publishertitle {font-size: 30px; font-weight: 500; font-weight: 500; letter-spacing: 1px;}
#editDiv input:focus,
#editDiv select:focus,
#editDiv textarea:focus,
#editDiv button:focus {
outline: none;
}
#DescriptionButtonSet {display: none; text-align: center; padding: 20px 0;}
#dropandcrop iframe {border: 0; width: 100%; height: 66vh; border: 0;}
/* Account creation */
.formError .formErrorContent {background: #cc568a; border: 1px solid #ddd;}
.formError {width: 100% !important}
.credentials-form input[type=text],.credentials-form input[type=email], .credentials-form input[type=password], .credentials-form textarea {background: transparent; border: 0; border-bottom: 1px solid #FFF; color: #FFF; border-radius: 0; outline: none; width: 100%; font-size: 17px; padding: 5px 15px; }
/*
.credentials-form input[type=text]:focus, .credentials-form input[type=email]:focus, .credentials-form input[type=password]:focus {outline-color: transparent; outline-style: none;}
.credentials-form input[type=text]:hover, .credentials-form input[type=email]:hover, .credentials-form input[type=password]:hover {background: rgba(255,255,255,255.5);; border: 0; border-bottom: 1px solid #FFF; color: #000;}
*/
.credentials-form input[type=text]:focus, .credentials-form input[type=email]:focus, .credentials-form input[type=password]:focus, .credentials-form input[type=text]:hover, .credentials-form input[type=email]:hover, .credentials-form input[type=password]:hover
{background: rgba(0, 0, 0, 0.3); color: #FFF; padding: 5px 15px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.credentials-form input[type=checkbox] {margin-right: 14px;}
.credentials-form label {text-transform: uppercase; font-size: 13px; opacity: 0.7;}
.credentials-form .smallprint label {cursor: pointer;}
#username-check, #email-check {display: none;}
.signup-button, .update-button {background: #000; color: #FFF; border: 0; border-radius: 5px; display: block; text-align: center; text-transform: uppercase; font-size: 15px; width: 100%; text-decoration: none; opacity: 0.7}
.signup-button:hover, .update-button:hover {color: #FFF; opacity: 1}
#account-created {display: none;}
/* Settings */
.credentials-block {padding-bottom: 40px;}
#user-holder .user-like-info, #user-holder .user-prefs {background: rgba(0, 0, 0, 0.3); padding: 40px; margin: 40px 0 ; font-size: 18px; line-height: 2.2}
#user-holder .user-like-info a {text-decoration: underline;}
calc(100% - 240px);}
#user-holder .user-prefs input.save-button {font-size: 90%; opacity: 0.8; color: #FFF; background-color: rgb(81, 28, 142); border: 0; border-radius: 5px; padding: 5px 8px; line-height: calc(1em + 10px);text-align: center; border: 0; width: 100%;}
#user-holder .user-prefs input.save-button:hover {opacity: 1; }
#user-holder .user-prefs label {display: block;}
/* banners */
.banner-masthead img {width: 100%; margin-bottom: 40px; margin-top: -40px; }
@media (max-width: 768px) {
.banner-masthead img {margin-top: 0px;}
}
.adcard {position: relative}
.adcard img {z-index: 1}
.adcard .advertisement {z-index: 2; position: absolute; bottom: 10px; left: 10px;}