html, body
{
	margin: 0;
	padding: 0;
}

body
{
	background-color: #f7f7f7;
	color: black;
	font-family: "Corbel", "Helvetica Neue", "HelveticaNeue", "Helvetica", sans-serif;
	display: grid;
	grid-template-columns: 260px 4fr;
	grid-template-areas: "ss aa" "ss ff";
	min-height: 100vh;
}

#header
{
	background-color: #141414;
	color: white;
	position: fixed;
	width: 100vw;
	left: 0;
	top: 0;
	z-index: 20;
}

#sidebar
{
	grid-area: ss;
	padding-left: 4vmin;
	background-color: #141414;
	color: #414141;
}

#sidebar .sidebar
{
    margin-top: 95px;
	position: sticky;
	top: 84px;
	left: 0;
	z-index: 10;
}

#sidebar nav { margin-right: 4vmin; }

#rightbar {
    grid-area: rr;
}

#content article, #footer { padding: 0 2vmax; }
#content article.noPadding { padding: 0; }

#content article {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}

#content
{
	grid-area: aa;
	padding-top: 85px;
}

#footer
{
	grid-area: ff;
	padding-top: 4vmin;
	padding-bottom: 5vh;
	font-size: 0.9rem;
}

#sidebar .sidebar ul, #sidebar .sidebar li, .topnav ul, .topnav li
{
	margin: 0;
	padding: 0;
}

.topnav ul
{
    padding-left: 4vmin;
	padding-right: 4vmin;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	place-items: end;
	justify-content: space-between;
	min-height: 55px;
}

.topnav li:first-child {
    margin-right: auto;
}

.topnav .sideLogo {
    margin-left: -0.5em;
    min-width: 50px;
}

#header li a
{
	display: inline-block;
	padding: 1em 0.5em;
	font-weight: 900;
}

.topnav a { text-transform: uppercase; }

#sidebar .sidebar ul
{
	list-style: none;
	display: flex;
	flex-direction: column;
	place-items: start;
}

#sidebar .sidebar li > ul { margin-bottom: 0.2em; }

#sidebar .sidebar li
{
	font-size: 1.4rem;
	padding: 0.2em 0;
}

#sidebar .sidebar li li { font-size: 0.8em; }

img
{
	max-width: 100%;
	height: auto;
}

