/* FONTS */
@font-face {
    font-family: default-font;
    src: url(../fonts/subset-Lato-Regular.woff);
    font-weight: 400;
}

@font-face {
    font-family: default-font;
    src: url(../fonts/subset-Lato-Italic.woff);
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: default-font;
    src: url(../fonts/subset-Lato-Black.woff);
    font-weight: 700;
}

@font-face {
    font-family: default-font;
    src: url(../fonts/subset-Lato-BlackItalic.woff);
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: heading-font;
    src: url(../fonts/subset-Oswald-Regular.woff);
    font-weight: 400;
}

@font-face {
    font-family: heading-font;
    src: url(../fonts/subset-Oswald-Bold.woff);
    font-weight: 700;
}

@font-face {
    font-family: icon-font;
    src: url(../fonts/icon-font.woff);
    font-weight: 400;
}

/* KEYFRAMES */
@keyframes blink {
    50% { border-color: transparent; }
}

/* MAIN */
:root{
    --primary-color: #c9152c;
    --primary-rgb: 201,21,44;
    --secondary-color: #800015;
	--grey: #eeeeee;
}

html {
	font-size: 62.5%;
	background-color: var(--primary-color);
	color:#FFFFFF;
    scroll-behavior: smooth;
}

body {
    --background-color: #ffffff;
    --link-color: var(--primary-color);
    margin: 0;
	font-family: default-font, sans-serif;
	font-size: 1.8rem;
	line-height: 1.4em;
	background-color: #ffffff;
	color: #000000;
	-webkit-font-smoothing: antialiased;
}

/* LIGHT */
.light{
    --background-color: #ffffff;
    --link-color: var(--primary-color);
	background-color: #ffffff;
	color: #000000;
}

/* DARK */
.dark{
    --background-color: #000000;
    --link-color: var(--primary-color);
    background-color: #000000;
    color: #ffffff;
}

/* COLOURED */
.coloured{
    --background-color: var(--primary-color);
    --link-color: #000000;
    background-color: var(--primary-color);
    color: #ffffff;
}

/* GENERAL */
p {
	margin: 2rem 0;
}

p.large{
	font-size: 3rem;
	line-height: 1.4em;
}

ul,
ol{
    margin: 2rem 0;
    padding-left: 2rem;
}

li{
	margin: 1.5rem 0;
}

figure{
    margin: 2rem 0;
}

blockquote{
    margin: 3rem 0;
    font-size: 4rem;
    line-height: 1.2em;
}

hr {
	margin: 3rem 0;
	height: 0.1rem;
	border: 0;
	background-color: currentColor;
}

a {
	color: var(--link-color);
	text-decoration: none;
    outline: 0;
	cursor: pointer;
}

a:hover,
a:focus{
	text-decoration: underline;
}

.button{
	display: inline-flex; justify-content: center; align-items: center;
    position: relative;
	max-width: 100%;
    margin: 0;
	padding: 1.5rem 2.5rem;
	box-sizing: border-box;
	border-radius: 0;
	border: 0;
    outline: 0;
	text-align: center;
    font-family: heading-font;
    font-weight: 400;
	font-size: 2rem;
	line-height: 1.2em;
    text-transform: uppercase;
	color: #ffffff;
	background-color: var(--link-color);
	cursor:pointer;
}

.button::before{
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0;
    display: block;
    font-size: 0.75rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    background-color: var(--background-color);
}

.button::after{
    content: "";
    position: absolute; top: 0; bottom: 0; right: 0;
    display: block;
    font-size: 0.75rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    background-color: var(--background-color);
}

.button:hover,
.button:focus{
    text-decoration: none;
    background-color: var(--secondary-color);
}

.button:disabled,
.button.disabled{
    background-color: #cccccc;
    color: #999999;
	cursor: default;
	pointer-events: none;
}

img,
svg,
video{
	width:auto;
	max-width: 100%;
	height:auto;
    vertical-align: top;
}

h1, h2, h3, h4{
	margin: 3rem 0 2rem 0;
}

h1,
.h1{
    font-family: default-font;
    font-weight: 700;
	font-size: 10rem;
	line-height: 1em;
    text-transform: uppercase;
}

h2,
.h2{
    font-family: heading-font;
    font-weight: 700;
	font-size: 6rem;
	line-height: 1.2em;
    text-transform: uppercase;
}

h3,
.h3{
    font-family: heading-font;
    font-weight: 400;
	font-size: 3rem;
	line-height: 1.2em;
    text-transform: uppercase;
}

h4,
.h4{
    font-family: heading-font;
    font-weight: 400;
	font-size: 2rem;
	line-height: 1.2em;
    text-transform: uppercase;
}

