/* Notes:

*/

html {
	scroll-behavior: smooth;
}

body {
	padding: 0;
	margin:0;

}

/* Navigation */

#logo {
	height: 70px;
	display: inline-block;
	margin-top: 18px;
	margin-left: 60px;
}

#homearrow {
	width: 40px;
	margin-top: 30vh;
}

#active_first_layer {
	color: #7F98B2;
}

#active_second_layer {
	background: #7F98B2;
	color: #FFFFFF;	
}

h1 {
	display: inline-block;
}

h2 {
	font-family: "Patua One", serif;
	color: #003366;
	font-size: 1.8em;
	margin-bottom: 5px;
}

.header {
	background-color: #FFFFFF;
	border-bottom: solid 1px #DCDCDC;
	width: 100%;
	height: 100px;
	position: fixed;
	z-index: 99;
}

#desktopmenu {
	display: none;
}

@media only screen and (min-width: 1230px) {

	#desktopmenu {
		display: inline-block;
	}

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		position: absolute;
		margin-right: 50px;
	}

	ul#desktopmenu {
		right: 0;
	}

	li {
		display: inline-block;
		float: left;
		margin-right: 0px;
	}

	/*Style for menu links*/
	li a {
	    display:block;
	    min-width:125px;
	    height: 100px;
	    line-height: 100px;
	    text-align: center;
	    font-family: "Avenir", sans-serif;
	    font-size: 1.2em;
	    font-weight: lighter;
	    color: #003366;
	    background: #FFFFFF;
	    text-decoration: none;
	}


	/*Hover state for top level links*/
	li:hover a {
	    color: #7F98B2;
	}

	/*Style for dropdown links*/
	li:hover ul a {
	    background: #FFFFFF;
	    color: #003366;
	    font-size: 1.1em;
	    height: 40px;
	    line-height: 40px;
	}
	/*Hover state for dropdown links*/
	li:hover ul a:hover {
	    background: #003366;
	    color: #FFFFFF;
	}

	/*Hide dropdown links until they are needed*/
	li ul {
	    display: none;
	}
	/*Make dropdown links vertical*/
	li ul li {
	    display: block;
	    float: none;
	}
	/*Prevent text wrapping*/
	li ul li a {
	    width: auto;
	    min-width: 100px;
	    padding: 0 20px;
	}
	/*Display the dropdown on hover*/
	ul li a:hover + .hidden, .hidden:hover {
	    display: block;
	}
} 

/*-- Header --*/

h9 {
	font-family: "Patua One", serif;
	color: #003366;
	font-size: 3em;
	font-weight: lighter;
}

#main-header-div {
	padding-top: 7em;
}

#contact-main-header-div {
	padding-top: 8.5em;
}


@media screen and (max-width: 500px) {
  
	#contact-main-header-div {
		padding-top: 14em;
		margin-top: -10em;
	}

}

#sub-header-div {
	padding-top: 5.5em;
	margin: 0 20px 0px 20px;
}

#left_large {
	position: absolute!important;
	top: 100px!important;
	height: 248px!important;
	float: left !important;
	left: 0;
}

#left_small {
	position: absolute;
	top: 100px;
	height: 50px;
	float: left !important;
	left: 110px;
}

#right_large {
	position: absolute;
	top: 100px;
	height: 248px;
	float: right !important;
	right: 0;
	z-index: 0;
}

#right_small {
	position: absolute;
	top: 100px;
	height: 150px;
	float: right !important;
	right: 15px;
}

#left_mobile_small {
	display: none;
}

#left_bottom_small {
	display: none;	
}

@media screen and (max-width: 450px) {
  
	#sub-header-div {
		padding-top: 5.5em;
	}

}


@media screen and (max-width: 920px) {
  

	#left_large {
		display: none;
	}

	#right_large {
		display: none;
	}

	#left_small {
		display: none;
	}

	#left_mobile_small {
		display: none;
	}

	#left_bottom_small {
		display: none;
	}

	#right_small {
		display: none;
	}


}

h3 {
	font-family: "Avenir", sans-serif;
	font-weight: 100;
	line-height: 3;
	color: #003366;
}

