/*************************************************************
*
*	ZERO EVERYTHING
*
*************************************************************/

*
{
	padding: 0;
	margin: 0;
}

/*************************************************************
*
*	BODY
*
*************************************************************/

body
{
	font-family: 'Lato', 'Roboto', sans-serif;
    font-weight: 400;
}

/*************************************************************
*
*	VARIABLES
*
*************************************************************/

:root
{
	/* Dimensions */
	--headerHeight: 120px;
	--topMenuTopPadding: 60px;
	--footerHeight: 100px;
	--copyrightTopPadding: 38px;

	/* Colors */
	--midBlue: #4285f4;
	--darkBlue: #1d6df2;
	--black: #000000;
	--white: #ffffff;
	--midGrey: #bbbbbb;
	--darkGrey: #444444;
}

/*************************************************************
*
*	DEFAULT TEXT SETTINGS
*
*************************************************************/

h1
{
	font-size: 2.25em;
	color: var(--midBlue);
	margin: 0 0 0.5em 0;
}

h2
{
	font-size: 1.5em;
	color: var(--black);
	margin: 0 0 0.75em 0;
}

h3
{
	font-size: 1.2em;
	color: var(--black);
	margin: 0 0 0.75em 0;
}

p
{
	font-size: 1.2em;
	color: var(--black);
	line-height: 1.6em;
	margin: 0 0 0.75em 0;
}

ul, ol
{
	margin: 0 0 0 2em;
}

li
{
	font-size: 1.2em;
	color: var(--black);
	line-height: 1.6em;
	margin: 0 0 0.75em 0;
}

a
{
	color: var(--midBlue);
	text-decoration: none !important;
}

a:hover
{
	color: var(--black);
	cursor: pointer;
}

/*************************************************************
*
*	TEXT ALIGNMENT
*
*************************************************************/

.justify
{
	text-align: justify;
}

.indent
{
	margin-left: 1.2em;
}

/*************************************************************
*
*	TEXT SIZES
*
*************************************************************/

.tinyText
{
	font-size: 0.8em;
	line-height: 1.5em;
}

/*************************************************************
*
*	COLORED TEXT
*
*************************************************************/

.lightText
{
	color: var(--midGrey);
}

/*************************************************************
*
*	OFFSETS
*
*************************************************************/

a.anchor
{
    display: block;
    position: relative;
    top: -40px;
    visibility: hidden;
}

/*************************************************************
*
*	HEADER
*
*************************************************************/

#headerOuter
{
	width: 100%;
	height: var(--headerHeight);
	background-color: var(--midBlue);
}

#headerInner
{
	width: 70%;
	height: var(--headerHeight);
	margin: 0px auto 0px auto;
}

#headerLeft
{
	clear: left;
	float: left;
	width: 30%;
	height: var(--headerHeight);
}

#headerRight
{
	float: left;
	width: 70%;
	height: var(--headerHeight);
}

/*************************************************************
*
*	LOGO
*
*************************************************************/

#logo
{

}

/*************************************************************
*
*	TOP MENU
*
*************************************************************/

#topMenu p
{
	padding: var(--topMenuTopPadding) 0 0px 0;
	color: var(--white);
	text-align: right !important;
	font-weight: 700;
}

#topMenu p a
{
	color: var(--white);
	text-decoration: none;
	padding-bottom:30px; /* Places the hover link lower */
}

#topMenu p a:hover
{
	color: var(--white);
	text-decoration: none;
	border-bottom: 3px solid var(--white);
	cursor: pointer;
}

#topMenu span
{
	margin: 0 1.25em 0 0;
}

#topMenu span:last-of-type
{
    margin: 0 0 0 0 !important;
}

/*************************************************************
*
*	MOBILE MENU
*
*************************************************************/

#hamburger
{
	position: absolute;
	top: 20px;
	right: 20px;
	display: none;
}

#hamburger i
{
	font-size: 2em;
	color: #ffffff;
}

#mobileMenu
{
	/* Display is set to none inline so onclick works first time */
	margin: 0 0 0 0;
	padding: 20px 20px 20px 20px;
}

#mobileMenu p
{
	border: 1px solid #000000 !important;
	padding: 10px 10px 10px 20px;
	font-weight: 700;
}

#mobileMenu p:last-of-type
{
	margin-bottom: -20px;
}

/*************************************************************
*
*	SECTIONS
*
*************************************************************/

.sectionOuter
{
	width: 100%;
	background-color: #ffffff;
	overflow: hidden;
}