@media screen and (max-width: 90em) {
    p.large{
        font-size: 2.5rem;
    }
    h1,
    .h1{
        font-size: 7.5rem;
        line-height: 1.2em;
    }
    h2,
    .h2{
        font-size: 5rem;
    }
    h3,
    .h3{
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 60em) {
    h1,
    .h1{
        font-size: 4.5rem;
    }
    h2,
    .h2{
        font-size: 3.5rem;
    }
}

/* ICON FONT */
.icon-font{
    font-family: icon-font;
    font-weight: 400;
}

/* WORDPRESS */
img.aligncenter{
    display: block;
    margin: 2rem auto;
}

img.alignleft{
    display: block;
    margin: 2rem auto 2rem 0;
}

img.alignright{
    display: block;
    margin: 2rem 0 2rem auto;
}

figure.wp-caption{
    display: flex; flex-wrap: wrap;
	max-width: 100%;
}

figure.wp-caption.aligncenter{
    justify-content: center;
    margin: 2rem auto;
    text-align: center;
}

figure.wp-caption.alignleft{
    justify-content: flex-start;
    margin: 2rem auto 2rem 0;
    text-align: left;
}

figure.wp-caption.alignright{
    justify-content: flex-end;
    margin: 2rem 0 2rem auto;
    text-align: right;
}

figure.wp-caption figcaption{
    width: 0;
    flex-basis: 100%;
	margin-top: 1rem;
	font-style: normal;
}

/* RECAPTCHA BADGE */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* VIDEO PLAYER */
.video-player{
    margin: 3rem 0;
    --plyr-color-main: var(--primary-color);
	--plyr-video-control-color-hover: var(--plyr-color-main);
	--plyr-video-control-background-hover: transparent;
    --plyr-focus-visible-color: transparent;
}

.video-player .plyr .plyr__control--overlaid{
	--plyr-control-icon-size: 3rem;
    --plyr-control-spacing: 1.5rem;
	--plyr-video-control-background: rgba(0,0,0,0.5);
	--plyr-video-control-background-hover: rgba(0,0,0,0.5);
    opacity: 1;
}

.video-player .plyr .plyr__control{
	outline: 0;
}

.video-player .plyr input[type=range]:focus-visible{
    --plyr-range-thumb-background: var(--plyr-color-main);
}

/* AUDIO PLAYER */
.audio-player{
    width: 100%;
    margin: 2rem 0;
    position: relative; z-index: 0;
    --plyr-color-main: var(--primary-color);
    --plyr-audio-controls-background: #000000;
	--plyr-audio-control-color: #ffffff;
	--plyr-audio-control-color-hover: var(--plyr-color-main);
	--plyr-audio-control-background-hover: transparent;
    --plyr-tab-focus-color: transparent;
}

.audio-player .plyr input[type=range]:focus-visible{
    --plyr-range-thumb-background: var(--plyr-color-main);
}

.audio-player .plyr .plyr__control{
	outline: 0;
}

/* BLOCK */
.block {
    max-width: 140rem;
    margin: 7.5rem  auto;
    padding: 0 5%;
}

@media screen and (max-width: 60em) {
	.block {
		margin: 5rem  auto;
	}
}

/* CHECKBOX */
.checkbox{
	display: block;
    position: relative;
    flex-shrink: 0;
}

.checkbox input{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.checkbox span{
    display: block;
    width: 2rem;
    height: 2rem;
    border: 0.2rem solid currentColor;
    font-size: 1.6rem;
    line-height: 2rem;
    text-align: center;
}

.checkbox input:focus + span{
    color: var(--link-color);
}

.checkbox input:checked + span::before{
    font-family: icon-font;
    font-weight: 400;
    content: "\f00c";
}

/* ARTICLE */
.article{
    display: flex;
	width: 100%;
    height: 100%;
    position: relative; z-index: 0;
}

.article .image{
    width: 100%;
    flex-shrink: 0;
    margin-right: -100%;
    position: relative; z-index: -1;
    overflow: hidden;
}

.article .image::before{
    content: "";
    display: block;
    padding-bottom: 100%;
}

.article .image img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.article:hover .image img,
.article:focus-within .image img{
    transform: scale(1.1);
}

.article .bottom{
    display: flex;
    width: 100%;
    flex-shrink: 0;
    align-self: flex-end;
	background-color: rgba(var(--primary-rgb), 0.9);
}

.article:hover .bottom,
.article:focus-within .bottom{
	background-color: var(--secondary-color);
}

.article .bottom .dots{
    width: 100%;
    flex-shrink: 0;
    margin-right: -100%;
    position: relative;
}

.article .bottom .dots::before{
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0;
    display: block;
    font-size: 1rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    background-color: #ffffff;
}

.article .bottom .dots::after{
    content: "";
    position: absolute; top: 0; bottom: 0; right: 0;
    display: block;
    font-size: 1rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    background-color: #ffffff;
}

.article .bottom .content{
    width: 100%;
    flex-shrink: 0;
    text-align: center;
}

.article .bottom .content > .inner{
    margin: 1.5rem 0;
    padding: 0 2.5rem;
    text-align: center;
}

.article .title{
   	margin: 0;
}

.article a{
    color: currentColor;
}

.article a:hover,
.article a:focus{
    text-decoration: none;
}

.article a::before{
    content: "";
    display: block;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

/* TICKET */
.ticket{
    padding: 2rem 0;
    border-bottom: 0.2rem solid rgba(0, 0, 0, 0.1);
}

.ticket:first-of-type{
    border-top: 0.2rem solid rgba(0, 0, 0, 0.1);
}

.ticket > .inner{
    display: flex; align-items: center;
    margin: -1rem;
}

.ticket > .inner > .left{
    flex-grow: 1;
    margin: -1rem 0;
}

.ticket > .inner > .right{
    flex-shrink: 0;
    margin: -1rem 0;
}

.ticket > .inner > .left > .inner,
.ticket > .inner > .right > .inner{
    margin: 2rem 0;
    padding: 0 1rem;
}

.ticket .title{
	margin: 0;
}

.ticket .title a:hover,
.ticket .title a:focus{
	text-decoration: none;
	color: var(--secondary-color);		
}

.ticket .info{
	margin: 1rem 0;
}

.ticket .info ul{
	display: flex; flex-wrap: wrap;
    list-style: none;
    margin: -0.5rem;
    padding: 0;
}

.ticket .info li{
    display: flex; align-items: center;
    margin: 0;
    padding: 0.5rem;
}

.ticket .info .icon-font{
    text-align: center;
    color: var(--link-color);
    margin-right: 0.5rem;
}

.ticket .info a{
    color: currentColor;
}

.ticket .info a:hover,
.ticket .info a:focus{
    text-decoration: none;
    color: var(--link-color);
}

.ticket .provider-logo{
	display: block;
	margin: 1rem auto;
}

@media screen and (max-width: 45em) {
    .ticket > .inner{
        flex-wrap: wrap;
    }
    .ticket > .inner > .left,
    .ticket > .inner > .right{
        width: 100%;
    }
	.ticket .provider-logo{
		margin-left: 0;
	}
	.ticket .button{
		width: 100%;
	}
}

/* SKIP TO CONTENT */
#skip-to-content:before,
#skip-to-content:after{
    display: none;
}
#skip-to-content:not(:focus){
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    word-wrap: normal !important;
    overflow: hidden;
}

#skip-to-content:focus{
	position: fixed; top: 2rem; left: 2rem; z-index: 2;
}

