/* /////////////////////////////////////////////// */
/* //////////////////// ICONS //////////////////// */
/* /////////////////////////////////////////////// */
::-moz-selection,
::selection {color: #000; background-color: #fff;}

:root {
  --corridor:               84.8333rem;
}

.icon                         {position: relative; display: inline-block; /*min-width: 1.6666rem; min-height: 1.6666rem;*/}
.icon::before,
.icon::after                  {mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center;}

/*.icon-before                  {padding-left: 1.6666rem}
.icon-after                   {padding-right: 1.6666rem}*/

.icon-after::after,
.icon-before::before          {position: absolute; top: 50%; content: ''; transform: translateY(-50%); background-size: 100% auto; width: 1.6666rem; height: 1.6666rem;}
.icon-above::before,
.icon-below::after            {position: absolute; left: 50% !important; content: ''; transform: translateX(-50%); background-size: 100% auto; width: 1.6666rem; height: 1.6666rem;}

.icon-before::before          {left: 0}
.icon-after::after            {right: 0}
.icon-above::before           {top: 0}
.icon-below::after            {bottom: 0}

.icon.icon-centered::before   {left: 50%; top: 50%; transform: translate(-50%, -50%);}
.icon.icon-hide-text          {display: block; text-indent: 100%; overflow: hidden; color: transparent;}
.icon.icon-hide-text::before  {}

.icon-black::before,
.icon-black::after {background-color: var(--black);}
.icon-white::before,
.icon-white::after {background-color: var(--white);}


/* /////////////////////////////////////////////// */
/* ////////////////////  TAGS  /////////////////// */
/* /////////////////////////////////////////////// */


.alert-info {background-color: var(--council)}
.alert-caution {background-color: var(--trim)}
.alert-warning {background-color: var(--general)}

/* /////////////////////////////////////////////// */
/* //////////////////// OTHER //////////////////// */
/* /////////////////////////////////////////////// */

* {box-sizing: border-box; outline: none;}
*:focus {/*outline: 10px solid var(--trim); box-shadow: 5px 5px 10px var(--trim);*/}
.focus-element {position: absolute; left: 0; top: 0; width: 0; height: 0; box-shadow: 0 0 10px rgb(242, 126, 53); box-sizing: content-box; padding: 10px; transform: translate(-10px, -10px); border-radius: 10px; transition: 0.5s all; display: none; z-index: 20000;}
html.reduce-motion .focus-element  {transition: 0s all;}
html.focus-active .focus-element {display: block;}

html {font-size: 18px;}
html.size-medium {font-size: 27px;}
html.size-large {font-size: 36px;}

html, body {min-height: 100vh;}

html {background-color: var(--white);}

body {padding: 0; margin: 0; color: #000; letter-spacing: 0; line-height: 1.33rem; max-width: 100%; font-size: 1rem;}

html {}
  body {}
  article {}
  section {}
    main p {}

p {margin: 0 0 1.666rem 0;}
p:last-child {margin-bottom: 0}

ul {margin: 0 0 1.666rem 0;}
  ul li {}

ol {margin: 0 0 1.666rem 0;}
  ol li {}

a {color: var(--black); text-decoration: underline; margin: 0}
a:hover,
a:focus {text-decoration: underline;}
a:active {text-decoration: underline;}
a:visited {color: var(--black)}

.button,
input[type="submit"],
button,
a.button {border: 0.0277rem solid var(--black); font-size: 0.8888rem; line-height: 1.1111rem; padding: 0.5555rem 1.7777rem; text-decoration: none; text-transform: uppercase; font-weight: 800; background-color: var(--white); color: var(--black); cursor: pointer; display: inline-block;}

.button:hover,
input[type="submit"]:hover,
button:hover {color: var(--white); background-color: var(--white)}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5,.h6 {margin-top: 0;}

h1, .h1               {font-size: 2rem; line-height: 2.3rem;}
h2, .h2               {font-size: 1.8rem; line-height: 2.1rem;}
h3, .h3               {font-size: 1.6rem; line-height: 1.9rem;}
h4, .h4               {font-size: 1.4rem; line-height: 1.7rem;}
h5, .h5               {font-size: 1.2rem; line-height: 1.5rem;}
h6, .h6               {font-size: 1rem; line-height: 1.3rem;}

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

.image {}
  .image img {display: block; height: auto; max-width: 100%; width: auto}

.hide-text {overflow: hidden; text-indent: 100%; line-height: 100%; color: transparent;}

html {width: 100%; overflow-x: hidden}

  html.js form select {display: none;}

  a.select-field {text-decoration: none !important;}
  .select-field * {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--black)}

  .select-field {position: relative; font-size: 0.8888rem; background: transparent; cursor: pointer; display: block; text-decoration: none; color: var(--black)}
  .select-field::before,
  .expand-form::before {width: 0.6933rem; height: 0.235rem; background-color: var(--caption); mask-image: var(--iconselectarrow); -webkit-mask-image: var(--iconselectarrow); content: ''; position: absolute; right: 0.5555rem; top: 50%; transform: translateY(-50%); z-index: -1; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center;}
  
  .select-field.active {}
  .select-field.active::before {transform: translateY(-50%) rotate(180deg);}
    .select-field .select-inner {}
      .select-field .selected {padding: 0.5rem 0.5555rem; border: 0.02777rem solid var(--border);}

      .select-field .options {display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--white); z-index: 1000; border: 0.02777rem solid var(--border); border-top: 0}
      .select-field.active .options {display: block;}
        .select-field .options .option {color: var(--black); padding: 0.2755rem 0.5555rem; display: block; text-decoration: none !important; color: var(--black)}
        .select-field .options .option:hover,
        html.focus-active .select-field .options .option:focus-within {background-color: var(--trim); color: var(--white)}
        .select-field .options .option.active {color: var(--trim); background-color: var(--white)}


pre {max-width: 100%; white-space: pre-wrap;}


.readmore .expand,
.readmore .collapse {display: none;}

.collapsed .readmore .expand {display: inline;}
.expanded .readmore .collapse {display: inline;}