@charset "UTF-8";
/* CSS Document */

@mixin box-sizing {
	box-sizing: border-box;
}

body, html {
	background-color:#000;
	color:#fff;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	min-width: 320px;
	@include box-sizing;
	overflow:hidden;
}


*,
*:before,
*:after {
	@include box-sizing;
}

#header {
	width:100%; 
	height:43px; 
	border-bottom:#333 1px solid;
}

#trackinfo {
	width:100%; 
	height:43px; 
	border-bottom:#666 1px solid;
}

#nikki_grace_logo {
	opacity: 0;
	width:140px;
	height:35px;
	display: inline-block;
	float: left;
	margin:4px;
	margin-left:8px;
	background-image: url(../img/nikki_logo_boundaries.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

#boundaries_logo {
	opacity: 0;
	width:160px;
	height:35px;
	display: inline-block;
	float: right;
	margin:4px;
	background-image: url(../img/boundaries_logo_boundaries.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

#interactive_content {
	width:100%; 
	height: calc(100% - 132px);
	position:relative; 
	overflow:hidden;
}


.interactive_bg_option, .interactive_bg_option_main {
	opacity: 0;
}

.pentagram_img {
	opacity: 0;
}


.container {
	position: relative;
	width: 100%;
	height: 100vh;
	width:100%;
	height:100%;
	overflow:hidden;
}

.position {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	max-width: 640px;
	max-height: 640px;
	height: 100%;
}

.pentagram h1 {
    color: #fff;
}
.padding_bottom, .padding_top {
	width: 100%;
	height:5vw;
	position:relative;
}


#lolita_button {
	width:17%; 
	left:42%; 
	top:20%; 
	height:20%; 
	position:absolute; 
	display:block;
}

#kidman_button {
	width:22%; 
	height:13%; 
	left:20%; 
	top:40%; 
	position:absolute; 
	display:block;
}

#promises_button {
	width:22%; 
	height:13%; 
	left:60%; 
	top:40%; 
	position:absolute; 
	display:block;
}

#connie_button {
	width: 20%;
	height: 18%;
	left: 30%;
	top: 55%;
	position: absolute;
	display: block;
}

#phone_button {
	width: 19%;
height: 20%;
left: 51%;
top: 54%;
position: absolute;
display: block;

}

#lyrics_content {
	width:100%;
	height:calc(100% - 88px);
    background: -webkit-linear-gradient(#222 0%, #000000 100%);
    background: -o-linear-gradient(#222 0%, #000000 100%);
    background: linear-gradient(#222 0%, #000000 100%);
	overflow: hidden;
	cursor: default;
}

#refs_content {
	width:100%;
	height:calc(100% - 88px);
    background: -webkit-linear-gradient(#222 0%, #000000 100%);
    background: -o-linear-gradient(#222 0%, #000000 100%);
    background: linear-gradient(#222 0%, #000000 100%);
	overflow: hidden;	
	cursor: default;	
}

#stems_content {
	width:100%;
	height:calc(100% - 88px);
    background: -webkit-linear-gradient(#222 0%, #000000 100%);
    background: -o-linear-gradient(#222 0%, #000000 100%);
    background: linear-gradient(#222 0%, #000000 100%);
	overflow: hidden;	
	cursor: default;	
}


#about_content {
	width:100%;
	height:calc(100% - 88px);
	overflow: hidden;	
	cursor: default;	
	background-image: url(../img/bg-main.jpg);
	background-size:cover;
	background-position:center;
	background-repeat: no-repeat;
	width:100%; 
	height: 100%;
	position: absolute;
}

#about_overlay {
	width:100%;
	height:100%; 
	background-color:rgba(0,0,0,0.5);

}

#lyrics_header_back {
	width:32px;
	height:32px;
	padding:6px;
	background-image:url(../img/icn_arrow_back_white.png);
	background-size:50%;
	background-repeat:no-repeat;
	background-position:center;
	display:inline-block;
	float:left;
	cursor:pointer;
}

#lyrics_header_num {
	width:32px;
	height:32px;
	padding:4px;
	font-family: oicbold;
	text-align: center;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	display:inline-block;
	float:right;
		font-weight: bold;
	font-size:24px;
}

#lyrics_header {
	width: 100%;
	height:43px;
	border-bottom: #666 1px solid;
	color:#fff;
	text-align: center;
	font-weight: bold;
	font-family: charlotte;
}

#lyrics_header_title {
	width: calc(100% - 84px);
height: 28px;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 24px;
font-family: oicbold;
padding-top: 4px;
display: inline-block;
float: left;
}

.lyrics_container {
	width:100%;
	height:calc(100% - 92px);
	overflow-x:hidden;
	overflow-y:scroll;
	text-align: center;
	color:#fff;
	font-family:oicnormal;
	padding-top:8px;
}

.lyrics_popup_container {
	width:100%;
	height:63px;
	border-top:#666 1px solid;
	color:#fff;
	text-align: center;
}

#about_title {
	width: 100%;
height: 32px;
text-align: center;
background-image: url(../img/boundaries_logo_large.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
color: #fff;
}

#about_subtitle {
	width: 100%;
height: 32px;
text-align: center;
font-family: silhouette;
	font-size:24px;
color: #fff;
	font-weight:bold;
}

#about_name {
	width: 100%;
height: 32px;
text-align: center;
background-image: url(../img/nikki_logo_boundaries.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
color: #fff;
}

#about_text {
	width: 90%;
	height: calc(100% - 320px);
	text-align: center;
	font-family: oicnormal;
	color: #fff;
	overflow-x: hidden;
	overflow-y: scroll;
	margin-left: auto;
	margin-right: auto;
	padding: 8px;

}

#page_content_container {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	opacity:1;
}