/*! normalize.css v8.0.0 */
button,
hr,
input {
    overflow: visible
}

html {
    -webkit-text-size-adjust: 100%
}

html,
textarea {
    overflow: auto
}

.c,
body,
body>*,
div.button__thema,
sub,
sup {
    position: relative
}

#cta,
body:not(.themas):not(.thema):not(.overons):not(.nieuws) #main {
    background-image: url('../img/tree.svg');
    background-repeat: no-repeat
}

#cta,
.thema__header {
    background-repeat: no-repeat
}

.button,
a {
    text-decoration: none
}

.button>div,
progress,
sub,
sup {
    vertical-align: baseline
}

.button .icon,
.contact__quick .icon,
.header__right a span {
    vertical-align: middle
}

.button,
.ellipsis {
    white-space: nowrap
}

#toast,
.card__image,
.ellipsis {
    overflow: hidden
}

html {
    line-height: 1.15
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent;
    color: #9b4dca;
    outline: 0
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: ButtonText dotted 1px
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

.overlay-box,
body,
button,
input {
    -webkit-font-smoothing: antialiased
}

.article-title,
.icon svg,
article,
details,
input[type=checkbox]:checked+label:after,
input[type=radio]:checked+label:after {
    display: block
}

summary {
    display: list-item
}

.button__thema:not(.-opened) .themes.-in-navbar,
.footerlogo:nth-child(n+4),
[hidden],
template {
    display: none
}

*,
:after,
:before {
    box-sizing: border-box
}

a:hover {
    color: #606c76
}

.visible-print-block,
.visible-print-inline,
.visible-print-inline-block,
[hidden] {
    display: none !important
}

#header,
.c {
    display: block
}

.invisible {
    visibility: hidden
}

address {
    font-style: normal;
    line-height: inherit
}

hr {
    box-sizing: content-box;
    border: 0;
    border-top: .1rem solid #f4f5f6;
    margin-bottom: 3.5rem;
    margin-top: 3rem;
    box-sizing: content-box;
    height: 0
}

.card,
.intro-image,
.intro-text {
    border-radius: .8rem
}

.breadcrumb:after,
.clearfix:after,
.clearfix:before,
.row:after,
.row:before {
    content: "";
    display: table
}

.breadcrumb:after,
.clearfix:after,
.row:after {
    clear: both
}

.disabled {
    pointer-events: none;
    opacity: .5
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    height: 100%;
    overflow-x: hidden;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
    font-size: 62.5%;
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-height: 100%;
    background-color: #fff;
    color: #212121;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1.8em;
    line-height: 2.8rem
}

.button,
.font-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Capriola, sans-serif
}

body>* {
    z-index: 2
}

@keyframes movebg {
    to {
        transform: translateY(-10rem)
    }
}

@media (min-width:59rem) {

    body.home::after,
    body.overons::after,
    body.thema::after,
    body.thema::before {
        content: '';
        position: absolute;
        pointer-events: none;
        z-index: 1;
        background-image: url('../img/bg_shape.svg');
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: 0 0;
        animation: 20s linear 2s infinite alternate movebg;
        will-change: transform
    }

    body.home::after,
    body.overons::after,
    body.thema::after {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    body.thema::after {
        top: -5vw;
        left: 60%;
        width: 80%;
        height: 80%
    }

    body:not(.home) #header {
        background-color: #fff
    }

    body.thema::before {
        top: 25%;
        left: -2%;
        width: 104%;
        height: 75vh
    }
}

body:not(.themas):not(.thema):not(.overons):not(.nieuws) #main {
    background-size: 29rem auto;
    background-position: 104% 102%;
    padding-bottom: 8rem
}

body[class="404"] #main {
    background-image: url('../img/404 tree_bg.svg');
    background-position: 98% 100%;
    background-size: 30% auto
}

@media (max-width:50rem) {
    #main {
        background-size: 12rem;
        background-position: 100% 100.5%
    }
}

.c {
    width: 94%;
    max-width: 140rem;
    margin: 0 auto
}