/* SUBSCRIBE POPUP */
#subscribe-popup{
    position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2;
    display: flex;
    padding: 5vw;
    visibility: hidden;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

#subscribe-popup.open{
    visibility: inherit;
    opacity: 1;
}

#subscribe-popup .dialog{
    flex-grow: 1;
    max-width: 75rem;
    margin: auto;
    outline: 0;
    text-align: center;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
    position: relative;
}

#subscribe-popup .heading{
	margin: 2rem 0;
}

#subscribe-popup .heading span{
    color: #000000;
}

#subscribe-popup form .consent{
    display: flex; align-items: center;
    margin: 2rem 0;
    text-align: left;
}

#subscribe-popup form .consent .checkbox{
    margin-right: 1rem;
}

#subscribe-popup form .email{
    display: flex;
}

#subscribe-popup form .email input{
    appearance: none;
    flex-grow: 1;
    min-width: 0;
	margin: 0;
	padding: 1.3rem;
    box-sizing: border-box;
	border: 0.2rem solid transparent;
    border-right: 0;
	outline: 0;
	border-radius: 0;
	font-family: heading-font;
    font-weight: 400;
	font-size: 2rem;
	line-height: 1.2em;
    text-overflow: ellipsis;
	background-color: #ffffff;
	color: #000000;
}

#subscribe-popup form .email input:focus{
    border-color: var(--link-color);
}

#subscribe-popup form .email input::placeholder{
    color: currentColor;
    opacity: 0.7;
    text-transform: uppercase;
}

#subscribe-popup form .email button{
    flex-shrink: 0;
}

#subscribe-popup form .email button::before{
    background-color: #ffffff;
}

#subscribe-popup form .email button::after{
    background-color: transparent;
}

#subscribe-popup form .email button .icon-font{
    margin-left: 1rem;
}

#subscribe-popup .close-button{
    position: absolute; top: -2rem; right: 2rem;
	display: block;
	width: 4rem;
    height: 4rem;
    margin: 0;
	padding: 0;
	border: 0;
    outline: 0;
    border-radius: 50%;
	text-align: center;
	font-size: 2rem;
	line-height: 4rem;
	color: #ffffff;
	background-color: var(--link-color);
	cursor:pointer;
}

#subscribe-popup .close-button:hover,
#subscribe-popup .close-button:focus{
    background-color: var(--secondary-color);
}

@media screen and (max-width: 30em) {
    #subscribe-popup form .email{
        flex-wrap: wrap;
    }
    #subscribe-popup form .email input{
        border-right: 0.2rem;
    }
    #subscribe-popup form .email button{
        width: 100%;
        margin-top: 2rem;
    }
	#subscribe-popup form .email button::before,
	#subscribe-popup form .email button::after{
		background-color: #000000;
	}
}

/* HEADER */
#header{
    display: flow-root;
    background-color: #ffffff;
    position: relative; z-index: 1;
}

