body,html {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	font-size: 17px;
	font-family: Assistant;
	/*font-size: 18px;*/
	background-color: rgb(255,255,255);
	background-color: rgb(245,245,245);
}

body {
	overflow: initial;
	background-color: rgb(245,245,245);
}

body {
	display: flex;
	flex-flow: column;
	height: 100%;
}

body > *:nth-child(2) {
	padding-top: var(--nav-height);
}


:root {
	--spacing: 1.375rem;
	--primary: #991b2a;
	--primary-contrast: #fff;
}


a {
	color: #174895;
	color: #991b2a;
	text-decoration: none;
	text-decoration: underline;
}

a:hover {
	color: inherit !important;
	text-decoration: underline;
}




/* https://www.gridlover.net/ */
/* ratio = 1.5 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {	
	margin:0; 
	padding:0; 
}

h1, .h1 {
	font-size: 3.375rem;
	line-height: 4.125rem;
	margin-top: 1.375rem;
	margin-bottom: 2.75rem;
}
h2, .h2 {
	font-size: 2.25rem;
	line-height: 2.75rem;
	margin-top: 1.375rem;
	margin-bottom: 1.375rem;
}
h3, .h3 {
	font-size: 1.5rem;
	line-height: 2.75rem;
	margin-top: 1.375rem;
	margin-bottom: 0rem;
}
h4, .h4 {
	font-size: 1rem;
	line-height: 1.375rem;
	margin-top: 1.375rem;
	margin-bottom: 0rem;
}
h5, .h5 {
	font-size: 1rem;
	line-height: 1.375rem;
	margin-top: 1.375rem;
	margin-bottom: 0rem;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child {
	margin-top: 0;
}

p, ul, ol, pre, table, blockquote {
	margin-top: 0rem;
	margin-bottom: 1.375rem;
}
ul ul, ol ol, ul ol, ol ul {
	margin-top: 0rem;
	margin-bottom: 0rem;
}

a, b, i, strong, em, small, code {
	line-height: 0;
}
sub, sup {
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}

code {
	font-size: 0.9rem;
}

/*
	CUSTOM MARGINS
	(mostly to override the GridLover settings if needed)
*/

/* top */
.mt-0 {margin-top: 0;}
.mt-1 {margin-top: var(--spacing);}
.mt-2 {margin-top: calc(2 * var(--spacing));}
.mt-3 {margin-top: calc(3 * var(--spacing));}
.mt-4 {margin-top: calc(4 * var(--spacing));}

/* bottom */
.mb-0 {margin-bottom: 0;}
.mb-1 {margin-bottom: var(--spacing);}
.mb-2 {margin-bottom: calc(2 * var(--spacing));}
.mb-3 {margin-bottom: calc(3 * var(--spacing));}
.mb-4 {margin-bottom: calc(4 * var(--spacing));}



/*
	PADDING
*/

.p-1 {
	padding: var(--spacing);
}
.p-2 {
	padding: calc(2 * var(--spacing));
}
.p-3 {
	padding: calc(3 * var(--spacing));
}
.p-4 {
	padding: calc(4 * var(--spacing));
}

/* horizontal */
.ph-1 {
	padding-left: var(--spacing);
	padding-right: var(--spacing);
}
.ph-2 {
	padding-left: calc(2 * var(--spacing));
	padding-right: calc(2 * var(--spacing));
}
.ph-3 {
	padding-left: calc(3 * var(--spacing));
	padding-right: calc(3 * var(--spacing));
}
.ph-4 {
	padding-left: calc(4 * var(--spacing));
	padding-right: calc(4 * var(--spacing));
}



/*
	GRID
*/

.grid {
	display: grid;
}

