/*
	VARIABLES
	---------------------------------------------------------------------
	[TODO]
*/



/*
	CONTAINERS
	---------------------------------------------------------------------
	Containers are used to set a max width of a component.

	[Functions]

	* All containers are centered by default
	* Centering can be turned off with "no-center" class
	* Height stretching can be turned off with "fit-content" class

	[Don't do's]

	* Don't add extra classes
	* Don't add any padding or margins to the component

*/

.container--content { max-width: 640px; }


/*
	GRID
	---------------------------------------------------------------------
	Grid aligns children with grid-cell class into a grid

	[Functions]
	* grid-cell does not stretch or shrink
	* Size is determined by applying one of the size modifiers
	
	[Shouldn't do's]
	* Avoid adding padding directly to grid-cell whenever possible

	[Don't do's]
	* Don't apply margins to grid-cell
*/

.grid.grid-spacing--1 { margin-top: -8px; margin-left: -8px; }
.grid.grid-spacing--1 > [class^='grid-cell'] { padding-top: 8px; padding-left: 8px; }

.grid.grid-spacing--2 { margin-top: -16px; margin-left: -16px; }
.grid.grid-spacing--2 > [class^='grid-cell'] { padding-top: 16px; padding-left: 16px; }

.grid.grid-spacing--3 { margin-top: -24px; margin-left: -24px; }
.grid.grid-spacing--3 > [class^='grid-cell'] { padding-top: 24px; padding-left: 24px; }

.grid.grid-spacing--4 { margin-top: -32px; margin-left: -32px; }
.grid.grid-spacing--4 > [class^='grid-cell'] { padding-top: 32px; padding-left: 32px; }



/*
								[[MODIFIERS]]
	=====================================================================
*/

/* Padding modifiers */
.padding-0--all { padding: 0px !important; }
.padding-0--vertical { padding-top: 0px !important; padding-bottom: 0px !important; }
.padding-0--horizontal { padding-left: 0px !important; padding-right: 0px !important; }
.padding-0--top { padding-top: 0px !important; }
.padding-0--bottom { padding-bottom: 0px !important; }
.padding-0--left { padding-left: 0px !important; }
.padding-0--right { padding-right: 0px !important; }

.padding-1--all { padding: 8px; }
.padding-1--vertical { padding-top: 8px; padding-bottom: 8px; }
.padding-1--horizontal { padding-left: 8px; padding-right: 8px; }
.padding-1--top { padding-top: 8px; }
.padding-1--bottom { padding-bottom: 8px; }
.padding-1--left { padding-left: 8px; }
.padding-1--right { padding-right: 8px; }

.padding-2--all { padding: 16px; }
.padding-2--vertical { padding-top: 16px; padding-bottom: 16px; }
.padding-2--horizontal { padding-left: 16px; padding-right: 16px; }
.padding-2--top { padding-top: 16px; }
.padding-2--bottom { padding-bottom: 16px; }
.padding-2--left { padding-left: 16px; }
.padding-2--right { padding-right: 16px; }

.padding-3--all { padding: 24px; }
.padding-3--vertical { padding-top: 24px; padding-bottom: 24px; }
.padding-3--horizontal { padding-left: 24px; padding-right: 24px; }
.padding-3--top { padding-top: 24px; }
.padding-3--bottom { padding-bottom: 24px; }
.padding-3--left { padding-left: 24px; }
.padding-3--right { padding-right: 24px; }

.padding-4--all { padding: 32px; }
.padding-4--vertical { padding-top: 32px; padding-bottom: 32px; }
.padding-4--horizontal { padding-left: 32px; padding-right: 32px; }
.padding-4--top { padding-top: 32px; }
.padding-4--bottom { padding-bottom: 32px; }
.padding-4--left { padding-left: 32px; }
.padding-4--right { padding-right: 32px; }