#header.stuck{
    position: fixed; top: 0; left: 0; right: 0;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
}

#header .navbar{
	display: flex; align-items: center;
	margin: 3rem auto;
}

#header .logo{
    padding-right: 3rem;
    margin-right: auto;
}

#header .logo a{
    display: block;
}

#header .logo a:focus-visible{
    outline: 0.2rem solid var(--link-color);
    outline-offset: 0.5rem;
}

#header .open-menu-button{
    display: none;
}

#header .navigation > .inner{
    display: flex; justify-content: flex-end; align-items: center;
    margin: -1.5rem;
}

#header .main-menu{
    margin: 1.5rem;
}

#header .main-menu ul{
    display: flex;
    list-style: none;
    margin: 0 -1.5rem;
    padding: 0;
}

#header .menu li{
    display: flex; align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
}

#header .menu li:not(:first-of-type){
    border-left: 0.2rem solid currentColor;
}

#header .menu a{
    margin: -1rem 0;
    padding: 1rem 1.5rem;
    color: currentColor;
}

#header .menu a:hover,
#header .menu a:focus{
    color: var(--link-color);
	text-decoration: none;
}

#header .close-menu-button{
    display: none;
}

#header .social{
    margin: 1.5rem;
}

#header .social ul{
    display: flex;
    list-style: none;
    margin: -0.5rem;
    padding: 0;
}

#header .social li{
    margin: 0.5rem;
    padding: 0;
    position: relative;
}

#header .social a{
    display: block;
    width: 4rem;
    height: 4rem;
    text-align: center;
    font-size: 2rem;
    line-height: 4rem;
    background-color: var(--primary-color);
    color: #ffffff;
    position: relative;
}

#header .social a:hover,
#header .social a:focus{
    background-color: var(--secondary-color);
    text-decoration: none;
}

#header .social a::before{
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0;
    display: block;
    font-size: 0.25rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    background-color: #ffffff;
}

#header .social a::after{
    content: "";
    position: absolute; top: 0; bottom: 0; right: 0;
    display: block;
    font-size: 0.25rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    background-color: #ffffff;
}

@media screen and (max-width: 75em) {
	#header .navbar{
		margin: 2rem auto;
	}
    #header .open-menu-button{
        display: block;
        flex-shrink: 0;
        margin: -1rem;
        padding: 1rem;
        border: 0;
        outline: 0;
        font-size: 3rem;
        line-height: 1em;
        background-color: transparent;
        color: currentColor;
        cursor: pointer;
    }
    #header .open-menu-button:hover,
    #header .open-menu-button:focus{
        color: var(--link-color);
    }
    #header .navigation{
        visibility: hidden;
        position: fixed; top: 0; bottom: 0; left: 0; right: 0;
        transition: background-color 0.4s, visibility 0s linear 0.4s;
    }
    #header .navigation.open{
        visibility: inherit;
        background-color: rgba(0, 0, 0, 0.7);
        transition: background-color 0.4s;
    }
    #header .navigation > .inner{
        display: block;
        position: absolute; top: 0; bottom: 0; left: 100%;
        width: 100%;
        max-width: 40rem;
        margin: 0;
        outline: 0;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--primary-color);
        color: #ffffff;
        --link-color: #000000;
        box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
        transition: transform 0.4s;
    }
    #header .navigation.open > .inner{
        transform: translateX(-100%);
    }
    #header .main-menu{
        margin: 5rem 0;
        padding: 0 5%;
    }
    #header .main-menu ul{
        flex-direction: column;
        margin: 0;
    }
    #header .main-menu li:not(:first-of-type){
        border-left: 0;
        border-top: 0.2rem dotted currentColor;
    }
    #header .main-menu a{
        margin: 0;
        padding: 1.5rem 0;
    }
    #header .social{
        margin: 5rem 0;
        padding: 0 5%;
    }
    #header .social a{
        background-color: #ffffff;
        color: var(--primary-color);
    }
    #header .social a:hover,
    #header .social a:focus{
        background-color: #000000;        
    }
    #header .social a::before,
    #header .social a::after{
        background-color: var(--primary-color);
    }
    #header .close-menu-button{
        display: block;
        position: absolute; top: 2rem; right: 2rem;
        margin: -1rem;
        padding: 1rem;
        border: 0;
        outline: 0;
        background-color: transparent;
        color: currentColor;
        font-size: 3rem;
        line-height: 1em;
        text-align: center;
        cursor: pointer;
    }
    #header .close-menu-button:hover,
    #header .close-menu-button:focus{
        color: var(--link-color);
    }
}

/* HERO */
#hero{
    display: flex;
}

#hero .background{
    width: 100%;
    flex-shrink: 0;
    margin-right: -100%;
    position: relative;
	overflow: hidden;
}

#hero .background::before{
    content: "";
    display: block;
	padding-bottom: 30%;
}

#hero .background img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	mix-blend-mode: multiply;
    opacity: 25%;
}

#hero .overlay{
    align-self: center;
    width: 100%;
    flex-shrink: 0;
    text-align: center;
    position: relative;
}

