/* General defaults */

html, button, input, select, textarea { color: #333333; }
body { background: #ffffff; font-family: Open Sans, Arial, sans-serif; font-size: 18px; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5rem 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid; margin-bottom: 1em; padding: 0; }
img { vertical-align: middle; max-width: 100%; height: auto; border: 0; outline: 0; }
p { margin: 0 0 1em 0; }
a { font-weight: bold; text-decoration: none; color: inherit; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
a:hover, a:visited { text-decoration: none; opacity: 0.75; }
ol, ul { padding: 0 0 0 1.5em; margin-top: 0; margin-bottom: 1em; }
video { width: 100%; height: auto; }
blockquote { margin-left: 0; margin-right: 0; padding: 0.5em; border: 1px solid #c0c0c0; }

/* Header */

#header-top { position: -webkit-sticky; position: sticky; top: 0; z-index: 100; }
#header-main { padding: padding: 1em 0; }
#header-logo { display: inline-block; }

/* Page */

.wrapper { margin: 0 auto; }
.wrapper-800px { width: 800px; margin: 0 auto; }

/* Containers */

#nav-container { border-top: 1px solid #f9ad07; border-bottom: 1px solid #f9ad07; }
#body-container { padding-top: 2em; }

/* Menu desktop - first level */

nav.desktop ul { list-style: none; margin: 0; padding: 0; }
nav.desktop ul li { display: inline-block; position: relative; padding: 1em; height: 1em; line-height: 1em; font-weight: bold; }

/* Menu desktop - second level */

nav.desktop ul li ul { display: none; position: absolute; background: rgba(191, 42, 42, 0.90); width: auto; left: 0; top: 3em; }
nav.desktop ul li:hover ul { display: block; z-index: 100; }
nav.desktop ul li ul li { display: block; color: #ffffff; margin: 0px; white-space: nowrap; border-bottom: 1px solid #ffffff; }

/* Menu desktop - third level */

nav.desktop ul li:hover ul li ul { display: none; }
nav.desktop ul li ul li ul { display: none; position: absolute; background: rgba(191, 42, 42, 0.90); width: auto; left: 100%; top: 0; }
nav.desktop ul li ul li:hover ul { display: block; z-index: 100; }
nav.desktop ul li ul li ul li { display: block; color: #ffffff; margin: 0px; white-space: nowrap; border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; }

/* Menu mobile */

nav.mobile { display: none; }
nav.mobile div.menu-icon { cursor: pointer; }
nav.mobile div.menu-icon:hover { opacity: 0.75; }
nav.mobile div.icon-bar { width: 2.5em; height: 0.5em; background-color: #000000; margin: 0.5em 0; padding: 0; }
div#mobile-menu { z-index: 100; background: #ffffff; padding: 1em; font-size: 1.25em; }
div#mobile-menu ul { list-style: none; }

/* Cookies */

div#cookies-pop-out { display: none; position: fixed; z-index: 200; bottom: 0; right: 0; width: 20%; min-width: 20em; padding: 1em; background-color: #1a2c53; border-left: 2px solid #ffffff; border-top: 2px solid #ffffff; color: #ffffff; font-size: 0.75em; }

/* Banners */

#banner { margin-top: -2em; }
#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 { color: #ffffff; text-shadow: 1px 1px 0.5em #000000; }
#banner h1, .size-h1 { font-size: 4em; line-height: 1em; }
#banner h2, .size-h2  { font-size: 2em; line-height: 1.2em; }
#banner h3, .size-h3 { font-size: 1.5em; line-height: 1.25em; }
.banner { display: flex; flex-direction: column; justify-content: center; height: 30em; max-height: 600px; min-height: fit-content; padding: 2rem 1rem; color: #ffffff; text-align: center; background-position: center; background-repeat: no-repeat;  background-size: cover; }

/* Forms */
   
button, input, textarea, select { background-color: #f1f1f1; box-sizing: border-box; border-width: 0; border-radius: 0; color: #4e424e; padding: 0.5em 1em; }
input:not([type="button"], [type="submit"], [type="checkbox"], [type="radio"]), select, textarea { width: 100%; }
select { max-width: 12em; }
label { display: block; font-weight: bold; }
input[type="date"] { max-width: 9em; }
input[type="button"], input[type="submit"] { font-weight: bold; }
input[type="button"], input[type="submit"], input[type="reset"], input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active { background: #e0e0e0; }
input[type="button"]:hover, input[type="submit"]:hover { background: #d0d0d0; }
input[type="time"] { padding: 0.2rem; }
input:required, button:required, textarea:required, select:required { border: 1px solid #CC250A; }
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]):required:valid, button:required:valid, textarea:required:valid, select:required:valid { border: 1px solid #03CD00; }
input:disabled, input:disabled:hover, button:disabled, textarea:disabled, select:disabled { background: #d0d0d0; color: #808080; }
textarea { overflow: auto; vertical-align: top; height: 5em; }
input[type="checkbox"], input[type="radio"] { margin-top: 0.4rem; margin-bottom: 0.4rem; }
input[type="file"] { max-width: 99%; }
table.link-row tbody tr td:hover, tr.link-row td:hover { cursor: pointer; }
table.link-row select:hover , table.link-row input:hover, table.link-row textarea:hover { cursor: default; }

/* Tables */

table { width: 100%; max-width: 100%; vertical-align: top; }
td, th { text-align: left; padding: 0.5em; }
th { font-weight: bold; background: #e1e1e1; }
td { vertical-align: text-top; }

/* Cookies table */

table.cookies { border-collapse: separate; border-spacing: 0 0.5em; margin-bottom: 1em; }
table.cookies th, table.cookies td { padding: 0.25em 0.5em; }
table.cookies th { background: #cb7629; color: #ffffff; }
table.cookies td { background: #f5f5f5; }

/* Tooltips */

.ui-tooltip { max-width: 600px; white-space: pre-line; }
.ui-tooltip-content { font-size: 0.85em; color: #4c7bbe; }

/* Font Awesome */

.fa:before, .far:before, .fas:before, .fab:before { padding: 0; margin: 0; text-align: center; }

/* Slideshow */
.slideshow-container { position: relative; border-bottom: 1px solid #6d726d; }
.slideshow-dot-container { position: absolute; width: 100%; bottom: 1em; text-align: center; }
.slideshow-dot { cursor: pointer; background: #ffffff; height: 1em; width: 1em; margin: 0 0.25em; border-radius: 50%; display: inline-block; box-shadow: 1px 1px 0.5em #000000; transition: background-color 0.6s ease; }
.slideshow-active, .slideshow-dot:hover, .slideshow-active, .slideshow-dot:hover { opacity: 0.25; }
.slideshow-fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }
@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} }
@keyframes fade { from {opacity: .4} to {opacity: 1} }

/* Custom */

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; }
.right-0 { right: 0; }
.top-0 { top: 0; }

.width-fit-content { width: fit-content; }
.width-auto { width: auto; }
.width-1em { width: 1em; }
.width-100p { width: 100%; }

.font-weight-bold { font-weight: bold; } 
.font-style-italic { font-style: italic; }

.text-decoration-underline { text-decoration: underline; }

.colour-initial { color: initial; }
.colour-black-000000 { color: #000000; }
.colour-white-ffffff { color: #ffffff; }
.colour-grey-333333 { color: #333333; }
.colour-grey-6d726d { color: #6d726d; }
.colour-grey-f0f0f0 { color: #f0f0f0; }
.colour-red-bf2a2a { color: #bf2a2a; }
.colour-yellow-f9ad07 { color: #f9ad07; }
.colour-cream-fcf9f6 { color: #fcf9f6; }
.colour-blue-3a61e0 { color: #3a61e0; }

.bg-white-ffffff { background: #ffffff; }
.bg-black-000000 { background: #000000; }
.bg-grey-6d726d { background: #6d726d; }
.bg-grey-f0f0f0 { background: #f0f0f0; }
.bg-red-bf2a2a { background: #bf2a2a; }
.bg-yellow-f9ad07 { background: #f9ad07; }
.bg-cream-fcf9f6 { background: #fcf9f6; }
.bg-blue-3a61e0 { background: #3a61e0; }

.border { border: 1px solid; }
.border-top { border-top: 1px solid; }
.border-none { border: none; }
.border-dashed { border: 1px dashed; }

.display-block { display: block; }
.display-inline-block { display: inline-block; }
.display-inline { display: inline; }
.display-none { display: none; }

.display-flex { display: flex; flex-direction: row; }
.display-flex-column { display: flex; flex-direction: column; }
.justify-content-space-between { justify-content: space-between; }
.justify-content-flex-start { justify-content: flex-start; }
.justify-content-flex-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-space-evenly { justify-content: space-evenly; }
.align-items-flex-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-flex-end { align-items: flex-end; }
.align-items-stretch { align-items: stretch; }
.flex-wrap-wrap { flex-wrap: wrap; }
.flex-6 { flex: 6 1 auto; }
.flex-3 { flex: 3 1 auto; }
.flex-1 { flex: 1 1 auto; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-2 { flex-shrink: 2; }
.align-self-flex-start { align-self: flex-start; }
.align-self-center { align-self: center; }
.align-self-flex-end { align-self: flex-end; }
.flex-grow-1 { flex-grow: 1; }
.gap-05em { gap: 0.5em; }
.gap-1em { gap: 1em; }
.gap-2em { gap: 2em; }
.gap-0 { gap: 0px; }
.flex-basis-125p { flex-basis: 12.5%; }

.display-grid { display: grid; }
.display-grid-responsive { display: grid; }
.display-inline-grid { display: inline-grid; }
.grid-gap-05em { grid-gap: 0.5em; }
.grid-gap-1em { grid-gap: 1em; }
.grid-gap-2em { grid-gap: 2em; }
.grid-gap-3em { grid-gap: 3em; }
.grid-gap-4em { grid-gap: 4em; }
.grid-columns-max-content { grid-template-columns: max-content; }
.grid-columns-auto-8em { grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); }
.grid-columns-auto-12em { grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); }
.grid-columns-auto-16em { grid-template-columns: repeat(auto-fill, minmax(16em, 1fr)); }
.grid-columns-1 { grid-template-columns: repeat(1, 1fr); }
.grid-columns-2 { grid-template-columns: repeat(2, 1fr); }
.grid-columns-3 { grid-template-columns: repeat(3, 1fr); }
.grid-columns-4 { grid-template-columns: repeat(4, 1fr); }
.grid-columns-5 { grid-template-columns: repeat(5, 1fr); }
.grid-columns-6 { grid-template-columns: repeat(6, 1fr); }
.grid-columns-7 { grid-template-columns: repeat(7, 1fr); }
.grid-columns-2-auto { grid-template-columns: auto auto; }
.grid-template-rows-auto { grid-template-rows: auto; }
.grid-template-rows-home-content { grid-template-rows: 300px; }
.grid-auto-rows-1fr { grid-auto-rows: 1fr; }
.justify-items-center { justify-items: center; }
.align-items-center { align-items: center; }
.align-items-end { align-items: end; }
.column-span-2 { grid-column-end: span 2; }
.column-span-3 { grid-column-end: span 3; }
.column-span-4 { grid-column-end: span 4; }
.justify-self-center { justify-self: center; }
.justify-self-end { justify-self: end; }
.align-self-start { align-self: start; }
.align-self-end { align-self: end; }
.align-self-center { align-self: center; }
.align-content-start { align-content: start; }
.align-content-center { align-content: center; }

.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }
.text-align-justify { text-align: justify; }

.vertical-align-top { vertical-align: top; }
.vertical-align-middle { vertical-align: middle; }

.text-size-065em { font-size: 0.65em; line-height: 1.15em; }
.text-size-075em { font-size: 0.75em; line-height: 1.25em; }
.text-size-085em { font-size: 0.85em; line-height: 1.35em; }
.text-size-09em { font-size: 0.9em; line-height: 1.4em; }
.text-size-1em { font-size: 1em; }
.text-size-12em { font-size: 1.2em; line-height: 1.4em; }
.text-size-15em { font-size: 1.5em; line-height: 1.3em; }
.text-size-2em { font-size: 2em; line-height: 1.2em; }
.text-size-25em { font-size: 2.5em; line-height: 1.1em; }
.text-size-3em { font-size: 3em; line-height: 1.1em; }
.text-size-4em { font-size: 4em; line-height: 1em; }
.text-size-5em { font-size: 5em; line-height: 1em; }

.background-circle-2em { width: 2em; height: 2em; border-radius: 1em; line-height: 2em; text-align: center; }
.background-circle-3em { width: 3em; height: 3em; border-radius: 1.5em; line-height: 3em; text-align: center; }
.background-circle-4em { width: 4em; height: 4em; border-radius: 2em; line-height: 4em; text-align: center; }

.padding-25em { padding: 0.25em; }
.padding-05em { padding: 0.5em; }
.padding-075em { padding: 0.75em; }
.padding-1em { padding: 1em; }
.padding-15em { padding: 1.5em; }
.padding-2em { padding: 2em; }
.padding-4em { padding: 4em; }
.padding-0-2em { padding: 0 2em; }
.padding-025em-05em { padding: 0.25em 0.5em; }
.padding-1em-0 { padding: 1em 0; }
.padding-1em-05em { padding: 1em 0.5em; }
.padding-05em-1em { padding: 0.5em 1em; }
.padding-1em-2em { padding: 1em 2em; }
.padding-1em-3em { padding: 1em 3em; }
.padding-05em-1em { padding: 0.5em 1em; }
.padding-2em-0 { padding: 2em 0; }
.padding-3em-0 { padding: 3em 0; }
.padding-4em-0 { padding: 4em 0; }
.padding-4em-1em { padding: 4em 1em; }
.padding-2em-1em { padding: 2em 1em; }
.padding-left-1em { padding-left: 1em; }
.padding-right-1em { padding-right: 1em; }
.padding-top-1em { padding-top: 1em; }
.padding-top-2em { padding-top: 2em; }
.padding-top-3em { padding-top: 3em; }
.padding-bottom-1em { padding-bottom: 1em; }
.padding-bottom-2em { padding-bottom: 2em; }
.padding-bottom-3em { padding-bottom: 3em; }

.margin-0-auto { margin: 0 auto; }
.margin-1em-0 { margin: 1em 0; }
.margin-2em-0 { margin: 2em 0; }
.margin-3em-0 { margin: 3em 0; }
.margin-4em-0 { margin: 4em 0; }
.margin-top-05em { margin-top: 0.5em; }
.margin-top-1em { margin-top: 1em; }
.margin-top-2em { margin-top: 2em; }
.margin-top-3em { margin-top: 3em; }
.margin-bottom-025em { margin-bottom: 0.25em; }
.margin-bottom-05em { margin-bottom: 0.5em; }
.margin-bottom-1em { margin-bottom: 1em; }
.margin-bottom-2em { margin-bottom: 2em; }
.margin-bottom-3em { margin-bottom: 3em; }
.margin-bottom-4em { margin-bottom: 4em; }
.margin-bottom-5em { margin-bottom: 5em; }
.margin-left-1em { margin-left: 1em; }
.margin-left-2em { margin-left: 2em; }
.margin-right-025em { margin-right: 0.25em; }
.margin-right-05em { margin-right: 0.5em; }
.margin-right-1em { margin-right: 1em; }
.margin-right-2em { margin-right: 2em; }
.margin-bottom-negative-2em { margin-bottom: -2em; }
.margin-bottom-negative-5em { margin-bottom: -5em; }

.max-width-1rem { max-width: 1rem; }
.max-width-2rem { max-width: 2rem; }
.max-width-5rem { max-width: 5rem; }
.max-width-75rem { max-width: 7.5rem; }
.max-width-10rem { max-width: 10rem; }
.max-width-12rem { max-width: 12rem; }
.max-width-15rem { max-width: 15rem; }
.max-width-20rem { max-width: 20rem; }
.max-width-25rem { max-width: 25rem; }
.max-width-30rem { max-width: 30rem; }
.max-width-40rem { max-width: 40rem; }
.max-width-50rem { max-width: 50rem; }
.max-width-70rem { max-width: 70rem; }
.max-width-800px { max-width: 800px; }
.max-width-50p { max-width: 50%; }

.max-width-800px { max-width: 800px; }

.max-height-none { max-height: none !important; }
.max-height-8rem { max-height: 8rem; }
.max-height-10rem { max-height: 10rem; }
.max-height-12rem { max-height: 12rem; }
.max-height-15rem { max-height: 15rem; }
.max-height-20rem { max-height: 20rem; }
.max-height-30rem { max-height: 30rem; }

.height-auto { height: auto !important; }
.height-2em { height: 2em; }
.height-2p5em { height: 2.5em; }
.height-6em { height: 6em; }
.height-8em { height: 8em; }
.height-12em { height: 12em; }

.overflow-x-auto { overflow-x: auto; }

.link-button { border-width: 0; border-radius: 2rem; }

.cursor-pointer { cursor: pointer; }

.transition-all-05s-ease-in-out { transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; }

.opacity-075:hover { opacity: 0.75; }

.float-right { float: right; }

.list-style-inside { list-style: inside; }

/* Responsivity */

@media only screen and (max-width: 1920px) { 

	.flex-basis-125p { flex-basis: 20%; }
	
}

@media only screen and (max-width: 1366px) { 

	body { font-size: 16px; }
	
}

@media only screen and (max-width: 1100px) { 

	.wrapper { width: 94%; padding: 0 3%; }
	
}

@media only screen and (min-width: 1025px) { 

	div#mobile-menu { display: none; }
	
}

@media only screen and (max-width: 1024px) { 

	body { font-size: 15px; }
	nav.mobile { display: block; }
	nav.desktop { display: none; }
	
}

@media only screen and (max-width: 850px) { 

	.wrapper-800px { width: 100%; }
	
}

@media only screen and (max-height: 768px) { 

	header { position: initial; }
	
}

@media only screen and (max-width: 768px) { 

	.display-grid  { grid-template-columns: repeat(1, 1fr); }
	
}

@media only screen and (max-width: 480px) { 

	body { font-size: 14px; }
	#header-title { display: none; }

}