.icon {
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem
}

.icon.-small {
    width: 1.2rem;
    height: 1.2rem
}

#header {
    border-bottom: .2rem solid #eaeaea;
    padding: 1.8rem 0 2rem;
    z-index: 10
}

.home #header {
    border-bottom: none
}

#header .logo {
    margin-right: 2.4rem;
    flex: 0 1 70%;
    max-width: 29rem
}

.header__right,
.text-right {
    text-align: right
}

.header__right li:not(:last-child) {
    display: inline-block;
    margin-left: 2.4rem
}

.header__right li:not(:last-child) a {
    padding: .4rem 0
}

.header__right a:last-child {
    display: block;
    margin: 0
}

.button__thema ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 29rem;
    z-index: 10
}

.button__thema.-opened>a>.icon {
    transform: rotate(180deg)
}

#footer {
    position: relative;
    padding: 4rem 0;
    line-height: 4rem
}

#footer .c {
    padding: 0 1.6rem
}

#footer .c>* {
    flex: 0 1 20%
}

#footer .c>:last-child,
.card__text,
.flex .-flex-grow {
    flex-grow: 1
}

#footer h3 {
    margin-bottom: 3.2rem
}

#footer a {
    color: #fff;
    display: block
}

#footer ul a:not(:hover) {
    opacity: .8
}

#footer .footerlogo {
    display: inline-block;
    width: 8rem;
    height: 8rem;
    margin: 0 .4rem .4rem 0
}

#footer a.footerlogo:hover {
    opacity: .7
}

.-fullwidth,
.button_block,
.footerlogo img {
    display: block;
    width: 100%
}

.siteBy {
    fill: #fafafa;
    width: 4rem;
    float: right
}

.siteBy:hover .siteby_2 {
    fill: #E74C3C
}

@media (max-width:68rem) {
    #footer .c>* {
        flex-basis: 30%
    }

    #footer .c>:last-child {
        flex-basis: 10%
    }
}

.intro {
    display: grid;
    grid-template-columns: 1fr 30%;
    grid-template-rows: auto;
    grid-template-areas: "image menu";
    grid-gap: 2rem
}

.intro-image {
    object-fit: cover;
    object-position: left center;
    aspect-ratio: 16/8;
    display: block;
    grid-area: image;
    width: 100%;
    height: auto
}

.intro-text {
    grid-area: image;
    align-self: end;
    justify-self: stretch;
    padding: 1.4rem 1.8rem;
    border: .2rem solid #eaeaea
}

.intro-text .button,
.intro-text h1 {
    color: currentColor
}

.intro-text h1 {
    padding-right: 1.4rem
}

.intro-text .intro__text {
    max-width: 65ch
}

.intro-menu {
    grid-area: menu
}

@media (min-width:69rem) {
    .intro-text {
        background-color: rgba(20, 141, 135, .85);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        color: #fff;
        padding: 1.8rem 2.4rem;
        border: none
    }
}

@media (max-width:59rem) and (min-width:45rem) {
    .intro-text {
        background-color: rgba(20, 141, 135, .85);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        color: #fff;
        padding: 1.8rem 2.4rem;
        border: none
    }

    .intro {
        margin-bottom: -2.4rem
    }
}

@media (max-width:59rem) and (min-width:34rem) {
    .card.themes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center
    }

    .card.themes .thema__contact {
        border-top: none
    }
}

@media (max-width:45rem) {
    #footer {
        padding-bottom: 2rem
    }

    #footer .c {
        flex-wrap: wrap
    }

    #footer .c>* {
        flex-basis: 50%;
        margin-bottom: 2.4rem
    }

    #footer .c>:nth-last-child(2) {
        flex-basis: 75%;
        margin-bottom: 0
    }

    #footer .c>:last-child {
        flex-basis: 25%;
        margin-bottom: 0
    }

    .intro-text {
        grid-area: about;
        align-self: auto
    }

    #header {
        padding: 1.4rem 0 1rem
    }

    #header .c {
        flex-wrap: wrap;
        justify-content: space-between
    }

    .home #header .c {
        justify-content: center
    }

    .header__right {
        margin-top: 1.2rem;
        text-align: center
    }

    .header__right li:not(:last-child) {
        margin-left: 1.6rem
    }

    .header__right li:first-child {
        margin-left: 0
    }

    .button__thema ul {
        left: auto;
        right: 0
    }

    #header .logo {
        max-width: 22rem
    }
}

