/*MOBILE FIRST*/

@font-face {font-family: HelveticaNeue; src: url(/assets/fonts/HelveticaNeue-BlackCond.otf);}
@font-face {font-family: RidleyGrotesk; src: url(/assets/fonts/RidleyGrotesk-Black.otf);}

*{
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}

body{
	background: white;
}

h1{font-size: 6.6rem;}
h2{font-size: 6.3rem;}
h1,h2{
	font-family: HelveticaNeue;
	line-height: .9;
	color: #292929;
}

.layout{
	display: grid;
	grid-template-rows: 0fr 0fr;
	justify-items: center;
}

.groupName {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.groupName p{
	font-family: RidleyGrotesk;
	font-size: 3em;
	line-height: 0.8;
}

.albumTitle {
    display: grid;
    grid-template-areas:
    "special"
    "edition"
    "grand"
    "master"
    "deluxe";
    justify-self: stretch;
    text-align: center;
}
.albumTitle>*{
	grid-column: 2;

}

.blueBox{
	background-color: rgb(137,200,208);
    width: 31.5vw;
    position: absolute;
    bottom: -16px;
    left: 0;
    height: 40px;
    z-index: -1;
}
.blueBoxDesktop{
	display: none;
}
.redBox{
	background-color: rgb(218,72,68);
    width: 30.5vw;
    position: absolute;
    bottom: -16px;
    right: 0;
    height: 40px;
    z-index: -1;

}

.Special {
    letter-spacing: 2px;
    grid-area: special;
}
.Edition{
	letter-spacing: 5px;
	grid-area: edition;
	position: relative;
}
.Grand{
	letter-spacing: 14px;
	grid-area: grand;
	position: relative;
}
.Master{
	letter-spacing: 4px;
	grid-area: master;
}
.Deluxe{
	letter-spacing: 7px;
	grid-area: deluxe;
}
#jText{
	display: none;
	grid-area: jText;
}
#blackBox{
	display: none;
	grid-area: black;
}
#parentalAd{
	display: none;
	grid-area: parental;
}

.endMas, .topRed, .subRed{
	display: none;
}
.startMas{
	display: inline;
}


/*DESKTOP STYLES*/

@media(min-width: 1000px){
	body{
		background-image: url(/assets/images/misc/coolKids/coolkids-bg.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position-x: 25%;
		background-position-y: bottom;
	}

	.endMas{
		display: inline;
	}
	.startMas{
		display: none;
	}


	.topRed, .subRed{
		display: flex;
		background-color: #c3493a;
		grid-column: 2 / 6;
	}
	.subRed{
		display: grid;
		grid-template: 1fr / 1fr 1fr 1fr 1fr;
	}
	.subRed p{
		display: inline;
	}
	.asteriskG1, .asteriskG2 {
	    display: flex;
	    justify-content: flex-end;
	}
	.asteriskG1 p, .asteriskG2 p {
	    padding-right: 30%;
	}
	.asteriskG2 p:last-child, .linesAndColors  {
	    border-top: 1px solid #000;
	}

	.groupName{
		display: none;
	}
	.layout, #jText, #parentalAd{
		display: block;
		text-align: right;
	}
	#parentalAd{
		max-width: 130px;
		align-self: end;
		justify-self: center;
	}

	.blueBox,.redBox{
		display: none;
	}
	.blueBoxDesktop{
		display: block;
	    background-color: rgb(137,200,208);
	    width: 40px;
	    height: 100%;
	    z-index: -1;
	    float: left;
	}
	#blackBox{
		display: block;
		background-color: #292929;
		height: 140px;
	}
	.Master{
		letter-spacing: 14px;
	}
	.albumTitle{
		grid-template-columns: 1fr 0fr 0fr 0fr 0fr;
		grid-template-areas:
		". topRed topRed topRed topRed "
		". subRed subRed subRed subRed "
		". deluxe grand edition special "
		"jText jText master parental parental "
		". . black . .";
		justify-content: end;
		text-align: left;
	}
	.albumTitle h2{
		writing-mode: tb;
	}

	#jText {
	    color: #c64639;
	    padding-top: 12px;
	    height: 100%;
	}
	#jText p {
	    font-weight: 600;
	    font-size: 40px;
	    line-height: 43px;
	}
}