
.center_container {
	position: fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	display:table;
}

.center {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.red_dot_labels {
	position: fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
}

.red_dot_label {
	font-size: 32px;
}

.red_dot_top_left {
	position:absolute;
	top:0;
	left:16px;
}

.red_dot_top_right {
	position:absolute;
	top:0;
	right:16px;
}

.red_dot_bottom_left {
	position:absolute;
	bottom:16px;
	left:16px;
}

.red_dot_bottom_right {
	position:absolute;
	bottom:16px;
	right:16px;
}

.red_dot_debug {
	position:absolute;
	top:50%;
	left:16px;
	font-size: 8px;
}

.sphere_labels {
	position: fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
}

.sphere_debug {
	position:absolute;
	top:25%;
	left:16px;
	font-size: 8px;
}

.red_dot_hints {
	position: absolute;
	left: 50%;
	margin-left: -160px;
  width: 320px;
	top: 50%;
	margin-top: -26px;
	height: 52px;
}

.red_dot_hint {
	text-align: center;
}

#page {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

#page_bottom {
	position: absolute;
	/*vertical-align: bottom;*/
	bottom:40px;
	left:0%;
	right:0%;
	font-size:16px;
	font-size:2vh;
	text-align: center;
	font-family: 'Oddity-Bold';
	line-height: normal;
}


#page_bottom p {
	padding: 0px;
	margin: 2px;
}

#page_info_container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: rgba(0,0,0,0.2);
	overflow-y: scroll;
	overflow-x: visible;
}

#page_info {
	color:#ffffff;
}

@media (max-width: 1200px) {
	#page_info {
	  margin-left: 40px;
	  margin-right: 40px;
	}
}

@media (min-width: 1200px) {
	#page_info {
		width: 1120px;
	  margin-left: auto;
	  margin-right: auto;
	}
}

#page_info .titles {
	margin-top: 17px;
	margin-bottom: 107px;
	position: relative;
}

#page_info .title {
	font-family: 'Oddity-Bold';
	font-size: 230px;
	line-height: 0.87;
	letter-spacing: normal;
	color: #FFFFFF;
}

@media (max-width: 720px) {
	#page_info .title {
		font-size: 100px;
	}
}

@media (max-width: 1200px) {
	#page_info .title {
		font-size: 150px;
	}
}

#page_info .subtitle_container {
	position: absolute;
	width: 300px;
	left: auto;
	top: auto;
}

#page_info .subtitle {
	top: 80px;
  left: 40px;
  position: absolute;
}

#page_info .forever {
	font-family: 'Oddity-Bold';
	font-size: 24px;
	line-height: 0.92;
}

#page_info .authors {
	margin-top: 36px;
	font-family: 'Oddity-Black';
	font-size: 14px;
	line-height: 16px;
}

#page_info .content {
	position: relative;
}

@media (max-width: 1200px) {
	#page_info .content {
	  margin-left: auto;
	  margin-right: auto;
	}
}

@media (min-width: 1200px) {
	#page_info  .content {
		margin-left: 222px;
		margin-right: 118px;
	}
}

#page_info .column1 {
	width: 50%;
	float: left;
}

#page_info .column2 {
	width: 43%;
	float: left;
	margin-left: 7%;
	margin-top: 128px;
}

#page_info .text1 {
	font-family: 'Oddity-Book';
	font-size: 40px;
	line-height: 55px;
}

#page_info .planet_container {
	position: relative;
	height: 273px;
	width: auto;
	margin-top: 34px;
	margin-bottom: 24dp;
}

#page_info .planet_container .planet {
	position: absolute;
	width: auto;
	height: auto;
	top: 0px;
	right: 140px;
}

#page_info .text2 {
	font-family: 'Oddity-Book';
	font-size: 22px;
	line-height: 26px;
	margin-bottom: 34px;
}

#page_info .cover_container {
	margin-top: 2px;
	margin-bottom: 36px;
	height: 346px;
	width: 100%;
	position: relative;
}

