@font-face {
	    font-family: 'bellerose';
    src: url('Fonts/BelleroseLight.eot');
    src: url('Fonts/BelleroseLight.eot?#iefix') format('embedded-opentype'),
        url('Fonts/BelleroseLight.woff2') format('woff2'),
        url('Fonts/BelleroseLight.woff') format('woff'),
        url('Fonts/BelleroseLight.ttf') format('truetype'),
        url('Fonts/BelleroseLight.svg#BelleroseLight') format('svg');
}
@font-face {
	font-family: 'rogueScript';
	src: url('Fonts/RougeScript-Regular.eot');
    src: url('Fonts/RougeScript-Regular.eot?#iefix') format('embedded-opentype'),
        url('Fonts/RougeScript-Regular.woff2') format('woff2'),
        url('Fonts/RougeScript-Regular.woff') format('woff'),
        url('Fonts/RougeScript-Regular.ttf') format('truetype'),
        url('Fonts/RougeScript-Regular.svg#RougeScript-Regular') format('svg');
}
@font-face {
	font-family: 'imperialScript';
	src: url('Fonts/ImperialScript-Regular.eot');
    src: url('Fonts/ImperialScript-Regular.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ImperialScript-Regular.woff2') format('woff2'),
        url('Fonts/ImperialScript-Regular.woff') format('woff'),
        url('Fonts/ImperialScript-Regular.ttf') format('truetype'),
        url('Fonts/ImperialScript-Regular.svg#ImperialScript-Regular') format('svg');
}
@font-face {
	font-family: 'bauhausItalic';
	src: url('Fonts/Bauhaus-Italic.eot');
	src: url('Fonts/Bauhaus-Italic.eot?#iefix') format('embedded-opentype'),
	url('Fonts/Bauhaus-Italic.woff2') format('woff2'),
	url('Fonts/Bauhaus-Italic.woff') format('woff'),
	url('Fonts/Bauhaus-Italic.ttf') format('truetype'),
	url('Fonts/Bauhaus-Italic.svg#Bauhaus-Italic') format('svg');
}
@font-face {
	font-family: 'IBMPlex';
	src: url('Fonts/IBMPlexMono-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'IBMPlexBold';
	src: url('Fonts/IBMPlexMono-Bold.ttf') format('truetype');
}

* {
	box-sizing: border-box;
}

a {
    background: linear-gradient(90deg, rgba(70,228,252,1) 30%, rgba(63,94,251,1) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 275ms ease;
    word-wrap: break-word;
    font-family:IBMPlex;
    font-size: 3.5vw;
}

/* unvisited link */
a:link {
    background: linear-gradient(90deg, rgba(70,228,252,1) 30%, rgba(63,94,251,1) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 275ms ease;
    word-wrap: break-word;
}

/* visited link */
a:visited {
    background: linear-gradient(90deg, rgba(70,228,252,1) 30%, rgba(63,154,251,1) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 275ms ease;
    word-wrap: break-word;
}

/* mouse over link */
a:hover {
    background-position: 0 100%;
}

/* selected link */
a:active {
    background-position: 100 0%;
}

.main-title {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%;
    margin-bottom: -1%;
	width: 75%;
}

.placeholder-slideshow {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%;
	margin-bottom: 3%;
	width: 100%;
}

.slideshow-column {
	float: left;
	/*padding-left: 10px;*/
}

.previous {
	width: 20%;
	background-image: url("Slideshow/FoolsGoldPhoto3.webp");
	background-position: right; 
	background-repeat: no-repeat; 
	background-size: cover; 
	height: 40vw;
	-webkit-mask-image: -webkit-gradient(linear, right center, 
    left center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	opacity: 95%;
	display: block;
	border-radius: 6px;
}

.main {
	width: 60%;
	background-image: url("Slideshow/RunPhoto3.jpg");
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover; 
	height: 40vw;
	border-radius: 6px;
	padding: 0;
}

.next {
	width: 20%;
	background-image: url("Slideshow/RunPhoto4.jpg");
	background-position: left; 
	background-repeat: no-repeat; 
	background-size: cover; 
	height: 40vw;
	-webkit-mask-image: -webkit-gradient(linear, left center, 
    right center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	opacity: 95%;
	display: block;
	border-radius: 6px;
}

.slideshow:after {
	content: "";
	display: table;
	clear: both;
}

.slideshow {
	width:90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%;
	margin-bottom: 2.5%;
}

.transitionimg {

	width:100%;
	height:100%;
	object-fit: cover;
	opacity: 0;

}

#previoustransition {

	object-position: right;

}
#nexttransition {

	object-position: left;

}

.placeholder-player {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%;
	margin-bottom: 3%;
	width: 80%;  
}

.paragraph-div {
	background-image: url("paragraph-divider.png");
	background-repeat: no-repeat; 
	background-position: center; 
	background-size: contain; 
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin: 0 auto;
	width: 25vw;
	height:5vw;
}

#main_profile {
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    width: 100vw;
    object-fit: cover;
    /*-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    border-radius:10px;*/
    
}

#subpage_profile {
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 100vw;
    object-fit: cover;
    opacity:0.7;
    position:relative;
    /*-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    border-radius:10px;*/
    
}

#banner-video{
    
    width: 100vw;
    object-fit: cover;
    margin:0;
    padding:0;
    margin-bottom:-1vw;
    opacity:0.5;
    
}

#home-banner-video{
    
    width: 100vw;
    object-fit: cover;
    margin:0;
    padding:0;
    margin-bottom:-1vw;
    opacity:0.8;
    
}

