/*----------------------------------------------*\
    GLOBAL
	======

	@package theorder

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package theorder

\*----------------------------------------------*/
/*
 *
 * / Variables
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes (Minor third) */
/* Max-widths */
/* is used for calculation for extend width. Each side is extended by x ems */
/*
 *
 * ANCHOR 1./ Max Widths
------------------------------------------------*/
.max-width-narrow {
  width: 100%;
  max-width: var(--max-width-narrow);
  margin-left: auto;
  margin-right: auto; }

.max-width-text {
  width: 100%;
  max-width: var(--max-width-text);
  margin-left: auto;
  margin-right: auto; }

.max-width-wide {
  width: 100%;
  max-width: var(--max-width-wide);
  margin-left: auto;
  margin-right: auto; }

.max-width-span {
  width: 100%;
  max-width: none; }

@media screen and (min-width: 90rem) {
  .max-width-extend {
    width: calc(100% + ( var(--size-900) * ( 2 * 2 ) ) );
    margin-left: calc( var(--size-900) * ( -1 * 2 ) );
    max-width: none;
    position: relative;
    /* show above lines */ } }

/*
 *
 * ANCHOR 2./ Global
------------------------------------------------*/
body {
  font-family: var(--font-serif);
  background-color: var(--color-bg);
  background: url(../../images/bg-tile.jpg);
  background-size: 600px;
  /* smoother texture */
  color: var(--color-text); }

[v-cloak] {
  /* for vue */
  display: none; }

/* ARVE overwrite */
#html .arve {
  margin-bottom: 0 !important; }