@charset "UTF-8";

@import 'https://fonts.googleapis.com/css?family=Caudex:400,700|Lato:400,700|Lora:400,700';


@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}


	body {
		font: 		400 14px/1 Lora, sans-serif;
		font: 		400 1.4rem/1 Lora, sans-serif;
		background: #FDFDFD
		}
		
	#Beta {
		position:	absolute;
		top: 		0;
		left: 		0;
		z-index:	9999;
		width:		120px;
		width:		12rem
		}	
		
	noscript,
	#SiteCookies {
		display: 	block;
		position: 	absolute;
		width: 		100%;
		background: #F0F0F0;
		padding: 	10px;
		padding:	1rem;
		left: 		0;
		z-index:	999;
		text-align: center
		}

	noscript a,
	#SiteCookies a {
		color: #4880C8
		}
	
	h1, h2 {
		font-family: Caudex, serif;
		}
		
	h1 {
		font-size: 		40px;
		font-size: 		4rem
		}
		
	h2 {
		font-size: 30px;
		font-size: 3rem;
		}
		
		
	h3 {
		font-family: Lato, serif;
		font-size: 22px;
		font-size: 2.2rem;
		font-weight: 700;
		margin:	10px 0;
		margin:	1rem 0
		}	
		
	h4 {
		font-size: 14px;
		font-weight: 700
		}
		
		
	hr {
		margin: 	30px 0;
		margin: 	3rem 0;
		background: none;
		border:		0;
		border-top: 1px solid #000
		}
		
	small {
		font-size: 10px;
		font-size: 1rem
		}
				

	#Comments	{ 
		max-height:		350px; 
		max-height:		35rem;
		overflow:		scroll; 
		margin:			20px 0;
		margin:			2rem 0;
		border-top:		10px solid #CCC;
		border-bottom:	10px solid #CCC
		}
		
	.Comment {
		border-top: 1px dotted #CCC;
		padding: 	20px 0 10px 0;
		padding:	2rem 0 1rem 0
		}
	
	.Comment:first-child {
		border-top: 0
		}
		
	.Comment .user_icon {
		float: 	left;
		width: 	40px;
		width:	4rem;
		margin: 0 10px 10px 0;
		margin:	0 1rem 1rem 0
		}
	
	.Comment p {
		clear: both
		}	
		
	.Comment .delete_comment,
	.Comment .report_comment {
		float: 	right;
		margin: 0 0 0 10px;
		margin:	0 0 0 1rem
		}
			
	#Memberships {
		display: 	flex;
		flex-flow: 	row nowrap
		}
			
	.Membership {
		text-align:	center;
		display: 	flex;
		flex-flow: 	column nowrap
		}
	
	.Membership img {
		height:				250px;
		width:				100%;
		object-position:	top center;
		object-fit:	 		contain;
		margin:				0 0 20px 0;
		margin:				0 0 2rem 0;
		flex-grow: 			0
		}
		
	.Membership h2,
	.Membership .action {
		flex-grow: 			0
		}
		
	.Membership .description {
		flex-grow: 1
		}	

	#Donate .Donate img {
		width: 100px;
		width: 10rem;
		margin: 0 20px 0 0;
		margin: 0 2rem 0 0;
		float: left
		}
		
	#Donate .Donate {
		margin: 0 0 30px 0;
		margin: 0 0 3rem 0;
		padding: 20px;
		padding: 2rem;
		background: #F0F0F0
		}
		
	#Donate .Donate.on {
		background: #FFB745;
		color: #FFF
		}
		
	#Donate .c20 {
		text-align: center
		}	
		
	#Donate .c80 {
		border-left: 1px solid #CCC;
		}	
		
	#Donate .Donate.on .c80 {
		border-left: 1px solid #C98828;
		}
		
	#Donate .support {
		font-size: 30px;
		margin-top: 20px
		}	
		
	#FBLogin,
	#GoogleLogin {
		cursor: pointer
		}
		
	#SiteWrap {
		width: 	1064px;
		width:	106.4rem;
		position:relative;
		margin:  0 auto;
		padding: 0 20px;
		padding: 0 2rem
		}
		
	#SiteHeader {
		border-bottom:	3px solid #222;
		border-bottom: 	0.3rem solid #222;
		margin: 		0 0 30px 0;
		margin: 		0 0 3rem 0;
		padding: 		60px 0 20px 0;
		padding: 		6rem 0 2rem 0;
		position:		relative
		}
		
	#SiteHeader > a {
		color: 		#000;
		overflow:	hidden
		}
		
	#SiteHeader img {
		float: left;
		width: 125px;
		width: 12.5rem;
		margin: 0 10px 0 0;
		margin: 0 1rem 0 0
		}

	#SiteHeader h1 {
		text-transform: uppercase;
		float: 			left;
		width:			20px;
		width:			2rem;
		overflow:		visible
		}
		
	#SiteHeader p {
		float: 			right;
		white-space: 	nowrap;
		text-align: 	right
		}
		
	#SiteHeader p span {
		display: block
		}

	#SiteHeader p span.donate {
		margin: 15px 0 0 0;
		margin: 1.5rem 0 0 0
		}
		
	#SiteHeader p a {
		color: 			#FFB745;
		margin: 		10px 0 0 10px;
		margin:			1rem 0 0 1rem;
		display: 		inline-block;
		font-weight: 	700;
		font-family: 	Lato;
		}
		
	#SiteHeader p span.social a {
		width: 			26px;
		width:			2.6rem;
		height: 		26px;
		height:			2.6rem;
		text-align: 	center;
		color:			#FFF;
		line-height: 	26px;
		line-height:	2.6rem;
		font-size: 		16px;
		font-size:		1.6rem;
		margin: 		0 0 0 5px;
		margin:			0 0 0 0.5rem;
		display: 		inline-block;
		border-radius: 	5px;
		border-radius: 	0.5rem;
		}
		
	#SiteHeader p a.facebook	{
		background: #828080
		}
		
	#SiteHeader p a.twitter	{
		background: #828080
		}

	#SiteHeader p a.instagram	{
		background: #828080
		}
		
	#SiteHeader p a.linkedin	{
		background: #828080
		}
		
	#SiteNavigationMain {
		clear: 			both;
		padding:		20px 0 0 0;
		padding:		2rem 0 0 0
		}

	#SiteNavigationMain.fix {
		position: 			fixed;
		text-align: 		center;
		width: 				100%;
		top:				0;
		left:				0;
		z-index:			12;
		border-bottom:		3px solid #000;
		padding: 			10px 0;
		padding:			1rem 0;
		background: 		#FFF
		}
		
	#SiteNavigationMain > ul > a > img {
		display: none
		}
		
	#SiteNavigationMain.fix > ul > a > img {
		display: inline-block;
		height: 60px;
		height: 6rem;
		width: auto 
		}
						
	#SiteNavigationMain > ul {
		width: 100%
		}
		
	#SiteNavigationMain.fix ul {
		width: 				1014px;
		width: 				101.4rem;
		margin: 			0 auto
		}
		
	#SiteNavigationMain.fix ul li {
		padding: 20px 0;
		padding: 2rem 0
		}
		
	#SiteNavigationMain > ul > li {
		display: inline-block
		}
						
	#SiteNavigationMain > ul > li > a {
		color: 			#222;
		margin: 		0 20px 0 0;
		margin:			0 2rem 0 0;
		text-transform: uppercase;
		font-size: 		14px;
		font-size:		1.4rem;
		font-family: 	Lato, serif
		}
		
	#SiteNavigationMain > ul > li > a.content_59 {
		color: #FFB745
		}
		
	#SiteNavigationMain > ul > li > ul {
		display: none
		}
		
	#SiteNavigationMain > ul > li:hover > ul {
		position:			absolute;
		display:			flex;
		justify-content: 	space-between;
		flex-flow: 			row wrap;
		background:			#FFF;
		padding:			0 0 20px 0;
		padding:			0 0 2rem 0;
		left: 				0;
		right:				0;
		z-index:			5
		}
		
	#SiteNavigationMain.fix > ul > li:hover > ul {
		display: none
		}
		
	#SiteNavigationMain > ul > li:hover > ul > li {
		width:		24%;
		display:	inline-block
		}
		
	#SiteNavigationMain > ul > li:hover > ul > li .c25 img {
		width: 60px;
		height: 60px;
		object-position: top center;
		object-fit:	 	cover
		}
		
	#SiteNavigationMain > ul > li:hover > ul > li .c75 {
		padding-left: 10px;
		padding-left: 1rem
		}
		
	#SiteNavigationMain > ul > li:hover > ul > li h3 a {
		color: 			#222;
		font-weight: 	300;
		border-bottom: 	1px solid #CCC;
		padding: 		0 0 5px 0;
		margin: 		0 0 5px 0;
		display: 		block
		}
		
	#SiteNavigationMain > ul > li:hover > ul > li .c75 a {
		color: #4484ce
		}
		
	#SiteNavigationMain a.on {
		color: #4484ce
		}
		
	#SiteNavigationSub {
		margin: 10px 0 0 0;
		margin: 1rem 0 0 0;
		border-top: 1px solid #CCC;
		padding: 10px 0 0 0;
		padding: 1rem 0 0 0
		}
		
	#SiteNavigationSub a {
		margin: 	0 20px 0 0;
		margin:		0 2rem 0 0;
		color: 		#828080;
		font-size:	14px;
		font-size:	1.4rem
		}
		
	#SiteNavigationSub a.on {
		color: #4484ce
		}

	#SiteFooter {
		clear:		both;
		border-top:	3px solid #222;
		border-top:	0.3rem solid #222;
		margin: 	30px 0 0 0;
		margin: 	3rem 0 0 0;
		padding: 	20px 0 0 0;
		padding: 	2rem 0 0 0
		}
		
	#SiteTitle {
		}
		
	#SiteCrumbtrail {
		margin: 		5px 0 30px 0;
		margin: 		0.5rem 0 3rem 0;
		font-size: 		13px;
		font-size:		1.3rem;
		font-weight: 	100
		}
		
	#SiteCrumbtrail a:after {
		font-family: 	'FontAwesome';
		content: 		'';
		margin: 		0 10px;
		margin: 		0 1rem;
		font-weight:	normal		
		}
	
		
	#SiteContent p {
		margin: 		14px 0;
		margin: 		1.4rem 0;
		font-size:		14px;
		font-size:		1.4rem;
		line-height:	1.6
		}
		
	#SiteContent a {
		color: #828080
		}
		
	#SiteFooter span {
		float: right
		}
		
	#SiteFooter a {
		margin: 0 20px 0 0;
		margin: 0 2rem 0 0;
		color: 	#4484ce;
		}
	
	#SiteContent a.highlight {
		background: 		#4484ce;
		display: 			block;
		padding: 			15px;
		padding:			1.5rem;
		border-radius: 		4px;
		text-align: 		center;
		font-family: 		Lato;
		font-weight: 		700;
		text-transform: 	uppercase;
		letter-spacing: 	1px;
		color: 				#FFF;
		font-size: 			16px;
		font-size: 			1.6rem;
		margin: 			0 0 30px 0;
		margin: 			0 0 3rem 0
		}
		
	.border {
		border: 2px solid #4484ce;
		padding: 10px;
		padding: 1rem;
		border-radius: 3px
		}
				
	#SiteContentTextHead > .c75 p {
		font-size: 18px;
		font-size: 1.8rem
		}

	ul.filter {
		border-top:		1px solid #CCC;
		border-bottom:	1px solid #CCC;
		padding: 		10px 0;
		padding: 		1rem 0
		}
		
	ul.filter li {
		padding: 10px 0;
		padding: 1rem 0
		}
		
	#Feed {
		padding-bottom: 20px;
		padding-bottom: 2rem
		}