/* Margin modifiers */
.margin-0--all { margin: 0px; }
.margin-0--vertical { margin-top: 0px; margin-bottom: 0px; }
.margin-0--horizontal { margin-left: 0px; margin-right: 0px; }
.margin-0--top { margin-top: 0px; }
.margin-0--bottom { margin-bottom: 0px; }
.margin-0--left { margin-left: 0px; }
.margin-0--right { margin-right: 0px; }

.margin-1--all { margin: 8px; }
.margin-1--vertical { margin-top: 8px; margin-bottom: 8px; }
.margin-1--horizontal { margin-left: 8px; margin-right: 8px; }
.margin-1--top { margin-top: 8px; }
.margin-1--bottom { margin-bottom: 8px; }
.margin-1--left { margin-left: 8px; }
.margin-1--right { margin-right: 8px; }

.margin-2--all { margin: 16px; }
.margin-2--vertical { margin-top: 16px; margin-bottom: 16px; }
.margin-2--horizontal { margin-left: 16px; margin-right: 16px; }
.margin-2--top { margin-top: 16px; }
.margin-2--bottom { margin-bottom: 16px; }
.margin-2--left { margin-left: 16px; }
.margin-2--right { margin-right: 16px; }

.margin-3--all { margin: 24px; }
.margin-3--vertical { margin-top: 24px; margin-bottom: 24px; }
.margin-3--horizontal { margin-left: 24px; margin-right: 24px; }
.margin-3--top { margin-top: 24px; }
.margin-3--bottom { margin-bottom: 24px; }
.margin-3--left { margin-left: 24px; }
.margin-3--right { margin-right: 24px; }

.margin-4--all { margin: 32px; }
.margin-4--vertical { margin-top: 32px; margin-bottom: 32px; }
.margin-4--horizontal { margin-left: 32px; margin-right: 32px; }
.margin-4--top { margin-top: 32px; }
.margin-4--bottom { margin-bottom: 32px; }
.margin-4--left { margin-left: 32px; }
.margin-4--right { margin-right: 32px; }

.navigation {
	position: fixed;
	width: 100%;
	top: 0;
	box-shadow: 0px 0px 7px rgba(0,0,0,0.15);
	z-index: 20;
}

body.no-scroll {
	overflow: hidden;
}

.navigation-popup {
	position: fixed;
	z-index: 21;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow-y: scroll;
}

table.collapse { display: block; }
table.collapse tbody { display: block; }
table.collapse tr { display: block; }
table.collapse td { display: block; }
table.collapse tr:nth-child(2n) { background: rgba(0,0,0,0.075); }
table.collapse td:nth-child(1) { font-weight: bold; font-size: 1.1rem; }
table.collapse td:nth-child(2) { font-style: italic; }
table.collapse td:nth-child(3), table.collapse td:nth-child(4) { color: rgb(176,48,52); }

.mobile-ad { max-width: 100vw; max-width: calc(100vw - 32px); overflow: hidden; }

.mobile-ad iframe { display: block; margin: 0 auto; }

.overlay-banner-wrapper { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; right: 0; background: white; display: none; }

.overlay-banner-container { max-width: 640px; width: 100%; height: 100%; padding: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; }

.overlay-banner-close { color: rgb(176,48,52); font-weight: bold; font-size: 1.5rem; }
.overlay-banner-close span:after { content: "»"; padding-left: 3px; }

.overlay-banner-header { text-align: center; padding-top: 20px; order: 2; }


.overlay-banner-content { padding-top: 10px; padding-left: 10px; padding-right: 10px; order: 1; }
.overlay-banner-content a {}

.overlay-banner-content img { width: 100%; height: auto !important; }

.article {}
.article--mobile {}
/*.article--mobile iframe { display: block; margin: 0 auto; width: 320px !important; height: 180px !important; }*/

.article-discussion-link { color: rgb(50,50,50) !important; }
.article-discussion-link:before { font-family: "fontello"; content: "\e80e"; color: rgb(220,220,220); padding-right: 10px; }