main h1
{
	text-transform: uppercase;
	color: #ff6600;
	font-weight: 900;
	font-size: 1.6rem;
	margin-top: 0;
	padding-top: 1em;
}
main h2
{
	text-transform: uppercase;
	color: #ff6600;
	font-size: 1.2rem;
}
main h3
{
	text-transform: uppercase;
	color: #ff6600;
	font-size: 1rem;
}
a { text-decoration: none; }
nav .active > a { color: #ff6600; }
.topnav li.fixedLink > a { color: #178aff; }
.topnav a { color: white; }
.topnav a:hover { color: #AFAFAF; }
.topnav a:active { color: #446BC4; }
nav.topnav .active > a { color: #ff6600; }

#sidebar a
{
	color: white;
	font-weight: 900;
	text-transform: uppercase;
}

.home #sidebar a {
    color: black;
}

#sidebar h1
{
	text-transform: uppercase;
	font-size: 1em;
	color: #ff6600;
}

#sidebar a:hover, #sidebar a:focus { color: #AFAFAF; }
#sidebar a:active { color: #446BC4; }
#sidebar a.ancestor { color: #808080; }


#sidebar a.active { color: #ff6600; }

#footer address
{
	display: inline;
	font-style: normal;
}

.carre {
    margin: 0 -2vmax;
    padding: 2vmax;
    column-width: 34rem;
    column-gap: 2rem;
    orphans: 3;
}
#content article.noPadding .carre { margin: 0; }

.carre h1, .carre h2, .carre h3, .carre h4, .carre h5 {
    column-span: all;
}

p.upper {text-transform: uppercase;}

.slogan { color: #da1d8e; }

.gallery {
    list-style: none;
    margin: 0;
    margin-top: 8px;
    padding: 0;
}

.galleryEven, .galleryTight {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.galleryEven > * {
    flex: 0 0 20%;
}

.galleryTight > * {
    flex: 0 0 10%;
}

.galleryUneven {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.galleryBig ul {
    column-width: 34rem;
    column-gap: 2rem;
}

.gallery li {
    margin: 0 0 1em 0;
    padding: 0;
    display: inline-block;
    text-align: center;
}

.gallery.one li { width: 100%; }
.gallery.two li { width: 49.7%; }
.gallery.three li { width: 33%; }
.gallery.six li { width: 16.3%; }

.galleryBig li
{
	text-transform: uppercase;
	font-weight: 900;
}

.galleryBig img
{
    display: block;
	margin: 0.5em 1em;
	vertical-align: middle;
}
.galleryBig a
{
	display: inline-block;
	border: solid 0.25em transparent;
}

.dark #content .galleryBig a:hover,
.inverted #content .galleryBig a:hover
{
	background-color: #5C2501;
	text-decoration: none;
}

.dark #content .galleryBig a:active,
.inverted #content .galleryBig a:active { border-color: #446BC4; }

.pleaseClick
{
	text-transform: uppercase;
	text-align: right;
	font-weight: 900;
	margin: 0;
	padding: 0;
}

.pleaseClick em
{
    color: #ff6600;
    font-style: normal;

}

.downloadButton {
    float: right;
    text-align: center;
}

.downloadList {float: right;}
.downloadList li { text-align: center; }

.downloadButton a:link,
.downloadList a:link { color: black; }
.downloadButton a:hover,
.downloadList a:hover { color: #ff6600; }
.downloadButton svg:hover,
.downloadList svg:hover { fill: #ff6600; }
.downloadButton a:active,
.downloadList a:active { color: #446BC4; }

.icon { vertical-align: middle; }

.bigLeftGrid {
    max-width: 100vw;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: repeat(1fr);
}
.bigLeftGrid, .bigLeftGrid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bigLeftGrid ul {
    display: inline-block;
}
.bigLeftGrid li {
    margin: 0;
    padding: 0;
}

.bigLeftGrid li>img {
    object-fit: cover;
}

/*
ul.gridCarre
{
    height: 84%;
	padding: 8%;
}
 */

.socialIcon img
{
	max-width: 42px;
	margin-right: 1em;
	float: right;
}

.col4
{
	width: 23%;
	display: inline-block;
	vertical-align: top;
	margin: 0;
}


dl.flat-list dd, dl.flat-list dt
{
	margin: 0;
	padding: 0;
}
dl.flat-list dt {
    -webkit-column-break-after: avoid-column;
    break-after: avoid;
}
dl.flat-list dd
{
    -webkit-column-break-before: avoid-column;
	break-before: avoid;
}


/* Page specific ------------------------------------------------------------ */

.teamMembers .downloadButton {
    margin-top: 2em;
    margin-right: 2em;
}
.teamMembers
{
    width: 100%;
	margin: 0;
	padding: 0;
	display: grid;
	grid-gap: 20px 10px;
	grid-template-columns: 1fr 1fr;
	justify-content: space-evenly;
	align-content: center;
}

.teamMembers p {
	margin: 0;
	padding: 0 0 0 9em;
}

.teamMembers li {
    display: inline-block;
}

.teamMembers .teamName
{
    margin-top: 2.5em;
	font-weight: 900;
	text-transform: uppercase;
}
.teamMembers .personPhoto
{
	float: left;
	padding-left: 0;
}

/* ------------- */

.wideGallery {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wideGallery li {
    position: relative;
}
.wideGallery p {margin: 0; padding: 0;}
.wideGallery .wideTitle {
    color: #ff6600;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.25em;
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    pointer-events: none;
}
.wideGallery .wideBottom {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 0.75em;
    text-align: right;
    margin-bottom: 0.5em;
}

.wideGallery .wideBottom em {
    color: #ff6600;
    font-style: normal;
}



.credits-with-poster.col-1-4 { width: 27%; }
.credits-with-poster.col-2-4 dt:first-child
{
	padding-top: 1em;
	padding-bottom: 1em;
}

.credits-with-poster.col4 dt {padding-top: 1em;}

.credits-with-poster.col-3-4 dt:first-child,
.credits-with-poster.col-4-4 dt:first-child {padding-top: 4em;}

/* ------------------------------------------------------------ Page specific */


@media screen and (min-width: 1900px)
{
    body {
        grid-template-columns: 260px 4fr 1fr;
        grid-template-areas: "ss aa rr" "ss ff rr";
    }


}

@media screen and (max-width: 800px)
{
	body
	{
		grid-template-columns: 1fr;
		grid-template-areas: "hh" "aa" "ff";
	}
	body.home {
	    grid-template-areas: "hh" "aa" "ff";
	}

	#header { padding: 0; }
	#content { padding-top: 0; }
	#sidebar, #header { position: static; }

	#sidebar {display: none;}
	.home #sidebar {display: block;}
	#sidebar .sidebar {
	    margin-top: 12px;
	}

	#sidebar .sidebar ul
	{
		margin-top: 12px;
		margin-bottom: 0;
		place-items: center;
	}

	.gallery {
	    display: grid;
        grid-template-columns: 1fr;
    }
    .gallery.two li, .gallery.three li, .gallery.six li,
    .gallery.two img, .gallery.three img, .gallery.six img {
        width: 100%;
    }


    .teamMembers, .bigLeftGrid { grid-template-columns: 1fr; }

    .col4 { width: auto; display: block; }
    .credits-with-poster.col-2-4 dt:first-child {padding-bottom: 1em;}
    .credits-with-poster.col-3-4 dt:first-child,
    .credits-with-poster.col-4-4 dt:first-child {padding-top: 0;}
}