/**
 * Form
 */
 
 	fieldset {
	 	margin: 0 0 40px 0;
	 	margin: 0 0 4rem 0
 		}
	
	fieldset legend {
		border-bottom:	2px solid #222;
		width: 			100%;
		font-weight:	700;
		font-size		20px;
		font-size:		2rem;
		padding:		0 0 5px 0;
		padding:		0 0 0.5rem 0;
		margin:			0 0 10px 0;
		margin:			0 0 1rem 0
		}
		
	fieldset legend i {
		color: #AAA
		}
	
 	fieldset > label,
 	fieldset > span {
	 	padding: 10px 0;
	 	padding: 1rem 0
 		}
 	 
 	fieldset > label {
	 	padding: 		20px 0;
	 	padding: 		2rem 0;
	 	font-weight: 	700
 		}	
 	
 	fieldset label.required:after,
 	fieldset > legend.required:after {
	 	content: 		"";
	 	font-family: 	'FontAwesome';
	 	float: 			right;
	 	margin: 		0 10px 0 0;
	 	margin: 		0 1rem 0 0;
	 	color: 			#C00000
 		}
 		
 	fieldset table {
	 	width: 100%
 		}
 		
 	fieldset table th,
 	fieldset table td {
	 	padding: 10px;
	 	padding: 1rem
	 	}
	 	
	fieldset table th {
		font-weight: 700;
		text-align: left;
		border-bottom: 1px solid #AAA
		}
	
	fieldset table td {
		border-top: 1px solid #CCC
		}
		
	fieldset table tr:first-Child td {
		border-top: 0
		}	
		
	fieldset p.info {
		padding: 		10px 0;
		padding:		1rem 0;
		border-bottom: 	1px solid transparent
		}
		
 	input[type=text],
 	input[type=number],
 	input[type=password],
 	input[type=search],
 	input[type=email],
 	input[type=url],
 	input[type=tel],
 	input[type=color],
 	input[type=datetime],
 	input[type=date],
 	input[type=time],
 	textarea,
 	select,
 	.js input[type=file] + label {
	 	border:			1px solid #CCC;
	 	border-radius:	3px;
	 	padding: 		10px;
	 	padding: 		1rem;
		font-family: 	Lora;
		font-size: 		12px;
		font-size: 		1.2rem;
 		}
 		
 	select {
	 	padding: 0 0 0 10px;
	 	padding: 0 0 0 1rem;
	 	width: 100%
 		}
 		
 	select option,
 	select optgroup {
	 	padding: 10px;
	 	padding: 1rem	 	
 		}
 		
 	select[multiple] {
	 	padding: 0
 		}
 		
 	input[name=entry_dob] {
	 	width: 160px !important
 		}
		
	input[type=checkbox]:not(old):checked + label:before,
	input[type=radio]:not(old):checked + label:before {
		color: #A7D37B
		}

	input[type=checkbox]:not(old) + label:before,
	input[type=radio]:not(old) + label:before {
		color: #AAA
		}
		
	input[type=password].eye {
		padding-left: 40px;
		padding-left: 4rem
		}

 	.js input[type=file] + label {
		font-weight: 		700;
		display: 			inline-block;
		cursor: 			pointer
		}
		
	.js input[type=file]:focus + label,
	.js input[type=file] + label:hover {
    	background-color: #CCC
		}	
		
 	button, .button {
	 	background: 	#4484CE;
	 	border:			0;
	 	border-radius: 	3px;
	 	padding:		10px 20px;
	 	padding:		1rem 2rem;
	 	line-height: 	1;
	 	color:			#F0F0F0 !important;
	 	font-weight:	bold;
	 	text-transform: uppercase;
	 	font-size:		12px;
	 	font-size:		1.2rem;
	 	cursor: 		pointer
 		}	
 		
 	button i, .button i {
	 	margin: 0 5px 0 0;
	 	margin: 0 0.5rem 0 0
 		}


 	input.error, 
 	textarea.error, 
 	select.error {
	 	background: #D17B7B;
	 	border: 	1px solid #A04343;
	 	color: 		#FFF
 		}
 		
 
 	#FormMessage,
 	#SiteMessage {
		margin: 40px 0;
		margin: 4rem 0
		}
		
	#FormMessage p,
	#SiteMessage p {
		margin: 10px 0;
		margin: 1rem 0;
		font-weight: 700;
		font-size: 20px;
		font-size: 2rem
		}
		
	#FormMessage p.note,
	#SiteMessage p.note {
		color: #A7D37B;
		}
		
	#FormMessage p.error,
	#SiteMessage p.error {
		color: #D17B7B;
		}
			
	#FormMessage p.note:before,
	#SiteMessage p.note:before {
		color: #72A043;
		margin: 0 10px 0 0;
		margin: 0 1rem 0 0;
		font-family: 'FontAwesome';
		content: "";
		
		}

	#FormMessage p.error:before,
	#SiteMessage p.error:before {
		color: #A04343;
		margin: 0 10px 0 0;
		margin: 0 1rem 0 0;
		font-family: 'FontAwesome';
		content: ""
		}
				

	#Search {
		margin: 30px 0 30px 0;
		margin: 3rem 0 3rem 0;
		overflow: hidden;
		border: 1px solid #CCC;
		border-radius: 4px;
		position: relative
		}
		
	#Search input[type=search] {
		border: 0;
		-webkit-appearance: none;
		width: 75%
		}
		
	#Search button {
		position: 	absolute;
		top: 		0;
		bottom: 	0;
		right: 		0;
		width: 		25%;
		margin:		0;
		text-align: center;
		background: #CCC;
		border-radius: 0 2px 2px 0;
		display: 	block
		}
		
	#Search button i {
		margin: 0
		}
		
		 
 /**
 * Tabs
 */
 
  	.Tabs {
	 	margin: 0 0 40px 0;
	 	margin: 0 0 4rem 0
 		}
 		 
 	.Tabs > label {
		font-weight:	700;
		font-size:		20px;
		font-size:		2rem;
		font-family:	'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial;
		color:			#319CFF;
		margin:			0 20px 5px 0
 		}
 
    .Tabs input[id^="tab"]:checked + label {
	 	color: #465977
		}
		
 	.Tabs > label i {
	 	color: #AAA
 		}

    .Tabs input[id^="tab"]:checked + label i {
	 	color: #364762
		} 
 		
 	.Tabs > div {
		border-top:	3px solid #465977;
 		}
 		
  	.Tabs.pad > div,
  	.Tabs > div.pad {
	 	padding: 20px 0 0 0;
	 	padding: 2rem 0 0 0
 		}
 		
 	#Jobs p.info,
 	#Job .header p.info {
	 	margin: 0
 		}	
 		
 	#Jobs .Job,
 	#Job .header {
	 	overflow: auto;
	 	clear: left;
	 	margin: 10px 0;
	 	margin: 1rem 0
 		}
 		
 	#Jobs .Job {
	 	margin: 30px 0;
	 	margin: 3rem 0
 		}
 		
 		
 	#Jobs .Job img,
 	#Job .header img {
	 	width: 20%;
	 	float: left;
	 	margin-right: 10px;
	 	margin-right: 1rem
 		}
 	
 	#Jobs .Job > div,
 	#Job .header > div {
	 	width: 45%;
	 	float: left;
	 	padding: 0 10px
 		}			
 		
 	#Members h2 {
	 	margin: 0 0 10px 0;
	 	margin: 0 0 1rem 0
 		}	
		
	#Members .role_7,
	#Members .role_9 {
		display: 		flex;
		flex-flow: 		row wrap;
		justify-content: space-between
		}
		
	#Members .role_7 .member,
	#Members .role_9 .member {
		width: 		32%;
		flex-grow: 	0;
		margin:		10px 0
		}

	#Members .role_7 .member img,
	#Members .role_9 .member img {
		width: 100%
		}
		
	#Members .role_8 .member {
		overflow: auto;
		margin: 0 0 30px 0;
		margin: 0 0 3rem 0
		}
	
	#Members .role_8 .member img {
		width: 	20%;
		float: 	left;
		margin: 0 20px 0 0;
		margin: 0 2rem 0 0
		}
		
				

		
	.GroupsTitle {
		margin: 0 0 20px 0;
		margin: 0 0 2rem 0;
		text-align: center
		}
		
	.GroupsTitle::before,
	.GroupsTitle::after {
		content: " - "
		}
		
	#Groups .Group img {
		width: 			100%;
		height: 		200px;
		height: 		20rem;
		object-position: center center;
		object-fit:	 	contain
		}
		
	#Groups .Group {
		text-align: center;
		margin: 0 0 30px 0;
		margin: 0 0 3rem 0
		}

	#Events .Event {
		overflow: 		hidden;
		border-bottom:	2px solid #CCC;
		padding: 		0 0 30px 0;
		padding: 		0 0 3rem 0;
		margin: 		0 0 30px 0;
		margin: 		0 0 3rem 0
		}
		
	#Events .Event:last-child {
		padding: 0;
		margin: 0;
		border: 0
		}
		
	#Events .Event h3 {
		margin: 0
		}
	
	#Events .Event img {
		width: 100%;
		height: 200px;
		height: 20rem;
		object-position: center center;
		object-fit:	 	cover	
		}
		
	#Events .Event p.social {
		font-size: 	24px;
		font-size:	2.4rem;
		text-align: right;
		border-top: 1px solid #F0F0F0;
		padding:	5px 0 0 0;
		padding:	0.5rem 0 0 0;
		margin: 	10px 0 0 0;
		margin:		1rem 0 0 0
		}

	#Events .Event p.social a {
		margin: 0 0 0 20px;
		margin: 0 0 0 2rem
		}

		
				
