/*SITE - LAYOUT*/
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Oswald|Roboto:400,500,700');
body {
    background-repeat: no-repeat;
	background: rgb(40,40,40);
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	min-width: 320px;
}
.background {
	position: absolute;
	width: 100%;
	height: 35vh;
	min-height: 180px;
	top: 0;
	background: rgb(40,40,40);
	z-index: 5;
}
	.background .style {
		position: absolute;
		width: 100%;
		height: 100%;
		background-size: cover;
		-webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
		filter: grayscale(50%);
		opacity: 0.35;
	}
		.background .style .overlay {
			position: relative;
			width: 100%;
			height: calc(100% + 2px);
			background-color:  rgba(40,40,40,0.3); /* For browsers that do not support gradients */
			background-image: linear-gradient(rgba(40,40,40,0.3), rgba(40,40,40,1));
		}
.topbar {
	position: fixed;
	padding: 15px 12px 0 0;
	right: 0;
	top: 0;
	z-index: 6;
	display: flex;
	justify-content: flex-end;
}
	.topbar .button {
		position: relative;
		display: inline-block;
		right: 0;
		margin: 0 0 0 5px;
	}
	.topbar .share {
		position: relative;
		font-size: 20px;
		padding: 2px 3px 2px 2px;
		cursor: pointer;
		color: rgba(255,255,255,0.9);
		text-shadow: 0 0 8px rgba(10,10,10,0.45);
		transition: 0.15s color;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}
	.topbar .share:hover {
		color: rgba(255,255,255,1);
		text-shadow: 0 0 12px rgba(10,10,10,0.6);
	}
	.topbar .share:active {
		color: rgba(255,255,255,1);
		padding: 3px 3px 1px 2px;
	}
.button {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-size: 14px;
	display: block;
	color: rgba(255,255,255,1);
	position: relative;
	z-index: 1;
	padding: 2px 12px 3px;
	background-image: linear-gradient(140deg, rgb(0,195,67), rgb(0,185,97), rgb(0,172,130));
	border-color: rgba(20,20,20,0.5);
	border-width: 1px;
	border-style: solid;
	border-radius: 3px;
	box-shadow: 0 0 10px 1px rgba(10,10,10,0.25);
	text-shadow: 0 0 4px rgba(10,10,10,0.4);
	box-sizing: border-box;
	cursor: pointer;
	outline: none;
	transition: 0.2s box-shadow;
	text-align: center;
	text-decoration: none;
}
	.button.full {
		width: 100%;
	}
	.button.flex {
		flex: 1 1 10%;
		width: 100%;
		margin: 0 2px;
	}