#hero .overlay > .block{
    max-width: 100rem;
}

#hero .heading span{
	display: block;
}

#hero .typewriter{
    display: flex; align-items: center;
}

#hero .typewriter .line{
    width: 100%;
	margin-right: -100%;
    visibility: hidden;
}

#hero .typewriter .line.active{
    visibility: visible;
}

#hero .typewriter .character{
    border-right: 0.2rem solid transparent;
    padding-right: 0.5rem;
    margin-right: -0.7rem;
}

#hero .typewriter .character.active{
    border-color: currentColor;
    animation: blink 1s step-end 0s infinite;
}

/* SEARCH FORM */
#search-form{
    display: flex;
	max-width: 80rem;
    margin: 5rem auto;
    position: relative;
}

#search-form .input{
	flex-grow: 1;
}

#search-form input{
    appearance: none;
    width: 100%;
    min-width: 0;
	margin: 0;
	padding: 1.3rem;
    box-sizing: border-box;
	border: 0.2rem solid transparent;
    border-right: 0;
	outline: 0;
	border-radius: 0;
	font-family: heading-font;
    font-weight: 400;
	font-size: 2rem;
	line-height: 1.2em;
    text-transform: uppercase;
    text-overflow: ellipsis;
	background-color: #ffffff;
	color: #000000;
}

#search-form input:focus{
    border-color: var(--link-color);
}

#search-form input::placeholder{
    color: currentColor;
    opacity: 0.7;
    text-transform: uppercase;
}

#search-form .suggestions{
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
}

#search-form .suggestions li{
    margin: 0;
    padding: 0;
}

#search-form .suggestions .taxonomy{
    margin: 0;
    padding: 0.5rem 1rem;
}

#search-form .suggestions a{
    display: block;
    padding: 0.5rem 1rem;
}

#search-form .suggestions a:hover,
#search-form .suggestions a:focus{
	text-decoration: none;
}

#search-form .suggestions .name{
	font-weight: 700;
	text-transform: uppercase;
}

#search-form .suggestions a[aria-slected="true"]{
	color: #ffffff;
    background-color: var(--link-color);
}

#search-form .button{
    flex-shrink: 0;
}

#search-form .button::before{
    background-color: #ffffff;
}

#search-form .button::after{
    display: none;
}

#search-form .button .label{
    margin-right: 1rem;
}

@media screen and (max-width: 45em) {
    #search-form .button .label{
        display: none;
    }
}

/* FEATURED ARTICLES */
#featured-articles{
    text-align: center;
}

#featured-articles .header{
    max-width: 100rem;
    margin: 5rem auto;
}

#featured-articles .articles{
	margin: 5rem 0;
    display: flow-root;
}

#featured-articles .articles > .inner{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: dense;
	margin: -1.5rem;
}

#featured-articles .column{
    margin: 1.5rem;
}

#featured-articles .column:nth-child(7n+1),
#featured-articles .column:nth-child(7n+2),
#featured-articles .column:nth-child(7n+3){
    grid-column: span 4;
    grid-row: span 4;
}

#featured-articles .column:nth-child(7n+4),
#featured-articles .column:nth-child(7n+5),
#featured-articles .column:nth-child(7n+6),
#featured-articles .column:nth-child(7n+7){
    grid-column: span 3;
    grid-row: span 3;
}

@media screen and (max-width: 75em) {
    #featured-articles .column:nth-child(7n+1),
    #featured-articles .column:nth-child(7n+2),
    #featured-articles .column:nth-child(7n+3),
    #featured-articles .column:nth-child(7n+4){
        grid-column: span 6;
        grid-row: span 6;
    }
    #featured-articles .column:nth-child(7n+5),
    #featured-articles .column:nth-child(7n+6),
    #featured-articles .column:nth-child(7n+7){
        grid-column: span 4;
        grid-row: span 4;
    }
}

@media screen and (max-width: 60em) {
    #featured-articles .column:nth-child(7n+1){
        grid-column: span 12;
        grid-row: span 12;
    }
    #featured-articles .column:nth-child(7n+2),
    #featured-articles .column:nth-child(7n+3),
    #featured-articles .column:nth-child(7n+4),
    #featured-articles .column:nth-child(7n+5),
    #featured-articles .column:nth-child(7n+6),
    #featured-articles .column:nth-child(7n+7){
        grid-column: span 6;
        grid-row: span 6;
    }
}

@media screen and (max-width: 45em) {
    #featured-articles .column:nth-child(7n+1),
    #featured-articles .column:nth-child(7n+2),
    #featured-articles .column:nth-child(7n+3),
    #featured-articles .column:nth-child(7n+4),
    #featured-articles .column:nth-child(7n+5),
    #featured-articles .column:nth-child(7n+6),
    #featured-articles .column:nth-child(7n+7){
        grid-column: span 12;
        grid-row: span 12;
    }
}

/* ADDITIONAL ARTICLES */
#additional-articles{
    text-align: center;
}

#additional-articles .header{
    max-width: 100rem;
    margin: 5rem auto;
}

