@charset "UTF-8";
/* CSS Document */
/* Style the header: fixed position (always stay at the top) */

body, html {
  height: 100%;
}

.sticky {
	position: fixed;
    width: 100%;
    z-index: 10000;
}

.Introduction
{
  background-image:linear-gradient(180deg, rgba(255,0,0,0), rgba(255,0,0,0), rgb(162,101,72)), url("../Images/Hozier_BGIntro_Image.webp");
  background-size: cover; 
  background-repeat: no-repeat;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
}

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  border-radius: 20px;
  background-color:#D1D1D1;
  margin-top: 2%;
  padding-top: 1%;
  z-index: 98
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #BF856A;
  width: 0%;
  border-radius: 20px;
  margin-top:2%;
  padding-top: 1%;
  z-index: 99
}


/*Navigation Styling*/
.navbar
{
	padding-top: 3%;
	font-family: Alfarn;
	color: #FFFFFF;
	background-color: rgba(0,0,0,1);
	z-index:50;
	display: inline;
	align-content: justify;
	
	
}

.nav-link {
	text-decoration: none;
	color: #BF856A
}


/*Main Page Head and SubHead*/
.MainHeader
{
	font-family: Alfarn;
	color: #BF856A;
	padding:20% 0% 5% 10%;
	font-size: 200%;
	line-height: 110%;	
}

.SubHeader 
{
	font-family:Alfarn;
	padding-left:6%;
	font-size: 100%;
	color: #B27557;
	padding-bottom: 40%

}

/*Artist Information*/
.column {
  float: left;
  width: 50%;
  padding: 0% 5% 0% 5%
}

.ArtistInfo
{
	background-color:rgb(162,101,72);
	background-image:linear-gradient(180deg, rgb(162,101,72,1), rgba(0,0,0,0), rgba(0,0,0,.75), rgba(0,0,0,1));
	font-family: 'Acumin Pro';
	font-size: 20px;
	text-align: justify;
	color: #FFFFFF;
	padding: 0% 4%
}

.ArtistBios {
	padding: 0% 6% 30%
}

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

/*Descent and PreDescent*/
.Descent {
	background-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.75), rgba(0,0,0,1)), url("../Images/DarkWood.webp");
	background-repeat: no-repeat;
	background-size: cover;
	font-family:"Acumin Pro";
	line-height: 2;
	font-size: 180% ;
	color:#FFFFFF;
}

.DeSelby {
	
	padding: 5% 0% 0% 10%
}

.CantoI {
	padding: 30% 10% 10% 10%;
	text-align: right
	
}

#GatesofHell {
	color:#FFFFFF;
	font-size:80%;
	line-height: 100%;
	padding: 20% 0% 40% 10%;
	
}

.Gates {
	background-image: linear-gradient(180deg, rgba(0,0,0,.9),rgba(0,0,0,.5), rgba(0,0,0,.9)), url("../Images/Gates.webp");
	background-color:#000000;
	background-blend-mode: hard-light;
	background-size: cover;
	background-repeat: no-repeat;
	font-family:Alfarn;
	color:#FFFFFF;
	font-size:400%;
}


/*Basic Body and SubHead Styles*/
.CircleIntro {
	background-color: rgba(162,101,72,1);
	font-size:100%;
	font-family: "Acumin Pro";
	font-weight: 600;
	text-align: justify;
	color: #FFFFFF;
	padding: 4% 8% 5% 8%;
}

.CircleIntroII {
	font-family: Acumin 'Acumin Pro';
	font-weight: 600;
	text-align: justify;
	color: #FFFFFF;
	padding: 4% 8% 5% 8%;
}


.DanteChapter {
	background-color: #7B3E21;
	font-family: Alfarn;
	font-size:150%;
	line-height:1;
	color: #FFFFFF;
	padding:2% 0% 2% 8%;

}

.HozierSongName {
	background-color:#7B3E21;
	display: grid;
	font-family: Alfarn;
	font-size:150%;
	line-height:1;
	color: #FFFFFF;
	padding:2% 0% 2% 8%;
}