#remove-text-decoration:visited, #body-remove-text-decoration:visited{ text-decoration: none !important; color:#003366; }
#remove-text-decoration:hover, #body-remove-text-decoration:hover { text-decoration: none !important; color:#7F98B2; }
#remove-text-decoration:focus, #body-remove-text-decoration:focus { text-decoration: none !important; color:#003366; }
#remove-text-decoration:hover, #remove-text-decoration:active, #body-remove-text-decoration:hover, #body-remove-text-decoration:active{ text-decoration: none; color:#003366; transition: all 0.5s ease; }

#remove-text-decoration {
	text-decoration: none;
	padding: 10px;
}

.header-background {
	background-image: url(BHCA_Images/header-background.png);
	height: 350px;
	text-align: center;
	padding-top: 100px;
}

.main-header-background {
	background-image: url(BHCA_Images/temporary-home-image.png);
	height: 100vh;
	padding-top: 300px;
	background-repeat: no-repeat;
	background-size: contain;
	text-align: center;
}

h11 {
	font-family: "Patua One", serif;
	color: #FFFFFF;
	font-size: 3.5em;
}

h12 {
	font-family: "Avenir", sans-serif;
	color: #FFFFFF;
	font-size: 2.2em;
	line-height: 50px;
	display: inline-block;
	margin-right: 10px;
	margin-left: 10px;
}

#rectangleright {
	height: 2px;
	width: 63px;
	background-color: #FFFFFF;
	display: inline-block;
	margin-bottom: 5px;
	border-radius: 5px;
}

#rectangleleft {
	height: 2px;
	width: 63px;
	background-color: #FFFFFF;
	display: inline-block;
	margin-bottom: 8px;
	border-radius: 5px;

}



#background1 {
	background-image: url(BHCA_Images/temporary-home-image.png);
	background-size: cover;
	background-position: center;
    height: 100vh;
    width: 100%;
    align-content: center;
    text-align: center;
}

#aboutus {
	background-color: #F2F2F2;
    height: 100vh;
    width: 100%;
}

#whychooseus {
	text-align: center;
	padding-left: 100px;
	padding-right: 100px;
	padding-top: 50px;
	margin-bottom: 100px;
}

h13 {
	font-family: "Avenir", sans-serif;
	color: #003366;
	font-size: 1.5em;
	line-height: 1.7em;
	font-weight: lighter;
}


@media screen and (max-width: 1500px) {
  
	#whychooseus {
		padding-left: 50px;
		padding-right: 50px;
		margin-bottom: 20px;

	}

	h13 {
		font-size: 1.3em;
	}

	#aboutus {
		height: 140%;
	}
}

@media screen and (max-width: 400px) {
  

	h13 {
		font-size: 1.3em;
	}

	#whychooseus {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 50px;
	}

	h9 {
		font-size: 2.5em;
	}



}

@media screen and (min-width: 1500px) {
  

	h13 {
		font-size: 1.75em;
		line-height: 4vh;

	}


}


@media screen and (min-width: 1600px) {
  

	h13 {
		font-size: 2em;
		line-height: 4.5vh;

	}

	

}

@media screen and (min-width: 1700px) {
  

	h13 {
		font-size: 2em;
		line-height: 4.5vh;

	}

	#whychooseus {
		
		padding-top: 100px;
	}

}

@media screen and (min-width: 1850px) {
  

	h13 {
		font-size: 2em;
		line-height: 4.7vh;

	}
}

@media screen and (min-width: 2300px) {
  

	h13 {
		font-size: 2em;
		line-height: 5vh;

	}
}


#background3 {
	background-color: #FFFFFF;
    height: content;
    width: 100%;
}

#background4 {
	background-color: #F2F2F2;
    height: content;
    width: 100%;
}

#imagelinks {
	margin-bottom: 3vh;
}

@media screen and (min-width: 1200px) {
  

	#imagelinks {
		margin-bottom: 10vh;
	}

}



#ourservices {
	text-align: center;
	padding-top: 50px;
}


#curve {
	background-color: #F2F2F2;
	height: 130vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-size: 100% 100%;
	margin-top: -60vh;
	text-align: center;
	padding-right: 80px;
	padding-left: 80px;
}

#curve2 {
	background-image: url(BHCA_Images/curve2.png);
	height: 70vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-size: 100% 100%;
	margin-top: -65vh;
	text-align: center;
}

#movedown {
	padding-top: 45vh;
}

#movedown2 {
	padding-top: 490px;
}

#movedown3 {
	padding-top: 180px;
}

#ourservices {
	text-align: center;
	margin-top: 0px;
}

