/* Contao Open Source CMS, (c) 2005-2015 Leo Feyer, LGPL license */ body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li{float:left}.ce_gallery>ul li.col_first{clear:left}.float_left{float:left}.float_right{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both} .rs-columns { clear: both; display: inline-block; width: 100%; } .rs-column { float: left; width: 100%; margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-first { clear: left; } .rs-column.-large-last { margin-right: -5px; } .rs-column.-large-first-row { margin-top: 0; } .rs-column.-large-col-1-1 { width: 100%; } .rs-column.-large-col-2-1 { width: 46.15385%; } .rs-column.-large-col-2-2 { width: 100%; } .rs-column.-large-col-3-1 { width: 28.20513%; } .rs-column.-large-col-3-2 { width: 64.10256%; } .rs-column.-large-col-3-3 { width: 100%; } .rs-column.-large-col-4-1 { width: 19.23077%; } .rs-column.-large-col-4-2 { width: 46.15385%; } .rs-column.-large-col-4-3 { width: 73.07692%; } .rs-column.-large-col-4-4 { width: 100%; } .rs-column.-large-col-5-1 { width: 13.84615%; } .rs-column.-large-col-5-2 { width: 35.38462%; } .rs-column.-large-col-5-3 { width: 56.92308%; } .rs-column.-large-col-5-4 { width: 78.46154%; } .rs-column.-large-col-5-5 { width: 100%; } .rs-column.-large-col-6-1 { width: 10.25641%; } .rs-column.-large-col-6-2 { width: 28.20513%; } .rs-column.-large-col-6-3 { width: 46.15385%; } .rs-column.-large-col-6-4 { width: 64.10256%; } .rs-column.-large-col-6-5 { width: 82.05128%; } .rs-column.-large-col-6-6 { width: 100%; } @media screen and (max-width: 900px) { .rs-column { margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-first { clear: none; } .rs-column.-large-last { margin-right: 7.69231%; } .rs-column.-large-first-row { margin-top: 7.69231%; } .rs-column.-medium-first { clear: left; } .rs-column.-medium-last { margin-right: -5px; } .rs-column.-medium-first-row { margin-top: 0; } .rs-column.-medium-col-1-1 { width: 100%; } .rs-column.-medium-col-2-1 { width: 46.15385%; } .rs-column.-medium-col-2-2 { width: 100%; } .rs-column.-medium-col-3-1 { width: 28.20513%; } .rs-column.-medium-col-3-2 { width: 64.10256%; } .rs-column.-medium-col-3-3 { width: 100%; } .rs-column.-medium-col-4-1 { width: 19.23077%; } .rs-column.-medium-col-4-2 { width: 46.15385%; } .rs-column.-medium-col-4-3 { width: 73.07692%; } .rs-column.-medium-col-4-4 { width: 100%; } .rs-column.-medium-col-5-1 { width: 13.84615%; } .rs-column.-medium-col-5-2 { width: 35.38462%; } .rs-column.-medium-col-5-3 { width: 56.92308%; } .rs-column.-medium-col-5-4 { width: 78.46154%; } .rs-column.-medium-col-5-5 { width: 100%; } .rs-column.-medium-col-6-1 { width: 10.25641%; } .rs-column.-medium-col-6-2 { width: 28.20513%; } .rs-column.-medium-col-6-3 { width: 46.15385%; } .rs-column.-medium-col-6-4 { width: 64.10256%; } .rs-column.-medium-col-6-5 { width: 82.05128%; } .rs-column.-medium-col-6-6 { width: 100%; } } @media screen and (max-width: 599px) { .rs-column { margin-right: 7.69231%; } .rs-column.-medium-first { clear: none; } .rs-column.-medium-last { margin-right: 7.69231%; } .rs-column.-medium-first-row { margin-top: 7.69231%; } .rs-column.-small-first { clear: left; } .rs-column.-small-last { margin-right: -5px; } .rs-column.-small-first-row { margin-top: 0; } .rs-column.-small-col-1-1 { width: 100%; } .rs-column.-small-col-2-1 { width: 46.15385%; } .rs-column.-small-col-2-2 { width: 100%; } .rs-column.-small-col-3-1 { width: 28.20513%; } .rs-column.-small-col-3-2 { width: 64.10256%; } .rs-column.-small-col-3-3 { width: 100%; } .rs-column.-small-col-4-1 { width: 19.23077%; } .rs-column.-small-col-4-2 { width: 46.15385%; } .rs-column.-small-col-4-3 { width: 73.07692%; } .rs-column.-small-col-4-4 { width: 100%; } .rs-column.-small-col-5-1 { width: 13.84615%; } .rs-column.-small-col-5-2 { width: 35.38462%; } .rs-column.-small-col-5-3 { width: 56.92308%; } .rs-column.-small-col-5-4 { width: 78.46154%; } .rs-column.-small-col-5-5 { width: 100%; } .rs-column.-small-col-6-1 { width: 10.25641%; } .rs-column.-small-col-6-2 { width: 28.20513%; } .rs-column.-small-col-6-3 { width: 46.15385%; } .rs-column.-small-col-6-4 { width: 64.10256%; } .rs-column.-small-col-6-5 { width: 82.05128%; } .rs-column.-small-col-6-6 { width: 100%; } } ÿþ/* =========================================== JAZZ BAND Minimal / Black & White =========================================== */ *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:#000; color:#fff; font-family:Helvetica, Arial, sans-serif; font-size:18px; line-height:1.7; font-weight:300; } /* =========================================== TYPOGRAPHY =========================================== */ h1,h2,h3{ font-weight:300; letter-spacing:3px; text-transform:uppercase; margin-bottom:1rem; } h1{ font-size:4rem; } h2{ font-size:2.2rem; margin-top:5rem; } h3{ font-size:1.3rem; } p{ margin-bottom:1.5rem; max-width:800px; } a{ color:white; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); transition:.3s; } a:hover{ border-color:white; } /* =========================================== LAYOUT =========================================== */ .wrapper{ width:min(1100px,90%); margin:auto; } section{ padding:6rem 0; } section + section{ border-top:1px solid rgba(255,255,255,.08); } /* =========================================== HEADER =========================================== */ header{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; } header h1{ margin-bottom:1rem; } header p{ margin:auto; font-size:1.3rem; opacity:.8; } /* =========================================== NAVIGATION =========================================== */ nav{ position:fixed; top:0; left:0; width:100%; background:rgba(0,0,0,.9); backdrop-filter:blur(8px); z-index:999; } nav ul{ display:flex; justify-content:center; list-style:none; } nav li{ margin:1.3rem; } nav a{ border:none; letter-spacing:2px; text-transform:uppercase; font-size:.9rem; opacity:.8; } nav a:hover{ opacity:1; } /* =========================================== TERMINE =========================================== */ .termine{ display:grid; gap:20px; } .termin{ border-left:3px solid white; padding-left:20px; } .termin h3{ margin-bottom:.2rem; } .termin p{ margin:0; opacity:.75; } /* =========================================== VIDEOS =========================================== */ .video-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; } .video-grid iframe{ width:100%; aspect-ratio:16/9; border:none; } /* =========================================== PRESSE =========================================== */ .presse{ display:grid; gap:30px; } .presse article{ padding-bottom:25px; border-bottom:1px solid rgba(255,255,255,.1); } blockquote{ font-style:italic; opacity:.75; } /* =========================================== MUSIKER =========================================== */ .musiker{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:50px; } .musiker article{ text-align:center; } .musiker img{ width:100%; border-radius:4px; margin-bottom:20px; filter:grayscale(100%); transition:.4s; } .musiker img:hover{ filter:grayscale(0%); } /* =========================================== FOOTER =========================================== */ footer{ text-align:center; padding:5rem 0; font-size:.9rem; opacity:.5; } /* =========================================== BUTTON =========================================== */ .button{ display:inline-block; padding:14px 28px; margin-top:25px; border:1px solid white; text-transform:uppercase; letter-spacing:2px; transition:.3s; } .button:hover{ background:white; color:black; } /* =========================================== RESPONSIVE =========================================== */ @media (max-width:900px){ h1{ font-size:3rem; } h2{ font-size:1.8rem; } .video-grid{ grid-template-columns:1fr; } } @media (max-width:700px){ body{ font-size:17px; } nav ul{ flex-wrap:wrap; } nav li{ margin:.8rem; } section{ padding:4rem 0; } h1{ font-size:2.3rem; } } @media (max-width:500px){ body{ font-size:16px; } header{ min-height:80vh; } h1{ font-size:2rem; letter-spacing:2px; } h2{ font-size:1.5rem; } } /* m2pgemini.css */