@font-face {
	font-family: 'Crackhouse';
	src:         url('../fonts/Crackhouse.eot');
	src:         url('../fonts/Crackhouse.eot?#iefix') format('embedded-opentype'),
				 url('../fonts/Crackhouse.woff2') format('woff2'),
				 url('../fonts/Crackhouse.woff') format('woff'),
				 url('../fonts/Crackhouse.ttf') format('truetype'),
				 url('../fonts/Crackhouse.svg#Crackhouse') format('svg');
	font-weight: 500;
	font-style:  normal;
}

@font-face {
	font-family: 'Eurostile LT Std';
	src:         url('../fonts/EurostileLTStd-BoldCn.eot');
	src:         url('../fonts/EurostileLTStd-BoldCn.eot?#iefix') format('embedded-opentype'),
				 url('../fonts/EurostileLTStd-BoldCn.woff2') format('woff2'),
				 url('../fonts/EurostileLTStd-BoldCn.woff') format('woff'),
				 url('../fonts/EurostileLTStd-BoldCn.ttf') format('truetype'),
				 url('../fonts/EurostileLTStd-BoldCn.svg#EurostileLTStd-BoldCn') format('svg');
	font-weight: bold;
	font-style:  normal;
}

@keyframes spinner {
	to {transform: rotate(360deg);}
}

.spinner img {
	filter: grayscale(1);
	opacity: 0.5;
}

.spinner:after {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	margin-left: -10px;
	border-radius: 50%;
	border: 2px solid #ccc;
	border-top-color: #000;
	animation: spinner .6s linear infinite;
}

svg {
	position: absolute;
	visibility: hidden;
	left: -99999px;
	top: -99999px;
}

.preview {
	position:      relative;
	width:         200px;
	border-radius: 10px;
	overflow:      hidden;
}

.preview::before {
	content:     '';
	padding-top: 142%;
	display:     block;
}

.preview img {
	position:  absolute;
	top:       0;
	left:      0;
	width:     calc(100% + 24px);
	clip-path: inset(12px);
	margin:    -12px;
	display:   block;
}