:root
{
	--grey   : rgba( 70,  70,  70, 1.0);
	--orange : rgba(229,  89,  28, 1.0);
	--white  : rgba(255, 255, 255, 1.0);
}

body
{
	color       : var(--grey);
	font-family : Calibri, Arial;
	font-size   : 1.07vw;
	line-height : 150%;
	margin      : 0;
}

/* TOP.PHP */

.nav_a
{
	color           : var(--grey);
	text-decoration : none;
}

.active, .nav_a:hover
{
	border-bottom : 3px solid var(--orange);
}

.nav_a:visited
{
	color : var(--grey);
}

.nav_centre
{
	background-color : white;
	margin           : 0 auto;
	overflow         : hidden;
	position         : fixed;
	text-align       : center;
	top              : 0;
	width            : 100%;
	z-index          : 10;
}

.nav_div
{
	display        : inline-block;
	padding        : 0 2vw;
	vertical-align : middle;
}

.nav_li
{
	padding : 0 1vw;
	display : inline;
}

.nav_logo
{
	height : 5vh;
}

.nav_name
{
	font-weight    : bold;
	letter-spacing : 0.2vw;
	text-transform : uppercase;
}

.nav_ul
{
	list-style-type : none;
	text-align      : center;
}

/* LAYOUT */

.footer_centre
{
	background-color : var(--orange);
	bottom           : 0;
	color            : var(--white);
	margin           : 0 auto;
	overflow         : hidden;
	position         : fixed;
	text-align       : center;
	width            : 100%;
	z-index          : 10;
}

.img_container_1
{
	margin-top : 7vh;
	position   : relative;
}

.img_text_1
{
	left       : 50%;
	position   : absolute;
	top        : 15%;
	transform  : translate(-50%, -50%);
}

.img_container_2
{
	position   : relative;
	text-align : center;
}

.img_text_2
{
	left       : 0;
	margin     : 0 auto;
	position   : absolute;
	text-align : center;
	top        : 10%;
	width      : 100%;
}

.panel
{
	background-color : white;
	margin           : 2vh 0.75vw;
	padding          : 1vh 1vw;
	text-align       : center;
}

.panel_nodec
{
	font-size  : 90%;
	margin     : 2vh 0.25vw 2vh 0.25vw;
	padding    : 0.75vh 0.75vw;
	text-align : left;
	vertical-align: middle;
}

.panel1
{
	grid-area : panel1;
	width     : 90%;
}

.panel2
{
	grid-area : panel2;
	width     : 90%;
}

.panel3
{
	grid-area : panel3;
	width     : 90%;
}

.panel3_middle
{
	align-items : center;
	display     : flex;
	grid-area   : panel3;
}

.panel4
{
	grid-area : panel4;
	width     : 90%;
}

.panel5
{
	grid-area : panel5;
	width     : 90%;
}

.sub_panel1
{
	border     : 1px var(--grey) solid;
	grid-area  : sub_panel1;
	padding    : 0 1vw;
	text-align : left;
}

.sub_panel2
{
	align-items : center;
	border      : 1px var(--grey) solid;
	border-left : none;
	display     : grid;
	grid-area   : sub_panel2;
	padding     : 0 1vw;
}

.sub_panel_2_container 
{
	display               : grid;
	grid-template-columns : 1fr 2fr;
	grid-template-rows    : auto;
	grid-template-areas   : 
		"sub_panel1 sub_panel2";
	margin                : 0 1vw;
}

.panel_4_container 
{
	display               : grid;
	grid-template-columns : 1fr 1fr 2fr;
	grid-template-rows    : auto;
	grid-template-areas   : 
		"panel1 panel2 panel3";
}

.panel_5_container 
{
	display               : grid;
	grid-gap              : 1vw;
	grid-template-columns : 1fr 2.2fr 2.2fr 2.2fr 1fr;
	grid-template-rows    : auto;
	grid-template-areas   : 
		"panel1 panel2 panel3 panel4 panel5";
	align-items           : center;
	justify-items         : center;
}

/* STYLES */

button
{
	background-color : var(--grey);
	border           : 0;
	border-radius    : 0.5vw;
	color            : var(--white);
	cursor           : pointer;
	font-weight      : bold;
	margin-top       : 2vh;
	padding          : 1vh 1vw;
}

button:hover
{
	background-color : var(--orange);
}

h2
{
	color : var(--orange);
}

h4
{
	margin : 0;
}

.bold
{
	font-weight : bold;
}

.centre
{
	text-align: center;
}

.div_mt
{
	margin-top : 1.5vh; 
}

.emphasis
{
	font-style : italic;
}

.font_size_large_percent
{
	font-size : 150%;
}

.font_size_larger_percent
{
	font-size : 450%;
}

.line_height_large_percent
{
	line-height : 200%;
}

.line_height_larger_percent
{
	line-height : 250%;
}

.link
{
	color           : var(--orange);
	text-decoration : none;
}

.mb_2
{
	margin-bottom : 2vh;
}

.mt_10
{
	margin-top : 10vh;
}

.mt_2
{
	margin-top : 2vh;
}

.uppercase
{
	text-transform : uppercase;
}

.table
{
	display : none;
}

.thead_grey
{
	background-color : var(--grey);
	color            : var(--white);
	display          : table-header-group;
}

.thead_orange
{
	background-color : var(--orange);
	color            : var(--white);
	display          : table-header-group;
}

.tbody
{
	display : table-row-group;
}

.trow
{
	display : table-row;
}

.tcell
{
	display : table-cell;
}