.Quotes {
	background-color: rgba(162,101,72,1);
	font-family: "Acumin Pro";
	font-size:90%;
	color: #FFFFFF;
	font-weight: 600;
	line-height: 3;
	padding: 2% 0% 10% 8%
}

.QuoteBG {
	background-color:rgba(162,101,72,1);
}

.DanteChapterDark {
	background-color: rgba(162,101,72,1);
	font-family: Alfarn;
	font-size:150%;
	line-height:1;
	color: #FFFFFF;
	padding:2% 0% 2% 8%;
}

.HozierSongNameDark {
	background-color:rgba(162,101,72,1);
	font-family: Alfarn;
	font-size:150%;
	line-height:1;
	color: #FFFFFF;
	padding:2% 0% 2% 8%;
}

.QuotesDark {
	font-family: Acumin 'Acumin Pro';
	font-size:90%;
	color: #FFFFFF;
	font-weight: 600;
	line-height: 3;
	padding: 2% 0% 10% 8%
}

.AscentQuotes {
	font-family: Acumin 'Acumin Pro';
	font-size:90%;
	color: #000000;
	font-weight: 600;
	line-height: 3;
	padding: 2% 0% 30% 8%
}

/*Styling of Circle Heros*/
.Limbo {
	font-family: Alfarn;
	font-size:350%;
	color:#FFFFFF;
	background-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.5), rgba(0,0,0,.5), rgba(162,101,72,1)), url("../Images/LIMBO.webp");
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5% 0% 30% 10%
}

.Lust {
	font-family: Alfarn;
	font-size:350%;
	text-align: right;
	color:#FFFFFF;
	background-image:linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.5), rgba(0,0,0,.5), rgba(162,101,72,1)), url("../Images/LUST.webp");
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5% 10% 30% 0%
}

.Icarian {
	background-color: rgba(162,101,72,1);
	font-family: "Acumin Pro";
	font-size:90%;
	color: #FFFFFF;
	font-weight: 600;
	line-height: 1.75;
	padding: 3% 0% 3% 9% 
}

.Glutton {
	font-family: Alfarn;
	font-size:350%;
	color:#FFFFFF;
	background-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.5), rgba(0,0,0,.5), rgba(162,101,72,1)), url("../Images/GLUTTONY.webp");
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5% 0% 30% 10%
}

.Greed {
	font-family: Alfarn;
	font-size:350%;
	color:#FFFFFF;
	background-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.5), rgba(0,0,0,.5), rgba(162,101,72,1)), url("../Images/GREED.webp");
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5% 0% 30% 10%
}

.Wrath {
	font-family: Alfarn;
	font-size:350%;
	color:#FFFFFF;
	background-image: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.75), rgba(0,0,0,.75), rgba(162,101,72,1)), url("../Images/WRATH.webp");
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5% 0% 30% 10%
}
 
.HeresyName {
	background-color:#000000;
	font-family: Alfarn;
	font-size: 350%;
	color: #BF856A;
	padding-top: 3%
}

.CityofDis {
	background-color:#000000;
}

.HeresyGap {
	padding-bottom:40%
}

.CircleIntroDark {
	background-color:#000000;
	font-family: Acumin 'Acumin Pro';
	font-weight: 600;
	text-align: justify;
	color: #FFFFFF;
	padding: 4% 8% 5% 8%;
}


#HeresyTomb {
	background-image: url("../Images/Heresy_Tomb.webp");
	background-color: #000000;
	background-size: cover;
	background-blend-mode:hard-light;	

}

.SonofNyx {
	background-color:rgba(162,101,72,1);
	font-family: Alfarn;
	font-size:130%;
	line-height:1;
	color: #FFFFFF;	
	padding: 1% 8% 1% 6%;
	text-align: center;
	margin-top: 5%
}

.Violence {
	background-color: #000000;
	font-family: Alfarn;
	font-size: 350%;
	color: #BF856A;
}


#RingOne {
	background-image:linear-gradient(180deg, rgba(0,0,0,.90), rgba(0,0,0,.90)), url("../Images/Gustave_Doré_-_The_Inferno,_Canto_12-1.webp");
	background-color:#000000;
	background-size: cover;
}