/* HOME */
		
	.content_30 .video {
		margin: 0 0 30px 0;
		margin: 0 0 3rem 0
		}	
		
	.content_30 .c64 {
		border-right: 	1px solid #CCC;
		padding: 0 15px 0 0
		}
		
	.content_30 .c36 p {
		margin: 0 !important
		}
		
	.content_30 .c36 img {
		height: 375px !important;
		height: 37.5rem !important;
		}	
		
	#Carousel {
		height: 		375px;
		height:			37.5rem;
		position:		relative;
		overflow: 		hidden
		}
	
	#Carousel .Image,
	#Carousel img,
	#Carousel h2 {
		position:	absolute;
		width:	 	100%
		}
		
	#Carousel img {
		z-index: 1;
		width: 100%; 
		height: 		375px;
		height:			37.5rem;
		object-position: top center;
		object-fit:	 	cover
		}
		
	#Carousel h2 {
		z-index: 			2;
		font-size: 			24px;
		font-size: 			2.4rem;
		top:				300px;
		top:				30rem;
		height:				75px;
		width: 				100%;
		background: 		rgba(0,0,0,0.6);
		padding: 			10px;
		padding:			1rem;
		white-space:		wrap;
		padding-right:		20%;
		flex-grow: 			1;
		display: 			flex;
		justify-content:	center;
		flex-direction: 	column
		}

	#Carousel h2 a {
		color: 				#FFF;
		}
	
	#Carousel p {
		position: absolute;
		top:			331px;
		top:			33.1rem;
		right: 			10px;
		right:			1rem;
		z-index: 		3
		}
		
	#Carousel p span {
		display: 		inline-block;
		width:			20px;
		width:			2rem;
		height:			20px;
		height:			2rem;
		background:		rgba(255,255,255,0.5);
		border-radius:	10px;
		border-radius:	1rem;
		margin: 		0 0 0 5px;
		margin:			0 0 0 0.5rem;
		cursor: 		pointer
		}
		
	#Carousel p span.on {
		background: #FFF
		}
		
	#Featured {
		border-top: 1px solid #CCC;
		margin: 	16px 0 0 0;
		padding:	20px 0 0 0
		}
		
		
	#Featured .c33 {
		border-left: 1px solid #CCC;
		padding: 0 20px;
		width: 35%
		}
		
	#Featured .c33:first-Child {
		border-left: 0;
		padding: 0 20px 0 0;
		width: 32.5%;
		}
		
	#Featured .c33:last-Child {
		padding: 0 0 0 20px;
		width: 32.5%;
		}
		

	#Featured h2 {
		font-weight: 	bold;
		font-family: 	Lato;
		font-size: 		16px;
		font-size: 		1.6rem;
		text-transform: uppercase
		}

	#Featured h2 span {
		font-weight: normal;
		font-family: Lato
		}
		
	#Featured h4 {
		font-family: Lato
		}
		
	#Featured .image {
		width: 100%;
		height: 300px;
		overflow: hidden;
		margin: 0 0 10px 0
		}
				
	#Featured .image img {
		width: 100%; 
		height: 300px; 
		object-fit: cover;
		object-position: top center;
		}
		
	#Featured .c25 .image,
	#Featured .c25 .image img {
		height: 230px
		}
		
	#Featured p {
		margin: 10px 0 0 0
		}
		
		
	table#Events {
		width: 100%;
		background: #FAFAFB;
		margin-top: 20px
		}
	
	#Events td {
		border-bottom: 1px solid #FFF;
		vertical-align: middle
		}
		
	#Events tr td:first-child {
		width: 100px;
		padding-right: 10px
		}
		
	#Events tr td:nth-child(2) {
		width: 300px
		}
		
	.content_30 #Events tr td:nth-child(2) {
		width: 100px
		}
		
	#Events tr td:nth-child(3) {
		font-size: 14px;
		font-weight: 500
		}
		
	#Events td img {
		width: 100%;
		height:  50px;
		object-position: center center;
		object-fit:	 	cover		
		}
		
	#Newsletter {
		border: 	1px solid #CCC;
		padding: 	20px;
		margin-top: 20px
		}
		
	#Newsletter h4 {
		font-weight: bold;
		margin: 0 0 20px 0;
		text-align: center
		}
		
	#Newsletter p {
		width: 75%;
		margin: 0 auto;
		border: 1px solid #CCC;
		padding: 10px;
		color: #888;
		font-weight: bold;
		position: relative
		}
		
	#Newsletter p i {
		color: #000;
		margin: 0 5px 0 0
		}
		
	#Newsletter p button {
		background: #CCC;
		font-weight: bold;
		text-transform: uppercase;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		border: 0;
		color: #FFF
		}
		
		
		
		
	#Forum {
		width: 100%
		}	
		
	#Forum thead tr th {
		text-align: left;
		padding: 0 0 10px 0
		}
	
	#Forum tbody tr td {
		width: 		10%;
		padding: 	10px 0;
		padding: 	1rem 0;
		border-top: 1px solid #CCC
		}
		
	#Forum tbody tr td:first-child {
		width: 50%;
		}	

	#Forum tbody tr td:nth-child(2) {
		width: 30%;
		}
				
	#Forum tbody tr td a {
		color: #4484ce
		}
		
	#Forum tbody tr td:first-child a {
		font-weight: 700
		}
			
			
	.content_29 #About {
		margin: 30px 0 20px 0;
		margin: 3rem 0 2rem 0;
		border-top: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		padding-top: 30px;
		padding-top: 3rem
		}	
				
	.content_29 #Sponsors {
		text-align: center
		}

	.content_29 #Sponsors a,
	.content_29 #Sponsors span {
		border: 	1px solid #CCC;
		padding: 	10px;
		padding:	1rem;
		display: 	inline-block;
		text-align: center;
		margin: 	10px;
		margin:		1rem
		}
	
	.content_29 #Sponsors img { 
		height: 	64px;
		height:		6.4rem;
		display: 	block;
		margin: 	0 auto;
		-webkit-filter: grayscale(100%);
		filter: grayscale(100%);
		}
	
	.content_29 #Sponsors img:hover {
		filter: none;
		-webkit-filter: none
		}
		
	
	.content_39 #Calendar h2 {
		text-align: center;
		margin: 	0 0 30px 0;
		margin: 	0 0 3rem 0
		}
		
	.content_39 #Calendar h2 a:first-Child {
		float: left
		}
		
	.content_39 #Calendar h2 a:last-Child {
		float: right
		}
	
	.content_39 #Calendar .days,
	.content_39 #Calendar .dates {
		width: 		100%;
		overflow:	auto
		}

	.content_39 #Calendar .days > li,
	.content_39 #Calendar .dates > li {
		width: 14.28%;
		float: left;
		}
		
	.content_39 #Calendar .days > li {
		text-align: center;
		font-weight: 700;
		padding: 0 0 10px 0;
		padding: 0 0 1rem 0
		}
		
	.content_39 #Calendar .dates > li {
		height: 	140px;
		height:		14rem
		}
		
	.content_39 #Calendar .dates > li > div {
		border: 	1px solid #dcd0c0;
		display: 	flex;
		margin: 	1px;
		flex-flow:	column nowrap;
		height:		138px;
		height:		13.8rem;
		font-size:	12px;
		font-size:	1.2rem
		}
		
	.content_39 #Calendar .dates > li.now > div p {
		font-weight: 700
		}
		
	.content_39 #Calendar .dates > li:nth-child(7n+6) > div,
	.content_39 #Calendar .dates > li:nth-child(7n+7) > div {
		background: #F9F9F9
		}
	
	.content_39 #Calendar p {
		margin: 	0;
		text-align: center;
		height: 	30px;
		height:		3rem;
		padding: 	5px 0;
		padding:	0.5rem 0;
		flex-grow: 	0
		}
		
	.content_39 #Calendar p:before,
	.content_39 #Calendar p:after {
		content:	"-";
		margin: 	0 5px;
		margin: 	0 0.5rem
		}
		
	.content_39 #Calendar .dates a {		
		flex-grow: 			1;
		text-align: 		center;
		display: 			flex;
		justify-content:	center;
		flex-direction: 	column
		}
		
	.content_39 #Calendar .dates a.internal {
		background: #dcd0c0;
		color: 		#FFF
		}
		
	.content_39 #Calendar .dates a.external {
		background: #F0F0F0
		}
				
	.Article {
		margin: 0 0 30px 0;
		margin: 0 0 3rem 0
		}
		
	#Articles .Article img,
	#LeadArticles img {
		width: 100%;
		height: 250px;
		object-position: top center;
		object-fit:	 	cover		
		}
	
	#LeadArticles img {
		height: 300px;
		}
	
	.ArticlePagination {
		background: #FAFAFB;
		margin: 	20px 0;
		margin:		2rem 0;
		padding: 	0 10px;
		padding:	0 1rem;
		border-top:	1px solid #e5e5e5;
		border-bottom:	1px solid #e5e5e5;
		overflow: 	hidden
		}
		
	.ArticlePagination .back,	
	.ArticlePagination .label,
	.ArticlePagination .next {
		width: 33.33%;
		float: left
		}
		
	.ArticlePagination .label {
		text-align: center
		}
		
	.ArticlePagination .next {
		text-align: right
		}
		
	.content_30 article blockquote {
		width: 		20%;
		color:		#767676;
		position: 	absolute;
		margin-left: -25%;
		margin-top: -40px;
		margin-top: -4rem;
		}
		
	.content_30 #Article .logline {
		text-transform: uppercase;
		font-family: Lato
		}	
		
	.content_30 #Article article blockquote:before,
	.content_30 #Article article blockquote:after {
		font-family: 'FontAwesome';
		color:		#FFB745;
		font-size: 	40px;
		font-size:	4rem
		}	
		
	.content_30 #Article article blockquote:before {
		content: ""
		}	
		
	.content_30 #Article article blockquote:after {
		content: ""
		}	
	
	#Article .c50 {
		padding: 0 20px;
		padding: 0 2rem
		}
	
	.content_30 .c25 ol {
		}
		
	.content_30 .c25 ol li {
		counter-increment: step-counter;
		overflow: hidden
		}
		
	.content_30 .c25 ol li::before {
	    content: counter(step-counter);
	    font-size: 40px;
	    font-size: 4rem;
	    float: left;
	    clear: left;
	    margin: 0 10px 0 0;
	    margin: 0 1rem 0 0;
	    width: 20px;
	    width: 2rem;
	    text-align: center;
	    height: 100%
		}
		
	.content_30 .c25 ol li div {
		width: 85%;
		float: right
		}