@media (max-width:35rem) {
    #header .logo {
        max-width: 17rem
    }
}

.card {
    border: .2rem solid #eaeaea;
    background-color: #fff
}

.card.-connected:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.card.-connected+.card.-connected {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0
}

.card.hover-bg-accent:hover,
.card.hover-bg-accent:hover h2,
.color-white,
.hover-color-white:hover {
    color: #fff
}

.card__title {
    margin-bottom: 1.6rem
}

.card__list li {
    padding: .6rem 0;
    position: relative
}

@media (min-width:45rem) {
    .card__list li a:hover article.card {
        display: block
    }
}

.card__list li a article.card {
    display: none;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    border-color: #1eaca4;
    z-index: 10;
    color: #737686;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

.link__major,
.thema__contact {
    color: #737686;
    padding: .8rem 2.4rem 1.2rem;
    position: relative
}

.thema__contact {
    border-top: .2rem solid #eaeaea;
    line-height: 4.8rem;
    padding-top: 0;
    padding-bottom: 0
}

.link__major.bg-accent-lighter {
    color: #736784
}

.link__major:hover .icon {
    transform: translateX(.8rem)
}

.card__image {
    border-radius: .8rem;
    position: relative
}

.folders #articles .card .card__image {
    background-size: contain;
    margin-top: 10px;
    padding-bottom: 96%
}

.card__image .button {
    position: absolute;
    bottom: 1.6rem;
    left: 2.4rem;
    z-index: 3
}

.card__media {
    cursor: pointer
}

.card__media::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: inherit;
    z-index: 1;
    transition: transform .2s
}

.card__media:hover::after {
    transform: scale(1.1)
}

.card__content {
    padding: 1.6rem 2.4rem;
    display: flex;
    flex-direction: column
}

.card__bottom {
    padding-top: 1.6rem
}

.layout__sidebar>h2:first-child {
    margin: 0 0 .8rem 2.4rem
}

#articles .card {
    flex: 0 1 100%;
    margin-bottom: 2.4rem
}

#articles .card .card__image,
.card__list a .card__image {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover
}

#team #articles .card .card__image {
    aspect-ratio: 135/180;
}

a.card:hover {
    border-color: #1eaca4;
    box-shadow: 0 .2rem 1.6rem rgba(0, 0, 0, .1)
}

.layout__sidebar {
    padding-top: 2.4rem
}

.layout__sidebar--left {
    flex: 0 1 60%
}

.home .layout__sidebar--left {
    flex-basis: 68.5%
}

.layout__sidebar--sidebar {
    flex: 0 1 30%;
    margin-bottom: 2.4rem
}

.sidebar__group+.sidebar__group {
    margin-top: 2.4rem
}

@media (max-width:68rem) {
    .layout__sidebar--left {
        flex-basis: 63%
    }

    .home .layout__sidebar--left {
        flex-basis: 68%
    }

    #articles .card {
        margin-bottom: 1.6rem
    }

    .card__content,
    .link__major,
    .thema__contact {
        padding-left: 1.6rem;
        padding-right: 1.6rem
    }
}

@media (max-width:59rem) {
    .c.intro {
        width: 100%;
        padding: 0 3%;
        background-image: url('../img/bg_shape.svg');
        background-size: 200% auto;
        background-repeat: no-repeat;
        background-position: top left;
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto;
        grid-template-areas: "image" "menu" "about"
    }

    .home .layout__sidebar--left,
    .home .layout__sidebar>h2:first-child {
        order: 2
    }

    .home .layout__sidebar--sidebar {
        order: 1
    }

    .home .layout__sidebar--left,
    .layout__sidebar--left {
        flex-basis: 100%;
        margin-bottom: 4rem
    }

    .layout__sidebar--sidebar {
        flex-basis: 100%
    }

    .layout__sidebar {
        flex-wrap: wrap
    }
}

