@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* ==========================================================================
   Reset CSS
   ========================================================================== */
*, *:before, *:after {
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}

a:link, a:visited, a:hover, a:active {
	cursor: pointer;
	text-decoration: none;
}

a:link, a:visited {
	color: inherit;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

a, button, input[type="button"],
i, .material-icons {
	user-select: none;
}

.material-icons { vertical-align: middle }
.material-icons.large { font-size: 32px; margin: -4px }
.material-icons img { height: 1em; width: auto }
.material-icons.large img { height: .75em; position: relative; top: -.125em }

ul, ol, li {
	list-style: none;
	padding: 0;
	margin: 0;
}

input[type="button"], input[type="submit"], [onclick] { cursor: pointer }
input[type="radio"], input[type="checkbox"] { margin: 0 5px 0 0 }
input[type="search"] { -webkit-appearance: none !important; border-radius: 0 }

script, style { display: none !important }

/* ==========================================================================
   Utilities CSS
   ========================================================================== */
.flx {
	display: box;
	display: flex;
	box-orient: horizontal;
	flex-direction: row;
	width: 100%;
}

.flx_v {
	display: box;
	display: flex;
	box-orient: vertical;
	flex-direction: column;
}

.flx_valign {
	display: box;
	display: flex;
	align-items: center;
}

.flx_fill {
	box-flex:1 !important;
	flex-grow: 1;
}

.flx > *:not(.flx_fill):not(.flx):not(.flx_v):not(.flx_valign),
.flx_valign > *:not(.flx_fill):not(.flx):not(.flx_v):not(.flx_valign) {
	display: block;
}

.img_cover {
	position: relative;

	display: inline-block;
	overflow: hidden;
	width: 100%;
	padding-bottom: 100%;
}

.img_cover img {
	position: absolute;
	top: 50%;
	left: 50%;

	width: 100%;
	height: 100%;

	border-radius: inherit;
	object-fit: cover;
	transform: translate(-50%, -50%);
}

.img_cover.ratio-16x9 { padding-bottom: 56.25% }
.img_cover.ratio-4x3 { padding-bottom: 75% }

.separator {
	display: block;
	width: 100%;
	padding: 1em 0 .5em;
	font-wight: 700;
}

.separator > span {
	font-weight: 700;
	font-size: 1.3em;
	line-height: 1;
}

.separator:empty {
    padding: .3em;
}

.auto_middot > *:not(:last-of-type):not(:empty) + *:not(:empty):before {
	content: '\00a0\00b7\00a0';
}

.transition {
	transition: all .3s;
}

.pd-off { padding: 0 }
.pd-s { padding: .3em }
.pd, .pd-static { padding: .6em }

.pd_horz-s { padding: .3em .5em }
.pd_horz, .pd_horz-static { padding: .6em 1em }
.pd_horz-l { padding: .9em 1.5em }

@media screen and (min-width: 240px) {
	.pd-s { padding: .5em }
	.pd { padding: 1em }
	.pd_horz-s { padding: .5em .8em }
	.pd_horz { padding: 1em 1.6em }
	.pd_horz-l { padding: 1.5em 2.4em }
}

@media screen and (min-width: 480px) {
	.pd-s { padding: .8em }
	.pd { padding: 1.6em }
}

@media screen and (min-width: 864px) {
	.pd_horz-s { padding: .65em 1em }
	.pd_horz { padding: 1.3em 2em }
	.pd_horz-l { padding: 1.95em 3em }
}

.ucfirst { display: inline-block; text-transform: lowercase } /* only works with block level */
.ucfirst::first-letter { text-transform: capitalize }

.preloader_round {
	border: .4em solid #f3f3f3;
	border-radius: 50%;
	border-top: .4em solid #0455B0;
	width: 1em;
	height: 1em;
	animation: preloader_round 1s ease infinite;
}

@keyframes preloader_round {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.text-trim { text-overflow: ellipsis; overflow-x: hidden }

.sub_words {
	word-break: break-word;
	color: #a7a9ac;
	font-size: .85em;
	font-weight: 400;
}

.err { color: #FF0E0E }
.success { color: #06A500 }

.err,
.success {
	font-size: .85em;
	font-weight: 400;
	text-align: center;
}

.err:empty,
.success:empty {
	display: none;
}

.err li:before,
.success li:before {
	content: '\2731  ';
}

.err li,
.success li {
	text-align: left;
	word-break: break-word;
}

hr { margin:1em 0; border:0; border-top: 1px solid; border-color: inherit; color: #e6e6e6 }

/* ==========================================================================
   App CSS
   ========================================================================== */
html, body {
	display: box;
	display: flex;
	box-orient: vertical;
	flex-direction: column;
	overflow-x: hidden;
	min-height: 100%;

	width: 100%;
	margin: 0 auto;
	background-color: white;
	overflow-x: hidden;

	font-family: 'Roboto', sans-serif;
	-webkit-touch-callout:none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	text-shadow: none;

	font-size: 10.5pt;
}

body {
	position: relative;

	box-flex:1 !important;
	flex-grow: 1;
}