/* FONTS */
@font-face {
    font-family: AkzidBold;
    src: url('../fonts/AkzidGroStdBol.ttf');
} 

@font-face {
    font-family: HelvetiaNeueCondensed;
    src: url('../fonts/helvetica-neue-condensed.otf');
} 

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/MaterialIcons-Regular.ttf');
} 

html, body{
    width: 100%;
    margin: 0 0 0 0;
}

body{
    background-color: white;
    font-family: HelvetiaNeueCondensed;
    font-size: 0.8vw;
    background: black;
}

h1{
    font-family: AkzidBold;
    text-transform: uppercase;
    font-size: 170%;
}

h2{
    font-family: AkzidBold;
    text-transform: uppercase;
    font-size: 140%;
}

/********HEADER********/
#contents {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

#section_1{
    background-image: url('../img/bg-grey-white-b.png');
    background-size: 100vw;
    background-repeat: repeat-y;
}

#header {
    font-size: 120%;
    background-image: url('../img/bg-grey-white-b.png');
    background-size: 100vw;
    background-repeat: repeat-y;
    width: 100vw;
    height: 5vw;
    display: flex;
    flex-direction: row;
    position: fixed;
}

#header a{
    text-decoration: none;
    color: black;
}

#header .logo {
    flex-grow: 1;
    padding-left: 3em;
}

#header .logo h1{
    margin-top: 0.8vw;
}

#header .menu {
    flex-grow: 7;
}

#header .menu .menushow {
    display: none;
}

#header .menu ul{
    width: 100%;
    display: flex;
    flex-direction: row;
    list-style-type: none;
    height: 100%;
}

#header .menu ul>li{
    flex-grow: 1;
    text-transform: uppercase;
    font-size: 100%;
}

#header .menu ul>li.lang-select{
    flex-grow: 2;
}

#header .menu ul>li a.active{
    padding-bottom: 0.3em;
    border-bottom: 0.4em black solid;
}

#header .lang-select-mob{
    display: none;
}

#header-mob-background{
    display: none;
}

/********clip********/
#clip {
    font-size: 120%;
    padding-top: 7vw;
    display: flex;
    flex-direction: row;
}

#clip .padding-left {
    width: 20vw;
}

#clip .padding-left .banner {
    width: 100%;
    height: 95%;
    background-image: url('../img/banners/spotify_vertical.gif');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top center;
}

#clip .vidframe {
    width: 70vw;
    text-align: center;
}

#clip .vidframe #video {
    --vWidth: 70vw;
    --vHeight: calc(0.56 * var(--vWidth));
    
    width: var(--vWidth);
    height: var(--vHeight);
    left: auto;
    right: auto;
    margin-bottom: 2em;
}

#clip .social-icons{
    width: 10vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 0.5vw;
}


#clip .social-icons a{
    width: 40%;
}

#clip .social-icons .icon{
    width: 3vw;
    height: 3vw;
    margin-bottom: 0.1vw;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 50%;
}

#clip .social-icons .facebook{
    background-image: url('../img/icons/icon-facebook.png');
}

#clip .social-icons .instagram{
    background-image: url('../img/icons/icon-instagram.png');
}

#clip .social-icons .youtube{
    background-image: url('../img/icons/icon-youtube.png');
}

#clip .social-icons .spotify{
    background-image: url('../img/icons/icon-spotify.png');
}

/********newsletter********/
#newsletter {
    font-size: 120%;
    display: flex;
    flex-direction: row;
}

#newsletter .padding-left {
    width: 20vw;
}

#newsletter .field{
    text-align: right;
    width: 70vw;
}

#newsletter .field label{
    font-weight: bold;
    font-style: italic;
    padding-right: 1em;
}

#newsletter .field .arrow{
    font-size: 190%;
    vertical-align: middle;
    font-family: 'Material Icons';
    cursor: pointer;
}

#newsletter .field .popup{
    position: relative;
    display: inline-block;
}