@media (min-width:68rem) {
    #articles.-twocolumns .card {
        flex-basis: 48%
    }

    #articles.-threecolumns .card {
        flex-basis: 32%
    }

    #articles.-threecolumns::after {
        flex: auto;
        content: ''
    }

    #articles.-threecolumns .card:last-child:nth-child(3n+2),
    #articles.-threecolumns .card:last-child:nth-child(3n+3),
    #articles.-threecolumns .card:nth-last-child(2):nth-child(3n+2) {
        margin-left: 2%
    }
}

.thema__header {
    margin-bottom: 6rem;
    background-image: url('../img/tree_white.svg');
    background-size: auto 150%;
    background-position: 130% 50%
}

.thema__header-text {
    flex: 0 1 40%;
    padding: 8rem 0 6rem
}

.thema__header-text h2 {
    margin-bottom: .8rem
}

#cta .button,
.kennisbank__header-text h1 {
    margin-bottom: .4rem
}

.thema__header-text div:last-child {
    margin-top: 1.6rem
}

.thema__header-img {
    flex: 0 1 30%;
    align-self: center
}

.thema__header-img div {
    width: 100%;
    height: 0;
    padding-top: 100%;
    border-radius: .8rem;
    border: .2rem solid #eaeaea;
    background-color: #fff
}

@media (min-width:75rem) {
    .thema__header-img {
        margin-bottom: -5rem;
        align-self: flex-end
    }

    .thema__header {
        margin-bottom: 9rem;
        background-size: auto 200%;
        background-position: 120% 50%
    }
}

@media (max-width:68rem) {
    .thema__header-text {
        flex-basis: 50%
    }
}

@media (max-width:60rem) {
    .thema__header {
        background-size: auto 125%
    }
}

#cta {
    background-size: 12rem auto;
    background-position: 50% 120%;
    padding: 12rem 0 20rem
}

#cta .c {
    width: 80%;
    max-width: 40rem
}

.kennisbank__header {
    padding: 8rem 0 4rem
}

.kennisbank__header-text {
    width: 50%
}

@media (min-width:45.1rem) {
    #articles .card {
        flex-basis: 49%
    }

    #articles.-twocolumns .card:nth-child(3n+3) {
        flex-basis: 100%;
        flex-wrap: nowrap
    }

    #articles.-twocolumns .card:nth-child(3n+3) .card__image {
        flex: 0 0 40%;
        min-height: 40rem
    }

    #articles.-twocolumns .card:nth-child(3n+3) .card__content {
        padding-top: 2.4rem;
        padding-left: 3.2rem
    }

    .kennisbank__text {
        padding-right: 10rem
    }

    .kennisbank__text .article-img:not(.article-img_left),
    .kennisbank__text .article-video {
        margin-right: -10rem
    }

    .kennisbank__text .article-img:not(.article-img_right):not(.article-img_left),
    .kennisbank__text .article-video {
        width: calc(100% + 10rem)
    }
}

.overons .kennisbank__header {
    padding-top: 4rem
}

.overons .kennisbank__header #sidebar .card {
    height: 0;
    padding-top: 60%;
    position: relative
}

.overons .kennisbank__header #sidebar .card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#team {
    margin-top: 12rem
}

.contact__details {
    padding: 6rem 0
}

.contact__quick li {
    flex: 0 1 32%;
    margin-bottom: 3.2rem
}

.contact__quick li>a,
.contact__quick li>div:first-child {
    margin-bottom: 1.6rem;
    display: block
}

.contact__quick .icon {
    display: inline-block;
    width: 3.2rem;
    height: 3.2rem;
    margin-right: .8rem
}

#toast,
.overlay-box,
fieldset,
label {
    display: block
}