#partnersdesktop {
	text-align: center;
	padding-left: 100px;
	padding-right: 100px;
	padding-top: 50px;
	padding-bottom: 5em;
}

#partnersdesktopabout {
	text-align: center;
	padding-left: 0px;
	padding-right: 00px;
	padding-top: 20px;
	padding-bottom: 20px;
}

#line1 {
	height: 300px;
	width: 1.5px;
	background-color: #DCDCDC;
	display: inline-block;
	margin-right: 30px;
	margin-left: 30px;
}

#columnimage {
	margin: 0% 0% 0% 0%;

}

@media screen and (max-width: 1200px) {
  
	#line1 {
		display: none;
	}

	
}

#CA_logo {
	display: inline-block;
	height: 140px;
	margin: 0 3% 0 3%;
	transform: translateY(20px);
}

#Xero_logo {
	display: inline-block;
	height: 100px;
	margin: 0 3% 0 3%;
}

#MYOB_logo {
	display: inline-block;
	height: 100px;
	margin: 0 3% 0 3%;
}

#PBA_logo {
	display: inline-block;
	height: 100px;
	margin: 0 3% 0 3%;
}

@media screen and (max-width: 500px) {
	.header-background {
		height: auto!important;
		padding-bottom: 20px;
		padding-left: 10px;
		padding-right: 10px;
	}

}


#largedisplay {
	display: block;
}



/* Large Devices Home Page */

@media screen and (min-width: 1500px) {
	h11 {
		font-size: 4.5em;
	}

	h12 {
		font-size: 2.6em;
		margin-top: 10px;
	}

	.main-header-background {
		padding-top: 30em;
	}

	#curve {
		margin-top: -70vh;
	}

	#rectangleright {
	height: 3px;
	width: 100px;
	margin-bottom: 8px;
	}

	#rectangleleft {
	height: 3px;
	width: 100px;
	margin-bottom: 8px;
	}



	#movedown3 {
	padding-top: 300px;
	}

	#curve2 {
		margin-top: -32vh;
	}

	#columnimage {
		height: 300px;
	}

	#CA_logo {
	display: inline-block;
	height: 200px;
	margin: 0 3% 0 3%;
	transform: translateY(20px);
	}

	#Xero_logo {
		display: inline-block;
		height: 150px;
		margin: 0 3% 0 3%;
	}

	#MYOB_logo {
		display: inline-block;
		height: 150px;
		margin: 0 3% 0 3%;
	}

	#PBA_logo {
		display: inline-block;
		height: 150px;
		margin: 0 3% 0 3%;
	}

	#curve2 {
		height: 60vh;
	}

}


#largedisplay {
	display: inline-block;
}

#mobiledisplay {
	display: none;
}

#partnersmobile {
	display: none;
}

@media screen and (max-width: 1500px) {


	#columnimage {
	height: 250px;
	}
}



/* Mobile Devices Home Page */

@media screen and (max-width: 1000px) {
	.main-header-background {
	background-image: url(BHCA_Images/temporary-home-image.png);
	height: 70vh;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	margin-bottom: 50px;
	}

	#curve {
		display: none;
	}

	#columnimage {
	margin: 0 1% 0 1%;
	width: 70%;
	height: auto;
	margin-bottom: 50px;
	}

	#largedisplay {
		display: none;
	}

	#mobiledisplay {
		display: block;
		text-align: left;
		margin-left: 30px;
		margin-right: 30px;
		margin-top: 0%;
	}

	#movedown3 {
		display: none;
	}

	#partnersdesktop {
		display: none;
	}


	#curve2 {
		display: none;
	}

	#partnersmobile {
		display: block;
		text-align: center;
		padding-left: 100px;
		padding-right: 100px;
		padding-top: 60px;
		padding-bottom: 100px;
	}

	#homearrow {
	display: none;
}

}

#ourpartnersabout {
	margin-bottom: 30px;
}

#partnersmobileabout {
	display: none;
}


@media screen and (max-width: 700px) {

	#partnersdesktopabout {
		display: none;
	}

		#partnersmobileabout {
		display: block;
		text-align: center;
		padding-left: 50px;
		padding-right: 50px;
		padding-top: 0px;
		padding-bottom: 20px;
	}


}

.sub-header-background {
	max-width: 100%;
	background-color: #D3E1EF;
	height: 248px;
	text-align: center;
	margin-top: 100px;
	background-position: center;
}