#newsletter .field #popupmsg{
    display: none;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

#newsletter .field #popupmsg::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

#newsletter .padding-right {
    width: 10vw;
}

/********bio********/
#section_2 {
    background-image: url('../img/bg-all-white.png'), url('../img/bg-white-b-grey.png');
    background-size: 100vw 10vw, 100vw auto;
    background-repeat: no-repeat, repeat-y;
}

#section_2 .banner {
    display: none;
}

#bio{
    padding-top: 8vw;
    font-size: 120%;
    display: flex;
    flex-direction: row;
}

#bio .title{
    width: 15vw;
    text-align: right;
}

#bio .title h2{
    margin-top: 0;
}

#bio .picture{
    width: 30vw;
    text-align: center;
}

#bio .picture img{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}

#bio .text{
    width: 30vw;
}

#bio .text p{
    font-size: 150%;
    margin-top: 0;
}

#bio.padding-right{
    width: 20vw;
}

/*******discography*********/
#section_3 {
    background-image: url('../img/bg-all-white.png');
    background-size: 100vw;
    background-repeat: repeat-y;
}

#discography {
    padding-top: 8vw;
    font-size: 120%;
    display: flex;
    flex-direction: row;
}

#discography .padding-left {
    width: 10vw;
}

#discography .content {
    width: 90vw;
}

#discography .content .title h2{
    margin-top: 0;
}

#discography .content .album{
    width: 60vw;
    display: block;
}

#discography .content .album .cover{
    float: left;
    width: 14vw;
    height: 14vw;
}

#discography .content .album .cover img{
    width: 100%;
    height: 100%;
}

#discography .content .album .info{
    font-size: 150%;
    margin-top: 0;
    margin-left: 16vw;
    display: block;
}

#discography .content .album .info .date{
    display: block;
    font-weight: bold;
}

#discography .content .album .info .title{
    font-family: AkzidBold;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 100%;
    display: inline-block;
}

#discography .content .album .info .type:before{
    content: "(";
}

#discography .content .album .info .type:after{
    content: ")";
}

#discography .content .album .info .type{
    margin-left: 1vw;
    display: inline-block;
    text-transform: uppercase;
}

#discography .content .album .info .desc{
    margin-top: 1vw;
}

#discography .content .album .info .play{
    margin-top: 1vw;
    font-size: 125%;
    font-style: italic;
}

#discography .content .album .info .play .play_icon{
    padding-left: 1.5vw;
    font-size: 150%;
    font-weight: lighter;
    font-style: normal;
    vertical-align: middle;
    font-family: 'Material Icons';
    cursor: pointer;
}

#discography .content .album .clear{
    clear: both;
    margin-bottom: 2vw;
}

#discography .player{
    z-index: 99;
    margin-left: 17vw;
    position: relative;
    display: none;
}

#discography .player ul {
    list-style:none; 
    position:absolute; 
    margin-top: -1vw;
    left:0;
    padding: 0 0 0 0;
    background-color: #ffffff;
    border: 1px black solid;
}

#discography .player ul li{
    text-transform: uppercase;
    margin-top: 0.1vw;
    margin-bottom: 0.1vw;
    cursor: pointer;
}

#discography .player ul li .icon{
    display: inline-block;
    visibility: hidden;
    width: 1vw;
    height: 1vw;
    background-image: url('../img/icons/nowplaying.png');
    background-size: 100% 100%;
    margin-right: 0.9vw;
}

#discography .player ul li.current .icon{
    visibility: visible;
}

#discography .player ul li:hover{
    background: #c0c0c0;
}

#streaming{
    margin-left: 10vw;
    width: 80vw;
    border: 1px black solid;
    display: flex;
    flex-direction: row;
    margin-top: 4vw;
    margin-bottom: 0;
}

#streaming .item{
    flex-grow: 1;
    max-width: 12.5%;
    text-align: center;
}

#streaming .item img{
    width: 90%;
    height: auto;
}