#RingOneTypeI {
	font-family: Alfarn;
	color:#BF856A;
	font-size: 150%;
	padding: 5% 0% 8% 15%;
	text-align: left
}

#AgainstNeighbors {
	
	font-family: Alfarn;
	color:#BF856A;
	font-size: 100%;
	padding: 4.25% 0% 8% 2%
}

#RingTwoTypeI {
	font-family: Alfarn;
	color:#BF856A;
	font-size: 150%;
	text-align: right
}

#AgainstOneself {
	
	font-family: Alfarn;
	color:#BF856A;
	font-size: 36%;
}

.RingTwo {
	background-image:linear-gradient(180deg, rgba(0,0,0,.90), rgba(0,0,0,.90)), url("../Images/RingTwoBG.jpg");
	background-color:#000000;
	font-size: 100%;
	text-align: left;

}

#RingThreeTypeI {
	font-family: Alfarn;
	color:#BF856A;
	font-size: 72%;
	text-align: left
}

#AgainstGod {
	
	font-family: Alfarn;
	color:#BF856A;
	font-size: 100%;
	padding: 4.25% 0% 40% 2%
}

.RingThree {
	background-image:linear-gradient(180deg, rgba(0,0,0,.80), rgba(0,0,0,1)), url("../Images/Inferno_Canto_14_verses_37-39.webp");
	background-color:#000000;
	
}

.Fraud {
	background-color: #000000;
	font-family: Alfarn;
	font-size: 350%;
	color: #BF856A;
}

#FraudImagery {
	background-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.75)), url("../Images/Fraud.webp");
	background-size:cover;
	background-repeat:no-repeat;
	background-color:#000000;
	background-blend-mode: hard-light;
}

.Treachery {
	background-color: #000000;
	font-family: Alfarn;
	font-size: 350%;
	color: #BF856A; 
}

.CenterofHell {
	background-image: url("../Images/SATAN.jpg");
	background-size:cover;
	background-blend-mode: hard-light;
	background-color:#000000;	
}

.Ascent {
	background-image:linear-gradient(180deg, rgba(0,0,0,1),rgba(0,0,0,0),rgba(255,255,255,.5), rgba(255,255,255,1)), url("../Images/ASCEND.jpg");
	background-size:cover;
	background-blend-mode: hard-light;
	background-color:white;
	font-family: Alfarn;
	font-size: 500%;
	color: rgba(162,101,72,1);
	padding: 20% 0%
}

/*Footer Styling*/


.hr {
	border: 5px black;
}


/*MicroInteractions and CSS Animations*/
.parallax {
	background-image:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.75)), url("../Images/TREACHERY.webp");
	height:100%;
	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	
}

.animate__animated.animate__slideInLeft {
	animation-timing-function:ease-in;
	animation-duration:1.5s;
}

.animate__animated.animate__slideInRight {
	animation-timing-function:ease-in;
	animation-duration:1.5s;
	
}



/*// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap*/

/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
			
	.MainHeader {
		font-size:350%;
		line-height:100%;
		padding: 10% 0% 1% 7%
	}
	
	.SubHeader {
		font-size: 200%;
		line-height: 120%;
		padding-left: 8%;	
	}

	
	#GatesofHell {
		font-size:200%;
		line-height: 100%;
		padding: 20% 0% 20% 10%;
	}
	
	.Limbo{
		font-size:600%;
	}
	
	.Lust {
		font-size:600%;
		text-align: right;
	}
	
	.Glutton {
		font-size:600%;	
	}
	
	.Greed {
		font-size:600%;
	}
	
	.Wrath {
		font-size:600%;
	}
	
	.Icarian {
		padding: 0% 0% 10% 4%
	}
	
	.HeresyName {
		font-size:600%	
	}
	
	.Violence {
		font-size: 600%;
	}
	
	.Fraud {
		font-size: 600%;
		
	}
	
	.Treachery {
		font-size:600%
	}
	
	.SonofNyx {
			font-size:250%;
	}
	
	.Ascent {
		
		font-size: 1000%
	}
	
	
}


/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {}