/* cyrillic-ext */
@font-face {
	font-family: 'Exo 2';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/exo2/v19/7cH1v4okm5zmbvwkAx_sfcEuiD8jvvKsNNC_nps.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
	font-family: 'Exo 2';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/exo2/v19/7cH1v4okm5zmbvwkAx_sfcEuiD8jvvKsPdC_nps.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
	font-family: 'Exo 2';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/exo2/v19/7cH1v4okm5zmbvwkAx_sfcEuiD8jvvKsNtC_nps.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
	font-family: 'Exo 2';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/exo2/v19/7cH1v4okm5zmbvwkAx_sfcEuiD8jvvKsN9C_nps.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Exo 2';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/exo2/v19/7cH1v4okm5zmbvwkAx_sfcEuiD8jvvKsOdC_.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
	box-sizing: border-box;
	height: 100%;
	font-size: 13px;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	font: 1rem/1 'Exo 2', sans-serif;
	padding: 0;
	margin: 0;
	height: 100%;
}

.nowrap {
	white-space: nowrap;
}

.container {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: auto;
}

.content {
	padding: 1rem;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	max-width: 1280px;
}

.container.closed .deactivated-overlay {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #d1d1d1d1;
	display: flex;
	align-items: center;
}

.container.closed .overlay-description {
	font-size: 3.4em;
	color: black;
	font-weight: bold;
	width: 100%;
	transform: rotate(-65deg);
	z-index: 2;
}

.deactivated-overlay {
	display: none;
}

.content.short {
	max-height: 600px;
}
.content.medium {
	max-height: 640px;
}
.content.long {
	max-height: 660px;
}

.donate-description {
	padding-bottom: 0.5rem;
	font-size: 2.5rem;
	font-weight: bold;
}

.short .donate-sub-description {
	font-size: 1.75rem;
}
.medium .donate-sub-description {
	font-size: 1.5rem;
}
.long .donate-sub-description {
	font-size: 1.4rem;
}

.card-option-description {
	font-size: 1.75rem;
	padding-bottom: 0.5rem;
}

.bank-option {
	padding: 2rem 0 1.5rem;
	width: 100%;
}

.bank-link-wrapper {
	margin-bottom: 1rem;
}

.bank-link-bg {
	background-color: white;
	border-radius: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bank-link-bg:hover {
	background-color: #e7e7e7;
}

.bank-link {
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 2.1;
	font-weight: bold;
	height: 3.6rem;
	width: 100%;
}

.bank-logo {
	background-color: black;
	
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.bank-rest {
	color: black;
	display: flex;
    align-items: center;
    justify-content: center;
}

.bank-private {
	-webkit-mask-image: url(img/logo/privat.svg);
    mask-image: url(img/logo/privat.svg);
}

.bank-mono {
	-webkit-mask-image: url(img/logo/mono.svg);
    mask-image: url(img/logo/mono.svg);
}

.bank-revolut {
	-webkit-mask-image: url(img/logo/revolut.svg);
    mask-image: url(img/logo/revolut.svg);
}

.bank-tikkie {
	-webkit-mask-image: url(img/logo/tikkie.svg);
    mask-image: url(img/logo/tikkie.svg);
}

.bank-paypal {
	-webkit-mask-image: url(img/logo/paypal.svg);
    mask-image: url(img/logo/paypal.svg);
}

.card-number-block:hover,
.content-number-block:hover {
	cursor: pointer;
}

.card-number-block:active .card-number,
.content-number-block.card-number:active {
	color: #c22d00;
	text-shadow: 0 0 5px #e74100;
}

.card-number::after {
	background-color: white;
}

.card-number-block.copied #copied-description,
.content-number-wrapper.copied #copied-description {
	display: block;
}

.card-number-block.copied #copy-suggestion,
.content-number-wrapper.copied #copy-suggestion {
	display: none;
}

.number-description {
	font-size: 1rem;
	padding-bottom: 0.5rem;
	line-height: 1.4;
}

.number-recipient {
	font-style: italic;
	color: #787878;
}

#copied-description {
	display: none;
}

.card-number {
	font-size: 1.75rem;
	font-weight: bold;
	padding: 0.5rem 0;
}