@media (max-width:58rem) {
    .kennisbank__header-text {
        width: 75%
    }

    .contact__quick li {
        flex-basis: 48%
    }
}

@media (max-width:45rem) {
    .thema__header-text {
        flex-basis: 100%;
        padding: 6rem 0 4rem
    }

    .thema__header-img {
        margin-bottom: -4rem;
        flex-basis: 70%;
        max-width: 30rem
    }

    .thema__header {
        background-size: auto 40rem;
        background-position: 120% 150%;
        margin-bottom: 9rem
    }

    .kennisbank__header-text {
        width: 100%
    }

    .contact__quick li {
        flex-basis: 100%
    }
}

.belmeterug {
    width: 95%;
    max-width: 40rem;
    margin: 0 auto;
    position: relative
}

.overlay__close {
    position: absolute;
    top: 1.2rem;
    right: 1.6rem;
    z-index: 10;
    width: 3.2rem;
    height: 3.2rem;
    color: #737686;
    transition: color .3s
}

.color-danger,
.color_error,
.hover-color-danger:hover,
.notice_error .fa,
.notice_error .micon,
.overlay__close:hover,
input[type=checkbox].input_error+label,
input[type=radio].input_error+label {
    color: #ef5350
}

#overlay,
#overlayContainer,
.overlay-arrow {
    position: fixed;
    cursor: pointer;
    opacity: 0;
    visibility: hidden
}

#overlay.ov-show,
#overlayContainer.ov-show,
.overlay-arrow.ov-show {
    opacity: 1;
    visibility: visible
}

#overlay {
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7)
}

#overlayContainer {
    z-index: 101;
    top: 5%;
    left: 10%;
    width: 80%;
    height: 90%
}

.overlay-arrow {
    z-index: 105;
    top: 50%;
    left: 0;
    padding: 3rem 3rem 3rem 1.5rem;
    color: #fff;
    font-size: 3.5rem;
    margin-top: -5.7rem
}

.overlay-arrow.oa-next {
    right: 0;
    left: auto;
    padding: 3rem 1.5rem 3rem 3rem
}

.opacityhover:hover,
.overlay-arrow:hover {
    opacity: .7;
    cursor: pointer
}

.overlay-img {
    position: fixed;
    z-index: 104;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    cursor: pointer;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .8)
}

.overlay-box {
    width: 100%;
    max-width: 40rem;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 102;
    background: #fff;
    padding: 4rem 4rem 5rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .4);
    text-align: center;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translate(-50%, 100vh);
    -ms-transform: translate(-50%, 100vh);
    transform: translate(-50%, 100vh);
    opacity: 0
}

.button,
.label-inline label,
fieldset.inline,
label.label-inline {
    display: inline-block
}

.button,
fieldset {
    position: relative
}

.overlay-box.show {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

#toast {
    color: #f1f1f1;
    opacity: 0;
    padding: 1rem 1.5rem .8rem;
    z-index: 500;
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    box-shadow: 0 .125rem .3125rem 0 rgba(0, 0, 0, .258824);
    border-radius: .5rem;
    max-width: 92%
}

#toast:not(.bg_error) {
    background: #323232
}

.mobile #toast {
    max-width: 100%;
    left: 0;
    right: 0;
    border-radius: 0;
    box-shadow: none
}

.toastBut {
    color: #eeff41;
    padding-left: 1.5rem;
    text-transform: uppercase
}

.showToast #toast {
    opacity: 1
}

label {
    margin-bottom: .3rem;
    color: #737686
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0
}

fieldset.inline {
    margin-right: 1.5rem
}

.label-float label {
    width: 30%;
    position: absolute;
    left: 0;
    top: .3rem
}

.label-float .input,
.label-float textarea {
    width: 70%;
    margin-left: 30%
}

div.datedropper.pep {
    --dd-color1: #1eaca4;
    --dd-color2: #fff;
    --dd-color3: #454c54;
    --dd-color4: #eee;
    --dd-radius: 8px;
    --dd-width: 180px;
    --dd-shadow: 0 0 32px 0px rgba(0, 0, 0, 0.1)
}