.grid-2 {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-3 {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-4 {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid-5 {display: grid;grid-template-columns: repeat(5, minmax(0, 1fr));}
.grid-6 {display: grid;grid-template-columns: repeat(6, minmax(0, 1fr));}

.grid-gap {grid-gap: var(--spacing);}
.grid-gap-1 {grid-gap: var(--spacing);}
.grid-gap-2 {grid-gap: calc(2 * var(--spacing));}
.grid-gap-3 {grid-gap: calc(3 * var(--spacing));}
.grid-gap-4 {grid-gap: calc(4 * var(--spacing));}

/* grid item width  */
.gw-2 {grid-column-end: span 2;}
.gw-3 {grid-column-end: span 3;}
.gw-4 {grid-column-end: span 4;}
.gw-5 {grid-column-end: span 5;}

/* grid item height  */
.gh-2 {grid-row-end: span 2;}
.gh-3 {grid-row-end: span 3;}
.gh-4 {grid-row-end: span 4;}

.gs {opacity:0;}


/* grid-break  */
.gbr {height: calc(1 * var(--spacing));}
.gbr-1 {height: calc(1 * var(--spacing));}
.gbr-2 {height: calc(2 * var(--spacing));}
.gbr-3 {height: calc(3 * var(--spacing));}
.gbr-4 {height: calc(4 * var(--spacing));}


.grid-img, .img-wrap {
	position: relative;
}

.grid-img img, .img-wrap img {
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid-img > p {
	color: red;
}


@media only screen and (max-width: 900px) {
	.grid-2 {display: block;grid-template-columns: repeat(1, minmax(0, 1fr));}
	.grid-3 {display: block;grid-template-columns: repeat(1, minmax(0, 1fr));}
	.grid-4 {display: block;grid-template-columns: repeat(1, minmax(0, 1fr));}
	.grid-5 {display: grid;grid-template-columns: repeat(1, minmax(0, 1fr));}
	.grid-6 {display: grid;grid-template-columns: repeat(1, minmax(0, 1fr));}

	.grid-img img, .img-wrap img {
		object-fit: auto;
		position: relative;
	}
}




/*
	FLEX
*/

.f-20 {flex:20%}
.f-40 {flex:40%}
.f-60 {flex:60%}


.flex {
	display:flex;
}


/* FOOTER */


footer {
	width: 100%;
	background-color: rgb(12, 15, 19);
	background-color: rgb(23, 25, 28);
	color: white;
	display: block;
	margin-bottom: -1000px;
}

footer > .wrapper {
	width: 900px;
	margin: calc(3 * var(--spacing)) auto;
	padding: calc(2 * var(--spacing)) 0;
}

footer ul {
	list-style: none;
}

@media only screen and (max-width: 1000px) {
	footer > .wrapper {
		width: calc(100% - 6 * var(--spacing));;
	}
}


footer ul li {
	padding-bottom:0.4em;
}

footer ul li a {
	color: #cf5f6c;
	text-decoration:none;
}


/*
	CONTENT
*/
content {
	margin: calc(3 * var(--spacing)) auto;
	width: 1000px;
	display: block;
	vertical-align: top;
	background-color: inherit;
	z-index: 50;
	position: relative;
	padding:0 2em;
	/*background-color: rgba(255,255,255,1);*/
}

content.up {
	margin-top: -4em;
}

content p {
	color: #333;
}

content section:last-child {
	margin-bottom: 0;
}


@media only screen and (max-width: 1100px) {
	content {
		width: calc(100% - 6 * var(--spacing));;
	}
}


content[slim] {
	width: 700px;
}

@media only screen and (max-width: 800px) {
	content, content [slim] {
		width: calc(100vw - 4 * var(--spacing)) !important;
	}
}


/*
	WALL
*/

.wall {
	width: 100%;
	padding: 0;
}

.wallpaper {
	height: 100vh;
}

.wall > * {
	height: 100%;
	position: relative;
}






/* CARD */
.card {
	padding: calc(1 * var(--spacing));
	background-color: rgb(0, 0, 0);
	background-color: rgb(240,240,240);
	position: relative;
	color: black;
	border-radius: calc(0.15 * var(--spacing));
	box-shadow: 0 5px 10px rgba(0,0,0,0.3);
	overflow: hidden;
}

.card .card-no-padding {
	margin: calc(-1 * var(--spacing));
}

.card .card-header {
	margin: calc(-1 * var(--spacing));
	background-color: rgb(214,214,214);
	margin-bottom: 0;
	height: 100px;
}

.card.event-card .card-header {
	display: flex;
}

.card .card-chin {
	margin: calc(-1 * var(--spacing));
	padding: calc(0.5 * var(--spacing)) calc(1 * var(--spacing)) ;
	background-color: rgb(192,192,192);
	margin-top: 0;
}

.card .card-chin p {
	margin-bottom: 0;
	color: black;
}

.card .card-chin > a {
	float: right;
}



/*
	QUOTE
*/

.quote {
	margin: calc(1.5 * var(--spacing));
	position: relative;
}

.quote p {
	margin: 0;
}

.quote p:first-child {
	position: relative;
}

.quote p:first-child:before {
	content: "\275D";
	position: absolute;
	left: calc(-1.5 * var(--spacing));
	top: calc(-2 * var(--spacing));
	font-size: 6rem;
	opacity: 0.15;
}

.quote p:nth-child(2) {
	text-align: right;
}

.quote p:nth-child(2):before {
	content: "\2014";
}


/*
	MESSAGE
*/

.message {
	display: flex;
	/*width: 100%;*/
	justify-content: space-between;
	padding: calc(0.75 * var(--spacing)) calc(1 * var(--spacing));
	border-radius: 5px;
	border: 1px solid #8f8f9d;
}

.message > * {
	margin: 0;
	padding: 0;
}

.message div[onclick] {
	width: calc(1.25 * var(--spacing));
	text-align: center;
	cursor: pointer;
	-webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    margin-left: calc(1 * var(--spacing));
}

.message div[onclick]:hover {
	color: #8f8f9d;
}

.message.message-alert {
	--alert-color: #c40d23;
	border-color: var(--alert-color);
}

.message.message-alert p {
	color: var(--alert-color);
}


/*
	MISC
*/

.float-left {float: left;}
.float-right {float: right;}

.text-right {
	text-align: right;
}



.centre {
	align-items: center;
    justify-content: center;
}


#http_relay {
	margin-top:30vh;
	padding:0 4em;
	max-width:37em;
}

button, input[type='submit'] {
	/*margin-top:2em;*/
	font-size: 1rem;
	color: white;
	background-color: #0071bc;
	background-color: #991b2a;
	border: none;
	cursor: pointer;
	padding: 0.7em 1.3em;
	border-radius: 5px;
	box-shadow: 0px 2px 3px rgba(0,0,0,0.4);
	transition-duration:100ms;
	margin-right:2em;
}

button[disabled], input[type='submit'][disabled] {
	opacity: 0.7;
}

button:hover, input[type='submit']:hover {
	box-shadow: 0px 4px 7px rgba(0,0,0,0.4);
}

button:focus, input[type='submit']:focus {
	transition-duration:69ms;
	box-shadow: 0px 0px 0px rgba(0,0,0,0.4);
	background-color:#338dc9;
	background-color: #b94856;
}

button.error {
	background-color: #c91f00;
}

button.error:focus {
	background-color: #d44c33;
}

button[gray], input[type='submit'][gray] {
	color: #242424;
	background-color: #d9d9d9;
	font-weight: 300;
}

























/*
	DEPRECATED
*/
.mx-10 {margin-left:10vw}
.mx-20 {margin-left:20vw}
.mx-30 {margin-left:30vw}
.mx-40 {margin-left:40vw}
.mx-50 {margin-left:50vw}
.mx-60 {margin-left:60vw}
.mx-70 {margin-left:70vw}
.mx-80 {margin-left:80vw}
.mx-90 {margin-left:90vw}

.my-10 {margin-top:10vh}
.my-20 {margin-top:20vh}
.my-30 {margin-top:30vh}
.my-40 {margin-top:40vh}
.my-50 {margin-top:50vh}
.my-60 {margin-top:60vh}
.my-70 {margin-top:70vh}
.my-80 {margin-top:80vh}
.my-90 {margin-top:90vh}

.w-10 {width:10%}
.w-20 {width:20%}
.w-25 {width:25%}
.w-30 {width:30%}
.w-33 {width:33%}
.w-34 {width:34%}
.w-40 {width:40%}
.w-50 {width:50%}
.w-60 {width:60%}
.w-70 {width:70%}
.w-75 {width:75%}
.w-80 {width:80%}
.w-90 {width:90%}
.w-100 {width:100%}
.w-third {width:33.3333333333%}
.w-two-thirds {width:66.6666666667%}