/*** RESET ***/
* {
	box-sizing: border-box;
}

:root {
	/* --main: #1fa26c; */
	/* --main_light: #63ebb2; */
	--main: #0098ff;
	--main_rgb: 0, 152, 255;
	--main_dark: #0081d9;
	--main_dark_rgb: 0, 129, 217;

	--team: #1f99a2;
	--team_rgb: 31, 153, 162;
	--team_light: #42b5bd;
	--team_light_rgb: 66, 181, 189;
	--team_25: rgba(66, 181, 189, 0.25);
	--green: #1fa26c;
	--green_rgb: 31, 162, 108;
	--greenish: #4ebe8f;
	--greenish_rgb: 78, 190, 143;
	--greener: #10b80a;
	--greener_rgb: 16, 184, 10;
	--blue: #6d9eeb;
	--blue_rgb: 109, 158, 235;
	--purple: #8e7cc3;
	--purple_rgb: 142, 124, 195;
	--pinkish: #d92ec4;
	--pinkish_rgb: 217, 46, 196;
	--yellow: #f1c232;
	--yellow_rgb: 241, 194, 50;
	--red: #d14348;
	--red_rgb: 209, 67, 72;
	--grey_lightest: #f5f5f5;
	--grey_lightest_rgb: 245, 245, 245;
	--grey_lighter: #eeeeee;
	--grey_lighter_rgb: 238, 238, 238;
	--grey_light: #d5d5d5;
	--grey_light_rgb: 213, 213, 213;
	--grey_mid: #bbbbbb;
	--grey_mid_rgb: 187, 187, 187;
	--grey: #999999;
	--grey_rgb: 153, 153, 153;
	--dark: #222222;
	--dark_rgb: 34, 34, 34;
	--darker: #111111;
	--darker_rgb: 17, 17, 17;

	--cryptocom: #122640;
	--coinmarketcap: #3459e7;
	--dextools: #00a2bf;
	--coingecko: #8bc53f;
	--dexscreener: #111111;

	--white: #ffffff;
	--white_rgb: 255, 255, 255;
	--black: #000000;
	--black_rgb: 0, 0, 0;

	--transition_010: all 0.10s ease-in-out;
	--transition: all 0.15s ease-in-out;

	--transition_speed: 0.15s;

	--border_radius: 0.50em;
	--border_radius_small: 0.25em;
	--box_shadow: 0 0 1.50em rgba(0, 0, 0, 0.10);
	--box_shadow_small: 0 0 1.00em rgba(0, 0, 0, 0.05);
}

/* and then some other styles */
html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	background: var(--grey_lightest);
	font-family: 'Jost', 'Open Sans', sans-serif;
	font-weight: 400;
	color: var(--darker);
	line-height: 1.4;
	font-size: 16px;
}

header {
	padding: 2.00em 0 2.00em 0;
	text-align: center;
	background: var(--white);
	color: var(--black);
	border-bottom: 3px solid var(--main);
}

footer {
	padding: 4.00em 0 4.00em 0;
	background: var(--dark);
	color: var(--white);
	text-align: center;
	border-top: 3px solid var(--main);
}

section {
	padding: 2.00em 0;
}

h1, .h1 {
	font-size: 3.50em;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--main);
	line-height: 1;
}
h1 .small,
.h1 .small {
	font-size: 0.75em;
}

h2, .h2 {
	font-size: 2.50em;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.10;
}

h3, .h3 {
	font-size: 1.60em;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.20;
}

h4, .h4 {
	font-size: 1.20em;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.20;
}

h5, .h5 {
	font-size: 1.00em;
	font-weight: 700;
	line-height: 1.20;
}