.button:hover {
	background-image: linear-gradient(140deg, rgb(15,210,82), rgb(15,200,112), rgb(15,187,145));
	box-shadow: 0 4px 10px 1px rgba(10,10,10,0.25);
}
.button:active {
	background-image: linear-gradient(140deg, rgb(0,175,47), rgb(0,165,77), rgb(0,152,110));
	border-width: 2px 1px 1px 1px;
	padding: 2px 12px 2px;
}
.button:disabled {
	background-image: linear-gradient(140deg, rgb(70,70,70), rgb(85,85,85));
	border-color: rgba(20,20,20,0.35);
	color: rgba(255,255,255,0.5);
	cursor: default;
}
.button:hover:disabled {
	background-image: linear-gradient(140deg, rgb(70,70,70), rgb(85,85,85));
	box-shadow: 0 0 10px 1px rgba(10,10,10,0.25);
}
.button.alt1 {
	background-image: linear-gradient(140deg, rgb(0,168,195), rgb(0,159,185), rgb(0,142,172));
}
.button.alt1:hover {
	background-image: linear-gradient(140deg, rgb(0,183,210), rgb(0,174,200), rgb(0,167,187));
}
.button.alt1:active {
	background-image: linear-gradient(140deg, rgb(0,148,175), rgb(0,139,165), rgb(0,122,152));
}
.button.alt2 {
	background-image: linear-gradient(140deg, rgb(10,118,145), rgb(10,109,135), rgb(10,92,122));
}
.button.alt2:hover {
	background-image: linear-gradient(140deg, rgb(25,133,160), rgb(25,124,150), rgb(25,107,137));
}
.button.alt2:active {
	background-image: linear-gradient(140deg, rgb(0,103,115), rgb(0,94,120), rgb(0,77,107));
}
.button.alt3 {
	background-image: linear-gradient(140deg, rgb(195,27,30), rgb(185,51,30), rgb(172,48,30));
}
.button.alt3:hover {
	background-image: linear-gradient(140deg, rgb(210,42,45), rgb(200,66,45), rgb(187,63,45));
}
.button.alt3:active {
	background-image: linear-gradient(140deg, rgb(180,12,15), rgb(170,36,15), rgb(157,33,15));
}
.header-padding {
	height: 35vh;
	min-height: 180px;
	position: relative;
}
.header {
	height: 35vh;
	min-height: 180px;
	width: 100%;
    display: flex;
    align-items: flex-end;
	position: absolute;
}
.introduction {
	margin: 0 auto;
	min-width: 410px;
	max-width: 800px;
	width: 33%;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	color: rgba(255,255,255,1);
	padding-bottom: 35px;
	z-index: 5;
}
.introduction .title {
	display: block;
	font-size: 22px;
}
.introduction i {
	font-size: 14px;
	padding-right: 4px;
	opacity: 0.7;
}
.introduction .date {
	font-size: 12px;
	opacity: 0.5;
	text-align: left;
	display: inline-block;
}
.introduction .date.short {
	display: none;
}
.introduction .caption {
	font-size: 12px;
	opacity: 0.7;
	margin-right: 6px;
}
.introduction .separator {
	font-size: 12px;
	opacity: 0.5;
	margin: 0 5px;
}
.timer {
    position: absolute;
	width: 100%;
    color: rgba(255,255,255,1);
	margin: 0 auto;
	height: 195px;
	top: -47px;
}
	.timer .container {
		margin: 0 auto;
		position: relative;
		display: flex;
		justify-content: center;
	}
	.timer .top {
		z-index: 1;
		width: 450px;
		height: 70px;
		position: absolute;
		background: linear-gradient(rgba(40,40,40,1), rgba(40,40,40,1), rgba(40,40,40,1), rgba(40,40,40,0));
	}
	.timer .bottom {
		z-index: 1;
		width: 450px;
		height: 70px;
		position: absolute;
		margin-top: 95px;
		background: linear-gradient(rgba(40,40,40,0), rgba(40,40,40,1), rgba(40,40,40,1), rgba(40,40,40,1));
	}
	.timer .unlockdate {
		text-align: center;
		padding-top: 17px;
		opacity: 0.5;
	}
	.timer .unlockdate .placeholder {
		display: inline-block;
		height: 8px;
		background: rgba(255,255,255,0.3);
		width: 120px;
		border-radius: 3px;
		position: relative;
	}
	.timer .unlockdate i {
		font-size: 14px;
		padding-right: 4px;
	}
	.timer .unlockdate .title {
		font-family: 'Oswald', sans-serif;
		text-transform: uppercase;
		box-sizing: border-box;
		font-size: 12px;
	}
	.timer .titlebox {
		display: flex;
		flex-wrap: wrap;
	}
	.timer .titlebox .title {
		flex: 1 1 10%;
		font-family: 'Oswald', sans-serif;
		text-transform: uppercase;
		padding-top: 10px;
		padding-left: 22px;
		box-sizing: border-box;
		font-size: 12px;
	}
	.timer .titlebox .title.off {
		opacity: 0.25;
	}
	.timer .clock {
		padding: 0;
		display: inline-block;
		font-family: 'Inconsolata', monospace;
		font-size: 52px;
		position: relative;
		overflow: hidden;
		height: 110px;
		top: 55px;
	}
	.timer .clock.off {
		opacity: 0.25;
	}
	.timer .separator {
		padding: 0;
		display: inline-block;
		font-family: 'Inconsolata', monospace;
		font-size: 52px;
		position: relative;
		overflow: hidden;
		top: -4px;
	}
	.timer .separator.off {
		opacity: 0.25;
	}