#subpage-title {
    font-family: IBMPlexBold;
    color:white;
    font-size: 9.5vw;
    line-height: 1.1;
    text-align: center;
    position: absolute;
    padding:0;
    margin:0;
    top:25vw;
    left:10vw;
    z-index:10;
    opacity:0.5;
}

#menu_bar {
    
    display: table;
    margin: auto;
    padding: 0;
    width: 100vw;
    height: 7vh;
    background-color: #000000;
    /*-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
    overflow: hidden;*/
    display: flex;
    justify-content: center;
    opacity:0.9;
    margin-bottom:0;
    border:0;
    min-height:70px;
    
}

#menu_bar a {
    display: table-cell;
  text-align: center;
  padding-right: 14px;
  padding-left: 14px;
  text-decoration: none;
  font-size: 3vw;
  line-height: max(7vh, 70px);
  vertical-align: middle;
  
    background: linear-gradient(90deg, rgba(244,34,157,1) 30%, rgba(70,228,252,1), rgba(255,255,255,1) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 250% 100%;
    background-position: 100%;
    transition: background-position 350ms ease;
    word-wrap: break-word;
    font-family:IBMPlex;
    
}

/* unvisited link */
#menu_bar a:link {
    background: linear-gradient(90deg, rgba(244,34,157,1) 30%, rgba(70,228,252,1), rgba(255,255,255,1) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 250% 100%;
    background-position: 100%;
    transition: background-position 350ms ease;
    word-wrap: break-word;
}

/* visited link */
#menu_bar a:visited {
    background: linear-gradient(90deg, rgba(244,34,157,1) 30%, rgba(70,228,252,1), rgba(255,255,255,1) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 250% 100%;
    background-position: 100%;
    transition: background-position 350ms ease;
    word-wrap: break-word;
}

/* mouse over link */
#menu_bar a:hover {
    background-position: 0 100%;
}

/* selected link */
#menu_bar a.active {
    background-position: 0 100%;
    background: linear-gradient(90deg, rgba(255,0,104,1) 30%, rgba(70,228,252,1), rgba(255,255,255,1) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 250% 100%;
    transition: background-position 1000ms ease;
}
#menu_bar a.active:hover {
    background-position: 100% 0%;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

#page_content {
    background-color:rgba(0, 0, 0, 0.8);
    margin:0;
    
}

.page_offset {
    
    padding-top: 7vh;
    
}

#content-spacer {
    
    margin:0;
    padding-top: 4vh;
    
}

#end-fade {
    
    height:9vh;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 18%, rgba(0,0,0,0) 100%);
    margin-bottom:4vh;
    
}

#end-fade p {
    
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    color:rgba(255,255,255,0.2);
    font-size:1.4vw;
    
}