h1, h2, h3, h4, h5, p, ol, ul, table {
	margin: 0 0 1.00em 0;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, p:last-child, ol:last-child, ul:last-child, table:last-child {
	margin-bottom: 0;
}

a {
	color: var(--main);
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}
a:hover {
	color: var(--main_dark);
	text-decoration: underline;
}

.dark { color: var(--dark); }
.black { color: var(--black); }
.blue { color: var(--blue); }
.red { color: var(--red); }
.green { color: var(--green); }
.white { color: var(--white); }
.grey { color: var(--grey); }

.link,
.link_to {
	color: inherit;
	text-decoration: underline;
	transition: all 0.15s ease-in-out;
}
.link:hover,
.link_to:hover {
	cursor: pointer;
	color: #00699d;
	text-decoration: underline;
}

.uppercase { text-transform: uppercase; }
.no_uppercase { text-transform: none; }

strong { font-weight: bold; }
em { font-style: italic; }

.block { display: block; }
.inline-block { display: inline-block; }

.divider {
	margin: 4.00em auto 4.00em auto;
	height: 1px;
	background: rgba(0, 0, 0, 0.1);
}
.divider:first-child { margin-top: 0; }
.divider:last-child { margin-bottom: 0; }

.icon {
	display: block;
}

.icon svg {
	display: block;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
}
.icon svg[data-icon="shopping-basket"],
.icon svg[data-icon="lightbulb-on"] {
	width: 1.5em;
	height: 1.25em;
}

.no_margin { margin: 0 !important; }
.no_padding { padding: 0 !important; }

.spacer { height: 1.50em; }
.spacer_5 { height: 5px; }
.spacer_10 { height: 10px; }
.spacer_15 { height: 15px; }
.spacer_20 { height: 20px; }
.spacer_25 { height: 25px; }
.spacer_30 { height: 30px; }
.spacer_35 { height: 35px; }
.spacer_40 { height: 40px; }

.spacer_0-25 { height: 0.25em; }
.spacer_0-5 { height: 0.50em; }
.spacer_0-50 { height: 0.50em; }
.spacer_0-75 { height: 0.75em; }
.spacer_1 { height: 1.00em; }
.spacer_1-0 { height: 1.00em; }
.spacer_1-00 { height: 1.00em; }
.spacer_1-25 { height: 1.25em; }
.spacer_1-5 { height: 1.50em; }
.spacer_1-50 { height: 1.50em; }
.spacer_1-75 { height: 1.75em; }
.spacer_2 { height: 2.00em; }
.spacer_2-0 { height: 2.00em; }
.spacer_2-00 { height: 2.00em; }
.spacer_2-25 { height: 2.25em; }
.spacer_2-5 { height: 2.50em; }
.spacer_2-50 { height: 2.50em; }
.spacer_2-75 { height: 2.75em; }
.spacer_3 { height: 3.00em; }
.spacer_3-0 { height: 3.00em; }
.spacer_3-00 { height: 3.00em; }

.styled_underline {
	position: relative;
	display: inline-block;
	text-decoration: none !important;
}
.styled_underline:before {
	content: '';
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	width: 0;
	height: 0.035em;
	background: currentColor;
	transition: var(--transition);
}
.styled_underline:hover:before {
	width: 100%;
}
.styled_underline_hint:after {
	content: '';
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 0.035em;
	background: currentColor;
	opacity: 0.35;
}

[data-tooltip] {
	position: relative;
}
[data-tooltip]:hover {
	cursor: help;
}
[data-tooltip]:hover .tooltip {
	display: block;
}

.buttons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 -0.50em 0 -0.50em; 
}
.buttons[data-layout="vertical"] {
	flex-direction: column;
}
.buttons[data-button-width="equal"] {
	display: inline-flex;
	align-items: stretch;
}
.buttons:last-child { margin-bottom: -1.00em; }
.buttons > * {
	margin: 0 0.50em 1.00em 0.50em;
}

.button {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 1.00em 2.00em;
	background: var(--main);
	color: var(--white);
	border-radius: var(--border_radius_small);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 500;
	transition: var(--transition);
	position: relative;
	top: 0;
	overflow: hidden;
}
.button.disabled {
	opacity: 0.50 !important;
	cursor: default !important;
}
.button.disabled:before {
	opacity: 0 !important;
}
.button:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--black);
	opacity: 0;
	z-index: 0;
	transition: var(--transition);
}
.button:hover {
	color: var(--white);
	background: var(--main);
	text-decoration: none;
	cursor: pointer;
}
.button:hover:before {
	opacity: 0.15;
}
.button span {
	position: relative;
	z-index: 1;
}
.button .icon {
	position: relative;
	z-index: 1;
	margin: 0 0.75em;
}
.button .icon[data-icon] {
	margin: 0 0.75em;
}
.button .icon:first-child { margin-left: 0; }
.button .icon:last-child { margin-right: 0; }