#page_info .cover_container .cover {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	width: auto;
}

#page_info .column2_end {
	height: 160px;
}

#page_info .content_part_2 {
	margin-left: 20px;
	margin-right: 20px;
}

#page_info .links {
	margin-top: 77px;
}

#page_info .buttons {
	margin-top: 22px;
	margin-bottom: 120px;
}

#page_info a {
	text-decoration: none;
	color: #ffffff;
}

#page_info a:hover {
	text-decoration: underline;
	color: #d13101;
}

#page_info a:active {
	text-decoration: underline;
	color: #d13101;
}

#page_info .buttons div {
  position: relative;
  display: inline-block;
	margin-right: 20px;
}


#loader {
	font-size: 10px;
	color: #ffffff;
	position: absolute;
	left:200px;
	top:200px;
}

#loader_icon {
	position: absolute;
}


#welcome_container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	font-family: Oddity-Bold;
	font-size: 16px;
	text-align: center;
	display: flex;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}

#welcome_page {
	margin-left:0%;
	/*left:-50%;*/
	width:100%;
	padding: 12%;
}

#welcome_big {
	color:#ffffff;
	font-family: 'Oddity-Black';
	line-height: 1.1;
}

@media (max-width: 1000px) {
	div#welcome_big {
		font-size: 50px;
		margin-bottom: 120px;
	}
}

@media (min-width: 1000px) {
	div#welcome_big {
		font-size: 100px;
		margin-bottom: 170px;
	}
}

#welcome_bottom {
	position: absolute;
	bottom: 5%;
	width: 75%;
	padding-top: 10%;
}

#welcome_resume {
	position: absolute;
	left: calc(50% - 50px);
	font-family: Oddity-Bold;
	font-size: 16px;
}

@media (max-width: 1000px) {
	#welcome_resume {
		bottom: 13%;
	}
}

@media (min-width: 1000px) {
	#welcome_resume {
		bottom: 20%;
	}
}

#bowie {
	/*font-size:27px;
	font-size:14vh;*/
}
#welcome_big p {
	padding: 0px;
	margin: 0px
}


#main {
	/*background: rgba(0,0,0,0.3);*/
	font-family: Oddity-Bold;
	font-size: 16px;
}

#main-2 {
	/*background: rgba(0,0,0,0.3);*/
	font-family: Oddity-Bold;
	font-size: 16px;
}

#pause {
	position: fixed;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: rgba(0,0,0,0.3);
	font-family: Oddity-Bold;
	font-size: 16px;
	display:table;
}

#pause_center {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

#pause_button {
	cursor: pointer;
}

#resume_button {
	cursor: pointer;
}

#resume_button #resume_button_svg_hover {
	opacity: 0.0;
}

#resume_button:hover #resume_button_svg_hover {
	opacity: 0.3;
}

#repeat-icon {
	position: absolute;
	left: 25%;
}

#repeat-icon-2 {
	position: absolute;
	left: 25%;
}

#repeat-arrow {
	background-color: #d13101;
	position: absolute;
	border-radius: 50%;
	width:100px;
	height: 100px;
	line-height: 125px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

#repeat-arrow:hover {
	background-color: #1e1c23;
}

#repeat-arrow-2 {
	background-color: #d13101;
	position: absolute;
	border-radius: 50%;
	width:100px;
	height: 100px;
	line-height: 125px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

#repeat-arrow-2:hover {
	background-color: #1e1c23;
}

#repeat-arrow-2 img {
	position: absolute;
	left: 30px;
	top: 30px;
}

.repeat-middle {
	background-color: #d13101;
	position: absolute;
	border-radius: 50%;
	width:47px;
	height: 47px;
	line-height: 55px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.repeat-middle:hover {
  background-color: #1e1c23;
}

#repeat-label {
	font-family: Oddity-Bold;
	font-size: 11px;
	text-align: center;
	color: #ffffff;
	position: absolute;
	left: calc(25% + 32px);
	margin-top: 70px;
}

