:root {
  --color-bg-grey: #e8e8e8;
  --color-bg-dark-grey: #c7c5c5;
  --color-blue: #0194de;
}
@media(min-width: 767px) {
	section.breadcrumb h1{
		font-size:medium!important;
		text-transform:uppercase;
	}
	section.breadcrumb h2{
		font-size:xx-large!important;
		text-transform:uppercase;
	}
	.ast-separate-container {
		background-color: white;
	}
	/**
	* Header should cover the whole width, so we override the default margins & paddings
	***/
	.ast-container, #primary {
		max-width: 100% !important;
		width: 100% !important;
		margin: 0px !important;
		padding: 0px !important;
	}
	/**
	* Some sections should be contained so we apply the css of the default container!
	**/
	.contained {
		max-width: 1240px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 20px;
		padding-right: 20px;
	}
	section {
		margin-bottom: 80px;
	}
	#content {
    	padding-top: 150px;
	}
	ul.faqs {
		display: flex;
		flex-direction: column;
		list-style: none;
		margin-left: 0px;
	}
	ul.faqs li.faq .title {
		width: 100%;
		text-align: left;
		display: inline-block;
		background-color: white;
		color: var(--color-blue);
		padding: 20px 0px;
	    font-weight: bolder;
	}
	ul.faqs li.faq .title::after {
		content: url('./icons/blue-arrow-down.png');
		margin-left: 10px;
		transition: 0.5s;
	}
    ul.faqs li.faq .text {
		display: none;
		margin-top: 20px;
		margin-bottom: 20px;
		line-height: 1.6;
		font-weight: bold;
	}
    ul.faqs li.faq .title.active::after {
		transform: rotate(180deg);
		display: inline-block;
	}
    ul.faqs li.faq .title.active ~ .text {
		display: inline-block;
	}
	
}