.content {
	position: relative;
}
.message {
    position: relative;
	width: 100%;
	z-index: 5;
	height: auto;
	opacity: 0;
}
.message.notice {
    margin-top: 20px;
	margin-bottom: 10px;
}
	.message .lock {
		position: absolute;
		width: 100%;
		left: 0;
		margin-top: 17px;
		font-size: 52px;
		display: block;
		text-align: center;
		color: rgb(255,255,255);
		transition: 0.3s;
		opacity: 0.15;
	}
	.message .lock.off {
		opacity: 0;
		display: none;
	}
	.message .container {
		margin: 0 auto;
		min-width: 410px;
		max-width: 800px;
		width: 33%;
		padding: 0;
	}
	.message .title {
		font-family: 'Oswald', sans-serif;
		color: rgb(255,255,255);
		text-transform: uppercase;
		box-sizing: border-box;
		font-size: 15px;
		padding-bottom: 4px;
		transition: 0.3s;
	}
	.message .container .content {
		margin: 0;
		width: 100%;
		resize: vertical;
		min-height: 90px;
		font-size: 14px;
		font-family: 'Roboto', sans-serif;
		color: rgba(255,255,255,0.75);
		padding: 10px;
		box-sizing: border-box;
		border-style: solid;
		border-width: 1px 1px 1px 3px;
		border-color: rgba(255,255,255,0.05) rgba(255,255,255,0.05) rgba(255,255,255,0.05) rgba(255,255,255,0.3);
		transition: 0.3s;
		outline: none;
		white-space: pre-wrap;
		word-wrap: break-word;
	}
	.message .container .content.notice {
        border-color: rgba(255,30,30,0.1) rgba(255,30,30,0.1) rgba(255,30,30,0.1) rgba(255,30,30,0.25);
        background-color: rgba(255,30,30,0.1);
		white-space: normal;
        min-height: 0;
	}
	.message .container .content a {
        color: rgba(255, 211, 63, 0.75);
        text-decoration: none;
        transition: 0.15s;
	}
	.message .container .content a:hover {
        color: rgb(255, 211, 63);
	}
	.message.off .title {
		opacity: 0.35;
	}
	.message.off .container .content {
		color: rgba(255,255,255,0);
		border-color: rgba(255,255,255,0.07);
	}