.card-number::after {
	content: "";
	width: 16px;
	height: 16px;
	display: inline-block;
	-webkit-mask-image: url(img/copy-text.svg);
    mask-image: url(img/copy-text.svg);
}

.low-content::after {
	margin-bottom: -4px;
}

.card-number-block:not(:active) .card-number,
.content-number-wrapper .card-number:not(:active) {
	transition-property: color, text-shadow;
	transition-duration: 2s;
}

.preload {
	width: 0;
	height: 0;
	position: absolute;
}

@media (min-width: 360px) {
	html {
		font-size: 16px;
	}

	.card-number::after {
		width: 20px;
		height: 20px;
	}
}

@media (min-width: 768px) {
	html {
		font-size: 18px;
	}

	.short .donate-sub-description,
	.medium .donate-sub-description,
	.long .donate-sub-description {
		font-size: 1.75rem;
	}

	.content.short,
	.content.medium,
	.content.long {
		max-height: 500px;
	}

	.bank-option {
		display: flex;
		flex-wrap: wrap;
		max-width: 700px;
		margin: 0 auto;
	}
	.bank-link-wrapper {
		padding: 0 1rem;
		flex: 1 0 50%;
		text-align: center;
	}
	.bank-link {
		font-size: 1.25rem;
		height: 2.6rem;
		background-size: auto 2.4rem;
	}
	.card-number::after {
		width: 22px;
		height: 22px;
	}
}

@media (min-width: 1280px) {
	html {
		font-size: 20px;
	}

	.content.short,
	.content.medium,
	.content.long {
		max-height: 650px;
	}

	.donate-description {
		font-size: 4rem;
	}
	.donate-sub-description {
		font-size: 2rem;
	}
	.card-number::after {
		width: 24px;
		height: 24px;
	}
}

@media (max-height: 610px) {
	html {
		font-size: 12px;
	}

	.content.short {
		max-height: 400px;
	}
	.content.medium {
		max-height: 420px;
	}
	.content.long {
		max-height: 440px !important;
	}

	.bank-link {
		height: 3rem;
	}

	.card-number::after {
		width: 16px;
		height: 16px;
	}
}

/* *** THEMES *** */

/* DEFAULT THEME */
.container.theme-default {
	color: #0052CE;
	background-color: #FFF401;	
}

.theme-default .card-number::after {
	background-color: #0052CE;
}

/* RIGHT SECTOR THEME */
.container.theme-right-sector {
	color: white;
	background-color: #DA251C;	
}

.theme-right-sector .bank-link-bg {
	background-color: black;
}

.theme-right-sector .bank-logo {
	background-color: white;
}

.theme-right-sector .bank-rest {
	color: white;
}

.theme-right-sector .bank-link-bg:hover {
	background-color: #272727;
}

.theme-right-sector .card-number-block:active .card-number,
.theme-right-sector .content-number-wrapper .card-number:active {
	color: black;
	text-shadow: 0 0 5px black;
}

.theme-right-sector .number-recipient {
	color: #ffb0b0;
}


/* BLUE THEME */
.container.theme-blue {
	color: #FFF401;
	background-color: #0052CE;	
}

.theme-blue .card-number::after {
	background-color: #FFF401;
}

/* DARK THEME */
.container.theme-dark {
	color: white;
	background-color: black;
}

/* LIGHT THEME */
.container.theme-light {
	color: #000;
	background-color: #fff;
}

.theme-light .bank-link-bg {
	background-color: black;
}

.theme-light .bank-logo {
	background-color: white;
}

.theme-light .bank-rest {
	color: white;
}

.theme-light .bank-link-bg:hover {
	background-color: #272727;
}

.theme-light .card-number::after {
	background-color: black;
}

/* PIXEL THEME */
.container.theme-pixel {
	color: white;
	background-color: #6C834B;	
}

.theme-pixel .number-recipient {
	color: #262B2E;
}

.theme-pixel .card-number-block:active .card-number,
.theme-pixel .content-number-wrapper .card-number:active {
	color: black;
	text-shadow: 0 0 5px black;
}

.theme-pixel .bank-link-bg {
	background-color: white;
}

.theme-pixel .bank-link-bg:hover {
	background-color: #efefef;
}

.theme-pixel .bank-logo {
	background-color: #262B2E;
}

.theme-pixel .bank-rest {
	color: #262B2E;
}