.input,
.select2-container {
    background-color: transparent;
    border: .1rem solid #d1d1d1;
    border-radius: .4rem;
    box-shadow: none;
    height: 4rem;
    padding: 0 1.2rem;
    width: 100%;
    margin-bottom: .8rem
}

.input:not(select) {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto
}

.input:focus,
.select2-container:focus {
    border: .1rem solid #9b4dca;
    outline: 0
}

.input:read-only {
    background-color: #eee
}

textarea,
textarea.input {
    padding-bottom: .8rem;
    padding-top: .8rem;
    min-height: 12.5rem
}

input[type=checkbox],
input[type=radio] {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    opacity: 0
}

input[type=checkbox]:disabled,
input[type=radio]:disabled {
    cursor: not-allowed
}

.input-checkbox,
.input-radio {
    padding-left: 2.4rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.input-checkbox:after,
.input-checkbox:before,
.input-radio:after,
.input-radio:before {
    content: '';
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    position: absolute;
    top: .4rem
}

.input-checkbox:before,
.input-radio:before {
    left: 0;
    border: .1rem solid #ccc;
    box-shadow: inset .1rem .1rem rgba(0, 0, 0, .03);
    border-radius: 50%
}

.input-checkbox:after,
.input-radio:after {
    left: .25rem;
    display: none;
    content: '\f00c';
    font-family: FontAwesome;
    color: #fff;
    line-height: 1.65rem;
    font-size: 1.1rem
}

.input-checkbox:before {
    border-radius: .3rem
}

input[type=checkbox]:checked+label:before,
input[type=radio]:checked+label:before {
    background-color: #5f8ee4;
    border: none;
    box-shadow: none
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.button {
    border: .2rem solid #eaeaea;
    background-color: #fff;
    border-radius: .8rem;
    cursor: pointer;
    font-size: 1.6rem;
    height: 4.8rem;
    line-height: 4.4rem;
    padding: 0 1.8rem;
    text-align: center;
    vertical-align: top
}

.button.color-white {
    border-color: rgba(255, 255, 255, .6)
}

.button.color-accent {
    border-color: rgba(30, 172, 164, .6)
}

.button>div {
    display: inline
}

.button .icon {
    margin-left: .2rem;
    margin-right: -.4rem
}

.button.-outline {
    background-color: transparent
}

.button.-small {
    height: 3.6rem;
    line-height: 3.2rem;
    padding: 0 1.3rem;
    font-size: 1.4rem
}

.button_large {
    height: 5rem;
    line-height: 5rem;
    padding: 0 4rem;
    font-size: 1.8rem
}

.button:focus,
.button:hover {
    background-color: #454c54;
    border-color: #454c54;
    color: #fff;
    outline: 0
}

.button_loading {
    cursor: wait;
    color: transparent !important
}

.button_loading:before {
    margin: -.9rem 0 0 -.9rem;
    width: 1.6rem;
    height: 1.6rem;
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    border-radius: 50%;
    background-clip: padding-box;
    border: .2rem solid rgba(30, 172, 164, .6);
    border-top-color: #fff;
    -webkit-animation: 750ms linear infinite rotate;
    animation: 750ms linear infinite rotate
}

.button_clear.button_loading:before,
.button_outline.button_loading:before {
    border-color: rgba(0, 0, 0, .25);
    border-top-color: #212121
}

.notice {
    border-radius: .4rem;
    border: .1rem solid #fff;
    padding: .4rem 1.2rem;
    margin-bottom: .4rem;
    font-size: 1.6rem
}

.article-media_inline,
.article-video {
    height: 0;
    padding-bottom: 56.25%
}

.bg-danger,
.bg_error,
.hover-bg-danger:hover {
    background-color: #ef5350
}

.input_error:not(:focus),
.notice_error,
.select2-container.input_error:not(:focus) {
    border-color: #ef5350;
    background-color: #ffcdd2
}

.bg-warning,
.bg_warning,
.hover-bg-warning:hover {
    background-color: #ffa726
}

.color-warning,
.color_warning,
.hover-color-warning:hover,
.notice_warning .fa,
.notice_warning .micon {
    color: #ffa726
}

.input_warning,
.notice_warning {
    border-color: #ffa726;
    background-color: #ffe0b2
}

.bg-info,
.bg_info,
.hover-bg-info:hover {
    background-color: #42a5f5
}

.color-info,
.color_info,
.hover-color-info:hover,
.notice_info .fa,
.notice_info .micon {
    color: #42a5f5
}

.input_info,
.notice_info {
    border-color: #42a5f5;
    background-color: #bbdefb
}

.bg-correct,
.bg_correct,
.hover-bg-correct:hover {
    background-color: #66bb6a
}

.color-correct,
.color_correct,
.hover-color-correct:hover,
.notice_correct .fa,
.notice_correct .micon {
    color: #66bb6a
}

.input_correct,
.notice_correct {
    border-color: #66bb6a;
    background-color: #c8e5c9
}

.article-embed,
.article-img,
.article-media_inline,
.article-video {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.5rem;
    border-radius: .8rem
}

.article-img_responsive {
    height: 0
}

.article-video {
    background-color: #ccc;
    cursor: pointer
}

.article-video .button {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 5
}

.padding-0,
ol,
ul {
    padding: 0
}

.article-media_inline.article-media_audio {
    height: 5.5rem;
    padding: 0
}

.article-media_inline iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.article-text {
    margin-bottom: 1.5rem
}

.article-img_left,
.ctype_2 .article-header .article-img {
    float: left;
    width: 48%;
    margin-right: 2rem
}

.article-img_right,
.ctype_3 .article-header .article-img {
    float: right;
    width: 48%;
    margin-left: 2rem
}

.article-share {
    margin-top: 3.2rem
}

.margin-0,
ol,
ul {
    margin: 0
}

.article-share a {
    display: inline-block;
    height: 2.4rem;
    width: 2.4rem;
    color: #eaeaea
}

.article-share a:hover,
.color-accent,
.hover-color-accent:hover {
    color: #1eaca4
}

.article-share a svg,
svg {
    fill: currentColor
}

.fadeInDown {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

.rotate {
    -webkit-animation: 2s linear infinite rotating;
    animation: 2s linear infinite rotating
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -1.6rem, 0);
        transform: translate3d(0, -1.6rem, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -1.6rem, 0);
        transform: translate3d(0, -1.6rem, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    margin: 0;
    color: #454c54
}

.size-1,
h1 {
    font-size: 3rem;
    line-height: 3.7rem
}

.size-2,
h2 {
    font-size: 2.2rem;
    line-height: 2.8rem
}

.size-3,
h3 {
    font-size: 1.8rem;
    line-height: 2.8rem
}

.size-4,
h4 {
    font-size: 1.6rem;
    line-height: 2.1rem
}

.size-6 {
    font-size: 1.37rem
}

.lh-1 {
    line-height: 1
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-lowercase {
    text-transform: lowercase
}

.text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize
}

.weight-r {
    font-weight: 400
}

.weight-m {
    font-weight: 500
}

.weight-b {
    font-weight: 700
}

.weight-l {
    font-weight: 300
}

.ellipsis {
    text-overflow: ellipsis
}

.color-primary,
.hover-color-primary:hover {
    color: #454c54
}

.color-primary-light,
.hover-color-primary-light:hover {
    color: #737686
}

.color-primary-lighter,
.hover-color-primary-lighter:hover {
    color: #eaeaea
}

.color-accent-lighter,
.hover-color-accent-lighter:hover {
    color: #dcf2f1
}

.bg-white,
.hover-bg-white:hover {
    background-color: #fff
}

.bg-dark,
.hover-bg-dark:hover {
    background-color: #454c54
}

.bg-accent,
.hover-bg-accent:hover {
    background-color: #1eaca4
}

.bg-primary-lighter,
.hover-bg-primary-lighter:hover {
    background-color: #eaeaea
}

.bg-accent-lighter,
.hover-bg-accent-lighter:hover {
    background-color: #dcf2f1
}

.color-danger-light,
.hover-color-danger-light:hover {
    color: #ffcdd2
}

.color-warning-light,
.hover-color-warning-light:hover {
    color: #ffe0b2
}

.color-info-light,
.hover-color-info-light:hover {
    color: #bbdefb
}

.color-correct-light,
.hover-color-correct-light:hover {
    color: #c8e5c9
}

.bg-danger-light,
.hover-bg-danger-light:hover {
    background-color: #ffcdd2
}

.bg-warning-light,
.hover-bg-warning-light:hover {
    background-color: #ffe0b2
}

.bg-info-light,
.hover-bg-info-light:hover {
    background-color: #bbdefb
}

.bg-correct-light,
.hover-bg-correct-light:hover {
    background-color: #c8e5c9
}

.flex {
    display: flex
}

.flex.-wrap {
    flex-wrap: wrap
}

.flex.-align-center {
    align-items: center
}

.flex.-align-start {
    align-items: flex-start
}

.flex.-align-end {
    align-items: flex-end
}

.flex.-justify-center {
    justify-content: center
}

.flex.-justify-start {
    justify-content: flex-start
}

.flex.-justify-end {
    justify-content: flex-end
}

.flex.-space-between {
    justify-content: space-between
}

.flex.-space-around {
    justify-content: space-around
}

.flex .-flex-align-end {
    align-self: flex-end
}

.flex .-flex-shrink {
    flex-shrink: 1
}

.flex .-flex-stretch {
    flex: 0 0 100%
}

.bgcontain,
.bgcover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%
}

.bgcontain {
    background-size: contain
}

.lazyload,
.lazyloading,
.overlay-img {
    opacity: 0
}

.lazyloaded,
.overlay-img.show {
    opacity: 1;
    transition: opacity .3s
}

.lazyload[data-expand] {
    transform: translate(0, 4rem)
}

.lazyloaded[data-expand] {
    transform: translate(0, 0);
    transition: .5s
}

.margin-s {
    margin: .2rem
}

.margin-m {
    margin: .4rem
}

.margin-l {
    margin: .8rem
}

.margin-xl {
    margin: 1.2rem
}

.margin-xxl {
    margin: 2.4rem
}

.padding-s {
    padding: .2rem
}

.padding-m {
    padding: .4rem
}

.padding-l {
    padding: .8rem
}

.padding-xl {
    padding: 1.2rem
}

.padding-xxl {
    padding: 2.4rem
}

ol,
ul {
    list-style: none
}

.-bullets ol,
.-bullets ul,
ol.-bullets,
ul.-bullets {
    list-style: circle inside
}

.button,
.transition,
a {
    transition: .35s
}

.errorContainerInner {
    max-width: 38rem;
    width: 100%;
    margin: 8rem auto
}

.img__404 {
    border-bottom: .2rem solid #eaeaea;
    padding: 0 4rem;
    margin: 0 auto 4rem;
    max-width: 28rem;
    width: 100%
}

.img__404 img {
    display: block
}

.errorContainerInner ul {
    padding-left: 4rem;
    margin: 1em 0
}

.browserupgrade {
    margin: 0 0 .5em;
    background: #fcf8e3;
    color: #000;
    padding: .4em .8em
}

@media print {
    * {
        background: 0 0 !important;
        color: #000 !important;
        filter: none !important
    }

    *,
    ::after,
    ::before,
    ::first-letter,
    ::first-line {
        text-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important
    }

    a,
    a:visited {
        text-decoration: underline
    }

    thead {
        display: table-header-group
    }

    .hidden-print {
        display: none !important
    }

    .visible-print-block {
        display: block !important
    }

    .visible-print-inline {
        display: inline !important
    }

    .visible-print-inline-block {
        display: inline-block !important
    }

    img,
    tr {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    @page {
        margin: .5cm
    }

    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }

    h2,
    h3 {
        page-break-after: avoid
    }
}