#streaming .clearstreaming {
    display: none;
}
/*******news*********/
#section_4 {
    background-image: url('../img/bg-all-white.png'), url('../img/bg-white-grey-b.png');
    background-size: 100vw 8vw, 100vw auto;
    background-repeat: no-repeat, repeat-y;
}

#news {
    padding-top: 11vw;
    font-size: 120%;
    display: block;
}

#news .arrows {
    float: left;
    width: 17vw;
    margin-top: 7vw;
    text-align: right;
}

#news .arrows .arrow{
    font-size: 220%;
    font-family: 'Material Icons';
    padding-bottom: 2vw;
    cursor: pointer;
}

#news .content {
    float: right;
    width: 78vw;
    display: block;
}

#news .content .title{
    margin-left: 5vw;
    margin-bottom: 5vw;
}

#news .content .title h2{
    margin-top: 0;
}

#news .content .items{
    display: block;
    overflow-x: hidden;
    white-space: nowrap;
}

#news .content .items .item{
    display: inline-block;
    width: 25vw;
    margin-left: 1vw;
    margin-right: 1vw;
    white-space: normal;
    text-align: center;
    vertical-align: top;
}

#news .content .items .item a{
    text-decoration: none;
    color: black;
}

#news .content .items .item .npic {
    text-align: center;
    width: 100%;
}

#news .content .items .item .npic img{
    width: 100%;
    height: auto;
}

#news .content .items .item .ntitle {
    font-size: 120%;
    font-weight: bold;
}

#news .content .items .item .nauthor {
    margin-top: 3vw;
    font-size: 150%;
    font-weight: bold;
}

#news .content .counter{
    background-color: white;
    margin-top: 5vw;
    padding-top: 1vw;
    text-align: center;
    font-size: 140%;
    font-family: 'Material Icons';
    font-weight: bold;
}

#news .content .counter span{
    cursor: pointer;
}

#news .end{
    clear: both;
    margin: 0 0 0 0;
    height: 5vw;
    background: white;
}

/*******pictures*********/
#section_5 {
    background-image: url('../img/bg-grey-white-bigger.png'), url('../img/bg-white-grey-c.png');
    background-size: 100vw 9vw, 100vw auto;
    background-repeat: no-repeat, repeat-y;
    margin-top: -1vw;
    padding-bottom: 3.5vw;
}

#pictures {
    font-size: 120%;
}

#pictures .title{
    padding-top: 3vw;
    padding-left: 4.5vw;
}

#pictures .canvas{
    width: 100%;
    background: black;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

#pictures .canvas .reset{
    clear: both;
}

#pictures .canvas .row{
    vertical-align: top;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}

#pictures .canvas .row .thumb{
    float: left;
    cursor: pointer;
}

#pictures .canvas .row .thumb img{
    width: 100%;
    height: auto;
}

#pictures .canvas .row .vidoverlay{
    display: none;
}

/*******dates*********/
#section_6 {
    background: white;
    background-size: 100vw 9vw, 100vw auto;
    background-repeat: no-repeat, repeat-y;
    margin-top: -1.5vw;
    padding-bottom: 2vw;
}

#dates {
    font-size: 120%;
}

#dates .title{
    background-image: url('../img/bg-all-white.png'), url('../img/bg-white-b-grey.png');
    background-size: 100vw 3vw, 100vw auto;
    background-repeat: no-repeat, repeat-y;
    text-align: right;
}

#dates .title h2{
    padding-top: 4vw;
    margin-right: 12vw;
    padding-bottom: 1vw;
}

#dates .monthname{
    width: 24vw;
    text-align: center;
    background-image: url('../img/bg-all-white.png'), url('../img/bg-grey-white-b.png');
    background-size: 100vw 3vw, 100vw auto;
    background-repeat: no-repeat, repeat-y;
    padding-top: 3vw;
    font-size: 150%;
    text-transform: uppercase;
}

