@charset "utf-8";

/* ========================================================================================
    @font-face
======================================================================================== */

/* Open Sans
============================================================================= */
@font-face {
    font-family: "ZionTrain Pro";
    src: url("../fonts/ZionTrainPro-Regular/ZionTrainPro-Regular.eot");
    src: local("ZionTrainPro-Regular"),
        url("../fonts/ZionTrainPro-Regular/ZionTrainPro-Regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/ZionTrainPro-Regular/ZionTrainPro-Regular.woff2") format("woff2"),
        url("../fonts/ZionTrainPro-Regular/ZionTrainPro-Regular.woff") format("woff"),
        url("../fonts/ZionTrainPro-Regular/ZionTrainPro-Regular.ttf") format("truetype"),
        url("../fonts/ZionTrainPro-Regular/ZionTrainPro-Regular.svg#ZionTrainPro-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ========================================================================================
    reset (v2.0-modified) + normalize (v8.0.1) + bootstrap-reboot (v4.3.1)
======================================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-tap-highlight-color: transparent;
}

html {
    width: 100%;
    height: 100vh;
    font-size: 100%;
    line-height: 1.15;
		-webkit-text-size-adjust: 100%;
		-webkit-overflow-scrolling: touch;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 1);
    text-align: left;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
dl, dt, dd, ol, ul, li,
form, fieldset, legend, label,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-size: 100%;
    font: inherit;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-webkit-tap-highlight-color: transparent;
}

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

[tabindex="-1"]:focus {
    outline: 0 !important;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

abbr[title],
abbr[data-original-title] {
	text-decoration: underline;
		-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
	cursor: help;
	border-bottom: 0;
		-webkit-text-decoration-skip-ink: none;
	text-decoration-skip-ink: none;
}

a {
    text-decoration: none;
    background-color: transparent;
}

a:hover,
a:active,
a:focus {
    outline: 0;
}

a:not([href]):not([tabindex]) {
	color: inherit;
	text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
	color: inherit;
	text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
	outline: 0;
}

address {
	font-style: normal;
	line-height: inherit;
}

ul,
ol {
	list-style: none;
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1rem;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -.250rem;
}

sup {
	top: -.500rem;
}

pre {
	overflow: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
}

td,
th {
    padding: 0;
}

svg {
	overflow: hidden;
	vertical-align: middle;
}

svg:not(:root) {
    overflow: hidden;
}

:focus {
    outline: 0;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    line-height: inherit;
    color: inherit;
    white-space: normal;
}

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

select {
    word-wrap: normal;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    border: none;
    	-webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
    cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    -webkit-appearance: listbox;
}

textarea {
    overflow: auto;
    resize: vertical;
}

progress {
    vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    outline-offset: -.125rem;
    	-webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    font: inherit;
    	-webkit-appearance: button;
}

output {
    display: inline-block;
}

summary {
    display: list-item;
    cursor: pointer;
}

template {
    display: none;
}

[hidden] {
    display: none !important;
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    max-width: 100%;
}

audio:not([controls]) {
    display: none;
    height: 0;
}


/* ========================================================================================
    layouts
======================================================================================== */
body {
	min-width: 320px;
	min-height: 480px;
    background: rgba(39, 208, 125, 1);
    color: rgba(51, 51, 51, 1);
    font: normal normal 400 1rem/1 "ZionTrain Pro", sans-serif;
}

.wrapper {
    display: flex;
	height: 100vh;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: stretch;
	align-items: stretch;
}

.container {
	flex-grow: 0;
	flex-shrink: 1;
    flex-basis: auto;
	max-width: auto;
	align-self: auto;
	order: 0;

    /* background: #ccc; */
}

.container-center {
    width: 100%;
    max-width: 1200px;
	/* max-width: 1440px; */
    height: auto;
    margin: 0 auto;
    padding: 0 15px;

    /* background: #9933FF; */
}

.container-center::after {
    content: "";
    clear: both;
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
}

/* middle, content-66 + sidebar
============================================================================= */
.middle {
	flex: 0 0 auto;
	margin: 0 0 5rem;

    /* background: #FFCCFF; */
}


/* ========================================================================================
    header
======================================================================================== */
.header {
	margin: 0 0 5rem;

    /* background: #FFCC00; */
}

.logo {
	max-width: 25rem;
	margin: 0 auto;
}

/* ========================================================================================
    middle
======================================================================================== */
/* img
============================================================================= */
img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    	-ms-interpolation-mode: bicubic;
}

.middle ul {
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: stretch;
	align-items: stretch;
}

.middle ul li {
	flex-grow: 0;
	flex-shrink: 1;
    flex-basis: 5rem;
	max-width: 5rem;
	align-self: auto;
	order: 0;
	margin: 0 .625rem;
}

.middle ul li:last-child {
	flex-basis: 100%;
	max-width: 100%;
	margin: 1.250rem auto 0;
}

.middle ul li:last-child img {
	max-width: 17.500rem;
	margin: 0 auto;
}

/* ========================================================================================
    footer
======================================================================================== */
.footer {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 1);
	/* font-size: 4.438rem; */
	font-size: calc(2.250rem + 16 * ((100vw - 320px) / (1280 - 320)));
	text-align: center;

    /* background: blue; */
}