/* TUTORS */

	#Tutor img {
		width: 			100%;
		object-position: top center;
		object-fit:	 	cover	
		}	

	#Availability th {
		width: 14.6%;
		text-align: center
		}
	
	#Availability td a {
		display: block;
		text-align: center;
		margin: 5px 0;
		margin: 0.5rem 0;
		line-height: 1;
		padding: 5px;
		padding: 0.5rem;
		font-size: 13px;
		font-size: 1.3rem
		}
		
	#Availability td a:hover {
		background: #F0F0F0
		}
		
	#Availability span.small {
		font-size: 11px
		}
	
	.Tutor {
		overflow: auto;
		padding: 0 0 40px 0;
		padding: 0 0 4rem 0
		}
	
	.Tutor img {
		width: 			150px;
		width:			15rem;
		margin: 		0 15px 0 0;
		margin: 		0 1.5rem 0 0;
		float: 			left;
		height:			150px;
		height:			15rem;
		object-position: center center;
		object-fit:	 	cover
		}
		
	.Tutor h3 {
		margin: 0
		}

	.Tutor p {
		margin: 10px 0 0 0;
		margin: 1rem 0 0 0
		}
		
	.Tutor p.subjects {
		line-height: 1.2 !important;
		font-size: 11px !important;
		font-size: 1.1rem !important
		}
		

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

	body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		}
		
	#Memberships {
		display: 	block
		}
			
	.Membership {
		text-align:	center;
		display: 	block
		}

	#Members .role_7,
	#Members .role_9 {
		display: 		block;
		}
		
	#Members .role_7 .member,
	#Members .role_9 .member {
		width: 		100%;
		margin-bottom: 30px;
		margin-bottom: 3rem
		}

	fieldset > label,
 	fieldset > span {
	 	float: 		none;
	 	display: 	block;
	 	width: 		100% !important;
	 	padding:	0
 		}

 	fieldset > span {
	 	margin: 10px 0 30px 0;
	 	margin: 1rem 0 3rem 0
 		}
 
 	.content_30 article blockquote {
		width: 			100%;
		position: 		relative;
		margin-left: 	auto;
		margin-top: 	auto
		}
		
	.content_30 #Article article blockquote:after {
		display: block;
		text-align: right
		}	
					
 	#Events .Event .c80 .c50 {
	 	text-align: center
 		}		
 		
 	#Event .c25.auto {
	 	text-align: center
 		}
 		
 	#Subscribe p {
	 	padding: 	50px 0 0 0;
	 	padding: 	5rem 0 0 0;
	 	text-align: center !important
 		}
 			
	#SiteWrap {
		width: 	100%;
		}	
		
	#SiteHeader {
		padding-top: 20px;
		padding-top: 2rem
		}
		
	#SiteHeader > p {
		float: 			none;
		clear: 			left;
		overflow: 		hidden;
		padding-top: 	20px;
		padding-top: 	2rem;
		display:		flex;
		flex-flow: 		row wrap
		}
		
	#SiteHeader > p span.social {
		order: 		1;
		width: 		50%;
		text-align: left
		}	
		
	#SiteHeader > p span.donate {
		order: 	2;
		width: 	50%;
		margin: -14px 0 0 0;
		margin: -1.4rem 0 0 0
		}
		
	#SiteHeader > p span.menu {
		order: 		3;
		width:		100%;
		text-align: center
		}
		
	#SiteHeader > p span.menu a {
		margin: 30px 10px 0 10px;
		margin: 3rem 1rem 0 1rem
		}
		
	#SiteNavigationMain > ul,
	#SiteNavigationSub {
		overflow: hidden
		}
	
	#SiteNavigationMain > ul {
		position:	absolute;
		top: 		160px;
		top:		16rem;
		width:		34%;
		margin:		0 33%;
		text-align: center
		}
		
	#SiteNavigationMain > ul:before {
		font-family: 'FontAwesome';
		content: 	"";
		font-size:	40px;
		font-size:	4rem;
		display:	block;
		cursor: 	pointer
		}
		
	#SiteNavigationMain > ul:hover {
		width: auto;
		margin: auto
		}

	#SiteNavigationMain > ul > li {
		display: none
		}
		
	#SiteNavigationMain > ul:hover > li {
		display: 	block;
		width: 		50%;
		float: 		left;
		white-space: nowrap;
		text-align: left;
		background:	#FFF;
		padding:	8px 0;
		padding:	0.8rem 0
		}
		
	#SiteNavigationMain > ul > li:hover ul {
		display: none !important
		}
	
	#SiteNavigationSub a {
		display: 	block;
		width: 		50%;
		white-space: nowrap;
		float: 		left;
		margin: 	0;
		padding: 	5px 0;
		padding:	0.5rem 0
		}
		
	#Donate .c20 {
		border-bottom: 1px solid #CCC;
		padding: 0 0 5px 0 !important;
		padding: 0 0 0.5rem !important;
		margin: 0 0 10px 0 !important;
		margin: 0 0 1rem 0 !important
		}
		
	#Donate .Donate.on .c20 {
		border-bottom: 1px solid #C98828
		}
	
	#Donate .c80 {
		border-left: none !important;
		text-align: center
		}
	
	#Carousel {
		display: none
		}
		
	.content_30 .c36 {
		text-align: center
		}
		
	#Featured .c33 {
		border-left:0;
		margin-bottom: 20px;
		margin-bottom: 2rem
		}
		
	#SiteFooter span {
		float: none;
		clear: both;
		text-align: center;
		display: block;
		margin: 20px 0;
		margin: 2rem 0
		}
		
	#SiteFooter nav {
		clear: both;
		text-align: center	
		}
		
	.content_39 #Calendar .days > li {
		display: none
		}
		
	.content_39 #Calendar .dates > li {
		width: 100%;
		float: none
		}
		
	.content_39 #Calendar .dates > li {
		height: auto	
		}
		
	.content_39 #Calendar .dates > li > div {
		display: 	block;
		height:		auto
		}
	}

