/* DAC GAAD Styling */
:root {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 500;

	--dac-DarkBlue: #234A70;
	--video-width: 800px;
}

header, footer {
    padding: 25px;
}

footer {
	margin-top: 1em;
	margin-bottom: 3em;
}

main {
	postion: relative;
	margin: auto;
	max-width: 1024px;
}

/* Navigation Lists */

ul.navigation {
	margin: 2px;
	padding: 1em;
	list-style-type: none;
}
ul.navigation > li {
	padding: 1em;;
	display: inline;
}
ul.navigation > li > a {
	padding: 0.2em;;
}

/* basic colouring */

.bg-blue {
	background: var(--dac-DarkBlue);
	color: white;
}

.bg-white {
	background: #FFFFFF;
	color: var(--dac-DarkBlue);
}

.bg-blue a[href], .bg-blue button {
    background: var(--dac-DarkBlue);
    color: #FFFFFF;
}
.bg-white a[href], .bg-white button {
    background: #FFFFFF;
    color: var(--dac-DarkBlue);
    transition: all 0.1s ease-in-out;
}

/* Curves */

nav.curved, section.curved, header.curved, footer.curved {
  border-radius: 25px;
}
.curved > .navigation > li > a, button.curved {
  border-radius: 5px;
}


/* expanding stuff */

button.transcript, .expand {
	margin-top: 1em;
	margin-left: 20px;
	margin-right: 20px;
	width: 600px;
}

button[aria-expanded] {
	border: 2px solid var(--dac-DarkBlue);
	background-color: Black;
	color: white;
}

*[aria-expanded] + .expand {
	display: none;
}
*[aria-expanded="true"] + .expand {
	display: block;
}

.expand {
	border: 1px solid grey;
	padding: 0.5em;
}

/* Hover/ Focus Change */
a[href]:focus, a[href]:hover {
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}
button:focus, button:hover {
	text-decoration: underline;
	cursor: pointer;
}

.bg-blue a[href]:focus, .bg-blue a[href]:hover {
	background-color: black;
	transition: all 0.7s ease-in-out;
}
.bg-white a[href]:focus, .bg-white a[href]:hover {
	background-color: #FFFFEE;
	transition: all 0.7s ease-in-out;
}

button[aria-expanded]:focus, button[aria-expanded]:hover {
	background-color: var(--dac-DarkBlue);
	transition: all 0.7s ease-in-out;
}

/* General additions */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

video {
	border: 1px solid black;
	width: var(--video-width);
	/* height: 480px */
}

address, em, i {
	font-style: normal;
}
em {
	font-weight: 600;
}

i.ico > svg {
	width: 1em;
	height: 1em;
}

header img {
	width: 600px;
}

/* Flex */
.row {
  display: flex;
  flex-direction: row;
}

.col {
	margin: 1em;
}
.col.half {
	width: 50%;
}



.flex, .flex-container {
  display: flex;
}

.flex.vertical {
  flex-direction: column;
}
.flex.horizontal {
  flex-direction: row;
}

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

.flex.h-center {
  justify-content: center;
}
.flex.left {
  justify-content: flex-start;
}
.flex.right {
	justify-content: flex-end;
}
.flex.spaced {
  justify-content: space-around;
}
.flex.line-spaced {
  justify-content: space-between;
}

.flex.v-center {
   align-items: center;
}
.flex.top {
  align-items: flex-start;
}
.flex.bottom {
  align-items: flex-end;
}

/* reflow */
@media only screen and (max-width: 800px) {
	video {
		width: 100%;
	}
}
@media only screen and (max-width: 1024px) {
	footer > .flex {
		display: block;
	}
}

@media only screen and (max-width: 700px) {
	header img {
		width: 100%;
	}
	ul.navigation > li {
		padding: 0.2em;
		display: block;
	}
}

/* tables */
table {
    border-collapse: collapse;
    margin: 1em;
}
table, th, td {
    border: 2px solid black;
}
th, td {
    padding: 0.5em;
}
th {
    background-color: lightgray;
    color: black;
    font-weight: 700;
}