.sub-menu-header {
	margin-top: -100px !important;
	background-color: #FFFFFF;
	width: 100%;
	height: 100px;
	position: fixed;
	border-bottom: solid 1px #DCDCDC;
	z-index: 99;

}

.Header-Sub-Menus {
	margin-top: 40px;
}

#break_sub_menus {
	display: none
}


/* Text Body */

.text {
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 2%;
}

#servicesmobile {
	display: none;
}

@media screen and (max-width: 1245px) {
	#servicesmobile {
		display: block;
	}

}

h4 {
	font-family: "Avenir", sans-serif;
	color: #003366;
	font-size: 1em;
}

#body-remove-text-decoration {
	text-decoration: none;
}

#line {
	border-bottom: 1px solid #DCDCDC;
	margin-right: 0%;
	margin-left: 0%;
	margin-top: -8px;
}

/* Create three equal columns that floats next to each other */
.column3 {
  float: left;
  width: 33.3%;
  height: content; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row1:after {
  content: "";
  display: table;
  clear: both;
}

#margin-left {
	margin-left: 150px;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1400px) {
  .column3 {
    width: 50%;
  }
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 850px) {
  .column3 {
    width: 100%;
  }

  #margin-left {
  	margin-left: 50px;
  }
}

p {
	font-family: "Avenir", sans-serif;
	color: #003366;
	font-size: 1.1em;
	line-height: 2.3em;
	font-weight: lighter;
}

.read-more-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;

}
.read-more-toggle {
  display: none;

}
.read-more-toggle-label {
  display: inline-block;
  user-select: none;
  cursor: pointer;
  border: none;
  font-size: 1em;
  font-weight: bolder;
  font-family: "Avenir", sans-serif;
  color: #003366;
}
.read-more-toggle-label:after {
  content: "More >";
  display: inline-block;

}
.read-more-toggle:checked + .read-more-content {
  display: block;
  /* css animation won't work with "auto"; set to some height larger
    than the content */
  max-height: 1000px;

}
.read-more-toggle:checked + .read-more-content + .read-more-toggle-label:after {
  content: "Less >";
}

#headshot {
	width: 170px;
	margin-right: 50px;
	margin-top: 25px;
}


@media screen and (max-width: 500px) {
  
	#headshot_mobile {
	text-align: center;
	margin-top: -20px;
	display: block;
	margin-left: 25%;
	}

	#headshot {
		display: none;
		padding-right: 100px;
		margin-bottom: 30px;
	}

	.read-more-toggle-label {
	  display: block;

	}

}

#image_links {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 50px;
	line-height: 100px;
}

#image_links {
	display: block;
}


@media screen and (max-width: 1245px) {
  
	#image_links {
		display: none;
	}

}

#size {
	height: 4em;
}

#text-span {
	line-height: 50px;
	margin-top: 50px;
	vertical-align: sub;
}

#grow:hover {
	transform: scale(1.05);
	transition: 0.5s ease all;
}

/* Footer Navigation */

.wrapper {
	padding: 5px;
	max-width: 100%;
	width: 100%;
	margin: 20px auto;
}

#background-colour {
	background-color: #F2F2F2;
	margin-top: -22px;
	padding-bottom: 10px;
}

.wrapper1 {
	padding: 5px;
	max-width: 100%;
	width: 100%;
	margin: 20px auto;
	background-color: #F2F2F2;
}

.columns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 5px 0;
}

.column {
	flex: 1;
	padding: 10px;

	margin-right: 0;
	margin-right: 0;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }
}

.column1 {
	flex: 1;
	padding: 10px;

	margin-right: 0;
	margin-right: 0;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }
}

@media screen and (min-width: 1250px) {
  
	.column {
		padding: 10px;
		&:first-child { margin-left: 0; }
		&:last-child { margin-right: 0; }
	}

	.wrapper {
	padding: 5px;
	max-width: 91%;
	width: 100%;
	margin: 20px auto;
	}

	.wrapper1 {
	padding: 5px;
	max-width: 91%;
	width: 100%;
	margin: 20px auto;
	}

}

@media screen and (max-width: 1100px) {

	.wrapper {
		display: none;
	}

	.wrapper1 {
		display: none;
	}

}

footer {
	padding: 0 15px;
}

#bold {
	font-weight: bold;
}

h6 {
	font-family: "Patua One", serif;
	font-size: 1.5em;
	margin-top: 0;
	color: #003366;
	font-weight: lighter;
}