#repeat-label-2 {
	font-family: Oddity-Bold;
	font-size: 11px;
	text-align: center;
	color: #ffffff;
	position: absolute;
	left: calc(25% + 32px);
	margin-top: 70px;
}

#main #twitter {
	margin-top: -20px;
	position: absolute;
	right: calc(27% + 35px);
}

#twitter img {
	position: absolute;
	left: 16px;
	top: 16px;
}

#main #facebook {
	margin-top: -20px;
	position: absolute;
	right: calc(27% - 35px);
}

#facebook img {
	position: absolute;
	left: 16px;
	top: 16px;
}

#share-label {
	font-family: Oddity-Bold;
	font-size: 11px;
	text-align: center;
	color: #ffffff;
	position: absolute;
	right: calc(27% + 10px);
	margin-top: 70px;
}

#main-2 #twitter-2 {
	margin-top: -20px;
	position: absolute;
	right: calc(27% + 35px);
}

#twitter-2 img {
	position: absolute;
	left: 16px;
	top: 16px;
}

#main-2 #facebook-2 {
	margin-top: -20px;
	position: absolute;
	right: calc(27% - 35px);
}

#facebook-2 img {
	position: absolute;
	left: 16px;
	top: 16px;
}

#share-label-2 {
	font-family: Oddity-Bold;
	font-size: 11px;
	text-align: center;
	color: #ffffff;
	position: absolute;
	right: calc(27% + 10px);
	margin-top: 70px;
}

#end_info_container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: rgba(0, 0, 0, 0.0);
	mix-blend-mode: normal;
	opacity: 0.8;
	overflow-y: scroll;
	overflow-x: visible;
}


.end_info {
	font-family: Oddity-Bold;
	position: relative;
}

@media (max-width: 1350px) {
	.end_info {
	  margin-left: 40px;
	  margin-right: 40px;
	}
}

@media (min-width: 1350px) {
	.end_info {
		width: 950px;
	  margin-left: auto;
	  margin-right: auto;
	}
}

#end_info_top {
	position: relative;
	height: 240px;
}

.end_text {
	font-size: 16px;
	line-height: 19px;
	letter-spacing: 0.32px;
	color: #FFFFFF;
}

#end_text_1 {
	position: absolute;
	width: 375px;
	left: 0px;
	top: 84px;
}

.end_text_small_highlighted {
	font-size: 14px;
	line-height: 16px;
	color: #D13001;
}

.end_text_small {
	font-size: 14px;
	line-height: 16px;
	color: #FFFFFF;
}

.end_text_small_para {
	margin-bottom: 8px;
}

#end_text_2 {
	position: absolute;
	right: 0px;
	top: 84px;
}

#end_info_lyrics {
	position: relative;
	margin-top: 24px;
	margin-right: -60px;
	/* white-space: nowrap;
	overflow-x: visible; */
}

#end_info_lyrics a:link {
	color: #FFFFFF;
	text-decoration: none;
}

#end_info_lyrics a:hover {
	color: #D13001;
	text-decoration: none;
}

#end_info_lyrics .text {
	position: relative;
	font-size: 50px;
	line-height: 92px;
	margin-right: 4px;
}

#end_info_lyrics .author {
	position: relative;
	font-family: Catesque-Regular;
	font-size: 10px;
	line-height: 12px;
	margin-right: 16px;
}

#end_info_lyrics .icon {
	position: absolute;
	left: -4px;
	top: -34px;
}

#end_info_lyrics a:link .icon .fill {
	fill: #FFFFFF;
}

#end_info_lyrics a:hover .icon .fill {
	fill: #D13001;
}

#end_info_lyrics a:link .icon .stroke {
	stroke: #FFFFFF;
}

#end_info_lyrics a:hover .icon .stroke {
	stroke: #D13001;
}

.end_main {
	position: relative;
}

.end_main-2 {
	position: relative;
	height: 172px;
	margin-top: calc(50vh - 240px);
	margin-bottom: calc(0px);
}
