/* ---------------------------------------------------------------------- */
/*	Reset & Clearfix (http://meyerweb.com/eric/tools/css/reset/)
/* ---------------------------------------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}del{text-decoration:line-through}hr{background:transparent;border:0;clear:both;color:transparent;height:1px;margin:0;padding:0}mark{background-color:#ffffb3;font-style:italic}input,select{vertical-align:middle}ins{background-color:red;color:white;text-decoration:none}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}
.no-padding {
	padding: 0;
}
.inline {
	display: inline;
}
/* New border-box with inherit enabled */
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

/* ---------------------------------------------------------------------- */
/*	Basic Elements & Classes
/* ---------------------------------------------------------------------- */

body {
	background: #fff !important;
	color: #343434;
	font-size:14px;
	line-height: 1.6;
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

	/* Color Palette */
	.lt-blue, .Our_Community .color-coded, .Our_Community.color-coded {background: #00adef;}
	.dk-blue, .Faith_Formation .color-coded {background: #1d1160;}
	.green, .Faith_Justice .color-coded {background: #0D996A;}
	.gold, .Jesuit_Seattle .color-coded {background: #e4a250;}
	.red, .Liturgy_and_Worship .color-coded {background: #c90d3f;}
	.pink, .Parish_Life .color-coded {background: #a7308a;}

	.lt-blue .hover_able:hover,
		.Our_Community .color-coded .hover_able:hover {background: #0085B8;}

	.dk-blue .hover_able:hover,
		.Faith_Formation .color-coded .hover_able:hover {background: #331DA5;}

	.green .hover_able:hover,
		.Faith_Justice .color-coded .hover_able:hover {background: #10805A;}

	.gold .hover_able:hover,
		.Jesuit_Seattle .color-coded .hover_able:hover {background: #eec491;}

	.red .hover_able:hover,
		.Liturgy_and_Worship .color-coded .hover_able:hover {background: #B30E3F;}

	.pink .hover_able:hover,
		.Parish_Life .color-coded .hover_able:hover {background: #E242BB;}

	a.event-Our_Community {color: #00adef;}
	a.event-Faith_Formation {color: #1d1160;}
	a.event-Faith_Justice {color: #0D996A;}
	a.event-Jesuit_Seattle {color: #e4a250;}
	a.event-Liturgy_and_Worship {color: #c90d3f;}
	a.event-Parish_Life {color: #a7308a;}
		a.event-Our_Community:hover {color: #0085B8;}
		a.event-Faith_Formation:hover {color: #331DA5;}
		a.event-Faith_Justice:hover {color: #10805A;}
		a.event-Jesuit_Seattle:hover {color: #eec491;}
		a.event-Liturgy_and_Worship:hover {color: #B30E3F;}
		a.event-Parish_Life:hover {color: #E242BB;}

			a.event-Our_Community:visited {color: #0085B8;}
			a.event-Faith_Formation:visited {color: #331DA5;}
			a.event-Faith_Justice:visited {color: #10805A;}
			a.event-Jesuit_Seattle:visited {color: #eec491;}
			a.event-Liturgy_and_Worship:visited {color: #B30E3F;}
			a.event-Parish_Life:visited {color: #E242BB;}

	/* Priority overide status */
	.Our_Community:not(body) {background: #00adef !important;}
	.Faith_Formation:not(body) {background: #1d1160 !important;}
	.Faith_Justice:not(body) {background: #0D996A !important;}
	.Jesuit_Seattle:not(body) {background: #e4a250 !important;}
	.Liturgy_and_Worship:not(body) {background: #c90d3f !important;}
	.Parish_Life:not(body) {background: #a7308a !important;}

	.responsive-menu .Our_Community a:hover {background: #00adef !important;}
	.responsive-menu .Faith_Formation a:hover {background: #1d1160 !important;}
	.responsive-menu .Faith_Justice a:hover {background: #0D996A !important;}
	.responsive-menu .Jesuit_Seattle a:hover {background: #e4a250 !important;}
	.responsive-menu .Liturgy_and_Worship a:hover {background: #c90d3f !important;}
	.responsive-menu .Parish_Life a:hover {background: #a7308a !important;}

	/* Some basic settings */
	h1, h1 .button { font-size: 38px; }
	h2, h2 .button { font-size: 22px; }
	h3, h3 .button { font-size: 20px; }
	h4, h4 .button { font-size: 16px; }
	h5, h5 .button { font-size: 14px; }
	h6, h6 .button { font-size: 14px; }
	img:not(.webkey_logo) {width: 100%;}
		.result_section .result img {width: auto !important; height: auto; max-width: 100%;}
		img.file-icon {width: 16px; height: 16px;}
	small { font-size: 10px; }
	ol { list-style: decimal; }
	ul { list-style: disc; }
	li { margin-left: 30px; }
	dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset,blockquote,article,p {margin-bottom: 20px;}

::-moz-selection { background: #00ADEF; color: #fff; text-shadow: none; }
::selection { background: #00ADEF; color: #fff; text-shadow: none; }

h1, h2, h3, h4, h5, h6 {
	color: #1d1160;
	font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-weight: 400;
	line-height: 1.25;
	margin-bottom: 15px;
}
h1 { color: #1d1160; font-family: 'texgyrepagellaregular', serif; }
h2.section_title { color: #1d1160; font-family: 'texgyrepagellaregular', serif; }
h3, h4, h5 { font-weight: 600; }

a, a:visited {
	color: #B30E3F;
	text-decoration: none;
	-webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	   -moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
		-ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
		 -o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
			transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
}

a:hover { color: #1d1160; text-decoration: underline;}

hr {
	background: #efefef;
	color: #efefef;
	margin: 5px 0 25px;
}

	hr.dotted { border-style: dotted; }

	p + hr { margin: 25px 0 20px; }

blockquote {
	background: #f8f8f8;
	font: italic 15px/1.6 'PT Serif', Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
	padding: 20px 20px 20px 55px;
}

	blockquote.simple {
		background: none;
		border-left: 2px solid #ddd;
		color: #bbb;
		font-size: 13px;
		margin: 0;
		padding: 0 0 0 10px;
	}

	blockquote p:last-of-type { margin-bottom: 0; }

	blockquote small { font-size: 12px; }

.button, input[type="submit"], input[type="reset"], button, a.button, a.button:visited {
	background: #c90d3f;
	border: none;
	color: #fff;
	cursor: pointer;
	font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-weight: 400;
	height: auto;
	overflow: visible;
	padding: 7px 20px;
	-webkit-transition: background-color .2s ease;
	   -moz-transition: background-color .2s ease;
		-ms-transition: background-color .2s ease;
		 -o-transition: background-color .2s ease;
			transition: background-color .2s ease;
	width: auto;
	text-shadow: none;
}

	.button:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover, a.button:hover {
		background: #005194;
		color: #fff;
		border: none;
		text-shadow: none;
	}

.button, a.button, a.button:visited {
	font-size: 12px;
	display: inline-block;
	padding: 5px 16px;
}

.button.medium { font-size: 13px; }

.button.large { font-size: 15px; }

.button.no-bg {
	background: none;
	color: #005194;
	padding: 0;
}

.button.button-blue, a.button.button-blue {
	background: #50aeef;
	color: #000;
	font-weight: bold;
	font-size:16px;
	text-transform: none;
}
.button.button-blue:hover, a.button.button-blue:hover {
	background: #75c1f5;
	color: #000;
}
/* ---------------------------------------------------------------------- */
/*	Generic Classes
/* ---------------------------------------------------------------------- */

.hidden, .columns.hidden, .column.hidden { display: none; }

.disabled { cursor: auto; }

.screenreader { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); /* Fallback for old IE */ position: absolute; }

.icon { max-width: 16px; }


/* ---------------------------------------------------------------------- */
/*	Videos
/* ---------------------------------------------------------------------- */
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------- */
/*	Lists
/* ---------------------------------------------------------------------- */

ul.none {
	list-style: none;
	margin: 0;
}

ul.dotted + ul.dotted:before {
	content:'';
	display: block;
	clear: both;
	border-bottom: 1px dotted #bdbdbd;
	margin: -15px 0 5px;
}

/* ---------------------------------------------------------------------- */
/*	Alert Boxes
/* ---------------------------------------------------------------------- */

.error, .success, .info, .notice {
	display: block;
	padding: 10px 20px 10px 44px;
}

.error {
	background: #f9e5e6 url(../../../key/assets/icons/icon-box-error.png) no-repeat 10px 12px;
	border: 1px solid #f7c7c9;
	border-left-width: 4px;
	color: #b3696c;
}

div.error,
input.error,
select.error,
textarea.error,
div.error:focus,
input.error:focus,
select.error:focus,
textarea.error:focus,
div.error:hover,
input.error:hover,
select.error:hover,
textarea.error:hover {
	border: 1px solid #c90d3f;
}

.success {
	background: #e3ebc6 url(../../../key/assets/icons/icon-box-success.png) no-repeat 12px 8px;
	border: 1px solid #c2d288;
	border-left-width: 4px;
	color: #8fa442;
}

.info {
	background: #d8ecf5 url(../../../key/assets/icons/icon-box-info.png) no-repeat 10px 8px;
	border: 1px solid #9ac9df;
	border-left-width: 4px;
	color: #528da9;
}

.notice {
	background: #fcf7d9 url(../../../key/assets/icons/icon-box-notice.png) no-repeat 10px 9px;
	border: 1px solid #f5dc7d;
	border-left-width: 4px;
	color: #c4a21b;
}

.error h2 {
	color: #c90d3f;
}

/* Bootstrap alerts */
.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
	 -moz-border-radius: 4px;
		  border-radius: 4px;
}

.alert,
.alert h4 {
  color: #c09853;
}

.alert h4 {
  margin: 0;
}

.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 20px;
}

.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-success h4 {
  color: #468847;
}

.alert-danger,
.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-error a {text-decoration: underline;}
.alert-error p {margin-bottom: 0;}

.alert-danger h4,
.alert-error h4 {
  color: #b94a48;
}

.alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-info h4 {
  color: #3a87ad;
}

.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}

.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}

.alert-block p + p {
  margin-top: 5px;
}

.banner.info, .banner.error {
	float: left;
	width: 100%;
}


/* ---------------------------------------------------------------------- */
/*	Forms
/* ---------------------------------------------------------------------- */

label {
	cursor: pointer;
	display: block;
	font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	margin: 0 0 5px;
}

input, textarea, select {
	background-color: #fff;
	border: 1px solid #d0d0d0;
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
			border-radius: 0;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
			box-shadow: none;
	color: #444;
	font: 12px/1.5 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	padding: 5px 10px;
	border-radius: 0;
	margin-bottom: 20px;
}

input, select {
	height: 30px;
	width: 210px;
}

textarea {
	padding: 10px;
	width:70%;
}

input:hover, textarea:hover, select:hover { border-color: #bbb; }

input:focus, textarea:focus, select:focus { border-color: #bbb; box-shadow: rgba(0,0,0,.5) 0px 0px 1px; }

input[type="submit"], input[type="reset"], button {
	font-size: 13px;
	text-transform: uppercase;
}

	input[type="submit"].medium, input[type="reset"].medium, button.medium { font-size: 15px; }

	input[type="submit"].large, input[type="reset"].large, button.large { font-size: 17px; }

select, option {
	cursor: pointer;
	padding: 5px 7px;
}

input[type="checkbox"], input[type="radio"],
.contact-form input[type="checkbox"], .contact-form input[type="radio"] { width: 20px; }

/* Survey */
.question_container {margin:5px 0 0;width: 100%;}
.question_container.checkbox, .question_container.radio {
	column-count:2;
}
.question_container input, .question_container textarea {
	margin: 0;
}
.question_container textarea  {
	width:100%;
}
.screener_page tr {
	display:block;
	margin:10px 0 20px 0;
}
.screener_page td {
	width: 100%;
    display: block;
}
.child_question {
	column-span: all;
}
.child_question p {
	margin-bottom:4px;
}

/* Fix for Mobile Safari */
input[type="checkbox"] { -webkit-appearance: checkbox; }
input[type="radio"] { -webkit-appearance: radio; }

/* Chrome, Safari */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #b0b0b0; }

/* Firefox */
input:-moz-placeholder, textarea:-moz-placeholder { color: #b0b0b0; }

/* jQuery fallback */
input.placeholder, textarea.placeholder { color: #b0b0b0; }

/* ---------------------------------------------------------------------- */
/*	Header
/* ---------------------------------------------------------------------- */

section.header {margin-top: 5px;}
	.header .row {padding-bottom: 20px;}
	.header .row .icon_bar {padding-bottom: 0px;}
	.logo {padding-top: 15px;}

	/* -------------------------------------------------- */
	/*	Main Navigation
	/* -------------------------------------------------- */

	nav.color-coded * {margin: 0;}
		nav.color-coded ul {list-style: none;}
		nav.color-coded li {
			font-size:13px;
			float: right;
			position: relative;
			width: 19%;
			margin-left: 5px;
			text-align: center;
		}

		nav.color-coded li a {
			padding: 5px;
			display: block;
			color: #fff;
			text-decoration: none;
		}

	.search_box {
		margin: 10px 0 0 360px !important;
		text-align: right;
	}
		.search_box form {margin:0;}
		.search_box form input#keywords {
			width: 100%;
			padding: 4px 4px;
			margin: 0 0 10px 0;
		}

		.search_box input#search_submit {
			float: right;
			margin: -35px 2px 0 0;
			background:url('/sites/stj/assets/arrow.png') no-repeat center center;
			padding:10px;
			text-indent:-999px;
			display:block;
			width:17px;
			height:17px;
			border:none;
		}

/* ---------------------------------------------------------------------- */
/*	Content
/* ---------------------------------------------------------------------- */

section.main-content { background: #F7F7F7; }
	p {font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:14px;}

	.page-bar * {margin: 0;}
		.Our_Community .title_nav ul {list-style: none;}
		.Our_Community .title_nav ul li.active > a {display: none;}
			.Our_Community .title_nav ul li {float: left; width: 20%; padding: 0; text-align: center;}
				.Our_Community .title_nav ul li:first-child {width: 23%;}
				.Our_Community .title_nav ul li:last-child {width: 17%;}
			.Our_Community .title_nav ul li a {display: block; padding: 20px 10px;}
			.Our_Community .title_nav ul li a span {color: #fff; font-weight: 600; font-size: 16px;}
			.Our_Community .title_nav ul li a i {font-weight: normal; color: #fff; font-size: 18px; margin-right: 8px;}
			.Our_Community .title_nav ul li:hover {background: #0085B8;}
			.title_nav a, .title_nav a > * {text-decoration: none;}

		.page-bar .title_nav .category_title {
			display: block;
			font-size: 22px;
			font-weight: 600;
			color: #fff;
			padding: 15px 20px;
		}

		.page-bar .title_nav .perm_calendar {
			display: block;
			text-align: center;
			font-size: 16px;
			font-weight: normal;
			padding: 20px 10px;
		}
			.page-bar .title_nav .perm_calendar i, .page-bar .title_nav .perm_calendar span {color: #fff;}
			.page-bar .title_nav .perm_calendar i {
				font-size: 18px;
				margin-right: 8px;
			}

	.page_content {margin-top: 40px; float: left;}

		.page_content .page_text {padding-left: 40px;}
			.page_text h1.page_title {font-variant:small-caps; margin: 0}
			.page_text h2.page_subtitle {font-size: 16px; color: #574aa6;}

			.two-col {
				-moz-column-count: 2;
				-moz-column-gap: 20px;
				-webkit-column-count: 2;
				-webkit-column-gap: 20px;
			}

			.one-col {
				-moz-column-count: 1;
				-moz-column-gap: 0px;
				-webkit-column-count: 1;
				-webkit-column-gap: 0px;
			}

	/* -------------------------------------------------- */
	/*	Back to Top
	/* -------------------------------------------------- */

	#back-to-top, .touch-device #back-to-top:hover {
		background: url("/sites/stj/assets/arrow-up-large.png") no-repeat center center;
		background-color: rgb(221, 221, 221);
		background-color: rgba(221, 221, 221, .7);
		bottom: 20px;
		color: transparent;
		display: none;
		font: 0/0 a;
		height: 46px;
		position: fixed;
		right: 20px;
		text-shadow: none;
		-webkit-transition: all .2s ease;
		   -moz-transition: all .2s ease;
			-ms-transition: all .2s ease;
			 -o-transition: all .2s ease;
				transition: all .2s ease;
		width: 45px;
		z-index: 100;
	}

		#back-to-top:hover, .touch-device #back-to-top:active { background-color: #c90d3f; }


/* ---------------------------------------------------------------------- */
/*	Sidebar
/* ---------------------------------------------------------------------- */

.page_sidebar { padding-left: 40px; }
	.page_sidebar .portrait, .page_content .portrait {width: 50%; float: left; padding-left: 5px; max-width: 160px; min-height: 380px;}
	.portrait img {
	    height: 200px;
	    width: auto;
	    max-width: 100%;
	    margin: 0 auto;
	    display: block;
	}
		.portrait_name, .portrait_caption {display: block;}
		.page_sidebar .portrait .portrait_name, .page_content .portrait .portrait_name {color: #1d1160; font-weight: 600; font-size: 13px; padding-top: 10px;}
		.page_sidebar .portrait .portrait_caption, .page_content .portrait .portrait_caption {font-size: 12px; padding-top: 5px;}

	.page_sidebar .right_nav {float: left; padding: 20px 0 0 5px; width: 100%;}
		.page_sidebar .right_nav ul, .right_nav ul li {list-style: none; margin: 0; width: 100%;}
		.right_nav ul li a,
		.upcoming_events h2 {display: block; padding: 10px 15px; color: #fff; font-size: 16px; font-weight: 600;}
			.right_nav ul ul li {background: #F7F7F7;}
			.right_nav ul ul li a,
			.upcoming_events .event_listing_link a,
			.upcoming_events .event_listing_description {color: #343434; font-weight: 600; font-size: 12px; padding: 10px 0 0 15px;}
			.right_nav ul ul ul li a,
			.upcoming_events .event_listing_description {padding: 0 35px; font-weight: normal;}

			.upcoming_events .event_listing_link {margin-bottom: 0;}
			.upcoming_events .event_listing_description span {display: block; padding-left: 35px;}

/* ---------------------------------------------------------------------- */
/*	Stain Glass
/* ---------------------------------------------------------------------- */

.sg-main {
	width: 100%;
	position: relative;
}

	.sg-main h3 {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
		line-height: normal;
		margin-bottom: 14px;
	}

	/* PLUGIN STYLES */
	.sg-grid {
		list-style: none;
		text-align: center;
		margin: 0 auto;
	}

	.sg-grid li {
		width: 32.98%;
		height: 200px;
		margin: 2.5px;
		background: #00adef;
		color: #fff;
		display: block;
		float: left;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.sg-grid li a, .sg-grid li a:visited, .sg-grid li a:hover, .sg-grid li a:active {text-decoration: none; color: #FFF; cursor: pointer;}

	.sg-grid li:nth-child(3n+1) {margin-left: 0;}
	.sg-grid li:nth-child(3n+3) {margin-right: 0;}

	.sg-grid li img {
		width: 100%;
	}

	.sg-body {
		padding: 28px 25px;
		text-align: left;
	}

	.sg-title {
		margin-top: 0px;
	}

	.sg-title i {
		color: #fff;
		font-size: 28px;
		margin-right: 15px;
		vertical-align: baseline;
	}

	.sg-meta {margin-bottom: 5px;}

	.sg-body p {
		line-height: 21px;
		font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
		font-size: 14px;
		margin-bottom: 21px;
		font-weight: normal;
	}

	.sg-event p {
		max-height: 63px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3; /* number of lines to show */
		-webkit-box-orient: vertical;
	}

	.sg-text p {
		max-height: 83px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4; /* number of lines to show */
		-webkit-box-orient: vertical;
	}

	.sg-image img {
		border: 5px #fff solid;
		width: 60% !important;
		margin: 28px;
	}

	.sg-text .sg-content > div:first-child {height: 80%;}
	.sg-text .sg-content > div:last-child {height: 20%; text-align: right;}
		.sg-text .sg-content > div:last-child a {color: #fff;}

/* ---------------------------------------------------------------------- */
/*	Calendar
/* ---------------------------------------------------------------------- */

	/* Calendar refinements, main styles in calendar.css */
	.calendar_filters {margin: 20px 0;}
	.calendar_filters a {padding:4px 8px; color:#fff !important; opacity:.4; position: relative;}
	.calendar_filters a.all-events:hover::after {
		content: "Remove filters";
		position: absolute;
		left: 25px;
		top: 0px;
		min-width: 110px;
		padding: 5px;
		margin: 0;
		color: #000 !important;
		font-size: 14px;
		z-index: 100;
	}
	.calendar_filters a:hover, .calendar_filters a.active {text-decoration:none; color:#fff; opacity:2}
	.calendar_filters a.all-events {color:#000 !important; font-size:18px; line-height:.6;}
	.calendar_filters a.all-events:hover {color:#000;}

	.key_calendar .key_calendar_event{line-height:12px !important;}
	.key_calendar_prev_next {font-size:25px;}
	.key_calendar .key_calendar_month li.key_cal_header,
	.key_calendar .key_calendar_month li.key_date {
	  padding:2px 0 4px 5px !important;
	  margin:0;
	  width:13%;
	}
	.key_calendar .key_calendar_month li.key_date {min-height:90px;}
	.key_calendar li.key_date.key_date_active_day {
		border: 1px solid #000;
		z-index: 100;
		position: relative;
	}

	.key_calendar h3 {margin:0; line-height:18px; padding:0;  }

	.key_calendar_list {margin-top: 40px;}
	.key_calendar_list .row {padding: 0;}

	/*Small calendar*/
	.key_calendar.small_cal {width:100%;}
	.key_calendar.small_cal .key_calendar_month li.key_date,
	.key_calendar.small_cal .key_calendar_month li.key_cal_header  {
		min-height:0; padding:2px 0 2px 0 !important; width:13%;
	 }
	 .key_calendar.small_cal .key_calendar_month li.key_date span,
	 .key_calendar.small_cal .key_calendar_month li.key_date h3 {
	   margin-left:5px;
	 }
	.key_calendar.small_cal .key_calendar_prev, .key_calendar.small_cal .key_calendar_next { line-height:.4;}
	.key_calendar.small_cal .key_calendar_next {margin-left:-15px !important;}

	/* Event pages */
	.columns.event_poster {margin:0 20px 20px 0;}

	/* Events registration */
	.register_now.register_now.register_now {
		margin:3px 0;
		display:inline-block;
		float: none;
		text-decoration: none;
		color: #fff;
	}
	table.event_tickets {margin:10px 0; border-collapse:collapse;}
	.event_tickets th {color: #777; border-bottom:1px solid #ccc; text-align:left; font-weight:bold; min-width:70px; padding-right: 20px;}
	.event_tickets td {padding:10px 16px 5px 0; vertical-align:top;}
	td.ticket_quantity {padding-top:8px;}
	.event_tickets .ticket_quantity select {width:4em;}
	.ticket_level, .ticket_price, .ticket_quantity {border-bottom:1px dashed #ccc;}

/* ---------------------------------------------------------------------- */
/*	Event Display and Registration
/* ---------------------------------------------------------------------- */

/** Progress bar with steps **/
/* https://blog.sathomas.me/post/tracking-progress-in-pure-css */

	ol.progtrckr {
		margin: 0 0 15px 0;
		padding: 0;
		list-style-type none;
	}

	ol.progtrckr li {
		display: inline-block;
		text-align: center;
		margin: 0;
		padding:0 0 .5em 0;
		position:relative;
	}

	ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
	ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
	ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
	ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
	ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
	ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
	ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
	ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

	ol.progtrckr li.progtrckr-done {
		color: black;
		border-bottom: 4px solid #12A36F;
	}
	ol.progtrckr li.progtrckr-todo {
		color: #888;
		border-bottom: 4px solid silver;
	}
	ol.progtrckr li.progtrckr-current {
	   font-weight:bold;
	   color:#777;
	   border-bottom: 4px solid #999;
	}

	ol.progtrckr li:before {
		position: absolute;
		line-height: 1.2em;
		height: 1.2em;
		width: 1.2em;
		bottom:-10px;
		left:45%;
		background-color: white;
		font-family:fontawesome;
	}
	ol.progtrckr li.progtrckr-done:before {
		content: "\f058";
		color: #12A36F;
	}

	ol.progtrckr li.progtrckr-todo:before {
		content: "\f10c";
		color: silver;
	}

	ol.progtrckr li.progtrckr-current:before {
		content: "\f111";
		color: #999;
	}

/* ---------------------------------------------------------------------- */
/*	Image Full Width Header
/* ---------------------------------------------------------------------- */
.image-full-width-header {
	border-top: 5px solid #fff;
	border-bottom: 2px solid #fff;
	background-color: #1D1160;
}

.image-full-width-header * {color: #fff;}
.image-full-width-header .image_container,
.image-full-width-header .image_content {padding: 40px;}
.image-full-width-header .image_container p {text-align: center; font-weight: bold; margin: 0;}

/* ---------------------------------------------------------------------- */
/*	Family Form (Join the Parish)
/* ---------------------------------------------------------------------- */
.basic_reg_contain {margin-top: 20px;}
.registration-contain .opt_in {font-weight: normal; font-size: 12px; margin-bottom: 20px;}
.registration-contain .opt_in input {margin: 0;}
.family-form.child_formation div.email label {height: 44px;}
.family-form section.ten.columns {padding-right: 40px;}
	.family-form .five.columns {width: 270px;}
	.family-form .phone_select span input {display: inline; width: auto; height: auto; margin: 0;}
	.family-form .phone_select span {font-size: 80%;}
	.family-form .phone_select span.alert {float: left;}
	.family-form .phone_select b {display: block; margin: 0;}
	.family-form .alternate_phone label {text-transform: capitalize;}
	.family-form .three.columns,
	.family-form .nine.columns,
	.family-form .five.columns,
	.family-form .six.columns {padding-right: 10px;}
	.family-form .dependents input {margin-top: 20px;}
	.family-form input,
	.family-form button,
	.family-form select,
	.family-form textarea {width: 100%;}
	.family-form input[type='checkbox'],
	.family-form input[type='radio'],
	.family-form .contributions input[type='checkbox'] {height: auto; width: auto; margin: 0 10px;}
	.family-form .sacraments,
	.family-form .contributions {margin-bottom: 20px;}
	.family-form .other_relation,
	.family-form:not(.child_formation) .upload {display: none;}
	.family-success {margin-top: 20px;}
	.family-form hr.nine.columns {
		border: 0;
		height: 1px;
		width: 530px;
		background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
		background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
		background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
		background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	}

.adCount input,
.adCount textarea {
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 10px;
}

.adCount input[type="button"] {
  margin: 0;
  -webkit-appearance: button;
  cursor: pointer;
}

.adCount input::-webkit-outer-spin-button,
.adCount input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.adCount .input-group {
  clear: both;
  margin: 15px 0;
  position: relative;
}

.adCount .input-group input[type='button'] {
  background-color: #eeeeee;
  min-width: 38px;
  width: auto;
  transition: all 300ms ease;
}

.adCount .input-group .button-minus,
.adCount .input-group .button-plus {
  font-weight: bold;
  height: 38px;
  padding: 0;
  width: 38px;
  position: relative;
}

.adCount .input-group .quantity-field {
  position: relative;
  height: 38px;
  left: -6px;
  text-align: center;
  width: 62px;
  display: inline-block;
  font-size: 13px;
  margin: 0;
  resize: vertical;
}

.adCount .button-plus {
  left: -13px;
}

.adCount input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
}

/* ---------------------------------------------------------------------- */
/*	Product Registration (Baptism, CFF)
/* ---------------------------------------------------------------------- */

.family-form .symfony_multichoice {margin-bottom: 20px;}
.family-form .symfony_multichoice label {
	display: inline;
	font-weight:normal;
}
.family-form .symfony_multichoice label:first-child {font-weight:bold;}
.family-form .symfony_multichoice input[type="radio"] {
	display: inline;
    width: auto;
    margin: 0 5px;
}
a.registration_product {
	background: #1d1160;
	color: #fff;
	padding:2px 4px;
	font-size:12px;
	display:inline-block;
	font-weight: normal;
}
span.registration_type {
	font-size:14px;
	font-weight:normal;
}
div.sponsors {background:#eee; margin:0 10px 10px 0 !important; padding:10px;}
div.delete_contact input {margin-top: 1px;}
.delete_dialog {padding-left: 40px;}
.error #dialog p {color: #b3696c;}
#dialog, .ui-dialog-buttonpane {border:none; background: none;}

input.registration_payment {
	font-weight: bold;
    font-size: 14px;
    background: #1d1160;
}


/* ---------------------------------------------------------------------- */
/*	Hamburger Navigation
/* ---------------------------------------------------------------------- */

header.hamburger {display:none; z-index: 1;}

#nav-toggle {
	display: block;
	padding: 10px 20px 10px 10px;
	cursor: pointer;
}

#nav-toggle i {
	color: #fff;
	text-decoration: none;
	font-size: 22px;
}

#nav-toggle span {
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	padding: 15px 20px;
}

.responsive-menu {
	display: none;
	background: #333333;
}

.responsive-menu .search_box {
	margin: 0 !important;
	padding-top: 20px;
}
	.responsive-menu #search_form {position: relative;}
	.responsive-menu .search_box form input#keywords {
		width: 100%;
		padding: 4px 10px;
		margin: 0;
		background: #F7F7F7;
		border: none;
		border-radius: 0;
	}

	.responsive-menu .search_box label.btn {
		display:inline-block;
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
	}

	.responsive-menu input#keywords::-webkit-input-placeholder {color: #000;}
	/* Firefox 18- */
	.responsive-menu input#keywords:-moz-placeholder {color: #000;}
	/* Firefox 19+ */
	.responsive-menu input#keywords::-moz-placeholder {color: #000;}
	.responsive-menu input#keywords:-ms-input-placeholder {color: #000;}

	.responsive-menu .search_box label.btn .fa-search {padding: 8px 10px;}
	.responsive-menu .search_box input#search_submit {display: none;}

.responsive-menu ul, .responsive-menu li {
	list-style: none;
	margin: 0;
	width: 100%;
	background: #333333 !important;
}

.responsive-menu ul li a {
	display: block;
	padding: 10px 15px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid #525252;
}

.responsive-menu ul li a:hover {
	border-color: #fff;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

.responsive-menu ul ul li a {
	color: #fff;
	font-weight: 600;
	font-size: 12px;
	padding: 10px 0 10px 15px;
}

.responsive-menu ul ul ul li a {
	padding-left: 40px;
	font-weight: normal;
}

/* ---------------------------------------------------------------------- */
/*	Checkout
/* ---------------------------------------------------------------------- */

.geotrust_badge {float:right; margin: 20px 10px 0 0;}
.geotrust_badge a {
	background: url('/key/assets/global/geotrust.gif');
	text-indent: -9999px;
	border:1px solid #ccc;
	display: block;
	width: 125px;
	height: 33px;
}

#ajaxLoading {
  background: url("/key/assets/global/ajax-loader.gif") no-repeat center center transparent;
  text-indent:-999px; display:block; width:50px; height:12px; margin:5px 0 0;}

#payment-form h2 {margin:20px 0 10px; width:350px; max-width:100%;}
#payment-form h2 span.checkout_subheading {display:block; margin:5px 0 20px 0; font-weight:normal; font-size:11px; line-height:1.1; font-family:Verdana, Arial, sans-serif;}
#payment-form h2 span.checkout_subheading label {margin:10px 0 -10px 0; display:block;}
#payment-form h2 span.checkout_subheading label.hidden {display:none;}

#payment-form .cards_accepted {font-size:11px;}

.checkout_step, #payment-form .existingCard {padding:5px 5px 5px 8px; color:#000; border-radius:3px;}
.checkout_step {padding:10px 5px 5px 10px; width:440px; max-width:100%}

.checkout_step.secure {border:2px solid #ccc;}
.secure_message {color:#666; margin-bottom: 20px;}
.secure_icon {display:block; opacity:.7; float:left; padding:0 5px 0 0;}
.secure_icon a {background:url('/key/assets/icons/black_lock.png') no-repeat; display:block; width:22px; height:25px; text-indent:-999px}
#payment-form .checkout_step, #payment-form .existingCard {padding:5px 5px 5px 8px; color:#000; background:#fdfdfd; border-radius:3px;}
#payment-form .checkout_step {padding:20px 5px 5px 20px; width:500px; max-width:90%;}

#payment-form input[type="text"], #payment-form  input[type="password"], #payment-form  textarea {width:90%; background:#fff;}
#payment-form input.small {width:4em;}
#payment-form input.medium {width:12em;}
#payment-form #standard {margin:0 3px 0 0}
#payment-form #priority {margin:0 3px 0 15px;}
#payment-form .payment-errors {display:none;}


/*Donations*/
#sliding_step fieldset {padding:0 0 0 0}
#sliding_step fieldset legend {margin:0 35px 0 0; display:block;}
#sliding_step fieldset label {display:inline-block; margin:10px 0 0 0;}
#sliding_step fieldset label input[type=radio] {display:none;}
#sliding_step fieldset label span {display:inline-block; width:50px; padding:5px; text-align:center; color:#fff; margin:4px 10px 0 0;}
#sliding_step fieldset label span:hover {cursor:pointer;}
#sliding_step fieldset label input[type=radio]:checked + span {background: #2FA87B;}

table.lineItems {margin:0 0 10px 0; width:300px;}
table.lineItems th {text-align:left; padding:0 15px 8px 0;}

table.lineItems span {display:block;}
table.lineItems td {vertical-align:top;}
table.lineItems .product_title {width:200px !important; display:block;}
table.lineItems .product_quantity {}

#payment-form  .error, #lost_form .error, #download_form .error, .error.formerror {color:#d2232a;}
#download_form label.error, #lost_form label.error {margin:0 0 0 5px;}
#payment-form label.error {margin: 0; display: block;}

#payment-form .existingCard {display:inline-block; width:200px; margin:0 10px 10px 0; background:#f7f7f7; color:#000;}
#payment-form .existingCard.active, #payment-form .existingCard:hover {background:#fbfbfb; color:#000;}
#payment-form .existingCard input{float:left; margin:15px 5px 0 0; height:20px;}
#payment-form .existingCard span {display:block;}
#payment-form .form-row {margin:0 0 10px 0;}
#payment-form .form-row strong {margin:10px 0 0; display:block;}
#payment-form .card-cvc {width:30px;}
#payment-form .card-expiry-month {width:70px; margin: 0 0 0 5px; padding:4px 2px; display:inline;}
#payment-form .card-expiry-year {width:65px; padding:4px 2px; display:inline; margin:0 0 5px 0;}
#payment-form .shipto-zipcode {width:80px;}


.error_display, .error_display_summary {color:red;}

/** Shopping cart **/

#shopping_cart {border-collapse:collapse;}
#shopping_cart h3 {font-size:14px; font-weight:bold; margin:5px 0 0;}
#shopping_cart td, #shopping_cart th {padding:5px 22px 5px 0; }
#shopping_cart th {text-align: left; vertical-align:bottom; font-weight:bold; font-size:12px; color:#555; border-bottom:2px solid #ccc;}
#shopping_cart th:last-child {padding-right:0}
#shopping_cart th.quantity {text-align:right;}
#shopping_cart td {padding-top:10px;}
#shopping_cart td {vertical-align: top;}
#shopping_cart td h5 {margin-top: 0;}
#shopping_cart td .in_stock {display:none;}
#shopping_cart td.subtotal, #shopping_cart td.quantity {text-align: right;}
#shopping_cart td.subtotal {padding:25px 0 10px 0; font-weight:bold; color:#333}

td.details span {font-size:11px; max-width:350px; display:block; line-height:1.1;}

#shopping_cart td.buttons a img {margin: 0; float:right; margin-left: 10px;}
#shopping_cart .line_product_price input {display:inline; margin:0; width:40px}

#shopping_cart td.quantity { position:relative;}
#shopping_cart td.quantity input {width:28px;padding:1px 1px 1px 4px; margin:0;}
#shopping_cart td.quantity .change_quantity {display:block;}
#shopping_cart input.remove
	{
		width: 70px;
		border: none;
		color: transparent;
		cursor: pointer;
		border: 0px solid red;
		text-indent: -9000px;
		text-transform: capitalize;
	}
#shopping_cart td.quantity {position:relative !important; display:block;}
#shopping_cart td.quantity input {}
#shopping_cart input.error {color:#f00;}
#shopping_cart td.quantity label.error {text-align:left; width:200px; position:absolute; left: -16px; color: red; top: 40px;}

/* ---------------------------------------------------------------------- */
/*	Contact Us
/* ---------------------------------------------------------------------- */

#map {
	border-bottom: 1px solid #c5c3c0;
	border-top: 1px solid #c5c3c0;
	height: 440px;
	margin: -41px 0 40px;
	position: relative;
	width: 100%;
}

#map:before, #map:after {
	background: none;
	-webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
	   -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
			box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
	content: '';
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#map:after {
	bottom: 0;
	top: auto;
}

.contact-form, .comments-form { max-width: 100%; }

.contact-form { margin: 0 -20px 0 0; }

	.contact-form .input-block, .comments-form .input-block {
		float: left;
		margin: 0 20px 20px 0;
	}

	.contact-form .input-block:nth-of-type(3n), .comments-form .input-block:nth-of-type(3n) { margin-right: 0; }

		.contact-form input { width: 198px; }

	.contact-form .textarea-block, .comments-form .textarea-block { clear: both; }

		.contact-form textarea {
			height: 150px;
			max-width: 100%;
			width: 678px;
		}

	.contact-form input[type="submit"], .comments-form input[type="submit"],
	.contact-form input[type="reset"], .comments-form input[type="reset"] {
		margin: 0 0 20px;
		width: auto;
	}

/* ---------------------------------------------------------------------- */
/*	Footer
/* ---------------------------------------------------------------------- */

section.footer {
	color: #9791B9;
	font-size: 14px;
}

	section.footer .row {padding-bottom: 20px;}

	.footer a, .copyright a { color: #9791B9; }
		.footer li:hover .copyright {font-weight: bold; color: #fff;}

	.footer .site_credits {
		margin-top: 20px;
		float: left;
		text-align: center;
		font-size: 11px;
	}
		.site_credits span {
			display: block;
			margin: 0 auto;
		}

		.site_credits span:first-child {margin-bottom: 10px;}
		.site_credits span:first-child a {color: #fff;}
		.site_credits span:first-child a.close {color: #5d6670;}

	/* -------------------------------------------------- */
	/*	Footer Navigation
	/* -------------------------------------------------- */

	nav.footer {float: left; margin: 40px 0 40px 40px;}
		nav.footer * { margin: 0; }
		nav.footer ul { list-style: none; }

			nav.footer ul li {
				background: none;
				border: none;
				float: left;
				width: 20%;
			}

			nav.footer > ul > li {
				padding-right: 40px;
			}

			nav.footer ul li a {
				font-size: 16px;
				color: #FFF;
			}

				nav.footer ul ul li {
					float: none;
					list-style: none;
					width: 100%;
					margin: 10px 0 0 0;
				}

				nav.footer ul ul li a {
					padding: 0;
					font-size: 12px;
					color: #9791B9;
				}

				nav.footer ul ul li:hover a {
					color: #FFF;
				}


	/* -------------------------------------------------- */
	/*	Contact Info
	/* -------------------------------------------------- */

	.contact-info { margin: 0; }

		.contact-info li {
			float: left;
			list-style: none;
			margin: 0 0 5px 0;
			padding: 0 0 0 24px;
		}

		.contact-info li:first-child { margin-left: 0; padding-left: 0px;}

		.contact-info .copyright {font-weight: bold; color: #53a3d1;}

	/* -------------------------------------------------- */
	/*	Social Links
	/* -------------------------------------------------- */

	.social-links { margin: 0; }

		.social-links li {
			float: left;
			list-style: none;
			margin: 0 0 5px 24px;
			padding: 0 0 0 0px;
		}

		.social-links li:first-child { margin-left: 0px; }

			.social-links a {
				display: block;
				-webkit-transition: all 0.2s ease-out;
				   -moz-transition: all 0.2s ease-out;
					 -o-transition: all 0.2s ease-out;
					-ms-transition: all 0.2s ease-out;
						transition: all 0.2s ease-out;
			}

	/* -------------------------------------------------- */
	/*	Misc Elements
	/* -------------------------------------------------- */

	#footer .button:hover, #footer input[type="submit"]:hover #footer input[type="reset"]:hover, #footer button:hover {
		background: #ddd;
		color: #005194;
	}

	#footer .button.no-bg { color: #ddd; }

	#footer .button .arrow { background-color: #005194; }

	#footer blockquote { background-color: #464646;}

		#footer blockquote.simple {
			background: none;
			border-left-color: #484848;
			color: #868686;
		}

	#footer .infobox {
		background: #464646;
		border-color: #363636;
	}

	#footer .infobox, #footer .infobox * { color: #868686; }

	/* -------------------------------------------------- */
	/*	Subscribe Modal
	/* -------------------------------------------------- */

	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
		background-color: #373c44;
	}

	.modal-backdrop.fade {
		opacity: 0;
	}

	.modal-backdrop,
	.modal-backdrop.fade.in {
		opacity: 0.3;
		filter: alpha(opacity=40);
	}

	.modal {
		text-align: left;
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 200;
		width: 498px;
		margin: -17% 0 0 -250px;
		background-color: #FFF;
		z-index: 1000;
		-khtml-border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		box-shadow: 0 0 0 4px rgba(55, 60, 65, 0.1);
		-moz-box-shadow: 0 0 0 4px rgba(55, 60, 65, 0.1);
		-webkit-box-shadow: 0 0 0 4px rgba(55, 60, 65, 0.1);
		padding: 50px 50px 55px;
	}

	.modal a.close {
		position: absolute;
		top: 15px;
		right: 18px;
		padding: 5px 10px;
		color: #9099A3;
		text-decoration: none;
	}

	.modal a.close:hover {
		color: #5d6670;
	}

	.modal h1,
	.modal h2 {
		margin: 0;
		padding: 0;
	}

	.modal h1 {
		font-family: 'Droid Serif', serif;
		font-weight: 700;
		color: #373c44;
		margin-left: -2px;
		margin-bottom: 10px;
		font-size: 35px;
	}

	.modal h2 {
		font-size: 14px;
		line-height: 1.5;
		color: #9099A3;
		font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
		font-weight: normal;
		width: 100%;
		border-bottom: 1px solid #ECEEF1;
		padding-bottom: 20px;
		margin-bottom: 30px;
	}

	.modal #response {
		float: left;
		font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
		font-size: 15px;
		margin: 23px 0 0 20px;
		padding: 0 0 0 25px;
		color: #9099A3;
		background: url('../assets/tick.png') left center no-repeat;
		display: none;
	}

	.modal form#subForm button,
	.modal form#subForm input {
		font-family: Arial, sans-serif;
		-khtml-border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		margin: 0;
	}

	.modal form#subForm input {
		width: 378px;
		height: 43px;
		border: 1px solid #cfd4db;
		padding: 12px 10px;
		margin: 0 0 5px 0;
		font-size: 15px;
		color: #373c44;
	}

	.modal form#subForm input::-webkit-input-placeholder {color: #c8ccd1;}
	.modal form#subForm input:-moz-placeholder {color: #c8ccd1;}
	.modal form#subForm input::-moz-placeholder {color: #c8ccd1;}
	.modal form#subForm input:-ms-input-placeholder {color: #c8ccd1;}
	.modal form#subForm input:focus {
		border-color: #b1b9c6;
		outline: none;
	}

	.modal form#subForm input:focus::-webkit-input-placeholder {color: #acb3ba;}
	.modal form#subForm input:focus:-moz-placeholder {color: #acb3ba;}
	.modal form#subForm input:focus::-moz-placeholder {color: #acb3ba;}
	.modal form#subForm input:focus:-ms-input-placeholder {color: #acb3ba;}
	.modal form#subForm input.error {
		background: url('../assets/cross.png') right center no-repeat;
		background-position: 352px center;
		color: #df452c;
	}

	.modal form#subForm button, .register_now {
		float: left;
		background: #00adef;
		border: none;
		border-bottom: 2px solid #007EAE;
		color: #fff;
		font-size: 15px;
		padding: 13px 30px;
		cursor: pointer;
		margin-top: 10px;
	}

	.modal form#subForm button:hover, .register_now:hover {background: #00B9FF;}
	.modal form#subForm button:active,
	.modal form#subForm button:focus,
	.register_now:active,
	.register_now:focus {
		background: #00A4E2;
		border-bottom: 0;
		border-top: 2px solid #00739E;
		outline: none;
	}


/* ---------------------------------------------------------------------- */
/*	Media Queries
/* ---------------------------------------------------------------------- */

/* Standard 960 or larger (browsers) */
@media only screen and (min-width: 960px) {

}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 767px) {

	/* -------------------------------------------------- */
	/*	Header
	/* -------------------------------------------------- */

	.logo { max-height: 100%; }

	/* -------------------------------------------------- */
	/*	Content
	/* -------------------------------------------------- */

	#content img {
		height: auto;
		max-width: 100%;
	}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 479px) and (max-width: 767px) {

	/* -------------------------------------------------- */
	/*	Header
	/* -------------------------------------------------- */

	#header { height: 72px; }

	.logo { margin-top: -7px; }

		/* ---------------------------------------- */
		/*	Main Navigation
		/* ---------------------------------------- */

		nav.color-coded li {
			width: 18%;
			height: 46px;
		}

		.search_box {margin: 10px 0 0 288px !important}

	/* -------------------------------------------------- */
	/*	Home
	/* -------------------------------------------------- */

		.sg-grid li {
			width: 32.89%;
			height: 168px;
		}

		.sg-main h3 {font-size: 16px;}
		.sg-title i {font-size: 18px;}

		.sg-event p {-webkit-line-clamp: 2;}
		.sg-text p {-webkit-line-clamp: 3;}

		h1, h1 .button {font-size: 32px;}

		.key_calendar ul.key_calendar_month.key_calendar_month {width: 760px;}
		.key_calendar .key_calendar_month li.key_date {
			height: 70px;
			min-height: 30px;
		}

	/* ---------------------------------------------------------------------- */
	/*	Family Form (Join the Parish)
	/* ---------------------------------------------------------------------- */
		.family-form .reason_for_reg label {height: 66px;}
		.family-form .five.columns {width: 216px;}
		.family-form hr.nine.columns {width: 420px;}

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	/* Override skeleton */
    .container { width: 100%; }
    .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {
    	width: 100%;
    }
	/* -------------------------------------------------- */
	/*	Header
	/* -------------------------------------------------- */

	#header { height: auto; }
	#admin_rightbox {
		width: 150px;
		padding-top: 10px;
	}

		.logo {
			display: block;
			float: none;
			text-align: center;
		}
			.logo img {
				width: 80%;
				margin-bottom: 20px;
			}

	.search_box {margin: 20px 0 0 0 !important;}

	nav.color-coded li {
		width: 20%;
		height: 46px;
	}
	nav.color-coded li:last-child {margin-left: 0;}

	.Our_Community .title_nav ul li a {padding: 10px 5.5px;}
	.Our_Community .title_nav ul li a i {display: none;}
	.Our_Community .title_nav ul li a span {font-size: 14px;}

	.Our_Community .title_nav ul li,
	.Our_Community .title_nav ul li:first-child,
	.Our_Community .title_nav ul li:last-child {width: auto}

	.sg-grid li {
		width: 100%;
		height: 227px;
		margin: 2.5px 0;
	}

	.sg-main h3 {font-size: 22px;}
		.sg-title i {font-size: 24px;}

	.sg-event p {
		max-height: 105px;
		-webkit-line-clamp: 5;
	}

	.sg-text p {
		max-height: 126px;
		-webkit-line-clamp: 6;
	}

	.sg-content p {padding-right: 0;}

	.page-bar .title_nav .perm_calendar {display: none;}
	h1, h1 .button {font-size: 26px;}
	.page_text h2.page_subtitle {font-size: 14px;}

	.two-col {-webkit-column-count: 1;}
	.page_content .page_text {padding: 0 40px;}
	.page_sidebar {padding: 0 40px;}

	nav.footer ul li {width: 50%;}
	nav.footer > ul > li {padding-bottom: 40px;}

	#back-to-top, .touch-device #back-to-top:hover {display: none !important; opacity: 0 !important}

	.key_calendar ul.key_calendar_month.key_calendar_month {width: 380px;}
	.key_calendar .key_calendar_month li.key_date {
		height: 50px;
		min-height: 30px;
	}

	header.hamburger {display: block;}
	.page-bar.color-coded, .landing-image, .header .search_box, .right_nav {display: none;}

	/* ---------------------------------------------------------------------- */
	/*	Family Form (Join the Parish)
	/* ---------------------------------------------------------------------- */
		.family-form .nine.columns, .family-form .five.columns, .family-form .three.columns {width: 340px;}
		.family-form .reason_for_reg label {height: auto;}
		.family-form hr.nine.columns {width: 330px; margin-bottom: 20px;}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

	nav.color-coded li {
		width: 20%;
		margin: 0;
		font-size: 11px;
		line-height: 1.5;
	}

	nav.color-coded li a {
		padding:4px 2px;
	}

	.page_content .page_text {
		padding: 0 20px
	}

	.Our_Community .title_nav ul li a {padding: 15px 21.8px;}
		.Our_Community .title_nav ul li a span {display: none;}
		.Our_Community .title_nav ul li a i {
			display: block;
			margin-right: 0;
		}

	.sg-grid li {min-height: 200px;}

	.sg-event p {
		max-height: 81px;
		-webkit-line-clamp: 4;
	}

	.sg-text p {
		max-height: 102px;
		-webkit-line-clamp: 5;
	}

	/* ---------------------------------------------------------------------- */
	/*	Family Form (Join the Parish)
	/* ---------------------------------------------------------------------- */
		.family-form .nine.columns, .family-form .five.columns, .family-form .three.columns {width: 220px;}
		.family-form .reason_for_reg label {height: auto;}
		.family-form hr.nine.columns {width: 210px; margin-bottom: 20px;}

	/* ---------------------------------------------------------------------- */
	/*	Subscribe Modal
	/* ---------------------------------------------------------------------- */

	.modal {
			margin: 0;
			top: 0;
			left: 0;
			width: 80%;
			margin-top: 2%;
			margin-left: 2%;
			margin-right: 2%;
			padding: 8%;
		}
		.modal form#subForm a.close {
			font-size: 18px;
			font-weight: bold;
		}
		.modal form#subForm h1 {
			line-height: 1;
			margin-bottom: 30px;
		}
		.modal form#subForm input {
			width: 94%;
			padding-left: 3%;
			padding-right: 3%;
		}
		.modal form#subForm input.error {background-position: 95% center;}
		.modal form#subForm button {
			float: left;
			width: 100%;
			padding-left: 0;
			padding-right: 0;
		}
		.modal form#subForm #response {
			font-size: 16px;
			width: 100%;
			margin: 20px 0 0 0;
			padding: 0 0 22px 0;
			text-align: center;
			background-position: bottom center;
		}
}

/* Middle school registration */
#ms-conf-form {
	padding-right: 2em;
}
#ms-conf-form label {
	font-weight: normal;
}
#ms-conf-form label.required:after {
	content: " *"
}
label.inline {
	padding: 0 1em 0 0;
}
label input[type=radio], label input[type=checkbox] {
	padding: 0;
	margin: 0;
}

.indent {
	margin-left: 30px;
}
.indent input {
	margin: 0;
}
.add-donation a {
	background: #1c1060;
	padding: 3px 8px 4px 8px;
	display: inline-block;
	color: #fff;
	border-radius: 4px;
}
.add-donation a:hover, .add-donation a.selected {
	background: #3e1cff;
}

.add-donation input {
	display: inline-block;
	width: 7em;
	margin: 0;
}
.line-items th, .line-items td {
	padding: 2px 25px 2px 0;
	text-align: left;
}
.line-items th {
	font-weight: bold;
}
.StripeElement {
	padding: 20px;
	max-width: 600px;
	min-width: 400px;
	background: #fff;
	border: 1px solid #555;
	border-radius: 2px;
	margin: 0 0 20px 0;
}
#card-errors.active {
	background: #ffe7ed;
	color: #c90c3f;
	border: 1px solid #c90c3f;
	font-weight: bold;
	display: inline-block;
	padding: 10px 20px;
	margin: 0 0 20px 0;
}
/* -------------------------------------------------- */
/*	FONTS
/* -------------------------------------------------- */

@font-face {
	font-family: 'texgyrepagellaregular';
	src: url('../assets/fonts/texgyrepagella-regular-webfont.eot');
	src: url('../assets/fonts/texgyrepagella-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../assets/fonts/texgyrepagella-regular-webfont.woff') format('woff'),
		 url('../assets/fonts/texgyrepagella-regular-webfont.ttf') format('truetype'),
		 url('../assets/fonts/texgyrepagella-regular-webfont.svg#texgyrepagellaregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Merriweather-Regular';
	src: url("../assets/fonts/Merriweather-Regular.otf") format("opentype");
}