#additional-articles .articles{
	margin: 5rem 0;
    display: flow-root;
}

#additional-articles .articles > .inner{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: dense;
	margin: -1.5rem;
}

#additional-articles .column{
    margin: 1.5rem;
}

#additional-articles .column:nth-child(3n+1),
#additional-articles .column:nth-child(3n+2),
#additional-articles .column:nth-child(3n+3){
    grid-column: span 4;
    grid-row: span 4;
}

@media screen and (max-width: 45em) {
    #additional-articles .column:nth-child(3n+1),
	#additional-articles .column:nth-child(3n+2),
	#additional-articles .column:nth-child(3n+3){
        grid-column: span 12;
        grid-row: span 12;
    }
}

/* SEARCH RESULTS */
#search-results{
    display: flow-root;
}

#search-results > .inner{
    display: flex; flex-wrap: wrap;
    margin: -2.5rem;
}

#search-results > .inner > .left{
    width: 50%;
    max-width: 40rem;
    margin: -2.5rem 0;
}

#search-results > .inner > .right{
    width: 50%;
    flex-grow: 1;
    margin: -2.5rem 0;
}

#search-results > .inner > .left > .inner,
#search-results > .inner > .right > .inner{
    margin: 5rem 0;
    padding: 0 2.5rem;
}

@media screen and (max-width: 60em) {
	#search-results > .inner{
		margin: -2.5rem 0;
	}
    #search-results > .inner > .left{
        width: 100%;
        max-width: none;
    }
	#search-results > .inner > .left > .inner,
	#search-results > .inner > .right > .inner{
		padding: 0;
	}
}

/* FILTER TICKETS */
#filter-tickets .header{
    display: flex; justify-content: space-between; align-items: center;
    position: relative;
    padding: 2rem 2.5rem;
    background-color: var(--link-color);
    color: #ffffff;
}

#filter-tickets .header::before{
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0;
    display: block;
    font-size: 0.75rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    background-color: #ffffff;
}

#filter-tickets .header::after{
    content: "";
    position: absolute; top: 0; bottom: 0; right: 0;
    display: block;
    font-size: 0.75rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    background-color: #ffffff;
}

#filter-tickets .header .heading{
    margin: 0;
}

#filter-tickets .header .toggle-button{
    display: none;
}

#filter-tickets .filters{
    display: flow-root;
}

#filter-tickets .filters > .inner{
    margin: 3rem 0;
    padding: 0 2.5rem;
}

#filter-tickets .checkboxes .heading{
	margin: 1rem 0;
}

#filter-tickets .checkboxes .fields{
	display: flex; flex-direction: column;
	margin: -0.5rem;
}

#filter-tickets .checkboxes .field{
    padding: 0.5rem;
    display: flex; align-items: center;
}

#filter-tickets .checkboxes .checkbox{
    margin-right: 1rem;
}

#filter-tickets .date .heading{
	margin: 1rem 0;
}

#filter-tickets .date .fields{
    display: flex;
    margin: -1rem;
}

#filter-tickets .date .field{
    width: 50%;
    padding: 1rem;
    box-sizing: border-box;
}

#filter-tickets .date .label{
    display: block;
    margin-bottom: 0.5rem;
}

#filter-tickets .date input{
    appearance: none;
    width: 100%;
    min-width: 0;
	margin: 0;
	padding: 1.3rem;
    box-sizing: border-box;
	border: 0.2rem solid transparent;
	outline: 0;
	border-radius: 0;
	font-family: heading-font;
    font-weight: 400;
	font-size: 2rem;
	line-height: 1.2em;
    text-transform: uppercase;
    text-overflow: ellipsis;
	background-color: #ffffff;
	color: #000000;
    position: relative;
}

#filter-tickets .date input:focus,
#filter-tickets .date input:focus-within{
    border-color: var(--link-color);
}

#filter-tickets .date input::-webkit-calendar-picker-indicator {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    width: auto;
    height: auto;
    outline: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

@media screen and (max-width: 60em) {
    #filter-tickets .header:hover,
    #filter-tickets .header:focus-within{
        background-color: var(--secondary-color);
    }
    #filter-tickets .header .toggle-button{
        display: block;
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        margin: 0 0 0 1rem;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 3rem;
        line-height: 1em;
        background-color: transparent;
        color: currentColor;
        cursor: pointer;
    }
    #filter-tickets .header .toggle-button::before{
        content: "";
        display: block;
        position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    }
    #filter-tickets .filters{
        overflow: hidden;
        height: 0;
        visibility: hidden;
        transition: height 0.5s, visibility 0s 0.5s;
    }
    #filter-tickets.open .filters{
        height: auto;
        visibility: inherit;
        transition: height 0.5s
    }
}

/* TICKETS */
#tickets{
	margin: 5rem 0;
}

#tickets.loading{
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

#tickets .pagination{
	display: flex; justify-content: center;
	margin: 5rem 0;
	text-align: center;
}

#tickets .pagination .current{
	padding: 1.5rem 2.5rem;
}