.button[data-color="teal"] { background: var(--teal); }
.button[data-color="red"] { background: var(--red); }
.button[data-color="dark"] { background: var(--dark); }
.button[data-color="white"] { background: var(--white); color: var(--dark); }
.button[data-color="white"]:hover { color: var(--black); }

.button[data-color="cryptocom"] { background: var(--cryptocom); }
.button[data-color="coinmarketcap"] { background: var(--coinmarketcap); }
.button[data-color="dextools"] { background: var(--dextools); }
.button[data-color="coingecko"] { background: var(--coingecko); }
.button[data-color="dexscreener"] { background: var(--dexscreener); }

.tooltip {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	padding: 0.50em 1.00em;
	margin: 0.75em 0 0 0;
	border-radius: var(--border_radius_small);
	color: var(--grey_light);
	background: var(--dark);
	transform: translate(-50%, 0);
	text-align: center;
	font-size: 0.85em;
	white-space: nowrap;
}
.tooltip[data-size="small"],
.tooltip[data-size="medium"],
.tooltip[data-size="large"] {
	white-space: normal;
}
.tooltip[data-size="small"] { width: 200px; }
.tooltip[data-size="medium"] { width: 300px; }
.tooltip[data-size="large"] { width: 400px; }

.tooltip:before {
	content: '';
	display: block;
	width: 0.50em;
	height: 0.50em;
	position: absolute;
	top: -0.25em;
	left: 0;
	right: 0;
	margin: auto;
	background: #333333;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
}

[data-text-align="left"] { text-align: left; }
[data-text-align="center"] { text-align: center; }
[data-text-align="right"] { text-align: right; }

[data-text-size="larger"] { font-size: 1.30em; }
[data-text-size="large"] { font-size: 1.15em; }
[data-text-size="small"] { font-size: 0.85em; }
[data-text-size="smaller"] { font-size: 0.70em; }

.container {
	max-width: 1320px;
	padding: 0 2.00em;
	margin: 0 auto 3.00em auto;
}
.container:last-child {
	margin-bottom: 0;
}

.text_wrapper {
	max-width: 860px;
	margin: 0 auto;
}

.grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -1.00em 0 -1.00em;
}
.grid:last-child { margin-bottom: -2.00em; }

.grid[data-cols="1"] .item_holder { flex: 0 0 100%; max-width: 100%; width: 100%; }
.grid[data-cols="2"] .item_holder { flex: 0 0 50%; max-width: 50%; width: 50%; }
.grid[data-cols="3"] .item_holder { flex: 0 0 33.333%; max-width: 33.333%; width: 33.333%; }
.grid[data-cols="4"] .item_holder { flex: 0 0 25%; max-width: 25%; width: 25%; }
.grid[data-cols="5"] .item_holder { flex: 0 0 20%; max-width: 20%; width: 20%; }

.item_holder {
	flex: 0 0 33.33%;
	max-width: 33.33%;
	width: 33.33%;
	padding: 0 1.00em;
	margin: 0 0 2.00em 0;
}

.item {
	display: block;
	border-radius: var(--border_radius_small);
	background: var(--white);
	margin: 0 0 2.00em 0;
}
.item:last-child { margin-bottom: 0; }
.item:hover .item_image {

}

.item_image {
	border-radius: 4px;
	overflow: hidden;
}

.item_image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.item_text {
	padding: 1.50em;
}

.box {
	border-radius: var(--border_radius_small);
	background: var(--white);
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 1.50em;
}

pre {
	width: 100%;
	padding: 1.00em;
    background: #e5e5e5;
    border: 1px solid #c5c5c5;
}
pre:empty {
	display: none;
}

section#top {
	padding: 3.00em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

section#main_content {
	padding: 6.00em 0;
}

.data_output {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 -0.50em;
}
.data_output iframe {
	flex: 0 0 calc(33.33% - 1.00em);
	margin: 0 0.50em 1.00em 0.50em;
	display: block;
	border: none;
	background: #eeeeee;
	border: 1px solid var(--black);
}
.data_output pre {
	margin: 0 0.50em;
}