@media print {
	
	@page  { 
	    size: 	auto;
	    margin: 20mm;  
		} 
	
	body  { 
	    margin: 		0 !important;  
	    padding: 		0 !important;
	    background: 	#FFF;
	    color: 			#000;
	    width: 			100%
		} 

	.columns > .c75, .columns > .c64, .columns > .c50, .columns > .c36, .columns > .c25 {
		float:		none;
		width:		100%;
		padding: 	0 !important
		}
			     
	* {
		border: 	none !important;
		background: none !important;
		box-shadow: none !important;
		color: 		#000 !important
		}     
	     
	#SiteHeader,
	#SiteFooter,
	#SiteCrumbtrail,
	iframe,
	label,
	button,
	input, textarea, select,
	hr {
		display: none !important
		}
	
	#SiteTitle {
		padding: 0 120px 0 0
		}
		
	#SiteTitle:before {
		content: 		"Oxford Writers' House";
		display: 		block;
		font-weight: 	normal;
		font-size: 		16px;
		color:			#999 !important;
		margin:			0 0 10px 0;
		margin:			0 0 1rem 0
		}
	
	h2, h3 {
	   page-break-after: avoid;
	   }
	   
	p, td, th, li {
		font-size:	13px
		} 
	   
	table {
		width: 100%;
		border-collapse: collapse
		}
	
	table th {
		text-align: left
		}	
	
	table td { 
		border-top: 1px solid #DDD !important
		}
		
	img {
	   max-width: 100% !important;
	   }
		
	ul, img, table {
	   page-break-inside: avoid;
	   }
	
	article {
		font-family: 	'times new roman';
		font-size:		auto !important;
		}
	
	article a {
		font-weight: 		bolder;
		text-decoration: 	none;
		color:				#000
		}
	
	article a[href^=http]:after {
		content:" <" attr(href) "> ";
		}
		
	article a[href^="#"]:after {
	   content: "";
	   }
	
	}