html, body { width: 100.0%; min-width: 375px; }
* { list-style: none; margin: 0; padding: 0; border: 0; border-style: solid; transition: all 150ms ease-in-out 0ms; }
img, video { display: block; }
/* --- Layout --- */
.sector { position: relative; width: 100.0%; height: auto; padding: 6.00vw 0; }
.sector > div { position: relative; width: calc(100.0% - 12vw); margin: 0 auto; }
.row { width: calc(100.0% + 8.00vw); margin: -4.00vw; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.row > * { flex: 1 1 320px; margin: 4.00vw; }
.grid { width: calc(100.0% + 2.00vw); margin: 0 -2.00vw; padding: 1.00vw; }
.grid:after { content: ''; display: block; clear: both; }
.grid-sizer { width: 10.0%; }
.grid-item { float: left; margin: 1.00vw; }
@media screen and ( min-width: 0 ) { .grid-item { width: calc(100.0% - 4.00vw); }}
@media screen and ( min-width: 667px ) { .grid-item { width: calc(50.00% - 3.00vw); }}
@media screen and ( min-width: 1024px ) { .grid-item { width: calc(33.33% - 2.66vw); }}
@media screen and ( min-width: 1200px ) { .grid-item { width: calc(25.00% - 2.50vw); }}
/* --- Header --- */
header { position: absolute; z-index: 3; top: 0; left: 0; width: 100.0%; height: 60px; }
header > div { position: relative; z-index: 2; width: calc(100.0% - 12vw); height: 100.0%; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; }
header span { height: 100.0%; }
header span > a { margin: 10px 10px 10px 0; }
header span > a > img { height: 40px; width: auto; }
header .hh { height: 40px; width: 40px; margin-top: 10px; background: url('../img/baseline-menu-24px.svg') no-repeat right center; background-size: 100.0%; }
header .hsr { height: 60px; width: 60px; background: url('../img/hardstylerostock_rose.svg') no-repeat right center; background-size: 90.00%; }
body.artists header { position: absolute; }
@media screen and ( min-width: 667px ) { header { position: fixed; }}
/* --- Sticky --- */
header.sticky:before { position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; opacity: 0.90; content:''; box-shadow: 0 0 15px 0 rgba(000,000,000,0.60); }
/* --- Intro + Start --- */
#intro, #start { width: 100.0%; height: 100.0vh; padding: 0; overflow: hidden; }
#intro > div, #start > a { position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; overflow: hidden; }
#intro { position: fixed; z-index: -1; top: 0; left: 0; background: url('../img/bg-intro.jpg') no-repeat center; background-size: cover; overflow: hidden; }
#intro > div > video { width: 100.0%; height: 100.0%; object-fit: cover; object-position: 50.00% 50.00%; }
#start { position: relative; }
#start > a { display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
#start > a:before { content:''; position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; background-color: black; opacity: 0.42; }
#start > a > img { z-index: 2; width: 42.00%; transform: scale(0.00); min-width: 320px; animation: start 400ms forwards linear 1500ms; transform-origin: center; }
@keyframes start {
from { transform: scale(0.00); }
70.00% { transform: scale(1.50); }
80.00% { transform: scale(1.00); }
80.00% { transform: scale(1.20); }
to { transform: scale(1.00); }}
body.artists #intro,
body.artists #intro + #start { height: 70.00vh; background-repeat: no-repeat; background-position: center; background-size: cover; }
#intro.biotronicz { background-image: url('../img/artists/banner-biotronicz.jpg'); }
#intro.cast-dj { background-image: url('../img/artists/banner-cast-dj.jpg'); }
#intro.dpz { background-image: url('../img/artists/banner-dpz.jpg'); }
#intro.ladycrush { background-image: url('../img/artists/banner-ladycrush.jpg'); }
#intro.mellox { background-image: url('../img/artists/banner-mellox.jpg'); }
#intro.puschidoo { background-image: url('../img/artists/banner-puschidoo.jpg'); }
#intro.saycrid { background-image: url('../img/artists/banner-saycrid.jpg'); }
#intro.skreepz { background-image: url('../img/artists/banner-skreepz.jpg'); }
#intro.saintzraw { background-image: url('../img/artists/banner-saintzraw.jpg'); }
#intro.mc-revolt { background-image: url('../img/artists/banner-mc-revolt.jpg'); }
body.artists #intro + #start:after { position: absolute; z-index: 99; top: 0; left: 0; padding: 0 3.00vh; content: ''; opacity: 0.90;
transform: rotate(90deg); transform-origin: bottom left; }
body.artists #intro.saintzraw + #start:after { content: 'Rawstyle'; }
body.artists #intro.cast-dj + #start:after { content: 'Hardstyle Classics'; }
body.artists #intro.mellox + #start:after { content: 'Rawstyle'; }
body.artists #intro.saycrid + #start:after { content: 'Hardstyle / Rawstyle'; }
body.artists #intro.skreepz + #start:after { content: 'Hardstye'; }
body.artists #intro.ladycrush + #start:after { content: 'Hardstyle / Rawstyle'; }
body.artists #intro.biotronicz + #start:after { content: 'Hardstyle'; }
body.artists #intro.dpz + #start:after { content: 'House and Hardstyle'; }
body.artists #intro.puschidoo + #start:after { content: 'House and Hardstyle'; }
body.artists #intro.mc-revolt + #start:after { content: 'Rawstyle'; }
/* --- Thanks + Legal --- */
#thanks { position: relative; height: 100.0vh; padding: 0; background: transparent; }
#thanks:before { content:''; position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; background-color: black; opacity: 0.42; }
#thanks > div { height: 100.0%; display: flex; flex-flow: column wrap; justify-content: center; align-content: center; align-items: center; }
.legal .sector { margin: 0 auto; padding-top: 2.00vw; }
.legal .sector > div { max-width: 900px; margin: 0 auto; }
.legal .sector > div > p > a > img { width: auto; height: 40px; }
.legal .sector > div + div { margin-top: 3.00vw; padding-top: 3.00vw; border-top-width: 1px; }
/* --- Nav --- */
nav { width: 0; position: fixed; z-index: 999; top: 0; right: 0; height: 100.0vh; overflow: hidden; }
nav a.back { position: absolute; top: 0; right: 0; width: 100.0%; height: 100.0%; background: black; opacity: 0.00; }
nav > div { position: absolute; z-index: 2; top: 0; right: 0; width: 50.00%; min-width: 320px; height: 100.0%; background: white; border-left: 2px solid black;
display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; }
nav > div > span { font-size: 3.60vh; margin: 6.00vh 15.00% 0; }
nav > div > span:first-child { font-size: 8.00vh; }
nav > div > span a { display: block; margin-bottom: 2.00vh; }
nav.navon { width: 100.0%; }
nav.navon a.back { opacity: 0.60; }
nav { transition: width 600ms ease-in-out 300ms; }
nav a.back { transition: opacity 300ms ease-in-out 0ms; }
nav.navon { transition: width 600ms ease-in-out 0ms; }
nav.navon a.back { transition: opacity 300ms ease-in-out 600ms; }
nav > div > a.close { position: absolute; z-index: 2; top: 2.00vh; right: 3.00vh; height: 6.00vh; width: 6.00vh; background: url(../img/baseline-close-24px.svg) no-repeat center; background-size: auto 80.00%; }
/* --- Quick --- */
#quick { position: -webkit-sticky; position: sticky; z-index: 3; top: 0; padding: 0; }
#quick > div { height: 48px; display: flex; flex-flow: row wrap; justify-content: center; }
#quick > div > a { position: relative; height: 100.0%; margin: 0 2.00vw; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
#quick > div > a:hover:before { position: absolute; bottom: 0; left: 0; width: 100.0%; height: 10.00%; content: ''; background: white;}
/* --- Story --- */
#story div > div { column-gap: 4.00rem; column-rule: 1px solid rgba(000,000,000,0.12); /* column-count: 1 */ }
#story div > div > img { margin: 0 auto 2.00rem; border-radius: 100.0%; }
@media ( min-width: 0 ) { #story div > div { column-width: 15.00rem; } #story div > div > img { width: 17.00rem; }}
@media ( min-width: 1200px ) { #story div > div { column-width: 20.00rem; } #story div > div > img { width: 22.00rem; }}
/* --- Swiper --- */
.swiper-container { height: auto; width: 100%; margin: 0; padding: 0; }
.swiper-container .swiper-slide { width: 100.0%; overflow: hidden; }
.swiper-container .swiper-slide > :is(img, video) { width: 100.0%; height: 100.0%; object-fit: cover; object-position: 50.00% 50.00%; }
@media ( min-width: 0 ) { .swiper-container .swiper-slide { aspect-ratio: 9/16; }
.swiper-container .swiper-slide > img { display: none; }
.swiper-container .swiper-slide > video { display: block; }}
@media ( min-width: 900px ) { .swiper-container .swiper-slide { aspect-ratio: 16/9; }
.swiper-container .swiper-slide > img { display: block; }
.swiper-container .swiper-slide > video { display: none; }}
/* --- Releases --- */
#releases iframe { width: 100.0%; aspect-ratio: 1/1; }
/* --- Team --- */
.artist { position: relative; padding-bottom: 1.50rem; }
.artist > div { width: calc(100.0% - 2.00vw); height: calc(100.0% - 2.00vw); margin: 1.00vw; }
.artist > div div { width: 100.0%; height: auto; margin-bottom: 1.00vw; background-repeat: no-repeat; background-position: center; background-size: 100.0%; }
.artist > div img { width: 100.0%; height: auto; }
.artist:hover > div div { background-size: 140.0%; }
.artist > div div { transition: background-size 420ms ease-in-out 0ms; }
.artist:hover > div div { transition: background-size 300ms ease-in-out 0ms; }
.artist.saintzraw > div div { background-image: url(../img/artists/SaintzRaw_640x640.jpg); }
.artist.mellox > div div { background-image: url(../img/artists/MelloX_640x640.jpg); }
.artist.saycrid > div div { background-image: url(../img/artists/Saycrid_640x640.jpg); }
.artist.cast-dj > div div { background-image: url(../img/artists/Cast-DJ_640x640.png); }
.artist.ladycrush > div div { background-image: url(../img/artists/LADYCRUSH_640x640.png); }
.artist.biotronicz > div div { background-image: url(../img/artists/Biotronicz_640x640.jpg); }
.artist.skreepz> div div { background-image: url(../img/artists/Skreepz_640x640.png); }
.artist.dpz > div div { background-image: url(../img/artists/DPZ_640x640.jpg); }
.artist.puschidoo > div div { background-image: url(../img/artists/Puschidoo_640x640.jpg); }
.artist.mc-revolt > div div { background-image: url(../img/artists/MC-Revolt_640x640.jpg); }
.artist.switchlanes > div div { background-image: url(../img/artists/SwitchLanes_640x640.jpg); }
.artist > a { position: absolute; z-index: 2; display: block; top : 0; left: 0; width: 100.0%; height: 100.0%;
background-image: url(../img/baseline-arrow_forward-24px.svg); background-repeat: no-repeat; background-position: bottom 0.50vw right 1.00vw; background-size: 2.10rem; }
/* --- Gallery --- */
.gallery { width: 100.0%; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
.gallery div { flex: 1 1 25.00%; min-width: 160px; aspect-ratio: 1/1; background-repeat: no-repeat; background-position: center; background-size: cover; }
.gallery img { width: 100.0%; height: 100.0%; object-fit: cover; object-position: 50.00% 50.00%; }
/* --- Quote --- */
#quote > div { display: flex; flex-flow: row wrap; justify-content: center; }
/* --- Footer --- */
footer.sector { padding-bottom: 0; }
footer > div { padding-bottom: 12.00vw; background: url('../img/HS-Skyline.svg') no-repeat center bottom; background-size: 100.0% auto; }
footer #imprint { display: flex; flex-flow: column wrap; justify-content: space-between; align-content: center; align-items: center; }
footer .copyright { flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
footer .copyright img { width: 50.00%; height: auto; margin: 6.00vw auto; }
footer .copyright .sm { display: inline-block; height: 3.00rem; margin: 0 0.60rem; }
footer .copyright .sm img { width: auto; height: 100.0%; margin: 0; }
/* --- Elemente --- */
a.toplink { position: fixed; z-index: 5; bottom: 1.50vw; right: 1.50vw; border: 0; display: none; background-image: url('../img/baseline-arrow_upward-24px.svg'); background-color: white; }
.btn { display: inline-block; margin-top: 3.00vw; padding: 1.20rem 1.50rem; box-shadow: inset 0 0 0 2px white; background: transparent; color: white; }
.ico { opacity: 0.42; border-radius: 0.40rem; display: inline-block; padding: 1.20rem; border-width: 0.15rem; border-color: white;
background-repeat: no-repeat; background-position: center; background-size: 1.50rem; }
.ico:hover { opacity: 0.90; border-radius: 100.0%; }
.ico + .ico { margin-left: 0.60rem; }
.ico.toplink { background-image: url('../img/baseline-arrow_upward-24px.svg'); }
.ico.calendar { background-image: url('../img/ico/ico-gw_alarm-white.svg'); }
.ico.facebook { background-image: url('../img/ico/ico-gw_facebook-white.svg'); background-size: 1.35rem; }
/* --- Cookies--- */
#cookies { position: fixed; top: 0; left: 0; z-index: 999; width: 100.0%; height: 100.0%; overflow: hidden; }
#cookies:before { content: ''; position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; opacity: 0.42; background: black; }
#cookies > span { position: absolute; left: 0; top: 0; width: calc(100.0% - 12vw); height: auto; padding: 9.00rem 6.00vw 3.00rem; border-width: 1px; color: black;
background: url(../img/hardstylerostock_rose_black.svg) no-repeat center top 2.00rem white; background-size: 6.00rem auto; }
#cookies .btn { display: inline-block; margin-top: 2.00rem; box-shadow: inset 0 0 0 2px black; background: transparent; color: black; }
#cookies { animation-name: cookies-on;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-timing-function: linear; }
@keyframes cookies-on {
from { opacity: 0.00; }
66% { opacity: 0.00; }
to { opacity: 1.00; } }
#cookies:target { height: 0; transition: height 480ms ease-in-out 240ms; }
#cookies:target:before { opacity: 0; transition: opacity 240ms ease-in-out 0ms; }
/* =================================
FORMULAR
================================= */
select,
input,
textarea { appearance: none;
-webkit-appearance: none;
-moz-appearance: none; }
input[type=radio], input[type=checkbox] { display: none; }
form { display: block; margin-top: 3.00vw; }
form input { margin-bottom: 0.5rem; }
input, textarea { width: calc(100.0% - 2.00rem); height: 3.00rem; margin-bottom: -2px; padding: 0 1.0rem; border-radius: 0; border: 0; }
textarea { resize: vertical; min-height: 4.00rem; margin-bottom: 1.00rem; padding: 1.00rem; }
input[type=checkbox] + label { position: relative; display: block; margin: 1.00vmin 0; padding: 0 0 0 2.70em; }
input[type=checkbox] + label > a { display: inline; }
input[type=checkbox] + label:before { content:''; position: absolute; top: 0.30em; left: 0; display: block; width: 2.10em; height: 2.10em; border-radius: 3px; }
input[type=checkbox]:checked + label:before { background-image: url(../img/baseline-check-24px.svg); background-repeat: no-repeat center; background-position: center; background-size: 84.00%; }
/* =================================
COLORS + STYLES
================================= */
::-moz-selection { }
::selection { }
/* --- BG + Txt Sofa (#ff6f61) --- */
header.sticky:before, #quick, #shop
{ background-color: rgba(255,111,097,1.00); color: black; }
a, nav a:hover
{ color: rgba(1255,111,097,1.0); }
/* --- BG White --- */
body.legal, #story, #quote, .artist, .shop, input, textarea, input[type=checkbox] + label:before, .btn:hover
{ background-color: white; color: black; }
/* --- BG Gray (#212121)--- */
#team, .date, body.artists #intro + #start:after, #gallery
{ background-color: rgba(033,033,033,1.0); color: white; }
/* --- BG Black --- */
body, body .swiper-container, #releases, #events, footer
{ background-color: black; color: white; }
/* --- TXT White --- */
#thanks, #quick a, #thanks *
{ color: white; }
/* --- TXT Gray --- */
#story p, .legal p
{ color: gray; }
/* --- TXT Black --- */
nav a
{ color: black; }
/* Border Standard (transparent) */
*
{ border-color: rgba(000,000,000,0.12); }
/* =================================
Test
=================================
* { box-shadow: inset 0 0 0 1px rgba(000,000,000,0.10) !important; }
* { background-color: rgba(000,000,000,0.05) !important; }
body { background-color: rgba(255,000,000,0.05) !important; }
div { background-color: rgba(255,000,000,0.05) !important; }
div { background-image: none !important; }
* { color: rgba(000,000,000,1.0) !important; }
img { box-shadow: inset 0 0 0 1px rgba(000,000,000,0.40) !important; }
video { display: none; }
/* =================================
END
================================= */
.comment { color: fuchsia !important; }