h7 {
	font-family: "Avenir", sans-serif;
	font-size: 1.05em;
	line-height: 3em;
	font-weight: lighter;
	color: #003366;
}

@media screen and (max-width: 980px) {
  .columns .column {
		margin-bottom: 5px;
    flex-basis: 40%;
		&:nth-last-child(2) {
			margin-right: 0;
		}
		&:last-child {
			flex-basis: 100%;
			margin: 0;
		}
	}
}

@media screen and (max-width: 450px) {
	.columns .column {
		flex-basis: 100%;
	}
}

@media screen and (max-width: 680px) {
	.columns .column {
		flex-basis: 100%;
	}
}


/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #FFFFFF;
  cursor: pointer;
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  margin-bottom: -40px;
  height: 30px;
}

.collapsible1 {
  background-color: #F2F2F2;
  cursor: pointer;
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  margin-bottom: -40px;
  height: 30px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #FFFFFF;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active1, .collapsible1:hover {
  background-color: #F2F2F2;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 10px;
  display: none;
  overflow: hidden;
  background-color: #FFFFFF;
  margin-left: 0;
  text-align: center;
}

/* Style the collapsible content. Note: hidden by default */
.content1 {
  padding: 0 10px;
  display: none;
  overflow: hidden;
  background-color: #F2F2F2;
  margin-left: 0;
  text-align: center;
}

#arrow {
	height: 10px;
}

.footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
  background-color: #003366;
  color: white;
  text-align: center;
}

h8 {
	font-size: 1.1em;
	font-family: "Avenir", sans-serif;
	font-weight: lighter;
}

#copyright {
	float: left;
	margin-top: 27px;
	margin-left: 5%;
	display: inline-block;
}

#infolink {
	margin-right: 30px;
	text-decoration: none;
	color: #FFFFFF;
}

#information {
	float: right;
	margin-top: 24px;
	margin-right: 3%;
	display: inline-block;
}

#twentyeight-logo {
	height: 23px;
	display: inline-block;
	margin-bottom: -3px;
}


@media screen and (max-width: 650px) {
	.footer {
		height: 130px;
	}
}

#break {
	display: none;
}

@media screen and (max-width: 463px) {
	#break {
		display: block;
	}

	#copyright {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}

	#information {
		float: none;
		margin-right: 0;
		margin-left: 0;
		line-height: 50px;
	}

	.footer {
		height: 200px;
		text-align: center;
	}

	.centered {
		text-align: center;
	}
}


#mobilemenu {
	display: none;
}


/* Style inputs */
input[type=text], select, textarea {
  padding: 10px;
  border: 1px solid #D3E1EF;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  display: inline-block;
  -webkit-appearance: none;
}

textarea {
  margin-left: 8.99em;
  margin-top: -45px;
}

input[type=submit] {
  background-color: #FFFFFF;
  color: #003366;
  padding: 12px 40px;
  font-family: "Avenir", sans-serif;
  font-size: 1.1em;
  border: none;
  cursor: pointer;
  border-radius: 20px;
  -webkit-appearance: none;
  opacity: 1;
}

input[type=submit]:hover {
  background-color: #003366;
  color: #FFFFFF;
  transition: 0.8s all ease;
  -webkit-appearance: none;
  opacity: 1;
}

#submitcenter {
	text-align: center;
}

textarea:focus, input:focus{
    outline: none;
    -webkit-appearance: none;
}

/* Style the container/contact section */
.container {
  background-color: #D3E1EF;
  padding: 10px;

}

/* Clear floats after the columns */
.row1:after {
  content: "";
  display: table;
  clear: both;
}


#fname {
	font-family: "Avenir", sans-serif;
	font-size: 1em;
	color: #003366;
	float: right;
	margin-right: 20px;
	margin-left: 2em;
	width: 95%;
	text-transform: none;
}

#fnamelabel {
	font-family: "Avenir", sans-serif;
	font-size: 1em;
	color: #003366;
	margin-left: 2em;
}

#hide {
	margin-bottom: 20px;
}

#subfnamelabel {
	font-family: "Avenir", sans-serif;
	font-size: 0.8em;
	color: black;
	margin-left: 2.7em;
}

#myList {
	font-family: "Avenir", sans-serif;
	color: #003366;
	font-size: 1em;
	border-radius: 0;
}

