@charset "UTF-8";
/* CSS Document */

.blogbanner {
			position:relative;
			display:inline-block;
			background-color:#08004c;
			background-image: url(/groups_images/groups.jpg);
			background-size:auto 320px;
			background-repeat:no-repeat;
			background-position:center;
			height:320px;
			width:100%;
			margin:0;
			text-align:right;
	}
	
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
	.blogbanner {
			background-image: url(/groups_images/groups@2x.jpg);
	}
}



@media only screen and (max-width: 1090px) {
.blogbanner {
			background-image: url(/groups_images/groups-medium.jpg);
			background-size:100vw 29.47vw;
			height:29.47vw;
	}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 1090px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 1090px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 1090px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 1090px),
only screen and (                min-resolution: 192dpi) and (max-width: 1090px),
only screen and (                min-resolution: 2dppx)  and (max-width: 1090px) { 

    .blogbanner {
			background-image: url(/groups_images/groups-medium@2x.jpg);
	}

}




@media only screen and (max-width: 685px) {
.blogbanner {
			background-image: url(/groups_images/groups-small.jpg);

	}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 685px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 685px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 685px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 685px),
only screen and (                min-resolution: 192dpi) and (max-width: 685px),
only screen and (                min-resolution: 2dppx)  and (max-width: 685px) { 

    .blogbanner {
			background-image: url(/groups_images/groups-small@2x.jpg);
			background-size:100vw 48.76vw;
			height:48.76vw;
	}

}



.bannerlogo {
	margin:19px;
	width:22px;
	height:22px;
}
	
@media only screen and (max-width: 550px) {
	.bannerlogo {
	width:18px;
	height:18px;
	}	
} 


/* ---------- Filters ---------- */
	 
	 #filterswrapper {
			position:relative;
			display:inline-block;
			background-color:#eeeff4;
			padding: 48px 16px;
			width:100%;
			margin:0;
			text-align:center;
	 }
	 select {
	 	  -webkit-appearance: none !important;
		  -moz-appearance: none !important;
		  background-color: #FAFAFA;
		  border-radius: 0;
		  background-image: url("/groups_images/select-arrow.png");
		  background-size:28px 3px;
		  background-position: 100% center;
		  background-repeat: no-repeat;
		  border-style: solid;
		  border-width: 1px;
		  border-color: #cccccc;
		  color: rgba(0, 0, 0, 0.75);
		  font-family: inherit;
		  font-size: 14px;
		  line-height: normal;
		  padding: 8px;
		  border-radius: 0;
		  height: 37px; 
		  width:100%;
		  margin:0;
		 }
	 select::-ms-expand {
		display: none; }
	  select.radius {
		border-radius: 3px; }
	  select:focus {
		background-color: #f3f3f3;
		border-color: #999999; }
	  select:disabled {
		background-color: #DDDDDD;
		cursor: default; }
	  select[multiple] {
		height: auto; }	 
	 ul#filters {
		 display:inline-block;
		 position:relative;
		 width:100%;
		 max-width:900px;
		 margin:0;
		 padding:0;
	 }
	 ul#filters li {
		 display:inline-block;
		 position:relative;
		 width:19.5%;
		 margin:0 0.25%;
	 }
	 @media only screen and (max-width: 720px) {
		ul#filters li {
		 	display:block;
			width:100%;
			margin:2% 0;
	 	}
	 }

/* Opening text -------------------------------------------------- */
	
	.openingtext {
			position:relative;
			display:inline-block;
			background-color:#FFF;
			width:100%;
			margin:0;
			text-align:center;
			padding:30px;
	}
	.openingtextwrap {
			position:relative;
			display:inline-block;
			max-width:700px;
	}


/* Overview -------------------------------------------------- */
	
	.overview {
		position:relative;
		display:inline-block;
		background-color:#eeeff4;
		width:100%;
		margin:0;
		text-align:center;
		padding:10px 16px 48px 16px;
	}
	@media only screen and (max-width: 750px) {
		.textblockcentre {
			padding:0 16px;
		}
	}
	
/* ---------- Welcome page ---------- */
	
	#welcome {
		max-width:800px;
		display:inline-block;
	}
	a:link.blogbutton,
	a:visited.blogbutton {
		padding:22px 100px;
		margin-top:16px;
		text-align:center;
		color:#FFF;
		background-color: #4aacbd;
		margin-right:1px;
		margin-bottom:1px;
		font-weight:bold;
		font-size:18px;
		display:inline-block;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;	
	}

	a:hover.blogbutton {
		background-color: #393939;
		text-decoration:none;
	
	}


/* ---------- Style Overrides ---------- */

h2 {
	text-align: center;
	padding: 0px;
	font-family: Helvetica, Arial, sans-serif;
		font-size:19px;
		color:#343434;
		letter-spacing:0;
		line-height:56px;
		font-weight: bold;
		text-transform: none;
		margin:0px;
}
h2 a:link,
h2 a:visited {
	text-decoration:underline;
	color:#37b0c3;
}
h2 a:hover{
	text-decoration:none;
	color:#c3c3c3;
}
p {
	margin: 0;
	padding: 0;
	color:#606874;
}