.paragraph {
	margin-left: 6%;
	margin-right:5%;
    margin-top:0;
	padding-top:0;
	margin-bottom: 0;
    padding-bottom:4vh;
	text-indent: 4vw;
    
}



.band-sketch {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
	margin-top: -7%;
 	margin-bottom: -3%;
 	width: 80%;
}

.show-column {
	float: left;
	padding-left: 10px;
}

.venue {
	width: 38%;
}

.location {
	width: 25%;
}

.date {
	width: 37%;
}

.shows-list:after {
	content: "";
	display: table;
	clear: both;
}

.shows-list {
	margin-left:10%;
	margin-top:-5%;
}
.shows-list h2 {
	font-family: IBMPlex;
	color:white;
	line-height: 0.5;
	font-size: 3vw;
}

.album-info-column {
	float: left;
	width:50%;
}

.album-info:after {
	content: "";
	display: table;
	clear: both;
}

.album-info {
	margin-left:10%;
	margin-top:10%;
	margin-bottom: 10%;
}

.album-title {
	margin-top: 10%;
	margin-bottom: -15%;
	text-align: left;
	font-size: 9vw;
}

.album-date {
	margin-top: 10%;
	margin-bottom: -15%;
	text-align: left;
	font-size: 8vw;
}

.album-year {
	margin-top: -15.5%;
	margin-left: 25%;
	font-size: 6vw;
}

.cover-art {
	display: block;
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%;
	margin-left: 10%;
	 width: 75%;
}

.contact-info-column {
	float: left;
}

.contact-info:after {
	content: "";
	display: table;
	clear: both;
}

.contact-info {
	margin-top:10%;
	margin-left: 14%;
	margin-bottom: 13%;
}

.contact-link {
	margin-top:0.4%;
}

#email {
    text-align: center;
    padding-bottom: 4%;
}

#phone {
	width:45%;
	text-align: left;
}

.link-icon {
	width:10%;
	margin-bottom: 0;
	float:left;
}

.epk-download {
	font-family:IBMPlex;
	font-size: 3vw;
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10%;
}

.player {
	font-family: IBMPlex;
	margin-top: 5%;
 	margin-bottom: 3%;
}

body {
	background-image: url("background.png");
	background-color: #000000;
	width: 100vw;
	background-position: center 0; 
	background-repeat: no-repeat; 
	background-size: cover; 
	margin: 0;
	padding: 0;
}

p {
	font-family: IBMPlex;
	color:white;
	font-size: 3vh;
	line-height: 1.1;
    margin-top:0;
    margin-bottom:0;
}

h1 {
	font-family: IBMPlexBold;
	color:white;
	font-size: 9.5vw;
	line-height: 1.1;
	text-align: center;
}
h2 {
	font-family: IBMPlexBold;
	color:white;
	font-size: 3vw;
	line-height: 1.1;
	text-align: center;
}




@media (max-aspect-ratio: 2/2){ /*Portrait*/
	.previous {
		display: none;
	}
	.next {
		display: none;
	}
	.main {
		margin-left: auto;
		margin-right: auto;
		margin-top:-5vh;
		margin-bottom:-5vh;
		padding: 0;
		padding-left:none;
		width:100vw;
		height:75vh;
		border-radius: 15px;
		/*-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);*/
		-webkit-mask-image: radial-gradient(ellipse at center 49%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 69%);
		-webkit-mask-size: 90% 100%;
		-webkit-mask-position:center;
		-webkit-mask-repeat: no-repeat;
	}
	.slideshow-column {
		float: none;
	}
	.slideshow {
		margin-left: 0;
	}
	.main-title {
		width: 90%;
	}
	.paragraph-div {
		width: 45vw;
		height:5vw;
	}
	p {
		font-size: 2.5vh;
	}
	.shows-list {
		margin-left:4%;
	}
	.band-sketch {
	 	width: 93%;
	}
	.contact-link {
		font-size: 5vw;
	}
	.contact-info {
		margin-top:10%;
		margin-left: 4%;
		margin-bottom: 7%;
	}
    
    #menu_bar {
        -webkit-mask-image: none;
    }
    
    #menu_bar a {
      font-size: 6vw;
    }

}

rgb(210, 87, 255)