@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');
}

@font-face {
    font-family: 'Lilita One';
    src: url('Fonts/LilitaOne.eot');
    src: url('Fonts/LilitaOne.eot?#iefix') format('embedded-opentype'),
        url('Fonts/LilitaOne.woff2') format('woff2'),
        url('Fonts/LilitaOne.woff') format('woff'),
        url('Fonts/LilitaOne.ttf') format('truetype'),
        url('Fonts/LilitaOne.svg#LilitaOne') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('Fonts/ChakraPetch-Bold.eot');
    src: url('Fonts/ChakraPetch-Bold.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ChakraPetch-Bold.woff2') format('woff2'),
        url('Fonts/ChakraPetch-Bold.woff') format('woff'),
        url('Fonts/ChakraPetch-Bold.ttf') format('truetype'),
        url('Fonts/ChakraPetch-Bold.svg#ChakraPetch-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('Fonts/ChakraPetch-BoldItalic.eot');
    src: url('Fonts/ChakraPetch-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ChakraPetch-BoldItalic.woff2') format('woff2'),
        url('Fonts/ChakraPetch-BoldItalic.woff') format('woff'),
        url('Fonts/ChakraPetch-BoldItalic.ttf') format('truetype'),
        url('Fonts/ChakraPetch-BoldItalic.svg#ChakraPetch-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('Fonts/ChakraPetch-SemiBold.eot');
    src: url('Fonts/ChakraPetch-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ChakraPetch-SemiBold.woff2') format('woff2'),
        url('Fonts/ChakraPetch-SemiBold.woff') format('woff'),
        url('Fonts/ChakraPetch-SemiBold.ttf') format('truetype'),
        url('Fonts/ChakraPetch-SemiBold.svg#ChakraPetch-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('Fonts/ChakraPetch-Regular.eot');
    src: url('Fonts/ChakraPetch-Regular.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ChakraPetch-Regular.woff2') format('woff2'),
        url('Fonts/ChakraPetch-Regular.woff') format('woff'),
        url('Fonts/ChakraPetch-Regular.ttf') format('truetype'),
        url('Fonts/ChakraPetch-Regular.svg#ChakraPetch-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('Fonts/ChakraPetch-SemiBoldItalic.eot');
    src: url('Fonts/ChakraPetch-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ChakraPetch-SemiBoldItalic.woff2') format('woff2'),
        url('Fonts/ChakraPetch-SemiBoldItalic.woff') format('woff'),
        url('Fonts/ChakraPetch-SemiBoldItalic.ttf') format('truetype'),
        url('Fonts/ChakraPetch-SemiBoldItalic.svg#ChakraPetch-SemiBoldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('Fonts/ChakraPetch-Medium.eot');
    src: url('Fonts/ChakraPetch-Medium.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ChakraPetch-Medium.woff2') format('woff2'),
        url('Fonts/ChakraPetch-Medium.woff') format('woff'),
        url('Fonts/ChakraPetch-Medium.ttf') format('truetype'),
        url('Fonts/ChakraPetch-Medium.svg#ChakraPetch-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('Fonts/ChakraPetch-Light.eot');
    src: url('Fonts/ChakraPetch-Light.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ChakraPetch-Light.woff2') format('woff2'),
        url('Fonts/ChakraPetch-Light.woff') format('woff'),
        url('Fonts/ChakraPetch-Light.ttf') format('truetype'),
        url('Fonts/ChakraPetch-Light.svg#ChakraPetch-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('Fonts/ChakraPetch-Italic.eot');
    src: url('Fonts/ChakraPetch-Italic.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ChakraPetch-Italic.woff2') format('woff2'),
        url('Fonts/ChakraPetch-Italic.woff') format('woff'),
        url('Fonts/ChakraPetch-Italic.ttf') format('truetype'),
        url('Fonts/ChakraPetch-Italic.svg#ChakraPetch-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('Fonts/ChakraPetch-MediumItalic.eot');
    src: url('Fonts/ChakraPetch-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ChakraPetch-MediumItalic.woff2') format('woff2'),
        url('Fonts/ChakraPetch-MediumItalic.woff') format('woff'),
        url('Fonts/ChakraPetch-MediumItalic.ttf') format('truetype'),
        url('Fonts/ChakraPetch-MediumItalic.svg#ChakraPetch-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('Fonts/ChakraPetch-LightItalic.eot');
    src: url('Fonts/ChakraPetch-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('Fonts/ChakraPetch-LightItalic.woff2') format('woff2'),
        url('Fonts/ChakraPetch-LightItalic.woff') format('woff'),
        url('Fonts/ChakraPetch-LightItalic.ttf') format('truetype'),
        url('Fonts/ChakraPetch-LightItalic.svg#ChakraPetch-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Dosis';
    src: url('Fonts/Dosis-Medium.eot');
    src: url('Fonts/Dosis-Medium.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Dosis-Medium.woff2') format('woff2'),
        url('Fonts/Dosis-Medium.woff') format('woff'),
        url('Fonts/Dosis-Medium.ttf') format('truetype'),
        url('Fonts/Dosis-Medium.svg#Dosis-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dosis';
    src: url('Fonts/Dosis-Light.eot');
    src: url('Fonts/Dosis-Light.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Dosis-Light.woff2') format('woff2'),
        url('Fonts/Dosis-Light.woff') format('woff'),
        url('Fonts/Dosis-Light.ttf') format('truetype'),
        url('Fonts/Dosis-Light.svg#Dosis-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dosis';
    src: url('Fonts/Dosis-Regular.eot');
    src: url('Fonts/Dosis-Regular.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Dosis-Regular.woff2') format('woff2'),
        url('Fonts/Dosis-Regular.woff') format('woff'),
        url('Fonts/Dosis-Regular.ttf') format('truetype'),
        url('Fonts/Dosis-Regular.svg#Dosis-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dosis';
    src: url('Fonts/Dosis-SemiBold.eot');
    src: url('Fonts/Dosis-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Dosis-SemiBold.woff2') format('woff2'),
        url('Fonts/Dosis-SemiBold.woff') format('woff'),
        url('Fonts/Dosis-SemiBold.ttf') format('truetype'),
        url('Fonts/Dosis-SemiBold.svg#Dosis-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dosis';
    src: url('Fonts/Dosis-ExtraBold.eot');
    src: url('Fonts/Dosis-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Dosis-ExtraBold.woff2') format('woff2'),
        url('Fonts/Dosis-ExtraBold.woff') format('woff'),
        url('Fonts/Dosis-ExtraBold.ttf') format('truetype'),
        url('Fonts/Dosis-ExtraBold.svg#Dosis-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dosis';
    src: url('Fonts/Dosis-ExtraLight.eot');
    src: url('Fonts/Dosis-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Dosis-ExtraLight.woff2') format('woff2'),
        url('Fonts/Dosis-ExtraLight.woff') format('woff'),
        url('Fonts/Dosis-ExtraLight.ttf') format('truetype'),
        url('Fonts/Dosis-ExtraLight.svg#Dosis-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dosis';
    src: url('Fonts/Dosis-Bold.eot');
    src: url('Fonts/Dosis-Bold.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Dosis-Bold.woff2') format('woff2'),
        url('Fonts/Dosis-Bold.woff') format('woff'),
        url('Fonts/Dosis-Bold.ttf') format('truetype'),
        url('Fonts/Dosis-Bold.svg#Dosis-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kdam Thmor Pro';
    src: url('Fonts/KdamThmorPro-Regular.eot');
    src: url('Fonts/KdamThmorPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('Fonts/KdamThmorPro-Regular.woff2') format('woff2'),
        url('Fonts/KdamThmorPro-Regular.woff') format('woff'),
        url('Fonts/KdamThmorPro-Regular.ttf') format('truetype'),
        url('Fonts/KdamThmorPro-Regular.svg#KdamThmorPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bayer Universal';
    src: url('Fonts/BayerUniversalRegular.eot');
    src: url('Fonts/BayerUniversalRegular.eot?#iefix') format('embedded-opentype'),
        url('Fonts/BayerUniversalRegular.woff2') format('woff2'),
        url('Fonts/BayerUniversalRegular.woff') format('woff'),
        url('Fonts/BayerUniversalRegular.ttf') format('truetype'),
        url('Fonts/BayerUniversalRegular.svg#BayerUniversalRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bauhaus';
    src: url('Fonts/Bauhaus-Bold.eot');
    src: url('Fonts/Bauhaus-Bold.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Bauhaus-Bold.woff2') format('woff2'),
        url('Fonts/Bauhaus-Bold.woff') format('woff'),
        url('Fonts/Bauhaus-Bold.ttf') format('truetype'),
        url('Fonts/Bauhaus-Bold.svg#Bauhaus-Bold') format('svg');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Bauhaus';
    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-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Bauhaus';
    src: url('Fonts/Bauhaus-BoldItalic.eot');
    src: url('Fonts/Bauhaus-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Bauhaus-BoldItalic.woff2') format('woff2'),
        url('Fonts/Bauhaus-BoldItalic.woff') format('woff'),
        url('Fonts/Bauhaus-BoldItalic.ttf') format('truetype'),
        url('Fonts/Bauhaus-BoldItalic.svg#Bauhaus-BoldItalic') format('svg');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Bauhaus';
    src: url('Fonts/Bauhaus-Regular.eot');
    src: url('Fonts/Bauhaus-Regular.eot?#iefix') format('embedded-opentype'),
        url('Fonts/Bauhaus-Regular.woff2') format('woff2'),
        url('Fonts/Bauhaus-Regular.woff') format('woff'),
        url('Fonts/Bauhaus-Regular.ttf') format('truetype'),
        url('Fonts/Bauhaus-Regular.svg#Bauhaus-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




* {
	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:'bauhausItalic';
    font-size: 3.5vw;
    padding-left:2%;
    padding-right:2%;
    text-align:center;
}

/* 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-parent {
  position: relative;
  top: 0;
  left: 0;
  display:block;
  height:25vw;
}

.main-title {
    position: relative;
    top: 0;
	margin-left: 12.5%;
	margin-right: 12.5%;
	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: 25%;
	background-position: right;
	background-repeat: no-repeat; 
	background-size: cover; 
	height: 35vw;
    margin-top:2.5vw;
    margin-right:0;
	/*-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: 2px;
}

.main {
	width: 40%;
    margin-left:5%;
    margin-right:5%;
	background-position: center;
	background-repeat: no-repeat; 
	background-size: cover; 
	height: 40vw;
	border-radius: 2px;
	padding: 0;
}

.next {
	width: 25%;
	background-position: left;
	background-repeat: no-repeat; 
	background-size: cover; 
	height: 35vw;
    margin-top:2.5vw;
    margin-right:0;
	/*-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: 2px;
}

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

.slideshow {
	width:100%;
	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;
    opacity:0.8;
    position: absolute;
    background-color:black;
    
}

#portfolio-banner-video{
    
    width: 100vw;
    object-fit: cover;
    margin:0;
    padding:0;
    opacity:0.8;
    position: absolute;
    
}

#home-banner-video{
    
    width: 100vw;
    object-fit: cover;
    margin:0;
    padding:0;
    margin-bottom:-1vw;
    opacity:0.8;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(1,0,13,0.727328431372549) 16%, rgba(1,0,15,1) 34%, rgba(2,0,36,1) 100%);
    
}

#subpage-title {
    font-family: 'Kdam Thmor Pro';
    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;
    /*-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;
    z-index:100;
    
}

#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;
    margin-top:-0.75%;
      
    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:'bellerose';
    font-weight:bold;
    
}

/* 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%;
  background-color: #000000;
}

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

#page_content {
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
    margin:0;
    height:100%;
    
}

.page_offset {
    
    padding-top: -max(1vh,70px);
    
}

#content-spacer {
    
    margin:0;
    padding-top: max(7vh,70px);
    
}

.center_image {
    
    width:80%;
    margin-left:10%;
    margin-right:10%;
    margin-bottom:3%;
    padding:0;
    border-radius:5px;
    
}

.spectre_logo {
    
    width:40%;
    margin-left:30%;
    margin-right:30%;
    margin-bottom:3%;
    padding:0;
    
}

#end-fade {
    
    height:9vh;
    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 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;
    text-align:center;
    
}



.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%;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
    text-align:center;
    font-size:3vw;
    padding-bottom:3%;
}

#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;
}

.alt_background {
    
    background-image: url("background.png");
    background-blend-mode: darken;
    background-color: rgba(1,1,1,0.7);
    
}

p {
	font-family: 'bauhausItalic';
	color:white;
	font-size: max(3.5vh,1.8vw);
	line-height: 1.4;
    margin-top:0;
    margin-bottom:0;
}

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

.media-links-column {
    float: left;
}

.media-links:after {
    content: "";
    display: table;
    clear: both;
}

.media-links {
    margin-top:0%;
    margin-left: 38%;
    margin-bottom: 0%;
}

.media-link {
    margin-top:0.4%;
    padding-right:3.5vw;
}

.media-link-icon {
    height:5vw;
    margin-bottom: 0;
    float:left;
}

.media-link-icon:hover {
    
    opacity:70%;
    
}

.home-media-links:after {
    content: "";
    display: table;
    clear: both;
}

.home-media-links {
    margin-bottom: 3%;
    padding-left:8%;
    padding-top:8%;
}

.paragraph a {
    
    font-size:3vw;
    padding-left:0;
    
}

#contact-paragraph p {
    
    font-size:3vw;
    
}

.portfolio-images-container {
    
}

.portfolio-images-container:after {

    content: "";
    display: table;
    clear: both;
    
}

.portfolio-image-column {
    
    float: left;
    
}

.portfolio-image {
    
    width:20vw;
    height:85vh;
    margin:0;
    padding:0;
    margin-bottom: 0;
    float:left;
    
    object-fit: cover;
    cursor: pointer;
    
}

.portfolio-title {
    
    font-family:'bellerose';
    color:white;
    position:relative;
    font-size:3vw;
    text-align:center;
    height:0;
    display:block;
    float:none;
    margin:0;
    padding:0;
    top:65vh;
}

.main-title-parent-portfolio {
  position: relative;
  top: 0;
  left: 0;
  display:block;
  height:15vh;
  padding-bottom:1vh;
  background-color:rgba(0,0,0,0.8);
  min-height:150px;
}

.main-title-small {
    position: relative;
    top: 0;
    margin-left: 35%;
    margin-right: 35%;
    margin-top: 0;
    margin-bottom: -1%;
    width: 30%;
}

.portfolio-subpage-images-container {
    
}

.portfolio-subpage-images-container:after {

    content: "";
    display: table;
    clear: both;
    
}

.portfolio-subpage-image-column {
    
    float: left;
    
}

.portfolio-subpage-image {
    
    width:50vw;
    padding:2vw;
    height:50vw;
    margin:0;
    margin-bottom: 0;
    float:left;
    
    object-fit: cover;
    background-color:rgba(0,0,0,0.1);
    transition: -webkit-mask-position 275ms ease;
    -webkit-mask-position:100% 0;
    -webkit-mask-size: 100% 200%;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 30%, rgba(0,0,0,0.5), rgba(0,0,0,0.1) 60%);
    cursor: pointer;
    
}

.portfolio-subpage-image-column:hover .portfolio-subpage-image {
    
    -webkit-mask-position:0 40%;
    
}

.portfolio-subpage-hover-title {
    
    font-family:'bellerose';
    color:white;
    position:relative;
    font-size:3vw;
    text-align:center;
    height:0;
    display:block;
    float:none;
    margin:0;
    padding:0;
    top:30vw;
    line-height:3vw;
    opacity:0;
}

.portfolio-subpage-image-column:hover .portfolio-subpage-hover-title {
    
    opacity:100%;
    
}

.portfolio-page-title {
    
    margin:0;
    font-family:'bellerose';
    
}

.portfolio-subpage-slideshow-info-title {
    
    font-family:'bellerose';
    color:white;
    font-size:4vw;
    text-align:center;
    padding:0;
    margin:0;
    margin-top:-8vw;
    margin-bottom:-3vw;
    
}

.portfolio-hidden-section {
    
    background-position:100% 0;
    opacity:0;
    z-index:-1;
    
}

.portfolio-covered-section {
    
    opacity:50%;
    z-index:10;
    
}

.portfolio-subpage-info-container {
    
}

.portfolio-subpage-info-container:after {

    content: "";
    display: table;
    clear: both;
    
}

.portfolio-subpage-info-column {
    
    float: left;
    width:50vw;
    height:50vw;
    
}

.portfolio-subpage-info-image {
    
    width:50vw;
    padding:2vw;
    height:50vw;
    margin:0;
    margin-bottom: 0;
    float:left;
    border-radius:2.5vw;
    
    object-fit: cover;
    background-color:rgba(0,0,0,0.1);
    
}

.portfolio-subpage-info-title {
    
    font-family:'bellerose';
    color:white;
    position:relative;
    font-size:5vw;
    text-align:left;
    height:0;
    display:block;
    float:none;
    margin:0;
    padding-left:5vw;
    top:10vw;
    line-height:5vw;
}

.portfolio-subpage-info-text {
    
    font-family:'bellerose';
    color:white;
    font-size:3vw;
    text-align:left;
    display:block;
    padding-left:10vw;
    padding-right:6vw;
    line-height:3vw;
    text-indent: 2vw;
    padding-top:3vw;
    
}

.portfolio-subpage-info-text-container {
    
    padding-top:5vw;
    padding-bottom:5vw;
    
}

#portfolio-subpage-info-view {
    
    width:100%;
    height:100vw;
    
}

.portfolio-subpage-info-view-fade {
    
    -webkit-mask-position:0 100%;
    z-index:20;
    
}

.portfolio-subpage-view {
    
    width:100%;
    height:150vw;
    position:relative;
    top:-150vw;
    margin-bottom:-150vw;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 8%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.8) 90%, rgba(0,0,0,0) 100%);
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5), rgba(0,0,0,1) 60%);
    -webkit-mask-size: 100% 200%;
    transition: -webkit-mask-position 605ms ease;
    
}

.portfolio-subpage-view-2-2 {
    
    width:100%;
    height:105vw;
    position:relative;
    top:-105vw;
    margin-bottom:-105vw;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 8%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.8) 90%, rgba(0,0,0,0) 100%);
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5), rgba(0,0,0,1) 60%);
    -webkit-mask-size: 100% 200%;
    transition: -webkit-mask-position 605ms ease;
    
}

#portfolio-subpage-list-container {
    
    z-index:10;
    
}

.portfolio-subpage-back-button {
    
    position:relative;
    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;
    cursor: pointer;
    
}


@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: 5px;
		/*-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;
        height:40vh;
        margin-top:2vh;
        padding-bottom:10vh;
	}
	.main-title {
		width: 90%;
        margin-left:5%;
        margin-right:5%;
        padding:0;
	}
	.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;
    }
    .main-title-parent-portfolio {
        height:13vh;
    }
    .portfolio-title {
        top:40vh;
    }
    .portfolio-image {
        height:50vh;
    }

    .main {
        width: 100%;
        height: 40vh;
        margin-top:2vh;
        padding-bottom:10vh;
    }
    
    .transitionimg {

        width:100%;
        height:40vh;

    }
    
    .portfolio-subpage-view-2-2 {
        
        width:100%;
        height:125vw;
        position:relative;
        top:-105vw;
        margin-bottom:-125vw;
        
    }
    

}
@media (max-aspect-ratio: 3/4){
    
    .portfolio-image-column {
        
        float: none;
        
    }
    
    .portfolio-image {
        
        width:100vw;
        height:15vh;
        margin:0;
        padding:0;
        margin-bottom: 0;
        float:none;
        
        object-fit: cover;
        cursor: pointer;
        
    }
    
    .portfolio-title {
        
        font-family:'bellerose';
        color:white;
        position:relative;
        font-size:10vw;
        text-align:center;
        height:0;
        display:block;
        float:none;
        margin:0;
        padding:0;
        top:0vh;
    }
}