html																{}
body																{color:#444; font-size:16px; font-weight: 400; font-family: 'Lato', sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} 

h1, h2, h3, h4, .h1, .h2, .h3, .h4									{word-wrap:break-word; line-height: 1.2em; font-family: 'Raleway', sans-serif;}
h1, .h1																{font-size: 42px; font-weight: 600; color: #5C2282; margin-bottom: 20px;}
h2, .h2																{font-size: 24px; font-weight: 600; color: #E3000F;}
h3, .h3																{font-size: 18px; font-weight: 700; color: #E3000F; margin-bottom: 5px;}
h4, .h4																{font-size: 20px; font-weight: 700;}

a                                                                   {}
a:link, a:visited, a:active                                         {}
a:hover                                                             {}
 
strong                                	                            {font-weight: 700; font-style: inherit; color: #5C2282;}
em                                    	                            {font-style: italic; font-weight: inherit;}

.basicContainer   													{max-width: 1360px; margin:0px auto; padding:60px 80px 30px 80px;}

#stickyTopBar {width: 100%; background-color: #fff; box-shadow: 4px 4px 10px 0 rgba(0,0,0,.05); position: fixed; left: 0; top: 0; z-index: 1003; transition: height ease 0.3s; /* fade out */}
#stickyTopBar, #stickyTopBarGhost {height: 90px;}

	#stickyTopBar .basicContainer	{height:100%; display:flex; align-items:center; padding-top: 0; padding-bottom: 0;}
		#stickyTopBar #logo {display: flex; text-decoration: none; font-family: 'Raleway', sans-serif; margin-right: 20px;}
			#stickyTopBar #logo img{display:block; height:70px;}
			#stickyTopBar span#logoText 	{display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; font-size: 26px; font-weight: 500; margin-left: 10px; transition: font-size ease 0.3s, margin-left ease 0.3s; line-height: 0.9em; text-transform: lowercase;}
				span#logoText span:nth-child(1) {color: #E3000F;}
				span#logoText span:nth-child(2) {color: #5C2282;}
				span#logoText span:nth-child(3) {color: #C3A1DA;}

		#stickyTopBar .partButtonContentContainer {margin-left: auto; padding-bottom: 0px;}
		#stickyTopBar .partButton {margin-bottom: 0;}
   			
#stickyTopBar.scrolled                      {height:46px; transition: height ease 0.5s; /* fade in */}
	#stickyTopBar.scrolled #logo img{height:35px;}
	#stickyTopBar.scrolled span#logoText  {font-size: 14px; margin-left: 5px;}

/***********************************************
Home
***********************************************/

#locationList  {width: calc(100% + 20px); display: flex; flex-wrap: wrap; margin:0px -10px 0 -10px;}
	.locationItem 		{margin:0px 10px 20px 10px; flex: 1 1 auto; min-width: calc(33.3333333333% - 20px); max-width: calc(50% - 20px); transition:background-color 0.3s ease; padding:20px; display: flex; justify-content: center; align-items: center; line-height: 1.2em; height:300px; text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 600; flex: 1 1 auto; background-color: #E3000F; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); border-radius: 10px;}
	.locationItem:hover {background-color: #5C2282;}
		.locationItem .h1 {color: #fff; margin-bottom: 0;}

header          			{background-color: #8b1676;}
	header .basicContainer 		{padding-top: 0; padding-bottom: 0;}
		header h1, header .h1		{color: #fff; padding:14px 0; margin-bottom: 0; display: block; font-size: 24px; text-transform: capitalize;}

#introContainer 		{font-size: 18px; border-bottom: solid 1px rgba(0, 0, 0, 0.1);}
	#introContainer .basicContainer {}
		#introContainer .h1 {color: #E3000F;}
		#introContainer .partContentText {max-width: 900px;}

/***********************************************
Aanbod
***********************************************/

#respijtAanbodContainer {}

	#respijtAanbodContainer .basicContainer {display: flex; flex-wrap: wrap;}

		#overviewSideContainer 		{width: 250px; font-size: 16px; color: #444;}
		#overviewMainContainer 		{width: calc(100% - 250px); padding-left: 30px;}

			#searchAndFilterStatusContainer 	{box-shadow: 0 5px 20px 0 rgba(0,0,0,0.08); border-radius: 10px; margin-bottom: 20px; padding:20px; padding-bottom: 10px; background-color: #fff;}
				#searchAndFilterStatusContainer .partSearchBar {margin-bottom: 10px;}

			#respijtAanbodLijst 	{width: calc(100% + 20px); display: flex; flex-wrap: wrap; margin:0px -10px 0 -10px;}
				.respijtItem 			{margin:0px 10px 20px 10px; width: calc(33.3333333333% - 20px); display: flex; flex-direction: column; background: #fff;box-shadow: 0 5px 20px 0 rgba(0,0,0,0.08); border-radius: 10px; position: relative; top:0; transition: top ease 0.3s, box-shadow ease 0.3s; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit;}
				.respijtItem:hover 		{box-shadow: 0 5px 20px 0 rgba(0,0,0,0.12); top: -5px;}

					.respijtPhoto 			{position: relative; flex: 0 0 auto;}
						.ageCategory 			{background-color: #E3000F; color: #fff; font-size: 12px; padding:5px 10px; position: absolute; top: 0; left: 0; z-index: 1; border-bottom-right-radius: 12px; font-weight: 700;}
						.respijtItem .partContentFileImageGallery.single {transition: opacity ease 0.3s;}
						.respijtItem:hover .partContentFileImageGallery.single {opacity: 0.7;}
					
					.respijtItemText 		{padding:20px; padding-bottom: 15px; display: flex; flex-direction: column; flex: 1 1 auto;}
						.respijtItem h2 		{font-size: 20px; color: #5C2282; margin-bottom: 5px;}
							.respijtItem .careProvider {margin-bottom: 15px; font-size: 16px; font-weight: 700; color: #E3000F; display: inline-block;}

							.tagList 		{font-size: 10px; padding-bottom: 5px; display: flex; flex-wrap: wrap; margin-top: auto;}
								.tagList li 	{border: solid 2px rgba(0, 0, 0, 0.05); margin:0px 5px 5px 0px; padding:4px 6px; border-radius: 14px;}
								.tagList li:last-child {margin-right: 0;}

							#detailSideTags .tagList {font-size: 12px;}

#noResults 	{box-shadow: 0 5px 20px 0 rgba(0,0,0,0.08); border-radius: 10px; background-color: #fff; margin-bottom: 20px; padding: 20px; width: 100%; margin-left: 10px; margin-right: 10px;}
	
/***********************************************
Mobile fullscreen container
***********************************************/

/* config */
.mobileFullScreenContainer.active .mobileFullScreenContainerScroll {
	padding: 25px;
	height: calc(100% - 60px);
  }
  
  .mobileFullScreenContainer .mobileFullScreenContainerFooter {
	padding:15px 25px 15px 25px;
	height:60px;
  }
  
  #mobileFullScreenButtonContainer {
	padding:15px 25px 15px 25px;
	height:60px;
	z-index: 10;
  }
  
  
  body.mobileFullScreenContainerActive {
	position: fixed; /* prevents scrolling bug at the bottom of the screen  */
  }
  
  /* Menu overlay */
  .mobileFullScreenContainer {
  }
  
  .mobileFullScreenContainer.active {
	display:block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: #fff;
	z-index: 2000;
  }
  
  .mobileFullScreenContainer.active .mobileFullScreenContainerScroll {
	overflow-y: auto;
  }
  
  /* menu's */
  #mobileFullScreenButtonContainer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #C3A1DA;
	display: none;
	align-items: center;
  }
  
  .mobileFullScreenButtonOpen {
	background-color: transparent;
	text-decoration: none;
	cursor: pointer;
	outline: 0;
	-webkit-appearance: none;
	margin-right: 10px;
	font-weight: 700;
	color: #fff;
	font-size: 14px;
	border:none;
	font-family: 'Raleway', sans-serif;
	height:100%;
	padding:0 10px 0 25px;
	background: #5C2282 url(/images/style/icon-filter.svg) no-repeat left 10px center; background-size: 10px 10px;
  }
  
  /* close menu */
  .mobileFullScreenContainer.active .mobileFullScreenContainerFooter {
	display: block;
  }
  
  .mobileFullScreenContainer .mobileFullScreenContainerFooter {
	display: none;
	background-color: #C3A1DA;
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
  }
  
  .mobileFullScreenButtonClose {
	background-color: #5C2282;
	font-size: 14px;
	border:none;
	font-family: 'Raleway', sans-serif;
	text-decoration: none;
	cursor: pointer;
	outline: 0;
	-webkit-appearance: none;
	border: 0;
	padding: 0px 20px;
	color: #fff;
	width: 100%;
	height:100%;
	font-weight: 700;
  }
  
  @media (max-width: 1023px) {
	.mobileFullScreenContainer {display:none;}
	
	#mobileFullScreenButtonContainer {
	  display: flex;
	}

	#whiteFooter {margin-bottom: 60px;}
  }
  
  @media (max-width: 667px) {
	.mobileFullScreenContainer.active .mobileFullScreenContainerScroll {
	  overflow-y: scroll;
	  -webkit-overflow-scrolling: touch;
	}
  }
								  

/***********************************************
Detail
***********************************************/
 
#detailMainContainer 	{width: 70%; padding-right: 60px;}
	#logoServiceProvider 	{margin-bottom: 30px;}

#detailSideContainer 	{width: 30%;}
	#detailSideTags 	{box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); border-radius: 10px; border:solid 1px rgba(0, 0, 0, 0.05); margin-bottom: 20px;}
		#detailSideTags h3 {font-size: 16px; margin:15px 20px 5px 20px;}
		#detailSideTags .tagList {padding:0px 15px 10px 20px; border-bottom:solid 1px rgba(0, 0, 0, 0.1);}
		.sideLabel 		{font-size: 12px; display: block; padding:0px 20px 15px 20px; border-bottom:solid 1px rgba(0, 0, 0, 0.1);}
		.sideLabel:last-child {border-bottom: none;}
	#detailSideContainer .partContentFileImageGallery.single {box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); border-radius: 10px; overflow: hidden;}

/********************************************** 
Footer 
**********************************************/

footer          			{}
	#mainFooter 				{background: #5C2282 url(/images/style/footer-cube.png) bottom repeat-x; color: #fff; font-size: 16px;}
		#mainFooter .basicContainer {display: flex; flex-wrap: wrap; padding-bottom: 90px;}
			#mainFooter h3 					{color: #fff; text-transform: uppercase;}

			#mainFooter .partContentText 			{margin-right: 60px;}
			#mainFooter .partContentText a 			{color: #fff; background-image: linear-gradient(#E3000F 0px, #E3000F 100%); background-size: 100% 0.2em; background-repeat: no-repeat; background-position: 0px 110%; text-decoration: none;}
			#mainFooter .partContentText a:hover 	{color: #fff; text-decoration:none; background-image: linear-gradient(#fff 0px, #fff 100%);}
	
	#whiteFooter 				{background-color: #fff; font-size: 14px;}
		#whiteFooter .basicContainer 	{padding-top: 18px; padding-bottom: 0;}
			#whiteFooter ul 		{display: flex; flex-wrap: wrap;}
				#whiteFooter ul li  	{margin-right: 30px; margin-bottom: 15px;}
				#whiteFooter ul li#facebook {margin-left: auto; margin-right: 0;}
					#whiteFooter ul li a 	{color: inherit;}
					#whiteFooter ul li a:hover {color: #E3000F;}
					#whiteFooter ul li a svg {height: 20px; fill: #5C2282;}
					#whiteFooter ul li a:hover svg {fill: #E3000F;}