#number {
	border: none;
	padding: 10px; 
	font-family: "Avenir", sans-serif;
	font-size: 1em;
	color: #003366;
	float: right;
	margin-right: 20px;
	margin-left: 2em;
	width: 95%;
	margin-top: 6px;
}


@media screen and (max-width: 1500px) {
  #fname {
  	width: 93.5%;
  }

  #number {
  	width: 93.5%;
  }
}

@media screen and (max-width: 1300px) {
  #fname {
  	width: 93.5%;
  }

  #number {
  	width: 93.5%;
  }
}

@media screen and (max-width: 1100px) {
  #fname {
  	width: 91.5%;
  }

  #number {
  	width: 91.5%;
  }
}


@media screen and (max-width: 1000px) {
  #fname {
  	width: 91%;
  }

  #number {
  	width: 91%;
  }
}


@media screen and (max-width: 850px) {
  #fname {
  	width: 90%;
  }

  #number {
  	width: 90%;
  }
}


@media screen and (max-width: 700px) {
  #fname {
  	width: 89%;
  }

  #number {
  	width: 89%;
  }
}


@media screen and (max-width: 500px) {
  #fname {
  	width: 83%;
  }

  #number {
  	width: 83%;
  }
}




/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  input[type=submit] {
    width: 80%;
    margin-top: 0;
  }

  #fnamelabel {
  	margin-left: 1em;
  }

  #fname {
  	margin-left: 1em;
  }
}


@media only screen and (max-width: 1230px) {

	#mobilemenu {
		display: block;
	}

	body h1 {
	  position: fixed;
	  top: 40px;
	  left: 40px;
	  z-index: 6;
	  font-size: 20px;
	  font-weight: 900;
	  font-family: sans-serif;
	  text-transform: uppercase;
	  color: #000000;
	}
	body h1 > span {
	  text-transform: none;
	  opacity: 0.5;
	  font-weight: 300;
	  font-size: 12px;

	}
	body input + label {
	  position: absolute;
	  top: 40px;
	  right: 40px;
	  height: 20px;
	  width: 15px;
	  z-index: 5;

	}
	body input + label span {
	  position: absolute;
	  width: 100%;
	  height: 2px;
	  top: 50%;
	  margin-top: -1px;
	  left: 0;
	  display: block;
	  background: #003366;
	  transition: 0.5s;
	}
	body input + label span:first-child {
	  top: 4px;
	}
	body input + label span:last-child {
	  top: 16px;
	}
	body label:hover {
	  cursor: pointer;
	}
	body input:checked + label span {
	  opacity: 0;
	  top: 50%;
	}
	body input:checked + label span:first-child {
	  opacity: 1;
	  transform: rotate(405deg);
	}
	body input:checked + label span:last-child {
	  opacity: 1;
	  transform: rotate(-405deg);
	}
	body input ~ nav {
	  background: #FFFFFF;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 0px;
	  z-index: 3;
	  transition: 0.5s;
	  transition-delay: 0.5s;
	  overflow: hidden;
	}
	body input ~ nav > ul {
	  text-align: center;
	  position: absolute;
	  top: 5%;
	  left: 0%;
	  right: 10%;
	  list-style: none;
	}
	body input ~ nav > ul > li {
	  opacity: 0;
	  transition: 0.5s;
	  transition-delay: 0s;
	}
	body input ~ nav > ul > li > a {
	  text-decoration: none;
	  color: #003366;
	}


	body input:checked ~ nav {
	  height: 100%;
	  transition-delay: 0s;
	}
	body input:checked ~ nav > ul > li {
	  opacity: 1;
	  transition-delay: 0.5s;

	}

	#logo {
		height: 50px;
		display: inline-block;
		margin-top: 28px;
		margin-left: 16px;
	}

	h10 {
		font-size: 1.2em;
		font-family: "Avenir", sans-serif;
		font-weight: lighter;
		line-height: 40px;
	}

	li {
		position: sticky;

	}

	#center {
		overflow: scroll;
	}

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
  	#logo {
  		height: 43px;
  		margin-top: 30px;
  	}
}

#article {
	height: content;
	background-color: #D3E1EF;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 25px;
}

@media only screen and (max-width: 450px) { 

	#article {
		padding-left: 22px;
		padding-right: 22px;
	}
	}

h5 {
	font-family: "Patua One", serif;
	color: #003366;
	font-size: 2em;
}

#heading {
	margin-top: 0px;
	padding-top: 30px;
	margin-bottom: 5px;
}