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;
}
body {
	background: linear-gradient(to right, #0072ba, #095482);
	height: 100vh;
	font-family: 'Sweetwater';
	color: #fff;
	font-size: 18px;
	line-height: 1.5em;
	width: 100vw;
	overflow: hidden;
	position: relative;
}

* {
	box-sizing: border-box;
}

.background-graphics {
	position: absolute;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.page-wrap {
	width: 50vw;
	height: 100vh;
	background: linear-gradient(to right, #0072ba 10%, rgba(9, 84, 130, 0) 50%);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-items: center;
	padding: 100px 0 100px 100px;
}

.logo-wrap img {
	max-width: 100%;
	width: 160px;
	height: auto;
}

#string, #guitar{
	position: absolute;
	top: 50%;
	transform: translateY(-55%);
	right: 0;
	width: 100vw;
	height: auto
}
#string {
	pointer-events: none;
}

.large-paragraph {
	font-size: 1.35em;
}

h1 {
	font-size: 6em;
	font-weight: 600;
	line-height: 1.25em;
}

p {
	padding-top: 1em;
}

.page-content {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
	width: 460px;
}

a:link, a:visited {
	color: #fff;
}

#countdown {
	position: relative;
	height: 44px;
    width: 44px;
	margin-right: 10px;
	vertical-align: middle;
	display: inline-block;
}

#countdown-number {
	display: inline-block;
}

#countdown-circle,
#background-circle {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	transform: rotateY(-180deg) rotateZ(-90deg);
}

#countdown-circle circle,
#background-circle circle {
	stroke-dasharray: 112px;
	stroke-dashoffset: 0px;
	stroke-linecap: round;
	stroke-width: 3px;
	stroke: white;
	fill: none;
}

#background-circle circle {
	stroke: rgba(255,255,255,.1);
	animation: none;
}

@keyframes countdown {
  0% {
    stroke-dashoffset: 112px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

#reconnecting:after {
	content:'';
	animation: ellipses 1s infinite;
}

@keyframes ellipses {
	0% {content: ''}
	14% {content: ''}
	28% {content: '.'}
	42% {content: '..'}
	56% {content: '...'}
	70% {content: '\00a0..'}
	100% {content: '\00a0\00a0.'}
}


#pick {
	position: fixed;
	right: 70px;
    bottom: 70px;
    width: 6vw;
	transform: rotate(20deg);
	transition: 1s;
}

#pick:hover #pick-shape {
	cursor: pointer;
	stroke: #fff;
}

.countdown {
    transition: opacity .25s;
}

.countdown-text {
	display: inline-block;
	vertical-align: middle;
	line-height: 1.2em;
}

.countdown-text a:link,
.countdown-text a:visited {
	font-size: .8em;
}

@media (prefers-reduced-motion: reduce) {
	#string {
		display: none;
	}
}

.guitar-active .playable_string {
	transition: stroke 1s;
}

.guitar-active .playable_string:hover {
	stroke: #fff;
	transition: none;
}

.guitar-active #pick {
	right: 30%;
	bottom: 50%;
	opacity: 0;
	transform: rotate(-20deg) rotateX(90deg) scale(3) !important;
}

@media screen and (max-width: 800px){
	body {
		font-size: 16px;
		overflow: initial;
	}
	.page-wrap {
		background: none;
		padding: 0;
        width: 100vw;
		height: 75vh;
        min-height: 75vh;
        top: 25vh;
	}
	.logo-wrap, .page-content, .countdown {
		padding: 20px 20px 0 20px;
		width: auto;
        text-align: center;
	}
	.page-content {
		justify-content: flex-start;
		align-items: flex-start;
	}
	#reconnecting:after, #pick {
		display: none;
	}
	h1 {
		font-size: 3em;
	}
	.background-graphics {
		background: linear-gradient(to top, #004d7d, #075b8e);
		height: 25%;
	}
    .countdown {
        background: rgba(255,255,255,.05);
		padding: 10px 20px;
    }
    .countdown-text {
        text-align: left;
    }
    #countdown-number {
        width: 20px;
    }
	#guitar, #string {
		transform: translateY(-60%);
	}
}

@keyframes scale {
	0%{transform:scale(1, 1);}
	50%{transform:scale(1.05, .95);}
	100%{transform:scale(1, 1);}
	}
	#string_b {
		animation: scale 2s infinite ease-in-out;
		transform-origin: 2050px -700px;
	}

	_:-ms-fullscreen, :root #pick,
	_:-ms-fullscreen, :root #countdown {
			display: none;
	}