.popup {
	position: absolute;
	width: 100%;
	height: max-content;
	min-height: 100%;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(20,20,20,0.5);
}
.popup.error {
	z-index: 200;
}
.popup .exit-cover {
	z-index: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
	.popup .preview-background {
		position: absolute;
		width: 100%;
		height: 45%;
		top: 0;
		left: 0;
		background: rgb(40,40,40);
		z-index: 0;
	}
	.popup .preview-background.error {
		height: 90%;
	}
		.popup .preview-background .style {
			position: absolute;
			width: 100%;
			height: 100%;
			background-size: cover;
			-webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
			filter: grayscale(50%);
			opacity: 0.35;
		}
		.popup .preview-background .style .overlay {
			position: relative;
			height: calc(100% + 4px);
			width: calc(100% + 4px);
            top: -2px;
            left: -2px;
			background-color: rgba(40,40,40,0.3); /* For browsers that do not support gradients */
			background-image: linear-gradient(rgba(40,40,40,0.3), rgba(40,40,40,1));
		}
	.popup.off {
		display: none;
	}
	.popup .close {
		position: absolute;
		color: rgba(255,255,255,0.5);
		padding: 8px 8px 8px 8px;
		font-size: 20px;
		transition: 0.15s color;
		text-shadow: 0 2px 15px 1px rgba(0,0,0,0.15);
		top: 0;
		right: 0;
		cursor: pointer;
		z-index: 5;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}
	.popup .close:hover {
		color: rgba(255,255,255,1);
	}
	.popup .close:active {
		color: rgba(255,255,255,1);
		padding: 9px 8px 7px 8px;
	}
	.popup .container {
		position: relative;
		color: rgba(255,255,255,1);
		min-width: 410px;
		max-width: 800px;
		width: 55%;
		padding: 25px;
		background: rgb(40,40,40);
		border-radius: 5px;
		border-style: solid;
		border-width: 1px;
		border-color: rgb(50,50,50);
		box-shadow: 0 2px 15px 1px rgba(10,10,10,0.5);
		overflow: hidden;
		margin: 15px 0;
	}
	.popup.error .container {
		min-width: 390px;
		max-width: 780px;
		width: 53%;
	}
	.popup .container .description {
		font-family: 'Roboto', sans-serif;
		font-size: 14px;
		display: block;
		color: rgba(255,255,255,0.7);
		position: relative;
		z-index: 1;
	}
	.popup .container .description .highlight {
		color: rgba(255,255,255,1);
	}
	.popup .container .integrity {
		margin: 12px 0 0 0;
		display: block;
	}
	.popup .container .integrity .description {
		margin: 0 0 0 27px;
	}
	.popup .container .integrity.pending {
		color: rgba(255,234,66,0.85);
	}
	.popup .container .integrity.pending .description {
		color: rgba(255,234,66,0.85);
		margin: 0 0 0 27px;
	}
	.popup .container .integrity.fail {
		color: rgba(255,73,73,0.85);
	}
	.popup .container .integrity.fail .description {
		color: rgba(255,73,73,0.85);
	}
	.popup .container .integrity.success {
		color: rgba(73,255,105,0.85);
	}
	.popup .container .integrity.success .description {
		color: rgba(73,255,105,0.85);
	}
	.popup .container .integrity i {
		display: inline-block;
		margin: 0 2px 0 0;
		font-size: 18px;
		vertical-align: middle;
		position: absolute;
	}
	.popup .container .integrity .description {
		display: inline-block;
		line-height: 18px;
	}
	.popup .container label {
		font-family: 'Oswald', sans-serif;
		text-transform: uppercase;
		font-size: 14px;
		margin: 12px 0 2px 0;
		display: block;
		color: rgba(255,255,255,1);
		position: relative;
		z-index: 1;
	}
	.popup .container label.fail {
		color: rgba(255,73,73,1);
	}
	.popup .container .helptext {
		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		display: block;
		margin-top: 4px;
		color: rgba(255,255,255,0.85);
		position: relative;
		z-index: 1;
	}
	.popup .container .helptext.fail {
		color: rgba(255,82,82,0.85);
	}
	.popup .container .helptext.off {
		display: none;
	}
	.popup .container .flex-container {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
	}
	.popup .container .flex-container .field {
		width: 100%;
		font-family: 'Roboto', sans-serif;
		box-sizing: border-box;
		background: rgba(57,57,57,0.8);
		box-shadow: 0 2px 15px 1px rgba(10,10,10,0.05);
		font-size: 14px;
		height: 27px;
		border-style: solid;
		border-width: 1px;
		border-color: rgba(255,255,255,0.2);
		color: rgba(255,255,255,1);
		transition: 0.2s border-color, box-shadow, background, color;
		border-radius: 3px;
		position: relative;
		z-index: 1;
		padding: 0 5px;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
	}
	.popup .inputoverlay {
		width: 0;
		height: 14px;
		color: rgba(255,255,255,0.2);
		position: relative;
		left: -72px;
		z-index: 2;
		text-align: left;
		font-family: 'Roboto', sans-serif;
		box-sizing: border-box;
		font-size: 14px;
		text-transform: uppercase;
		line-height: 16px;
		padding: 0 0 0 5px;
		vertical-align: middle;
		margin: 6px 0 0 0;
		border-style: solid;
		border-width: 0 0 0 1px;
		border-color: rgba(255,255,255,0.2);
		pointer-events: none;
	}
	.popup .container .flex-container input.field {
		-moz-appearance: textfield;
	}
	.popup .container .flex-container input.field ::-webkit-outer-spin-button, .popup .container .flex-container input.field::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	.popup .container .flex-container .field.fail {
		color: rgba(255,73,73,1);
		border-color: rgba(255,73,73,0.6);
	}
	.popup .container .flex-container .field:focus {
		outline: none;
		background: rgba(64,64,64,0.8);
		box-shadow: 0 2px 15px 1px rgba(80,80,80,0.15);
		border-color: rgba(255,255,255,0.6);
	}
	.popup .container .flex-container select.field {
		background-image:
			linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.2) 50%),
			linear-gradient(135deg, rgba(255,255,255,0.2) 50%, transparent 50%),
			linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.2));
		background-position: calc(100% - 14px) 11px, calc(100% - 10px) 11px, calc(100% - 26px) 5px;
		background-size: 5px 4px, 4px 5px, 1px 15px;
		background-repeat: no-repeat;
	}
	.popup .container .flex-container select.field.fail {
		background-image:
			linear-gradient(45deg, transparent 50%, rgba(255,73,73,0.6) 50%),
			linear-gradient(135deg, rgba(255,73,73,0.6) 50%, transparent 50%),
			linear-gradient(to right, rgba(255,73,73,0.6), rgba(255,73,73,0.6));
		background-position: calc(100% - 14px) 11px, calc(100% - 10px) 11px, calc(100% - 26px) 5px;
		background-size: 5px 4px, 4px 5px, 1px 15px;
		background-repeat: no-repeat;
	}
	.popup .container .flex-container select.field:focus {
		background-image:
			linear-gradient(45deg, rgba(255,255,255,0.6) 50%, transparent 50%),
			linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.6) 50%),
			linear-gradient(to right, rgba(255,255,255,0.6), rgba(255,255,255,0.6));
		background-position: calc(100% - 9px) 11px, calc(100% - 14px) 10px, calc(100% - 26px) 5px;
		background-size: 5px 4px, 4px 5px, 1px 15px;
		background-repeat: no-repeat;
	}
	.popup .container .flex-container option {
		outline: none;
		background: rgb(50,50,50);
	}
	.popup .container .flex-container #createDateDay {
		flex: 1 1 10%;
		min-width: 50px;
	}
	.popup .container .flex-container #createDateMonth {
		flex: 1 1 20%;
		margin-left: 5px;
	}
	.popup .container .flex-container #createDateYear {
		flex: 1 1 10%;
		margin-left: 5px;
		min-width: 65px;
	}
	.popup .container .flex-container #createTime {
		flex: 1 1 10%;
		margin-left: 50px;
		max-width: 100px;
		min-width: 50px;
	}
	.popup .container textarea {
		resize: vertical;
		width: 100%;
		padding: 5px;
		font-family: 'Roboto', sans-serif;
		box-sizing: border-box;
		background: rgba(57,57,57,0.8);
		box-shadow: 0 2px 15px 1px rgba(10,10,10,0.05);
		font-size: 14px;
		height: 67px;
		min-height: 29px;
		border-style: solid;
		border-width: 1px;
		border-color: rgba(255,255,255,0.2);
		color: rgba(255,255,255,1);
		transition: 0.2s;
		border-radius: 3px;
		position: relative;
		z-index: 1;
	}
	.popup .container textarea.fail {
		color: rgba(255,73,73,1);
		border-color: rgba(255,73,73,0.6);
	}
	.popup .container textarea:focus {
		outline: none;
		background: rgba(64,64,64,0.8);
		box-shadow: 0 2px 15px 1px rgba(80,80,80,0.15);
		border-color: rgba(255,255,255,0.6);
	}
	.popup .container .input-text {
		width: 100%;
		padding: 0 5px;
		font-family: 'Roboto', sans-serif;
		box-sizing: border-box;
		background: rgba(57,57,57,0.8);
		box-shadow: 0 2px 15px 1px rgba(10,10,10,0.05);
		font-size: 14px;
		height: 27px;
		border-style: solid;
		border-width: 1px;
		border-color: rgba(255,255,255,0.2);
		color: rgba(255,255,255,1);
		transition: 0.2s;
		border-radius: 3px;
		position: relative;
		z-index: 1;
	}
	.popup .container .copy {
		position: absolute;
		color: rgba(255,255,255,0.5);
		padding: 5px;
		font-size: 16px;
		transition: 0.15s color;
		text-shadow: 0 2px 15px 1px rgba(0,0,0,0.15);
		right: 24px;
		cursor: pointer;
		z-index: 1;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}
	.popup .container .copy:hover {
		color: rgba(255,255,255,1);
	}
	.popup .container .copy:active {
		color: rgba(255,255,255,1);
		padding: 6px 5px 4px 5px;
	}
	.popup .container .input-text.fail {
		color: rgba(255,73,73,1);
		border-color: rgba(255,73,73,0.6);
	}
	.popup .container .input-text.hidden {
		border-color: rgba(255,255,255,0.07);
		background: rgba(57,57,57,0.3);
		color: rgba(255,255,255,0.33);
	}
	.popup .container .input-text:focus {
		outline: none;
		background: rgba(64,64,64,0.8);
		box-shadow: 0 2px 15px 1px rgba(80,80,80,0.15);
		border-color: rgba(255,255,255,0.6);
	}
	.popup .container .styles {
		display: grid;
		grid-template-columns: auto auto auto auto auto auto;
		grid-gap: 4px;
    	grid-column-gap: 7px;
		padding: 5px;
        overflow-y: auto;
        z-index: 2;
        max-height: 70vh;
        position: relative;
	}
	.popup .container .styles .thumbnail {
		border-style: solid;
		border-width: 1px;
		margin: 0;
		border-color: rgba(255,255,255,0.2);
		transition: 0.2s;
		border-radius: 3px;
		width: 100%;
		height: auto;
		opacity: 0.35;
		box-shadow: 0 2px 15px 1px rgba(80,80,80,0.15);
	}
	.popup .container .styles .thumbnail:hover {
		border-color: rgba(255,255,255,0.4);
		opacity: 0.9;
		cursor: pointer;
	}
	.popup .container .styles .thumbnail.selected {
		box-shadow: 0 2px 15px 1px rgba(80,80,80,0.35);
		border-color: rgba(255,255,255,1);
		opacity: 0.95;
	}