#tickets .pagination .prev::after{
	display: none;
}

#tickets .pagination .next::before{
	display: none;
}

/* CONTENT */
#content{
	max-width: 100rem;
}

#content iframe{
	width: 100%;
}

/* FAQS */
#faqs{
    margin: 5rem 0;
}

#faqs .faq{
    margin: 3rem 0;
}

#faqs .faq .question{
    display: flex;
    width: 100%;
	text-align: left;
}

#faqs .faq .question .icon-font{
    padding-left: 1rem;
    margin-left: auto;
}

#faqs .faq .answer{
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: height 0.5s, visibility 0s 0.5s;
}

#faqs .faq.open .answer{
    height: auto;
    visibility: inherit;
    transition: height 0.5s;
}

#faqs .faq .answer > .inner{
    margin: 3rem 0;
    padding: 0 2.5rem;
}

/* CONTACT FORM */
#contact-form{
    margin: 5rem auto;
}

#contact-form .field{
    display: flex; align-items: center;
    margin: 2rem 0;
}

#contact-form .field .label{
    width: 20rem;
    padding-right: 1rem;
    box-sizing: border-box;
    text-align: right;
}

#contact-form .field .required{
    color: var(--primary-color);
}

#contact-form .input{
    appearance: none;
    flex-grow: 1;
    min-width: 0;
    margin: 0;
    padding: 1.3rem;
    box-sizing: border-box;
    border: 0.2rem solid transparent;
    outline: 0;
    border-radius: 0;
    font-family: heading-font;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.2em;
    text-overflow: ellipsis;
    background-color: var(--grey);
    color: currentColor;
}
    
#contact-form .input:focus{
    border-color: var(--primary-color);
}

#contact-form textarea{
    height: 15rem;
}

#contact-form .submit{
    padding-left: 20rem;
}

#contact-form .submit button{
    width: 100%;
}

@media screen and (max-width: 45em) {
    #contact-form .field{
        display: block;
    }
    #contact-form .field .label{
        display: block;
        width: 100%;
        padding: 0;
        margin: 1rem 0;
        text-align: left;
    }
    #contact-form .input{
        width: 100%;
    }
    #contact-form .submit{
        padding-left: 0;
    }
}

/* FEATURED ARTICLES SLIDER */
#featured-articles-slider{
	display: flow-root;
    text-align: center;
	background-color: var(--grey);
}

#featured-articles-slider .header{
    max-width: 100rem;
    margin: 5rem auto;
}

#featured-articles-slider .articles-slider{
    position: relative; z-index: 0;
	margin: 5rem 0;
	padding: 0 4rem;
}

#featured-articles-slider .slider{
    overflow-x: auto;
    overflow-y: hidden;
}

#featured-articles-slider .slider > .inner{
    margin-left: -2rem;
}

#featured-articles-slider .swiper-container{
    overflow: hidden;
}

#featured-articles-slider .slides{
    display: flex;
}

#featured-articles-slider .slide{
    width: 25%;
    height: auto;
    flex-shrink: 0;
	padding-left: 2rem;
	box-sizing: border-box;
}

#featured-articles-slider .nav-button{
    position: absolute; top: 0; bottom: 0; z-index: 2;
	height: 4rem;
	padding: 0 1rem;
    margin: auto -1rem;
    outline: 0;
    font-size: 3rem;
	line-height: 4rem;
	color: var(--button-color);
    cursor: pointer;
}

#featured-articles-slider .nav-button.prev{
    left: 0;
}

#featured-articles-slider .nav-button.next{
    right: 0;
}

#featured-articles-slider .nav-button:hover,
#featured-articles-slider .nav-button:focus{
	color: var(--link-color);
}

#featured-articles-slider .nav-button.swiper-button-disabled{
    display: none;
}

#featured-articles-slider .article .bottom .dots::before,
#featured-articles-slider .article .bottom .dots::after{
	background-color: var(--grey);
}

#featured-articles-slider .button::before,
#featured-articles-slider .button::after{
	background-color: var(--grey);
}

@media screen and (max-width: 75em) {
    #featured-articles-slider .slide{
        width: 33.33%;
    }
}

@media screen and (max-width: 60em) {
    #featured-articles-slider .slide{
        width: 50%;
    }
}

@media screen and (max-width: 45em) {
    #featured-articles-slider .slide{
        width: 100%;
    }
}

/* SUBSCRIBE */
#subscribe{
    display: flow-root;
}

#subscribe .columns{
    display: flow-root;
}

#subscribe .columns > .inner{
    display: flex; align-items: center; flex-wrap: wrap;
    margin: -1rem -1.5rem ;
}

#subscribe .column{
    width: 50%;
    margin: -1rem 0;
}

#subscribe .column > .inner{
    margin: 2rem 0;
    padding: 0 1.5rem;
}

#subscribe .heading{
	margin: 2rem 0;
}

#subscribe .heading span{
    color: var(--primary-color);
}

#subscribe form .consent{
    display: flex; align-items: center;
    margin: 2rem 0;
    text-align: left;
}

