/* 1. TYPOGRAPHY (Font) */

	@import url('https://fonts.googleapis.com/css?family=Montserrat');
	@import url('https://fonts.googleapis.com/css?family=Open+Sans');

	p{
		font-family: 'Open+Sans', sans-serif;
		
	}
	a{
		font-family: 'Open+Sans', sans-serif;
		color: #000000;
	}
	
	a:hover {
		color: #a91101;
	}
	
	h5,h6,span{
		font-family: 'Montserrat', sans-serif;
	}
	
	h3{
		font-family: 'Montserrat', sans-serif;
		color: #a91101;
	}
	
	h1,h2,h4{
		font-family: 'Montserrat', sans-serif;
		color: #a91101;
	}
		
/* 2. HEADER */

	/* Header outer box*/
	#headerNavigationContainer{
		background-color: white;
		}

/* 3. NAVIGATION */

	/* Header navigation*/
	#headerNavigationContainer > div > nav{
		background-color: white;
		p,h1,h2,h3,h4,h5,a,h6{
			font-family: 'Open+Sans', sans-serif;
			color: #000000;
		}
	/* Header navigation font colour*/
	#navigationPrimary{
		color: black;
	}

/* 4. ACCORDIONs */

/* Style for the <summary> element */
details summary {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin-top: 5px;
}

/* Hover effect for the <summary> element */
details summary:hover {
    background-color: #ccc;
}

/* Style for the content inside <details> */
details p {
    padding: 18px;
    background-color: white;
    margin: 0;
    border-top: 1px solid #ccc;
}

/* Additional styling to ensure the collapsible sections look consistent */
details {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Optional: Add some basic animation for the open/close action */
details[open] summary {
    background-color: #ddd;
}

details[open] p {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}