/* --- Reset --- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 /* Main */

body {
	text-align: center;
	background-color: #d4d5d9;
	font-family: 'Roboto', sans-serif;
}

a {
	text-decoration: none;
}

.wrapper {
	position: relative;    
	height: 100vh;
}

.inside {
	position: relative;
	margin: 0 auto;
	background: url(back-wide.jpg) center no-repeat;
	background-size: 100% 100%;
	width: 130vh;
	height: 100vh;
}

.album {
	float:left;
	width:30px;
	height:30px;
	background-size: 100% 100%;
	border-radius:15px;
	box-shadow:0 1px 1px 0 rgba(0,0,0,0.6), 0 0 4px 1px rgba(0,0,0,0.4), inset 0 1px 1px 0 rgba(255,255,255,0.6), inset 0 2px 4px 1px rgba(255,255,255,0.4);
}

.round-link {
	position: absolute;
	cursor: pointer;
  	-webkit-animation: blink1 3s linear infinite;
  	animation: blink1 3s linear infinite;
  	text-decoration: none;
}
@-webkit-keyframes blink1 {
  0% { color: rgba(255, 107, 0, 1); }
  50% { color: rgba(255, 107, 0, 0); }
  100% { color: rgba(255, 107, 0, 1); }
}
@keyframes blink1 {
  0% { color: rgba(255, 107, 0, 1); }
  50% { color: rgba(255, 107, 0, 0); }
  100% { color: rgba(255, 107, 0, 1); }
}

.round-link:hover {
  -webkit-animation: blink2 3s linear infinite;
  animation: blink2 3s linear infinite;
}
@-webkit-keyframes blink2 {
  0% { color: rgba(0, 171, 228, 1); }
  50% { color: rgba(0, 171, 228, 0); }
  100% { color: rgba(0, 171, 228, 1); }
}
@keyframes blink2 {
  0% { color: rgba(0, 171, 228, 1); }
  50% { color: rgba(0, 171, 228, 0); }
  100% { color: rgba(0, 171, 228, 1); }
}


.rl1 {
	top: 55%;
	left: 38%;
}
.rl2 {
	top: 73%;
	left: 29%;
}
.rl3 {
	top: 78%;
	left: 57%;
}
.rl4 {
	top: 35%;
	left: 52%;
}
.rl5 {
	top: 41%;
	left: 64%;
}
.rl6 {
	top: 43%;
	left: 29%;
}
.rl7 {
	top: 45%;
	left: 46%;
}
.rl8 {
	top: 55%;
	left: 54%;
}
.rl9 {
	top: 66%;
	left: 48%;
}
.rl10 {
	top: 74%;
	left: 50%;
}
.rl11 {
	top: 91%;
	left: 37%;
}
.rl12 {
	top: 62%;
	left: 64%;
}

.pulse {
 position:absolute;
 top:0;
 left:0;
 width:30px;
 height:30px;
 border-radius:15px;
 background:#ff6b00;
 -webkit-animation: pulsating 4s ease-in-out;
 -webkit-animation-iteration-count: infinite;
 opacity:0.6;
 z-index:5;
}

.ringbase {
 position:absolute;
 top:0;
 left:0;
 width:30px;
 height:30px;
 border-radius:15px;
 opacity:0.6;
 z-index:10;
}

.ring2 {
 box-shadow:0 0 1px 0px #ff6b00, inset 0 0 1px 0px #ff6b00;
 -webkit-animation: ring 5s ease-in-out;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-delay: 0.5s;
}

@-webkit-keyframes pulsating {
 0% {opacity: 0.4;}
 50% {opacity: 0.8;}
 100% {opacity: 0.4;}
}

@-webkit-keyframes ring {
 0% {-webkit-transform: scale(0.4, 0.4); opacity: 0.6;}
 50% {opacity: 1;}
 100% {-webkit-transform: scale(1.1, 1.1); opacity: 0.6;}
}

.hint {
    position: absolute;
    min-width: 250px;
    display: none;
    top: 40px;
    left: -125px;
    background: #00ABE4;
    border-radius: 100px;
    padding: 11px 24px 12px 24px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    z-index: 20;
}

.hint.down {
    top: -60px;
}

.arrow-top {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  display: none;
  margin: 35px 5px;
  border-bottom-color: #00ABE4;
  border-top: 0;
}

.arrow-top.down {
    border: 10px solid transparent;    
    border-top-color: #00ABE4;
    border-bottom: 0;
    margin: -10px 5px;
}

@media screen and (max-width: 1280px) {
	.hint {
		min-width: 200px;
		padding: 11px 16px 12px 16px;
		border-radius: 80px;
		left: -100px;
		font-size: 12px;
	}
    
    .hint.down {
        top: -60px;
    }
    
    .arrow-top.down {
        margin: -15px 5px;
    }

	.album,
	.ringbase,
	.pulse {
		width: 24px;
		height: 24px;
		border-radius: 12px;
	}

}