.sectionInner
{
	width: 70%;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

/*************************************************************
*
*	ROWS
*
*************************************************************/

.row
{
	width: 100%;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

/*************************************************************
*
*	COLUMNS
*
*************************************************************/

/* Full */

.columnFull
{
	width: 100%;
}

/* 30:70 */

.columnLeft30
{
	clear: left;
	float: left;
	width: 30%;
}

.columnRight70
{
	float: left;
	width: 70%;
}

/* 70:30 */

.columnLeft70
{
	clear: left;
	float: left;
	width: 70%;
}

.columnRight30
{
	float: left;
	width: 30%;
}

/* 40:60 */

.columnLeft40
{
	clear: left;
	float: left;
	width: 40%;
}

.columnRight60
{
	float: left;
	width: 60%;
}

/* 60:40 */

.columnLeft60
{
	clear: left;
	float: left;
	width: 60%;
}

.columnRight40
{
	float: left;
	width: 40%;
}

/* 50:50 */

.columnLeft50
{
	clear: left;
	float: left;
	width: 50%;
}

.columnRight50
{
	float: left;
	width: 50%;
}

/* 33:34:33 */

.columnLeft33
{
	clear: left;
	float: left;
	width: 33%;
}

.columnMiddle34
{
	float: left;
	width: 34%;
}

.columnRight33
{
	float: left;
	width: 33%;
}

/* 25:25:25:25 */

.columnLeft25
{
	clear: left;
	float: left;
	width: 25%;
}

.columnMiddleLeft25
{
	float: left;
	width: 25%;
}

.columnMiddleRight25
{
	float: left;
	width: 25%;
}

.columnRight25
{
	float: left;
	width: 25%;
}

/*************************************************************
*
*	CONTENT
*
*************************************************************/

/* Full */

.columnFull .content
{
	padding: 40px 0px 40px 0px;
}

/* 30:70 */

.columnLeft30 .content
{
	padding: 40px 20px 40px 0px;
}

.columnRight70 .content
{
	padding: 40px 0px 0px 20px;
}

/* 70:30 */

.columnLeft70 .content
{
	padding: 40px 20px 40px 0px;
}

.columnRight30 .content
{
	padding: 40px 0px 0px 20px;
}

/* 40:60 */

.columnLeft40 .content
{
	padding: 40px 20px 40px 0px;
}

.columnRight60 .content
{
	padding: 40px 0px 0px 20px;
}

/* 60:40 */

.columnLeft60 .content
{
	padding: 40px 20px 40px 0px;
}

.columnRight40 .content
{
	padding: 40px 0px 0px 20px;
}

/* 50:50 */

.columnLeft50 .content
{
	padding: 40px 20px 40px 0px;
}

.columnRight50 .content
{
	padding: 40px 0px 0px 20px;
}

/* 33:34:33 */

.columnLeft33 .content
{
	padding: 40px 20px 40px 0px;
}

.columnMiddle34 .content
{
	padding: 40px 20px 40px 20px;
}

.columnRight33 .content
{
	padding: 40px 0px 0px 20px;
}

/* 25:25:25:25 */

.columnLeft25 .content
{
	padding: 40px 30px 40px 0px;
}

.columnMiddleLeft25 .content
{
	padding: 40px 20px 40px 10px;
}

.columnMiddleRight25 .content
{
	padding: 40px 10px 40px 20px;
}

.columnRight25 .content
{
	padding: 40px 0px 0px 30px;
}

/*************************************************************
*
*	PADDING
*
*************************************************************/

.noTopPadding
{
	padding-top: 0 !important;
}

/*************************************************************
*
*	RECAPTCHA
*
*************************************************************/

.g-recaptcha
{
	margin-bottom:1em;
}

/*************************************************************
*
*	FOOTER
*
*************************************************************/

#footerOuter
{
	width: 100%;
	height: var(--footerHeight);
	background-color: var(--darkGrey);
	margin: 0 0 0 0;

}

#footerInner
{
	width: 70%;
	height: var(--footerHeight);
	margin: 0 auto 0 auto;
	text-align: center;
}

/*************************************************************
*
*	COPYRIGHT
*
*************************************************************/

#copyright
{
	vertical-align: middle;
	box-sizing:border-box;
	padding: var(--copyrightTopPadding) 20px 0 20px;
}

#copyright p
{
	font-size: 0.9em;
	color: var(--white);
}

#copyright p a
{
	color: var(--white);
	text-decoration: none;
}

/*************************************************************
*
*	MOBILE
*
*************************************************************/

@media all and (max-width: 960px)
{
	*
	{
		clear: both;
	}

    .hideOnMobile
    {
	    display: none;
    }

    .showOnMobile
    {
	    display: block !important;;
    }

	#headerOuter, #headerInner, #headerLeft, #headerRight
	{
		width: 100%;
	}

	#logo
	{
		padding: 0 0 0 20px;
	}

	#hamburger
	{
		display: block;
	}

	.sectionOuter, .sectionInner
	{
		width: 100%;
	}

	/* 30:70 */

	.columnLeft30, .columnRight70
	{
		width: 100%;
	}

	/* 70:30 */

	.columnLeft70, .columnRight30
	{
		width: 100%;
	}

	/* 40:60 */

	.columnLeft40, .columnRight60
	{
		width: 100%;
	}

	/* 60:40 */

	.columnLeft60, .columnRight40
	{
		width: 100%;
	}

	/* 50:50 */

	.columnLeft50, .columnRight50
	{
		width: 100%;
	}

	/* 33:34:33 */

	.columnLeft33, .columnMiddle34, .columnRight33
	{
		width: 100%;
	}

	/* 25:25:25:25 */

	.columnLeft25, .columnMiddleLeft25, .columnMiddleRight25, .columnRight25
	{
		width: 100%;
	}

	.content
	{
		padding: 20px 20px 0 20px !important;
	}

	#footerOuter, #footerInner
	{
		width: 100%;
		height:120px;
	}

	#copyright
	{
		width: 100%;
	}

}