.notification {
	position: absolute;
	width: 25px;
	height: 25px;
	z-index: 5;
	top: -6px;
	right: -3px;
	display: flex;
	justify-content: center;
	align-items: center;
}
	.notification .innercircle {
		width: 7px;
		height: 7px;
		background: rgba(255,0,0,1);
		border-radius: 50px;
		position: absolute;
	}
	.notification .outercircle {
		width: 15px;
		height: 15px;
		background: rgba(255,0,0,1);
		border-radius: 50px;
		position: absolute;
		animation-name: notification;
		animation-duration: 0.8s;
		animation-iteration-count: infinite;
	}
@keyframes countdown {
    0%   {top: 55px;}
    100% {top: 0px;}
}
@keyframes unlocking {
    0%   {opacity: 0.15;}
    50%   {opacity: 0.35;}
    100% {opacity: 0.15;}
}
@keyframes notification {
    0%   {opacity:1;width:5px;height:5px;}
    100% {opacity:0;width:25px;height:25px;}
}
@keyframes processing {
    0%   {opacity: 1;}
    50%   {opacity: 0.75;}
    100% {opacity: 1;}
}
@keyframes unlock {
    0%   {margin-top: 17px; opacity: 0.15;}
    20%   {margin-top: 25px; opacity: 0.25;}
    90% {margin-top: 0px; opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fadeout {
    0%   {top: -47px;opacity: 1;}
    95% {top: -67px;opacity: 0;}
    100% {top: -67px;opacity: 0;}
}
@keyframes fadein {
    0%   {top: 20px;opacity: 0;}
    95% {top: 0px;opacity: 1;}
    100% {top: 0px;opacity: 1;}
}
@keyframes popup-fadein {
    0%   {margin-top: 40px;opacity: 0;}
    95% {margin-top: 15px;opacity: 1;}
    100% {margin-top: 15px;opacity: 1;}
}
@keyframes popup-fadeout {
    0%   {margin-top: 15px;opacity: 1;}
    95% {margin-top: 40px;opacity: 0;}
    100% {margin-top: 40px;opacity: 0;}
}
@keyframes background-fadein {
    0%   {opacity: 0;display: flex;}
    95% {opacity: 1;display: flex;}
    100% {opacity: 1;display: flex;}
}
@keyframes background-fadeout {
    0%   {opacity: 1;display: flex;}
    95% {opacity: 0;display: flex;}
    100% {opacity: 0;display: none;}
}

@media screen and (max-width: 1300px) {
	.introduction .date {
		display: none;
	}
	.introduction .date.short {
		display: inline-block;
	}
}
@media screen and (max-width: 900px) {
	.popup .container .styles {
		grid-template-columns: auto auto auto auto;
	}
	.popup .container .flex-container #createTime {
		margin-left: 30px;
	}
}
@media screen and (max-width: 560px) {
	.popup .container .flex-container #createTime {
		margin-left: 15px;
	}
	.popup .container .styles {
    	max-height: calc(100% - 40px);
	}
	.popup .inputoverlay {
		top: 3px;
	}
	.message.notice {
		margin-bottom: 70px;
	}
	.introduction {
		width: 100%;
		max-width: 410px;
		min-width: unset;
		padding: 0 15px 35px 15px;
	}
	.message .container {
		width: 100%;
		max-width: 424px;
		min-width: unset;
		padding: 0 15px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	.popup {
		position: fixed;
	}
	.popup .container {
		overflow-y: scroll;
		position: relative;
		color: rgba(255,255,255,1);
		min-width: unset;
		max-width: unset;
		width: 100%;
		margin: 0;
		height: 100%;
		box-sizing: border-box;
		border-radius: 0;
		box-shadow: none;
		padding: 35px 15px 15px 15px;
	}
	.popup.error .container {
		width: calc(100% - 20px);
		margin: 10px;
		min-height: auto;
		box-sizing: border-box;
		border-radius: 5px;
		box-shadow: 0 2px 15px 1px rgba(10,10,10,0.5);
		padding: 15px;
	}
	.popup.error .close {
		padding: 8px 8px 8px 8px;
	}
	.popup.error .close:active {
		padding: 9px 8px 7px 8px;
	}
	.popup .container .input-text {
		height: 33px;
		font-size: 16px;
	}
	.popup .container .copy {
		font-size: 20px;
		right: 14px;
	}
	.popup .container .flex-container .field {
		height: 33px;
		font-size: 16px;
		padding: 0 23px 0 5px;
	}
	.popup .container .flex-container #createTimeHours {
		margin-left: 25px;
	}
	.popup .container .flex-container select.field {
		background-position: calc(100% - 11px) 13px, calc(100% - 7px) 13px, calc(100% - 21px) 7px;
	}
	.popup .container .flex-container select.field.fail {
		background-position: calc(100% - 11px) 13px, calc(100% - 7px) 13px, calc(100% - 21px) 7px;
	}
	.popup .container .flex-container select.field:focus {
		background-position: calc(100% - 6px) 13px, calc(100% - 11px) 12px, calc(100% - 21px) 7px;
	}
	.popup .container textarea {
		font-size: 16px;
	}
	.popup .close {
		font-size: 26px;
		padding: 16px 14px 8px 8px;
	}
	.popup .close:active {
		padding: 17px 14px 7px 8px;
	}
	.popup .exit-cover {
		display: none;
	}
	.button {
		padding: 5px 12px 6px;
		font-size: 16px;
	}
	.button:active {
		padding: 5px 12px 5px;
	}
	.message .title {
		font-size: 16px;
	}
	#shareInterface .flex-container {
		flex-wrap: wrap;
	}
	#shareInterface .button.flex {
		flex: 1 1 40%;
		margin: 3px;
	}
	@keyframes popup-fadein {
		0%   {opacity: 0;}
		95% {opacity: 1;}
		100% {opacity: 1;}
	}
	@keyframes popup-fadeout {
		0%   {opacity: 1;}
		95% {opacity: 0;}
		100% {opacity: 0;}
	}
	.topbar .button {
		position: fixed;
		display: inline-block;
		right: 0;
		margin: 15px;
		width: calc(100% - 30px);
		bottom: 0;
	}
	.topbar .share {
		font-size: 24px;
		padding: 4px 5px 4px 4px;
	}
	.topbar .share:active {
		padding: 5px 5px 3px 4px;
	}
	.popup .container label {
		font-size: 16px;
	}
	.popup .container .helptext {
		font-size: 12px;
	}
}
@media screen and (max-width: 490px) {
	.popup .container .styles {
		grid-template-columns: auto auto auto;
	}
}
@media screen and (max-width: 450px) {
	.timer .clock {
		font-size: 35px;
		top: 53px;
	}
	.timer .titlebox .title {
		padding-top: 5px;
		padding-left: 14px;
		font-size: 10px;
	}
	.timer .separator {
		font-size: 35px;
		top: -22px;
	}
	.timer .bottom {
		width: 320px;
		margin-top: 80px;
		height: 45px;
	}
	.timer .top {
		width: 320px;
		height: 30px;
		top: 32px;
	}
	@keyframes countdown {
		0%   {top: 53px;}
		100% {top: 16px;}
	}
}
@media screen and (max-width: 430px) {
	.introduction .caption {
		display: none;
	}
}
@media screen and (max-width: 340px) {
	.introduction .caption {
		display: inline-block;
	}
	.introduction .separator {
		display: block;
	}
}