#subscribe form .consent .checkbox{
    margin-right: 1rem;
}

#subscribe form .email{
    display: flex;
}

#subscribe form .email input{
    appearance: none;
    flex-grow: 1;
    min-width: 0;
	margin: 0;
	padding: 1.3rem;
    box-sizing: border-box;
	border: 0.2rem solid transparent;
    border-right: 0;
	outline: 0;
	border-radius: 0;
	font-family: heading-font;
    font-weight: 400;
	font-size: 2rem;
	line-height: 1.2em;
    text-overflow: ellipsis;
	background-color: #ffffff;
	color: #000000;
}

#subscribe form .email input:focus{
    border-color: var(--link-color);
}

#subscribe form .email input::placeholder{
    color: currentColor;
    opacity: 0.7;
    text-transform: uppercase;
}

#subscribe form .email button{
    flex-shrink: 0;
}

#subscribe form .email button::before{
    background-color: #ffffff;
}

#subscribe form .email button::after{
    background-color: transparent;
}

#subscribe form .email button .icon-font{
    margin-left: 1rem;
}

@media screen and (max-width: 60em) {
    #subscribe .column{
        width: 100%;
    }
}

@media screen and (max-width: 30em) {
    #subscribe form .email{
        flex-wrap: wrap;
    }
    #subscribe form .email input{
        border-right: 0.2rem;
    }
    #subscribe form .email button{
        width: 100%;
        margin-top: 2rem;
    }
	#subscribe form .email button::before,
	#subscribe form .email button::after{
		background-color: #000000;
	}
}

/* FOOTER */
#footer{
    display: flow-root;
    text-align: center;
}

#footer .main-menu{
    margin: 5rem 0;
}

#footer .main-menu ul{
    display: flex; justify-content: center;
    list-style: none;
    margin: 0 -1.5rem;
    padding: 0;
}

#footer .main-menu li{
    display: flex; align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
}

#footer .main-menu li:not(:first-of-type){
    border-left: 0.2rem solid currentColor;
}

#footer .main-menu a{
    display: block;
    margin: -1rem 0;
    padding: 1rem 1.5rem;
    color: currentColor;
}

#footer .main-menu a:hover,
#footer .main-menu a:focus{
    color: var(--link-color);
	text-decoration: none;
}

#footer .social{
    margin: 5rem 0;
}

#footer .social ul{
    display: flex; justify-content: center;
    list-style: none;
    margin: -0.5rem;
    padding: 0;
}

#footer .social li{
    margin: 0.5rem;
    padding: 0;
    position: relative;
}

#footer .social a{
    display: block;
    width: 4rem;
    height: 4rem;
    text-align: center;
    font-size: 2rem;
    line-height: 4rem;
    background-color: #ffffff;
    color: var(--primary-color);
    position: relative;
}

#footer .social a:hover,
#footer .social a:focus{
    background-color: #000000;
    text-decoration: none;
}

#footer .social a::before{
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0;
    display: block;
    font-size: 0.25rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    background-color: var(--primary-color);
}

#footer .social a::after{
    content: "";
    position: absolute; top: 0; bottom: 0; right: 0;
    display: block;
    font-size: 0.25rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    background-color: var(--primary-color);
}

#footer .affiliates{
    max-width: 80rem;
    margin: 5rem auto;
    position: relative;
    padding: 2rem;
}

#footer .affiliates::before{
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0;
    display: block;
    font-size: 1rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    background-color: var(--primary-color);
}

#footer .affiliates::after{
    content: "";
    position: absolute; top: 0; bottom: 0; right: 0;
    display: block;
    font-size: 1rem;
    width: 1em;
    height: 2em;
    margin: auto;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    background-color: var(--primary-color);
}

#footer .affiliates > .inner{
    display: flex; align-items: center; justify-content: center;
    margin: -1rem -1.5rem;
}

#footer .affiliates .column{
    padding: 1rem 1.5rem;
}

#footer .affiliates .heading{
    margin: 0;
}

#footer .affiliates ul{
    display: flex; justify-content: center;
    list-style: none;
    margin: 0 -1.5rem;
    padding: 0;
}

#footer .affiliates li{
    display: flex; align-items: center;
    margin: 0;
    padding: 0 1.5rem;
    border-left: 0.1rem solid currentColor;
    position: relative;
}

#footer .affiliates li a:focus-visible{
    outline: 0.2rem solid var(--link-color);
    outline-offset: 0.5rem;
}

@media screen and (max-width: 45em) {
    #footer .main-menu{
        margin: 5rem 0;
    }
    #footer .main-menu ul{
        flex-direction: column;
        margin: 0;
    }
    #footer .main-menu li:not(:first-of-type){
        border-left: 0;
        border-top: 0.2rem dotted currentColor;
    }
    #footer .main-menu a{
        margin: 0;
        padding: 1.5rem 0;
    }
    #footer .affiliates > .inner{
        flex-wrap: wrap;
    }
    #footer .affiliates .column{
        width: 100%;
    }
    #footer .affiliates li:first-of-type{
        border: 0;
    }
}