#dates .monthname .before, #dates .monthname .after{
    font-family: 'Material Icons';
    font-weight: bold;
    text-transform: none;
    top: 1vw;
    font-size: 90%;
    margin-left: 2vw;
    margin-right: 2vw;
    cursor: pointer;
}

#dates .monthdetails{
    padding-top: 3vw;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#dates .monthdetails .calendar{
    text-align: left;
    display: flex;
    flex-direction: row;
    padding-left: 9vw;
}

#dates .monthdetails .calendar .dayofweek{
    display: flex;
    flex-direction: column;
}

#dates .monthdetails .calendar .header{
    width: 5.5vw;
    font-weight: bold;
    font-size: 150%;
    margin-left: 1vw;
    margin-right: 1vw;
    border-bottom: 0.3vw solid black;
}

#dates .monthdetails .calendar .dayofmonth{
    padding-top: 1vw;
    width: 5.5vw;
    font-weight: bolder;
    font-size: 350%;
    margin-left: 1vw;
    margin-right: 1vw;
    bottom: 0;
    vertical-align: bottom;
    border-bottom: 0.1vw solid black;
    color: #dddddd;
}

#dates .monthdetails .calendar .empty{
    border-bottom: 0;
}

#dates .monthdetails .calendar .withevent{
    color: black;
    cursor: pointer;
}

#dates .monthdetails .event_placer{
    display: flex;
    flex-direction: row;
}

#dates .monthdetails .event{
    margin-left: 2vw;
    border: 1px black solid;
    padding: 2vw 2vw 2vw 2vw;
    text-transform: uppercase;
    font-family: AkzidBold;
}

#dates .monthdetails .event .date{
    font-size: 160%;
}

#dates .monthdetails .event .desc{
    margin-top: 3vw;
    margin-bottom: 4vw;
    font-size: 160%;
}

#dates .monthdetails .event .time{
    font-size: 140%;
}

#dates .arrows {
    width: 10vw;
    text-align: center;
}

#dates .arrows .arrow{
    font-size: 220%;
    font-family: 'Material Icons';
    padding-bottom: 2vw;
    cursor: pointer;
}

/*******footer*********/
#contact {
    color: white;
    width: 93vw;
    padding: 2vw;
    height: 17vw;
    display: flex;
    flex-direction: row;
}

#contact a{
    text-decoration: none;
    color: white;
}

#contact .logo {
    flex-grow: 1;
    padding-left: 3em;
}

#contact .logo h2{
    margin-top: 0.8vw;
    font-size: 230%;
}

#contact .menu {
    flex-grow: 5;
}

#contact .menu .menushow{
    display: none;
}

#contact .menu ul{
    width: 100%;
    display: flex;
    flex-direction: row;
    list-style-type: none;
    height: 100%;
}

#contact .menu ul>li{
    flex-grow: 1;
    text-transform: uppercase;
    font-size: 100%;
}

#contact .menu ul>li.lang-select{
    display: none;
}

#contact .menu ul>li a.active{
    padding-bottom: 0.3em;
    color: #dddddd;
}

#contact .social-icons{
    flex-grow: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 0.5vw;
    padding-top: 7vw;
}


#contact .social-icons a{
    width: 20%;
}

#contact .social-icons .icon{
    width: 3vw;
    height: 3vw;
    margin-bottom: 0.1vw;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 50%;
}

#contact .social-icons .facebook{
    background-image: url('../img/icons/icon-facebook-w.png');
}

#contact .social-icons .instagram{
    background-image: url('../img/icons/icon-instagram-w.png');
}

#contact .social-icons .youtube{
    background-image: url('../img/icons/icon-youtube-w.png');
}

#contact .social-icons .spotify{
    background-image: url('../img/icons/icon-spotify-w.png');
}

#bottom {
    width: 95vw;
    text-align: center;
    color: white;
    padding: 1vw;
    font-size: 150%;
    text-transform: uppercase;
}

#album-overlay{
    z-index: 98;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}