@charset "UTF-8";

/********************************** GLOBAL ****************************************/
:root {
	--hover-color: #fff;
}

@font-face {
    font-family: 'open-sans';
    src: url('fonts/open-sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing:border-box; /* box-sizing for older browsers */
	-moz-box-sizing:border-box; /* box-sizing for older browsers */
	box-sizing:border-box; /* calculating size of children inside of marigin and padding */
}

body
{
	margin:0;  
	padding:0;
	background-color: black;
	color: rgb(255,255,255);
	font-family: open-sans,Helvetica,Arial,sans-serif;

	font-size: 15px;
	text-align: justify;
	line-height: 20px;
}

a
{
	outline:none; 
	text-decoration: none;
	color: inherit;
}
a:hover
{
	text-decoration: underline;
	color: inherit;
}
hr {
	display: block;
	height: 1px;
    border: 0;
    border-top: 1px solid gray;
    width: 100%;
    margin: 50px 0;
}

/**** CONTENT **********************************************************************/

#vCenter
{
	max-width:800px;
	width: 100%;
	margin:0 auto;
	padding: 0 30px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
}

/********************************** LANG ****************************************/

#lang {
	position: absolute;
	top: 0px;
	right: 25px;
	display: flex;
	flex-flow: row;
	align-items: center;
	opacity: 0.5;
	transition: opacity 500ms ease-in-out;
}
#lang:hover {
	text-decoration: none;
	opacity: 1;
	transition: opacity 500ms ease-in-out;
}
#earth {
	width: 30px;
	height: 30px;
	fill: none;
    stroke-width: 15px;
    stroke: white;
    padding-right: 4px;
}
#vLang {
	font-weight: 800;
	font-size: 18px;
}

/********************************** HEADER ****************************************/

#vLogo {
	display: block;
	max-width: 450px;
	width: 100%;
	margin: 50px auto 0 auto;
}

/**** LINKS **********************************************************************/

.vSocialLinks {
	list-style: none;
	margin: 10px 0;
}

.vSocialLinks > li {
	display: inline-block;
}

.vSocialLink {
	opacity: 0.5;
	transition: opacity 500ms ease-in-out;
	background-size: 25px 25px;
	background-position: center top;
	background-repeat: no-repeat;
	display:block;
	width: 25px;
	height: 25px;
	margin: 5px 15px 0 15px;
}

.vSocialLink:hover {
	opacity: 1;
	transition: opacity 500ms ease-in-out;
}

#vFacebookLink, #vInstagramLink, #vYoutubeLink, #vBandcampLink
{
	
}
#vFacebookLink {
	background-image: url(images/icons/facebook_64.png);
}
#vInstagramLink {
	background-image: url(images/icons/instagram_64.png);
}
#vYoutubeLink {
	background-image: url(images/icons/youtube_64.png);
}
#vBandcampLink {
	background-image: url(images/icons/bandcamp_64.png);
}
#vSpotifyLink {
	background-image: url(images/icons/spotify_64.png);
}
#vAppleLink {
	background-image: url(images/icons/apple_64.png);
}
#vDeezerLink {
	background-image: url(images/icons/deezer_64.png);
}
#vTidalLink {
	background-image: url(images/icons/tidal_64.png);
}
#vBandsintownLink {
	background-image: url(images/icons/bandsistown_64.png);
}
#vWikiLink {
	background-image: url(images/icons/wiki_64.png);
}

/********************************** CONTACT/DOWNLOAD ****************************************/

.vContactTitle {
	color: gray;
}

.vContact {
	margin: 10px 0;
}

/********************************** BIO ****************************************/

#vBio {
	text-align: justify;
}

/********************************** CONCERTS ****************************************/
#vConcertsList 
{
	list-style: none;
	text-align: left;
}
#vConcertsTitle
{
	font-size: 22px;
	width: 150px;
	margin-bottom: 10px;
}
.vConcertsInfoMain
{
	font-size: 15px;
	margin-top: 8px;
}
.vConcertsInfoExtra
{
	font-size: 12px;
	line-height: 15px;
	color: gray;
}
.vConcertCanceled {
	text-decoration: line-through;
}

/********************************** BANNER ****************************************/
.vBanner
{
	max-width: 100%;
	width:100%;
	height: auto;
}

.vBanner img
{
	width:100%;
}

/********************************** DISCOG ****************************************/
#vDiscog {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
}
#vDiscog > table {
	margin-bottom: 30px;
}

.vDiscogCover {
	max-width: 200px;
	height: auto;
	transition: filter 500ms ease-in-out;
}
.vDiscogCover:hover {
	filter: brightness(120%);
}
.vDiscogLinks {
	list-style: none;
}
.vDiscogLink {
	opacity: 0.5;
	transition: opacity 500ms ease-in-out;
	background-size: 35px 35px;
	background-position: center top;
	background-repeat: no-repeat;
	display:block;
	width: 35px;
	height: 35px;
	margin: 5px 20px 15px 15px;
}

.vDiscogLink:hover {
	opacity: 1;
	transition: opacity 500ms ease-in-out;
}

.vDiscogPlay {
	background-image: url(images/icons/discog_play.png);
}
.vDiscogMP3 {
	background-image: url(images/icons/discog_mp3.png);
}
.vDiscogVinyl {
	background-image: url(images/icons/discog_vinyl.png);
}
.vDiscogSpotify {
	background-image: url(images/icons/discog_spotify.png);
}

.vDiscogDesc {
	color: gray;
}
.vDiscogYear {
	
}
.vDiscogTitle {
	
}
/********************************** YOUTUBER ****************************************/
#vVideos {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
}
.vVideoPlay {
	opacity: 0.6;
	max-width: 200px;
	transition: opacity 500ms ease-in-out;
}
.vVideoPlay:hover {
	opacity: 1;
}
.vVideoImage {
	max-width: 200px;
}
.vVideo {
	margin: 15px 15px;
}
.vVideoDesc {
	color: gray;
	margin-top: 8px;
	font-size: 12px;
}

/********************************** PICTURES ****************************************/
#vPictures {
	position: relative;
}
#vPictureBlack {
	max-width: 100%;
	width:100%;
	height: auto;
}
#vPicture
{
	position: absolute;
	top: 0px;
	left: 0px;
	max-width: 100%;
	width:100%;
	height: auto;
}
/********************************** PICTURES AUTHOR ****************************************/
#vPicturesAuthor
{
	width: 100%;
	text-align: right;
	font-size: 12px;
	line-height: 20px;
}
.vPicturesAuthorText
{
	color: gray;
	display: inline;
}

/********************************** COPYRIGHT ****************************************/
#vCopyright
{
	width: 100%;
	text-align: right;
	font-size: 12px;
	line-height: 20px;
}
.vCopyrightTitle
{
	color: gray;
	display: inline;
}


/********************************* BACK TO TOP ******************************/

.c-back-to-top {
  background-color: #777;
  /*#d7dadb;*/
  border-radius: 50%;
  border: 0;
  bottom: 36px;
  right: 16px;
  height: 40px;
  width: 40px;
  z-index: 101;
  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2);
  display: inline-block;
  cursor: pointer;
  outline: none;
  position: fixed;
  
  transition: background-color 0.3s,opacity 0.3s 0s,visibility 0s 0.3s;
  visibility: hidden;
  opacity: 0;
}

button::-moz-focus-inner {
  border: 0;
}

.c-back-to-top svg {
    height: 40px;
    width: 40px;
}

.c-back-to-top.show {
  visibility: visible;
  opacity: 0.3;
  transition: background-color 0.3s,opacity 0.3s 0s,visibility 0s 0s;
}