/* CSS 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;
    overflow: hidden;
    box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1.35;
}

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;
}

/* Page Styles */

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}

.color-ui-high-light {
    color: #e2e5e9;
}

.color-ui-high-dark {
    color: #8c97a6;
}

.color-ui-high-dark-bg {
    background-color: #8c97a6;
}

.color-ui-high-pure {
    color: #FFFFFF;
}

.color-ui-high-pure-bg {
    background-color: #FFFFFF;
}

.color-ui-low-dark {
    background-color: #040506;
}

.color-ui-low-ultra {
    background-color: #6f7c8d;
}

.color-ui-danger {
    color: #F0212E;
}

.color-ui-system {
    color: #53c1ff;
}

.color-ui-success {
    color: #24C765;
}

.color-ui-warning {
    color: #FFCC00;
}

.color-ui-danger-bg {
    background-color: #F0212E;
}

.color-ui-system-bg {
    background-color: #53c1ff;
}

.color-ui-success-bg {
    background-color: #24C765;
}

.color-ui-warning-bg {
    background-color: #FFCC00;
}

.color-ui-danger-bg-light {
    background-color: rgba(240, 33, 46, .2);
}

.color-ui-system-bg-light {
    background-color: rgba(83, 193, 255, .2);
}

.color-ui-success-bg-light {
    background-color: rgba(36, 199, 101, .2);
}

.color-ui-warning-bg-light {
    background-color: rgb(255, 204, 0, .2);
}

.color-ui-fill-danger {
    fill: #F0212E;
}

.color-ui-fill-system {
    fill: #53c1ff;
}

.color-ui-fill-success {
    fill: #24C765;
}

.color-ui-fill-warning {
    fill: #FFCC00;
}

.template-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.template-title {
    font-family: Montserrat;
    font-weight: 600;

    width: max-content;

    font-size: 3.8vmax;
    line-height: 1.35;
    padding: 0.75vmax 1vmax;
    border-radius: 0 0 .5vmax .5vmax;
    overflow: unset;

    box-sizing: border-box;

    letter-spacing: 1.25px;
    text-align: center;
    width: 100%;
}

.template-container.md-h .template-title {
    font-size: 8vmin;
    line-height: 1;
    padding: 1.5vmin 2vmin;
}

.template-container.sm-h .template-title {
    font-size: 9vmin;
    padding: 2vmin 3vmin;
}

.template-container.xs-h .template-title {
    font-size: 12vmin;
    padding: 0;
}

.template-container.md-w .template-title {
    font-size: 10vmin;
    padding: 0;
}


.template-container .template-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.template-container .template-footer .template-footer-source {
    color: #6f7c8d;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 1.6vmax;
    text-align: center;
}

.template-container.horizontal.md-h .template-footer .template-footer-source {
    font-size: 3vmin;
    letter-spacing: .2vmin;
}

.template-container.horizontal.sm-h .template-footer .template-footer-source {
    font-size: 5vmin;
    letter-spacing: .4vmin;
}

.template-container.horizontal.xs-h .template-footer .template-footer-source {
    font-size: 8vmin;
    letter-spacing: .4vmin;
}


.reveal {
    margin-bottom: -.5vmax;
    opacity: 0;
    visibility: hidden;
    transition: all 150ms ease-in-out;
}

.reveal.show {
    margin-bottom: 0;
    visibility: visible;
    opacity: 1;
}

.scale {
    transform: scale(.9);
    opacity: 0;
    visibility: hidden;
    transition: all 150ms ease-in-out;
}

.scale.show {
    transform: scale(1);
    visibility: visible;
    opacity: 1;
}

.slide-down {
    margin-top: -10%;
    opacity: 0;
    visibility: hidden;
    transition: all 150ms ease-in-out;
}

.slide-down.show {
    margin-top: 0;
    visibility: visible;
    opacity: 1;
}

.slide-down.hidden {
    visibility: hidden;
    opacity: 0;
    display: none;
}